FTSE Russell Styleguide

Filter: Default 

<div class="filter__form">
    <div class="filter__form--inner">
        <form id="nl-form" class="nl-form text--center">

            <span class="nl-form__text">I am </span>
            <div class="input-field">
                <select>
    
    <option value="" >Choose your role</option>
    
    <option value="" >a Registered Representative</option>
    
    <option value="" >Asset Manager</option>
    
    <option value="" >Marketing</option>
    
    <option value="" >Sales</option>
    
    <option value="" >IT</option>
    
  </select>
            </div>

            <div class="input-field">
                <select>
    
    <option value="" >all regions</option>
    
    <option value="" >America</option>
    
    <option value="" >Europe</option>
    
    <option value="" >Asia</option>
    
  </select>
            </div> <span class="nl-form__text">in</span>
            <div class="input-field">
                <select>
    
    <option value="" >all topics</option>
    
    <option value="" >Webinar</option>
    
    <option value="" >Marketing</option>
    
    <option value="" >Other</option>
    
  </select>
            </div> <span class="nl-form__text">interested in</span>

            <span class="nl-form__text">in</span>
            <div class="input-field">
                <select>
    
    <option value="" >This Month</option>
    
    <option value="" >Next Month</option>
    
    <option value="" >This Year</option>
    
  </select>
            </div>

            <span class="form__item__wrapper">
        <button class="btn waves-effect waves-light btn--submit form__item">Submit</button>
        <button class="btn waves-effect waves-light btn--submit form__item">Reset</button>
      </span>
            <div class="nl-overlay"></div>
        </form>
    </div>
</div>
 
<div class="filter__form">
  <div class="filter__form--inner">
    <form id="nl-form" class="nl-form text--center">
      {% if language == 'ja' %}
        <span class="nl-form__text">{{ prefix1 }}</span> {% render '@select-natural', select1 %}
        {% if suffix3 %}
          <span class="nl-form__text">{{ suffix3 }}</span>
        {% endif %}
        {% render '@select-natural', select3 %} <span class="nl-form__text">{{ prefix3 }}</span>
        {% render '@select-natural', select2 %} <span class="nl-form__text">{{ prefix2 }}</span>
        {% if prefix4 and select4 %}
          <span class="nl-form__text">{{ prefix4 }}</span> {% render '@select-natural', select4 %}
        {% endif %}
      {% else %}
        <span class="nl-form__text">{{ prefix1 }}</span> {% render '@select-natural', select1 %}
        <span class="nl-form__text">{{ prefix2 }}</span> {% render '@select-natural', select2 %}
        <span class="nl-form__text">{{ prefix3 }}</span> {% render '@select-natural', select3 %}
        {% if suffix3 %}
          <span class="nl-form__text">{{ suffix3 }}</span>
        {% endif %}
        {% if prefix4 and select4 %}
          <span class="nl-form__text">{{ prefix4 }}</span> {% render '@select-natural', select4 %}
        {% endif %}
      {% endif %}
      <span class="form__item__wrapper">
        <button class="btn waves-effect waves-light btn--submit form__item">{{ button1 }}</button>
        <button class="btn waves-effect waves-light btn--submit form__item">{{ button2 }}</button>
      </span>
      <div class="nl-overlay"></div>
    </form>
  </div>
</div>
 
{
  "language": "ja",
  "prefix1": "I am ",
  "select1": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": null,
        "title": "Choose your role",
        "selected": true
      },
      {
        "value": "a Registered Representative",
        "title": "a Registered Representative",
        "selected": null
      },
      {
        "value": "Asset Manager",
        "title": "Asset Manager",
        "selected": null
      },
      {
        "value": "Marketing",
        "title": "Marketing",
        "selected": null
      },
      {
        "value": "Sales",
        "title": "Sales",
        "selected": null
      },
      {
        "value": "IT",
        "title": "IT",
        "selected": null
      }
    ]
  },
  "prefix2": "interested in",
  "select2": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": null,
        "title": "all topics",
        "selected": true
      },
      {
        "value": "Webinar",
        "title": "Webinar",
        "selected": null
      },
      {
        "value": "Marketing",
        "title": "Marketing",
        "selected": null
      },
      {
        "value": "Other",
        "title": "Other",
        "selected": null
      }
    ]
  },
  "prefix3": "in",
  "select3": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": null,
        "title": "all regions",
        "selected": true
      },
      {
        "value": "America",
        "title": "America",
        "selected": null
      },
      {
        "value": "Europe",
        "title": "Europe",
        "selected": null
      },
      {
        "value": "Asia",
        "title": "Asia",
        "selected": null
      }
    ]
  },
  "prefix4": "in",
  "select4": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": "This Month",
        "title": "This Month",
        "selected": true
      },
      {
        "value": "Next Month",
        "title": "Next Month",
        "selected": null
      },
      {
        "value": "This Year",
        "title": "This Year",
        "selected": null
      }
    ]
  },
  "input": {
    "name": "Input Type Text",
    "type": "text",
    "placeholder": "Input Type Text",
    "disabled": null
  },
  "button1": "Submit",
  "button2": "Reset"
}
  • Content: 
    .filter {
  &__form {
    position: relative;
    margin: -65px auto 0;
    max-width: $breakpoint-xxl;
    display: flex;
    justify-content: center;
    width: 100%;

    @include mq-only($breakpoint-mob) {
      margin: -90px auto $space-md;
      padding: 0 $space-md;
      width: calc(100% - 2rem);
    }

    &--inner {
      position: relative;
      width: 100%;
      background: $white;
      padding: 0 $space-md $space-lg;
      box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);

      @include mq($breakpoint-lg) {
        margin: 0 $space-lg;
        padding: $space-xl $space-xxl;
      }

      mz-select-container .input-field {
        margin: 0;
      }

      .select-wrapper {
        .caret {
          display: none;
        }

        &::after {
          border: 5px solid transparent;
          border-top: 5px solid #696d6f;
          border-bottom: 0;
          content: '';
          display: inline-flex;
          height: 0;
          margin-left: 0.5rem;
          position: absolute;
          right: 0;
          top: calc(50% - 5px);
          width: 0;
        }
      }

      form .form__item__wrapper {
        @include mq-only($breakpoint-mob) {
          display: block;
        }

        @include mq($breakpoint-lg) {
          button:first-child {
            margin: 0 5px;
          }
        }
      }
    }

    .input-field {
      display: inline-flex;
    }

    ul.dropdown-content.select-dropdown {
      min-width: 100%;
      width: auto !important;

      li {
        white-space: nowrap;

        &.disabled {
          background-color: transparent;
          cursor: not-allowed;
          font-style: italic;

          & > span {
            color: $gray-light;
          }

          &:hover {
            background-color: transparent;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: src/components/molecules/filter/_filter.scss
  • Size: 1.8 KB

There are no notes for this item.