Marcin Wojas
130 lines
2.9 KiB
SCSS
130 lines
2.9 KiB
SCSS
@import "../common/PredefinedMixins.scss";
|
|
@import "./partial.scss";
|
|
@import "./Variables.scss";
|
|
|
|
$picker_width: 170px;
|
|
$picker_height: 32px;
|
|
|
|
.theme-items {
|
|
.item-active {
|
|
&.selected :global {
|
|
-webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
-moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
-o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-picker {
|
|
&:focus-visible {
|
|
@include focus(
|
|
$outline-offset: 2px,
|
|
$box-shadow: none,
|
|
);
|
|
}
|
|
|
|
.theme-button {
|
|
@include partial-row-center-start;
|
|
@include partial-transition;
|
|
width: $picker_width;
|
|
height: $picker_height;
|
|
font-size: 10pt;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
outline: none;
|
|
color: $picker_color;
|
|
background-color: $picker_bg;
|
|
box-shadow: $picker_button_shadow;
|
|
border: $signIn_btn_border;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: $picker_button_hover_shadow;
|
|
background-color: $picker_button_hover;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: $picker_button_active_shadow;
|
|
background-color: $picker_button_active_bg;
|
|
color: $picker_button_active_color;
|
|
}
|
|
|
|
.icon {
|
|
@include partial-column-center;
|
|
height: inherit;
|
|
width: $picker_height;
|
|
line-height: normal;
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: inherit;
|
|
fill: $picker_fill;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
@include partial-column-center-start;
|
|
padding: 0 4px;
|
|
height: inherit;
|
|
overflow: hidden;
|
|
color: $picker_color;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: $picker_active_shadow;
|
|
}
|
|
}
|
|
|
|
.theme-items {
|
|
@include partial-column-center-start;
|
|
position: absolute;
|
|
top: $picker_height;
|
|
width: $picker_width;
|
|
left: 0px;
|
|
margin-top: 1px;
|
|
box-shadow: $picker_button_hover_shadow;
|
|
|
|
.item {
|
|
@include partial-row-center-start;
|
|
background-color: $picker_item_bg;
|
|
width: inherit;
|
|
height: $picker_height;
|
|
cursor: pointer;
|
|
|
|
.item-text {
|
|
@include partial-column-center-start;
|
|
width: calc(100% - 20px);
|
|
height: inherit;
|
|
color: $picker_color;
|
|
font-size: 11pt;
|
|
text-transform: lowercase;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $picker_item_hover_bg;
|
|
}
|
|
}
|
|
|
|
.item-active {
|
|
width: 16px;
|
|
height: inherit;
|
|
margin: 6px;
|
|
|
|
&.selected {
|
|
height: 8px;
|
|
border-bottom: 2px solid $picker_item_selected_border_color;
|
|
border-left: 2px solid $picker_item_selected_border_color;
|
|
-webkit-transform: rotate(-45deg) scale(1);
|
|
-moz-transform: rotate(-45deg) scale(1);
|
|
-ms-transform: rotate(-45deg) scale(1);
|
|
-o-transform: rotate(-45deg) scale(1);
|
|
transform: rotate(-45deg) scale(1);
|
|
transform-origin: 40% 40%;
|
|
}
|
|
}
|
|
} |