From 6d387d8b167830d9e7bbe8b2dc1ab01ccfa6417e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Robichet?= Date: Tue, 6 Sep 2016 11:50:21 +1000 Subject: [PATCH 1/2] Vertical align variables --- scss/select.scss | 90 ++++++++++++++++++++++++------------------------ 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/scss/select.scss b/scss/select.scss index 4f2fc13989..de78f9d168 100644 --- a/scss/select.scss +++ b/scss/select.scss @@ -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; From 3554c1017204994b68b2f58d8dc5789552b342c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Robichet?= Date: Tue, 6 Sep 2016 11:53:51 +1000 Subject: [PATCH 2/2] Vertical align variables --- less/select.less | 100 +++++++++++++++++++++++------------------------ 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/less/select.less b/less/select.less index 7e3a488b13..a1875c7b58 100644 --- a/less/select.less +++ b/less/select.less @@ -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";