108 lines
2.4 KiB
SCSS
108 lines
2.4 KiB
SCSS
@import "../../../css/static/mixin.scss";
|
|
@import "../../../css/static/properties.scss";
|
|
|
|
html:root {
|
|
--button-background: rgba(0, 0, 0, 0.5);
|
|
--button-background-solid: rgba(0, 0, 0, 1); /* TODO! */
|
|
|
|
--button-hover-background: rgba(0, 0, 0, 0.7);
|
|
--button-hover-background-solid: #121212;
|
|
|
|
--button-disabled-background: rgba(0, 0, 0, 0.27);
|
|
--button-disabled-background-solid: rgba(0, 0, 0, 1); /* TODO! */
|
|
|
|
--button-color: #7c7c7c;
|
|
|
|
--button-green: #389738;
|
|
--button-blue: #386896;
|
|
--button-red: #973838;
|
|
--button-purple: #5f3586;
|
|
--button-brown: #965238;
|
|
--button-yellow: #96903a;
|
|
}
|
|
|
|
.button {
|
|
cursor: pointer;
|
|
|
|
background-color: var(--button-background);
|
|
|
|
border-width: 0;
|
|
border-radius: $border_radius_middle;
|
|
border-style: solid;
|
|
|
|
color: var(--button-color);
|
|
|
|
height: 2.2em;
|
|
padding: .25em 1em;
|
|
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
|
|
|
@include text-dotdotdot();
|
|
|
|
&:hover {
|
|
background-color: #121212;
|
|
}
|
|
|
|
&:disabled {
|
|
box-shadow: none;
|
|
background-color: var(--button-disabled-background);
|
|
}
|
|
|
|
&.nonTransparent {
|
|
background-color: var(--button-background-solid);
|
|
|
|
&:hover {
|
|
background-color: var(--button-hover-background-solid);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--button-disabled-background-solid);
|
|
}
|
|
}
|
|
|
|
&.color-green {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-green);
|
|
}
|
|
|
|
&.color-blue, &.color-default {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-blue);
|
|
}
|
|
|
|
&.color-red {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-red);
|
|
}
|
|
|
|
&.color-purple {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-purple);
|
|
}
|
|
|
|
&.color-brown {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-brown);
|
|
}
|
|
|
|
&.color-yellow {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--button-yellow);
|
|
}
|
|
|
|
&.color-none {
|
|
--keep-alive: true;
|
|
}
|
|
|
|
&.type-normal { }
|
|
|
|
&.type-small {
|
|
font-size: .9em;
|
|
}
|
|
|
|
&.type-extra-small {
|
|
font-size: .6em;
|
|
}
|
|
|
|
@include transition(background-color $button_hover_animation_time ease-in-out);
|
|
} |