mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-07-17 02:13:02 +05:30
68 lines
1.5 KiB
SCSS
68 lines
1.5 KiB
SCSS
|
@import '~components/ui/colors.scss';
|
||
|
@import '~components/ui/fonts.scss';
|
||
|
|
||
|
$dropdownPadding: 15px;
|
||
|
|
||
|
@mixin dropdown-theme($themeName, $backgroundColor) {
|
||
|
.#{$themeName} {
|
||
|
composes: dropdown;
|
||
|
|
||
|
background-color: $backgroundColor;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: lighter($backgroundColor);
|
||
|
}
|
||
|
|
||
|
&:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии
|
||
|
background-color: darker($backgroundColor);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.dropdown {
|
||
|
display: inline-block;
|
||
|
box-sizing: border-box;
|
||
|
height: 50px;
|
||
|
// 28px - ширина иконки при заданном размере шрифта
|
||
|
padding: 0 ($dropdownPadding * 2 + 28px) 0 $dropdownPadding;
|
||
|
position: relative;
|
||
|
|
||
|
font-family: $font-family-title;
|
||
|
color: $defaultButtonTextColor;
|
||
|
font-size: 18px;
|
||
|
line-height: 50px;
|
||
|
text-decoration: none;
|
||
|
cursor: pointer;
|
||
|
|
||
|
transition: background-color 0.25s;
|
||
|
|
||
|
&:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.toggleIcon {
|
||
|
composes: selecter from './icons.scss';
|
||
|
|
||
|
position: absolute;
|
||
|
right: $dropdownPadding;
|
||
|
top: 16px;
|
||
|
font-size: 17px;
|
||
|
transition: right .3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
|
||
|
|
||
|
.dropdown:hover & {
|
||
|
right: $dropdownPadding - 5px;
|
||
|
}
|
||
|
|
||
|
.dropdown:active & { // TODO: + .open, смотри коммент выше
|
||
|
right: $dropdownPadding + 5px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.block {
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
@include dropdown-theme('green', $green);
|