vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss

/**
 * Outputs the selectors and properties for the ComboBox component.
 *
 * @param {string} $primary-stylename (v-filterselect) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group combobox
 */
@mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) {

  .#{$primary-stylename} {
    position: relative;
    width: $v-default-field-width;
    @include valo-combobox-style;
    white-space: nowrap;

    .v-icon {
      position: absolute;
      pointer-events: none;
    }

    .v-icon.FontAwesome {
        margin-left: 0px;
      }
  }

  .#{$primary-stylename}-error {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-color;
      border-color: $v-error-indicator-color;
    }
  }

  .#{$primary-stylename}-error-info {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-level-info-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-info-color;
      border-color: $v-error-indicator-level-info-color;
    }
  }

  .#{$primary-stylename}-error-warning {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-level-warning-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-warning-color;
      border-color: $v-error-indicator-level-warning-color;
    }
  }

  .#{$primary-stylename}-error-error {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-level-error-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-error-color;
      border-color: $v-error-indicator-level-error-color;
    }
  }

  .#{$primary-stylename}-error-critical {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-level-critical-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-critical-color;
      border-color: $v-error-indicator-level-critical-color;
    }
  }

  .#{$primary-stylename}-error-system {
    .#{$primary-stylename}-input {
      @include valo-textfield-error-level-system-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-system-color;
      border-color: $v-error-indicator-level-system-color;
    }
  }

  .#{$primary-stylename}-suggestpopup {
    @include valo-combobox-popup-style;
  }

  .#{$primary-stylename}-no-input {
    @include valo-combobox-no-input-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-borderless {
      .#{$primary-stylename}-input {
        @include valo-textfield-borderless-style;
      }
      .#{$primary-stylename}-button {
        border: none;
        color: inherit;
        @include opacity(.5);
      }
      &.#{$primary-stylename}-prompt .#{$primary-stylename}-input {
        @include valo-textfield-prompt-style(transparent);
      }
    }

    .#{$primary-stylename}-align-right input {
      text-align: right;
    }

    .#{$primary-stylename}-align-center input {
      text-align: center;
    }

    .#{$primary-stylename}-tiny {
      @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
      font-size: $v-font-size--tiny;
    }

    .#{$primary-stylename}-compact,
    .#{$primary-stylename}-small {
      @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-huge {
      @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
      font-size: $v-font-size--huge;
    }
  }
}


/**
 * Outputs the styles for a combobox variant.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height
 * @param {color} $font-color (null) - The font color of the combobox. Computed from the $background-color by default.
 * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the combobox
 * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the combobox
 * @param {list} $border ($v-textfield-border) - The border of the combobox
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the combobox
 * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
 *
 * @group combobox
 */
@mixin valo-combobox-style (
    $unit-size: $v-unit-size,

    $font-color: null,
    $font-weight: max(400, $v-font-weight),
    $font-size: null,

    $background-color: $v-textfield-background-color,
    $border: $v-textfield-border,
    $border-radius: $v-textfield-border-radius,

    $gradient: none,
    $bevel: $v-textfield-bevel,
    $shadow: $v-textfield-shadow,

    $states: normal focus disabled
  ) {

    height: $unit-size;
    border-radius: $border-radius;

  [class*="input"] {
    @include valo-combobox-input-style(
          $unit-size: $unit-size,
          $gradient: $gradient,
          $bevel: $bevel,
          $shadow: $shadow,
          $border: $border,
          $border-radius: $border-radius,
          $background-color: $background-color,
          $font-color: $font-color,
          $font-size: $font-size,
          $font-weight: $font-weight,
          $states: $states);
  }

  .v-icon + [class*="input"] {
    padding-left: $unit-size;
  }

  img.v-icon {
    $padding-width: ceil($unit-size/6);
    max-height: $unit-size;
    @if $border-radius {
      $padding-width: $padding-width + ceil($border-radius/3);
    }
    margin-left: $padding-width;
  }

  span.v-icon {
    color: valo-font-color($background-color);
    width: $unit-size;
    line-height: 1;
    padding-top: .12em;

    $padding-width: ceil($unit-size/6);
    @if $border-radius {
      $padding-width: $padding-width + ceil($border-radius/3);
    }
    margin-left: $padding-width;
  }

  &[class*="prompt"] > [class*="input"] {
    @include valo-textfield-prompt-style($background-color);
  }

  [class$="button"] {
    @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
  }

  &.v-disabled  {
    @include opacity($v-textfield-disabled-opacity);
    & [class$="button"] {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }
  }

  &.v-readonly {
    [class*="input"] {
      @include valo-textfield-readonly-style;
    }

    [class$="button"] {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }

    &.borderless {
      [class*="input"] {
        @include valo-textfield-borderless-style;
      }
    }
  }
}


/**
 * Outputs the styles for a combobox variant input element.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
 * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default.
 * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default.
 * @param {number} $font-weight (null) - The font weight of the input. Inherited from the parent by default.
 * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the input
 * @param {list} $border ($v-textfield-border) - The border of the input
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input
 * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
 *
 * @group combobox
 */
@mixin valo-combobox-input-style (
    $unit-size: $v-unit-size,
    $padding: null,

    $font-color: null,
    $font-weight: null,
    $font-size: null,

    $background-color: $v-textfield-background-color,
    $border: $v-textfield-border,
    $border-radius: $v-textfield-border-radius,

    $gradient: none,
    $bevel: $v-bevel,
    $shadow: $v-shadow,

    $states: normal focus disabled
) {
  box-sizing: border-box;
  @include valo-textfield-style($unit-size: $unit-size,
                                $padding: $padding,
                                $font-color: $font-color,
                                $font-weight: $font-weight,
                                $font-size: $font-size,
                                $background-color: $background-color,
                                $border: $border,
                                $border-radius: $border-radius,
                                $gradient: $gradient,
                                $bevel: $bevel,
                                $shadow: $shadow,
                                $states: $states);
  width: 100% !important; // Need to override calculated inline style which is sometimes added
  height: 100%;
  padding-right: round($unit-size * 1) + 1;
  border-radius: inherit;
}


/**
 * Outputs the styles for a combobox variant button element.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
 * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
 *
 * @group combobox
 */
@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
  $border-width: first-number($border) or 0;
  @include valo-tappable;
  position: absolute;
  width: $unit-size;

  @if $border and $border != none {
    top: $border-width;
    right: $border-width;
    bottom: $border-width;
  }

  @if type-of($background-color) == color {
    @if $border {
      border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
    }
    color: mix($background-color, valo-font-color($background-color));

  }

  @if $v-border-radius > 0 {
    $br: $v-border-radius - $border-width;
    border-radius: 0 $br $br 0;
  }

  &:before {
    @include valo-combobox-button-icon-style;

    @if $v-animations-enabled {
      @include transition(color 140ms);
    }
    position: absolute;
    width: $unit-size;
    text-align: center;
    top: 50%;
    line-height: 1;
    margin-top: -.47em;
  }

  @if $v-hover-styles-enabled and type-of($background-color) == color {
    &:hover:before {
      color: valo-font-color($background-color);
    }
  }

  &:active:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    @if type-of($background-color) == color {
      @include valo-button-active-style($background-color);
    }
  }
}


/**
 * Outputs the font icon styles for the combobox drop down button.
 *
 * @group combobox
 */
@mixin valo-combobox-button-icon-style {
  font-family: ThemeIcons;
  content: "\f078";
}


/**
 * Outputs the styles for a combobox popup.
 *
 * @group combobox
 */
@mixin valo-combobox-popup-style {

  @if $v-animations-enabled {
    @if $v-overlay-animate-in {
      &[class*="animate-in"] {
        @include animation($v-overlay-animate-in);
      }
    }
    // No animate-out since that will currently prevent the dropdown from
    // closing when the user selects an item
  }

  [class$="suggestmenu"] {
    @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
    box-sizing: content-box;
    position: relative;
    z-index: 1;
    display: block;
  }

  margin-top: ceil($v-unit-size/8) !important;

  table, tbody, tr, td {
    display: block;
    width: 100%;
    overflow-y: hidden;

    // float & clear needs to be set so that IE 8 & 9 displays the elements as block
    float: left;
    clear: both;
  }

  .gwt-MenuItem {
    @include valo-selection-item-style;
    height: $v-selection-item-height;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }

  .gwt-MenuItem-selected {
    @include valo-selection-item-selected-style;
  }

  [class$="status"] {
    position: absolute;
    right: $v-border-radius;
    $bg: scale-color($v-background-color, $lightness: -15%);
    background: transparentize($bg, .1);
    color: valo-font-color($bg);
    border-radius: 0 0 $v-border-radius $v-border-radius;
    height: ceil($v-unit-size*0.6);
    bottom: -(ceil($v-unit-size*0.6));
    font-size: ceil($v-font-size*0.73);
    line-height: ceil($v-unit-size*0.6);
    padding: 0 ceil($v-unit-size/7);
    cursor: default;
    pointer-events: none;

    @if $v-animations-enabled {
       @include animation(valo-animate-in-slide-down 200ms 80ms backwards);
    }

    > * {
      color: valo-font-color($bg);
      text-decoration: none;
    }
  }

  div[class*="page"] {
    position: absolute;
    z-index: 3;
    right: 0;
    @include opacity(.2);
    cursor: pointer;
    @include transition( all 200ms );
    width: ceil($v-unit-size/1.5);
    height: ceil($v-unit-size/1.5);
    line-height: ceil($v-unit-size/1.5);
    text-align: center;
    font-family: ThemeIcons;
    @include transform( scale(.8) );

    color: valo-font-color($v-background-color);

    &:after {
      // Extend click target when hovering over (popup width might change between pages)
      content: "";
      position: absolute;
      display: block;
      border-radius: 50%;
    }

    &:hover {
      @include opacity(1);
      background: rgba($v-background-color, .5);

      &:after {
        top: -10px;
        bottom: -10px;
        left: -20px;
        right: -20px;
      }
    }

    span {
      // Hide text
      display: none;
    }
  }

  &:hover div[class*="page"] {
    @include transform( scale(1) );
  }

  div[class*="prev"] {
    top: 0;
    @include transform-origin( 100% 0% );
    border-radius: 0 $v-border-radius 0 $v-border-radius;
    &:before {
      content: "\f0d8";
    }

  }

  div[class*="next"] {
    bottom: 0;
    @include transform-origin( 100% 100% );
    border-radius: $v-border-radius 0 $v-border-radius 0;
    &:before {
      content: "\f0d7";
    }
  }

  div[class*="-off"] {
    display: none;
  }
}

/**
 *
 *
 *
 * @group combobox
 */
@mixin valo-combobox-no-input-style {
  cursor: pointer;
  text-shadow: valo-text-shadow();

  @if $v-border-radius != $v-textfield-border-radius {
    border-radius: $v-border-radius;
  }

  [class*="input"] {
    @include user-select(none);
    @include valo-gradient;
    cursor: inherit;
    @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient));
    @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
    text-shadow: inherit;
    text-overflow: ellipsis;
    border-radius: inherit;

    &:focus {
      @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
    }
  }

  [class$="button"] {
    border-left: none !important;
  }

  &:hover [class$="button"]:before {
    color: inherit;
  }
}