FTSE Russell Styleguide

Filter: Light 

<div class="filter__form">
    <div class="filter__form--inner">
        <form id="nl-form" class="nl-form nl-form--light text--center">
            <div class="input-field">
                <select>
    
    <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="" >Webinar</option>
    
    <option value="" >Marketing</option>
    
    <option value="" >Other</option>
    
  </select>
            </div>
            <div class="input-field">
                <select>
    
    <option value="" >America</option>
    
    <option value="" >Europe</option>
    
    <option value="" >Asia</option>
    
  </select>
            </div>
            <div class="input-field"><input class="browser-default form__item form__item--text " type="text" name="Input Type Text" placeholder=" Input Type Text"></div>
            <span class="form__item__wrapper"><button class="btn btn--submit form__item">Find</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 nl-form--light text--center">
       {% render '@select-natural', select1 %} {% render '@select-natural', select2 %} {% render '@select-natural', select3 %} {% render '@input', input %}
      <span class="form__item__wrapper"><button class="btn btn--submit form__item">Find</button></span>
      <div class="nl-overlay"></div>
    </form>
  </div>
</div>
 
{
  "select1": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": "Asset Manager",
        "title": "Asset Manager",
        "selected": true
      },
      {
        "value": "Marketing",
        "title": "Marketing",
        "selected": null
      },
      {
        "value": "Sales",
        "title": "Sales",
        "selected": null
      },
      {
        "value": "IT",
        "title": "IT",
        "selected": null
      }
    ]
  },
  "select2": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": "Webinar",
        "title": "Webinar",
        "selected": true
      },
      {
        "value": "Marketing",
        "title": "Marketing",
        "selected": null
      },
      {
        "value": "Other",
        "title": "Other",
        "selected": null
      }
    ]
  },
  "select3": {
    "name": "Select",
    "type": "select",
    "disabled": null,
    "options": [
      {
        "value": "America",
        "title": "America",
        "selected": true
      },
      {
        "value": "Europe",
        "title": "Europe",
        "selected": null
      },
      {
        "value": "Asia",
        "title": "Asia",
        "selected": null
      }
    ]
  },
  "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.