Skip to content

Commit

Permalink
Merge pull request #1193 from Calvein/patch-1
Browse files Browse the repository at this point in the history 
Vertical align variables
  • Loading branch information
@JedWatson
JedWatson authored Sep 6, 2016
2 parents 4714955 + 3554c10 commit fa569e1
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 95 deletions.
100 changes: 50 additions & 50 deletions less/select.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,76 +10,76 @@
// ------------------------------

// common
@select-primary-color: #007eff;
@select-primary-color: #007eff;

// control options
@select-input-bg: #fff;
@select-input-bg-disabled: #f9f9f9;
@select-input-border-color: #ccc;
@select-input-border-radius: 4px;
@select-input-border-focus: @select-primary-color;
@select-input-border-width: 1px;
@select-input-height: 36px;
@select-input-internal-height: (@select-input-height - (@select-input-border-width * 2));
@select-input-placeholder: #aaa;
@select-text-color: #333;
@select-link-hover-color: @select-input-border-focus;
@select-input-bg: #fff;
@select-input-bg-disabled: #f9f9f9;
@select-input-border-color: #ccc;
@select-input-border-radius: 4px;
@select-input-border-focus: @select-primary-color;
@select-input-border-width: 1px;
@select-input-height: 36px;
@select-input-internal-height: (@select-input-height - (@select-input-border-width * 2));
@select-input-placeholder: #aaa;
@select-text-color: #333;
@select-link-hover-color: @select-input-border-focus;

@select-padding-vertical: 8px;
@select-padding-horizontal: 10px;
@select-padding-vertical: 8px;
@select-padding-horizontal: 10px;

// menu options
@select-menu-zindex: 1;
@select-menu-max-height: 200px;
@select-menu-zindex: 1;
@select-menu-max-height: 200px;

@select-option-color: lighten(@select-text-color, 20%);
@select-option-bg: @select-input-bg;
@select-option-focused-color: @select-text-color;
@select-option-focused-bg: fade(@select-primary-color, 8%);
@select-option-focused-bg-fb: mix(@select-primary-color, @select-option-bg, 8%); // Fallback color for IE 8
@select-option-selected-color: @select-text-color;
@select-option-selected-bg: fade(@select-primary-color, 4%);
@select-option-color: lighten(@select-text-color, 20%);
@select-option-bg: @select-input-bg;
@select-option-focused-color: @select-text-color;
@select-option-focused-bg: fade(@select-primary-color, 8%);
@select-option-focused-bg-fb: mix(@select-primary-color, @select-option-bg, 8%); // Fallback color for IE 8
@select-option-selected-color: @select-text-color;
@select-option-selected-bg: fade(@select-primary-color, 4%);
@select-option-selected-bg-fb: mix(@select-primary-color, @select-option-bg, 4%); // Fallback color for IE 8
@select-option-disabled-color: lighten(@select-text-color, 60%);
@select-option-disabled-color: lighten(@select-text-color, 60%);

@select-noresults-color: lighten(@select-text-color, 40%);
@select-noresults-color: lighten(@select-text-color, 40%);

// clear "x" button
@select-clear-size: floor((@select-input-height / 2));
@select-clear-color: #999;
@select-clear-hover-color: #D0021B; // red
@select-clear-width: (@select-input-internal-height / 2);
@select-clear-size: floor((@select-input-height / 2));
@select-clear-color: #999;
@select-clear-hover-color: #D0021B; // red
@select-clear-width: (@select-input-internal-height / 2);

// arrow indicator
@select-arrow-color: #999;
@select-arrow-color-hover: #666;
@select-arrow-width: 5px;
@select-arrow-color: #999;
@select-arrow-color-hover: #666;
@select-arrow-width: 5px;

// loading indicator
@select-loading-size: 16px;
@select-loading-color: @select-text-color;
@select-loading-color-bg: @select-input-border-color;
@select-loading-size: 16px;
@select-loading-color: @select-text-color;
@select-loading-color-bg: @select-input-border-color;

// multi-select item
@select-item-font-size: .9em;
@select-item-font-size: .9em;

@select-item-bg: fade(@select-primary-color, 8%);
@select-item-bg-fb: mix(@select-primary-color, @select-input-bg, 8%); // Fallback color for IE 8
@select-item-color: @select-primary-color;
@select-item-border-color: fade(@select-primary-color, 24%);
@select-item-border-color-fb: mix(@select-primary-color, @select-input-bg, 24%); // Fallback color for IE 8
@select-item-hover-color: darken(@select-item-color, 5%);
@select-item-hover-bg: darken(@select-item-bg, 5%);
@select-item-hover-bg-fb: mix(darken(@select-primary-color, 5%), @select-item-bg-fb, 8%); // Fallback color for IE 8
@select-item-disabled-color: #333;
@select-item-disabled-bg: #fcfcfc;
@select-item-bg: fade(@select-primary-color, 8%);
@select-item-bg-fb: mix(@select-primary-color, @select-input-bg, 8%); // Fallback color for IE 8
@select-item-color: @select-primary-color;
@select-item-border-color: fade(@select-primary-color, 24%);
@select-item-border-color-fb: mix(@select-primary-color, @select-input-bg, 24%); // Fallback color for IE 8
@select-item-hover-color: darken(@select-item-color, 5%);
@select-item-hover-bg: darken(@select-item-bg, 5%);
@select-item-hover-bg-fb: mix(darken(@select-primary-color, 5%), @select-item-bg-fb, 8%); // Fallback color for IE 8
@select-item-disabled-color: #333;
@select-item-disabled-bg: #fcfcfc;
@select-item-disabled-border-color: darken(@select-item-disabled-bg, 10%);

@select-item-border-radius: 2px;
@select-item-gutter: 5px;
@select-item-border-radius: 2px;
@select-item-gutter: 5px;

@select-item-padding-horizontal: 5px;
@select-item-padding-vertical: 2px;
@select-item-padding-horizontal: 5px;
@select-item-padding-vertical: 2px;

// imports
@import "control.less";
Expand Down
90 changes: 45 additions & 45 deletions scss/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,62 @@
// ------------------------------

// control options
$select-input-bg: #fff !default;
$select-input-bg-disabled: #f9f9f9 !default;
$select-input-border-color: #ccc !default;
$select-input-border-radius: 4px !default;
$select-input-border-focus: #08c !default; // blue
$select-input-border-width: 1px !default;
$select-input-height: 36px !default;
$select-input-internal-height: ($select-input-height - ($select-input-border-width * 2)) !default;
$select-input-placeholder: #aaa !default;
$select-text-color: #333 !default;
$select-link-hover-color: $select-input-border-focus !default;
$select-input-bg: #fff !default;
$select-input-bg-disabled: #f9f9f9 !default;
$select-input-border-color: #ccc !default;
$select-input-border-radius: 4px !default;
$select-input-border-focus: #08c !default; // blue
$select-input-border-width: 1px !default;
$select-input-height: 36px !default;
$select-input-internal-height: ($select-input-height - ($select-input-border-width * 2)) !default;
$select-input-placeholder: #aaa !default;
$select-text-color: #333 !default;
$select-link-hover-color: $select-input-border-focus !default;

$select-padding-vertical: 8px !default;
$select-padding-horizontal: 10px !default;
$select-padding-vertical: 8px !default;
$select-padding-horizontal: 10px !default;

// menu options
$select-menu-zindex: 1000 !default;
$select-menu-max-height: 200px !default;
$select-menu-zindex: 1000 !default;
$select-menu-max-height: 200px !default;

$select-option-color: lighten($select-text-color, 20%) !default;
$select-option-bg: $select-input-bg !default;
$select-option-focused-color: $select-text-color !default;
$select-option-focused-bg: #f2f9fc !default; // pale blue
$select-option-selected-color: $select-text-color !default;
$select-option-selected-bg: #f5faff !default; // lightest blue
$select-option-disabled-color: lighten($select-text-color, 60%) !default;
$select-option-color: lighten($select-text-color, 20%) !default;
$select-option-bg: $select-input-bg !default;
$select-option-focused-color: $select-text-color !default;
$select-option-focused-bg: #f2f9fc !default; // pale blue
$select-option-selected-color: $select-text-color !default;
$select-option-selected-bg: #f5faff !default; // lightest blue
$select-option-disabled-color: lighten($select-text-color, 60%) !default;

$select-noresults-color: lighten($select-text-color, 40%) !default;
$select-noresults-color: lighten($select-text-color, 40%) !default;

// clear "x" button
$select-clear-size: floor(($select-input-height / 2)) !default;
$select-clear-color: #999 !default;
$select-clear-hover-color: #D0021B !default; // red
$select-clear-width: ($select-input-internal-height / 2) !default;
$select-clear-size: floor(($select-input-height / 2)) !default;
$select-clear-color: #999 !default;
$select-clear-hover-color: #D0021B !default; // red
$select-clear-width: ($select-input-internal-height / 2) !default;

// arrow indicator
$select-arrow-color: #999 !default;
$select-arrow-color-hover: #666 !default;
$select-arrow-width: 5px !default;
$select-arrow-color: #999 !default;
$select-arrow-color-hover: #666 !default;
$select-arrow-width: 5px !default;

// loading indicator
$select-loading-size: 16px !default;
$select-loading-color: $select-text-color !default;
$select-loading-color-bg: $select-input-border-color !default;
$select-loading-size: 16px !default;
$select-loading-color: $select-text-color !default;
$select-loading-color-bg: $select-input-border-color !default;

// multi-select item
$select-item-border-radius: 2px !default;
$select-item-gutter: 5px !default;
$select-item-padding-vertical: 2px !default;
$select-item-padding-horizontal: 5px !default;
$select-item-font-size: .9em !default;
$select-item-color: #08c !default; // pale blue
$select-item-bg: #f2f9fc !default;
$select-item-border-color: darken($select-item-bg, 10%) !default;
$select-item-hover-color: darken($select-item-color, 5%) !default; // pale blue
$select-item-hover-bg: darken($select-item-bg, 5%) !default;
$select-item-disabled-color: #333 !default;
$select-item-disabled-bg: #fcfcfc !default;
$select-item-border-radius: 2px !default;
$select-item-gutter: 5px !default;
$select-item-padding-vertical: 2px !default;
$select-item-padding-horizontal: 5px !default;
$select-item-font-size: .9em !default;
$select-item-color: #08c !default; // pale blue
$select-item-bg: #f2f9fc !default;
$select-item-border-color: darken($select-item-bg, 10%) !default;
$select-item-hover-color: darken($select-item-color, 5%) !default; // pale blue
$select-item-hover-bg: darken($select-item-bg, 5%) !default;
$select-item-disabled-color: #333 !default;
$select-item-disabled-bg: #fcfcfc !default;
$select-item-disabled-border-color: darken($select-item-disabled-bg, 10%) !default;

0 comments on commit fa569e1

Please sign in to comment.