Sha256: fc4ebe60bc33ce41489822de406bc02953bb3349b533301a369df07edf36367b

Contents?: true

Size: 1.98 KB

Versions: 28

Compression:

Stored size: 1.98 KB

Contents

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group forms
////

/// Background color for select menus.
/// @type Color
$select-background: $white !default;

/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
/// @type Color
$select-triangle-color: $dark-gray !default;

/// Default radius for select menus.
/// @type Color
$select-radius: $global-radius !default;

@mixin form-select {
  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);

  height: $height;
  margin: 0 0 $form-spacing;
  padding: $input-padding;

  appearance: none;
  border: $input-border;
  border-radius: $select-radius;
  background-color: $select-background;

  font-family: $input-font-family;
  font-size: $input-font-size;
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  color: $input-color;

  @if $select-triangle-color != transparent {
    @include background-triangle($select-triangle-color);
    background-origin: content-box;
    background-position: $global-right (-$form-spacing) center;
    background-repeat: no-repeat;
    background-size: 9px 6px;

    padding-#{$global-right}: ($form-spacing * 1.5);
  }

  @if has-value($input-transition) {
    transition: $input-transition;
  }

  // Focus state
  &:focus {
    outline: none;
    border: $input-border-focus;
    background-color: $input-background-focus;
    box-shadow: $input-shadow-focus;

    @if has-value($input-transition) {
      transition: $input-transition;
    }
  }

  // Disabled state
  &:disabled {
    background-color: $input-background-disabled;
    cursor: $input-cursor-disabled;
  }

  // Hide the dropdown arrow shown in newer IE versions
  &::-ms-expand {
    display: none;
  }

  &[multiple] {
    height: auto;
    background-image: none;
  }
}

@mixin foundation-form-select {
  select {
    @include form-select;
  }
}

Version data entries

28 entries across 28 versions & 4 rubygems

Version Path
bedrock_sass-0.2.2 assets/_vendor/foundation/scss/forms/_select.scss
foundation-rails-6.5.3.0 vendor/assets/scss/forms/_select.scss
bedrock_sass-0.2.1 assets/_vendor/foundation/scss/forms/_select.scss
foundation-rails-6.5.1.0 vendor/assets/scss/forms/_select.scss
locomotivecms_wagon-2.4.1 generators/foundation/public/stylesheets/foundation6/forms/_select.scss
bedrock_sass-0.2.0 assets/_vendor/foundation/scss/forms/_select.scss
locomotivecms_wagon-2.4.0 generators/foundation/public/stylesheets/foundation6/forms/_select.scss
foundation-rails-6.4.3.0 vendor/assets/scss/forms/_select.scss
bedrock_sass-0.1.9 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.8 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.7 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.6 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.5 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.4 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.3 assets/_vendor/foundation/scss/forms/_select.scss
bedrock_sass-0.1.2 assets/_vendor/foundation/scss/forms/_select.scss
foundation-rails-6.4.1.3 vendor/assets/scss/forms/_select.scss
jekyll-theme-foundation-0.3.6 _sass/scss/forms/_select.scss
jekyll-theme-foundation-0.3.5 _sass/scss/forms/_select.scss
jekyll-theme-foundation-0.2.5 _sass/scss/forms/_select.scss