144 lines
3.1 KiB
SCSS
144 lines
3.1 KiB
SCSS
@charset "UTF-8";
|
|
@import 'base_config';
|
|
@import '../custom_config';
|
|
@import '../custom_color', '../custom_layout';
|
|
@import 'mixins';
|
|
|
|
@include button-shadow;
|
|
|
|
.icon-button {
|
|
color: $icon-button-color;
|
|
border-radius: 50%;
|
|
|
|
&.active {
|
|
color: $icon-button-active-color;
|
|
|
|
&:hover { color: $icon-button-active-hover-color }
|
|
}
|
|
|
|
&.disabled { color: $disabled-icon-color }
|
|
|
|
&.inverted {
|
|
color: $icon-button-color;
|
|
|
|
&.active { color: $icon-button-active-color }
|
|
|
|
&:hover {
|
|
color: $icon-button-hover-color;
|
|
background-color: $icon-bg-hover-color;
|
|
}
|
|
|
|
&:focus { background-color: transparent }
|
|
}
|
|
|
|
&.overlayed {
|
|
@include icon-button;
|
|
border-radius: 50%;
|
|
background: $media-icon-bg-color;
|
|
color: $media-icon-color;
|
|
padding: 4px;
|
|
line-height: 20px !important;
|
|
|
|
&:hover {
|
|
background: $media-icon-bg-color;
|
|
color: $media-icon-hover-color;
|
|
}
|
|
}
|
|
|
|
&__counter {
|
|
width: 16px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&:hover {
|
|
@include material-transition;
|
|
color: $icon-button-hover-color;
|
|
background-color: $icon-bg-hover-color;
|
|
}
|
|
|
|
&:focus { background-color: transparent }
|
|
}
|
|
|
|
// Checkbox with label
|
|
label.icon-button {
|
|
&.active {
|
|
color: $ui-text-color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
@include material-transition;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.text-icon-button {
|
|
color: $icon-button-color;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
|
|
&.active {
|
|
background-color: $icon-bg-hover-color;
|
|
color: $icon-button-active-color;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $icon-bg-hover-color;
|
|
color: $icon-button-hover-color;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background-color: $contained-button-color;
|
|
border-radius: $button-radius;
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: $contained-button-color;
|
|
border-radius: $button-radius;
|
|
}
|
|
|
|
&:hover {
|
|
@include shadow-2dp;
|
|
background-color: $contained-button-hover-color;
|
|
}
|
|
|
|
&.logo-button {
|
|
background: $contained-button-color;
|
|
margin: 2px;
|
|
|
|
&:hover { background: $contained-button-hover-color }
|
|
|
|
.button--destructive:hover { background: $contained-button-hover-color }
|
|
}
|
|
|
|
&.button--block { margin: 8px 0 }
|
|
|
|
&.button-secondary {
|
|
color: $text-button-color;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
color: $text-button-color;
|
|
background-color: $text-button-hover-color;
|
|
}
|
|
}
|
|
|
|
&.confirmation-modal__cancel-button {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
margin: 0 8px;
|
|
color: $text-button-color;
|
|
|
|
&:hover { background: $text-button-hover-color }
|
|
|
|
&:focus { background: $text-button-focus-color }
|
|
}
|
|
}
|
|
|
|
.spoiler-button__overlay__label {
|
|
background: $media-icon-bg-color;
|
|
border-radius: $button-radius;
|
|
color: $media-icon-color;
|
|
} |