FTSE Russell Styleguide

Select Natural 

<div class="input-field">
    <select>
    
    <option value="" >Region</option>
    
    <option value="" >United Stated</option>
    
    <option value="" >United Kingdom</option>
    
    <option value="" >Mexico</option>
    
    <option value="" >Germany</option>
    
  </select>
</div>
 
<div class="input-field">
  <select>
    {% for option in options %}
    <option value="{{ value }}" {% if selected %} selected {% endif %}>{{ option.title }}</option>
    {% endfor %}
  </select>
</div>
 
{
  "name": "Select",
  "type": "select",
  "disabled": null,
  "options": [
    {
      "value": null,
      "title": "Region",
      "selected": true
    },
    {
      "value": "USA",
      "title": "United Stated",
      "selected": null
    },
    {
      "value": "UK",
      "title": "United Kingdom",
      "selected": null
    },
    {
      "value": "MX",
      "title": "Mexico",
      "selected": null
    },
    {
      "value": "DE",
      "title": "Germany",
      "selected": null
    }
  ]
}
  • Content: 
    /* general style for the form */
.nl-form {
	width: 100%;
	margin: 0.3em auto 0 auto;

  font-weight: $font-weight-light;

	@include mq($breakpoint-lg) {
		font-size: $font-size-lg;
  }
  
}

.filter__form {
  input.select-dropdown {
    color: $primary-light;
    cursor: pointer;
    border-bottom: 1px solid $primary-light;
    font-size: $font-size-lg;
    font-weight: 100;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;

    &:focus {
      border-bottom: 1px solid $primary-light;
    }
  }

  .dropdown-content li > a, .dropdown-content li > span {
    font-size: $font-size-base;
    color: $primary-light;
    display: block;
    margin-right: $space-md;
    padding: 14px $space-md;
    white-space: nowrap;
  }
}
.input-field {
  margin: 0.875rem 0.5rem;
}

.variable-width {
  display: table;
  font-family: $font-family-base;
  font-size: $font-size-lg;
  visibility: hidden;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: -ms-fit-content;
  width: -o-fit-content;
  width: fit-content;

  &-materialize {
    font-size: $font-size-base;
  }
}
  • URL: /components/raw/select-natural/_select-natural.scss
  • Filesystem Path: src/components/atoms/forms/select/select-natural/_select-natural.scss
  • Size: 1.1 KB

There are no notes for this item.