accounts-frontend/packages/app/components/ui/form/dropdown.scss

130 lines
2.1 KiB
SCSS
Raw Normal View History

@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';
$dropdownPadding: 15px;
@mixin dropdown-theme($themeName, $backgroundColor) {
.#{$themeName} {
composes: dropdown;
background-color: $backgroundColor;
.menuItem:hover,
&:hover {
background-color: lighter($backgroundColor);
}
&:active,
&.opened {
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;
}
}
.label {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.opened {
}
.toggleIcon {
composes: selecter from '~app/components/ui/icons.scss';
position: absolute;
right: $dropdownPadding;
top: 16px;
font-size: 17px;
transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
.dropdown:hover & {
right: $dropdownPadding - 5px;
}
.dropdown:active &,
.dropdown.opened & {
right: $dropdownPadding + 5px;
}
}
.block {
display: block;
width: 100%;
2016-05-28 04:44:28 +05:30
.menu {
width: 100%;
}
2016-05-28 04:44:28 +05:30
}
.menu {
position: absolute;
top: 60px;
left: 0;
z-index: 10;
2016-05-28 04:44:28 +05:30
width: 120%;
2016-05-28 04:44:28 +05:30
background: #fff;
border: 1px solid #ddd;
2016-05-28 04:44:28 +05:30
transition: 0.5s ease;
transition-property: opacity, visibility;
opacity: 0;
visibility: hidden;
2016-05-28 04:44:28 +05:30
.dropdown.opened & {
opacity: 1;
visibility: visible;
}
2016-05-28 04:44:28 +05:30
}
.menuItem {
composes: label;
height: 50px;
padding: 0 13px;
overflow: hidden;
text-overflow: ellipsis;
2016-05-28 04:44:28 +05:30
color: #444;
line-height: 50px;
font-size: 18px;
font-family: $font-family-title;
2016-05-28 04:44:28 +05:30
border-bottom: 1px solid #ebe8df;
cursor: pointer;
2016-05-28 04:44:28 +05:30
transition: 0.25s;
2016-05-28 04:44:28 +05:30
&:hover {
color: #fff;
}
}
@include dropdown-theme('green', $green);