|
|
@ -1,3 +1,5 @@ |
|
|
|
|
|
// sass-lint:disable no-vendor-prefixes, one-declaration-per-line, no-misspelled-properties, no-color-keywords, no-color-literals |
|
|
|
|
|
|
|
|
@mixin build-icon($color) { |
|
|
@mixin build-icon($color) { |
|
|
& { |
|
|
& { |
|
|
color: $color; |
|
|
color: $color; |
|
|
@ -27,13 +29,13 @@ |
|
|
&:disabled |
|
|
&:disabled |
|
|
&.disabled { |
|
|
&.disabled { |
|
|
opacity: .4; |
|
|
opacity: .4; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&:focus, |
|
|
&:focus, |
|
|
&.focus { |
|
|
&.focus { |
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); |
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&:active, |
|
|
&:active, |
|
|
&:hover { |
|
|
&:hover { |
|
|
color: darken($color, 15%); |
|
|
color: darken($color, 15%); |
|
|
@ -71,23 +73,26 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@mixin hidden() { |
|
|
@mixin hidden { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
overflow: hidden; |
|
|
overflow-x: hidden; |
|
|
|
|
|
overflow-y: hidden; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
width: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@mixin force-width($width) { |
|
|
@mixin force-width($width) { |
|
|
width: $width; |
|
|
|
|
|
// Ensure that we use the minimum width in flex scenarios. |
|
|
// Ensure that we use the minimum width in flex scenarios. |
|
|
max-width: $width; |
|
|
max-width: $width; |
|
|
min-width: $width; |
|
|
min-width: $width; |
|
|
|
|
|
// Normal width definition. |
|
|
|
|
|
width: $width; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@mixin force-height($height) { |
|
|
@mixin force-height($height) { |
|
|
|
|
|
// Normal height definition. |
|
|
height: $height; |
|
|
height: $height; |
|
|
// Ensure that we use the minimum width in flex scenarios. |
|
|
// Ensure that we use the minimum height in flex scenarios. |
|
|
max-height: $height; |
|
|
max-height: $height; |
|
|
min-height: $height; |
|
|
min-height: $height; |
|
|
} |
|
|
} |
|
|
@ -122,7 +127,7 @@ |
|
|
content: ''; |
|
|
content: ''; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@mixin circle($size) { |
|
|
@mixin circle($size) { |
|
|
@include border-radius($size * .5); |
|
|
@include border-radius($size * .5); |
|
|
@include force-height($size); |
|
|
@include force-height($size); |
|
|
|