vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Move autocomplete property values to variables

old
Javi Velasco 2015-10-20 23:51:41 +02:00
parent da2c85c588
commit 4511d8a4fd
2 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/autocomplete/_config.scss
View File

@ -1,5 +1,9 @@
$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
$autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})"); $autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
$autocomplete-color-white: unquote("rgb(#{$color-white})"); $autocomplete-color-primary: unquote("rgb(#{$color-primary})");
$autocomplete-suggestion-color-active: unquote("rgb(#{$palette-grey-200})");
$autocomplete-overflow-max-height: 45vh; $autocomplete-overflow-max-height: 45vh;
$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
$autocomplete-suggestion-padding: $unit;
$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
$autocomplete-value-border-radius: .2 * $unit;
$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
$autocomplete-value-padding: $unit * .5 $unit * .75;

19
components/autocomplete/style.scss
View File

@ -3,12 +3,10 @@
.root { .root {
position: relative; position: relative;
&.focus { &.focus {
.label { .label {
color: $autocomplete-color-primary; color: $autocomplete-color-primary;
} }
.suggestions { .suggestions {
max-height: $autocomplete-overflow-max-height; max-height: $autocomplete-overflow-max-height;
visibility: visible; visibility: visible;
@ -25,31 +23,29 @@
.value { .value {
display: inline-block; display: inline-block;
padding: $unit * .5 $unit * .75; padding: $autocomplete-value-padding;
margin: $unit * .25 $unit * .5 $unit * .25 0; margin: $autocomplete-value-margin;
font-size: $font-size-tiny; font-size: $font-size-tiny;
color: $autocomplete-color-primary-contrast; color: $autocomplete-color-primary-contrast;
cursor: pointer; cursor: pointer;
background-color: $autocomplete-color-primary; background-color: $autocomplete-color-primary;
border-radius: 3px; border-radius: $autocomplete-value-border-radius;
} }
.suggestions { .suggestions {
position: absolute; position: absolute;
z-index: 2; z-index: $z-index-high;
max-height: 0; max-height: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
visibility: hidden; visibility: hidden;
background-color: $autocomplete-color-white; background-color: $autocomplete-suggestions-background;
transition-timing-function: $animation-curve-default; transition-timing-function: $animation-curve-default;
transition-duration: $animation-duration; transition-duration: $animation-duration;
transition-property: max-height, box-shadow; transition-property: max-height, box-shadow;
&:not(.up) { &:not(.up) {
bottom: auto; bottom: auto;
} }
&.up { &.up {
top: auto; top: auto;
bottom: 0; bottom: 0;
@ -57,11 +53,10 @@
} }
.suggestion { .suggestion {
padding: $unit; padding: $autocomplete-suggestion-padding;
cursor: pointer; cursor: pointer;
&.active { &.active {
background-color: $autocomplete-suggestion-color-active; background-color: $autocomplete-suggestion-active-background;
} }
} }