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