142 lines
2.9 KiB
SCSS
142 lines
2.9 KiB
SCSS
|
@mixin button($size) {
|
||
|
|
@include button-layout($size);
|
||
|
|
@include shape-style($size);
|
||
|
|
@include button-hover();
|
||
|
|
font-weight: $fontweight_base;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button-layout($size) {
|
||
|
|
padding: $size;
|
||
|
|
padding-top: $size/3;
|
||
|
|
padding-bottom: $size/3;
|
||
|
|
margin: $size/2;
|
||
|
|
margin-top: $size/3;
|
||
|
|
margin-bottom: $lineheight;
|
||
|
|
//font-size: 4.75mm;
|
||
|
|
line-height: $lineheight;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button-hover() {
|
||
|
|
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:active {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||
|
|
@include colorize-shape($background-color);
|
||
|
|
outline-color: $background-color;
|
||
|
|
color: $text-color;
|
||
|
|
|
||
|
|
&:visited {
|
||
|
|
@include colorize-shape($background-color);
|
||
|
|
color: $text-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&,
|
||
|
|
&:visited,
|
||
|
|
&:not(.disabled):not(:disabled) {
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:active {
|
||
|
|
@include colorize-shape($hover-color);
|
||
|
|
color: lighten($text-color, 5%);
|
||
|
|
outline-color: $hover-color;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin button-color($background-color) {
|
||
|
|
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
|
||
|
|
box-shadow: $narrow-shadow;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
@include shape-style($button_large);
|
||
|
|
text-decoration: none;
|
||
|
|
padding: $button_large/3 $button_large;
|
||
|
|
margin: $button_large/3 $button_large/2 $lineheight;
|
||
|
|
line-height: $lineheight;
|
||
|
|
height: auto;
|
||
|
|
|
||
|
|
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||
|
|
outline-color: var(--accent-color);
|
||
|
|
color: var(--text-color-contrast);
|
||
|
|
background: none!important;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
background-color: var(--accent-color);
|
||
|
|
box-shadow: $btn-shadow;
|
||
|
|
}
|
||
|
|
&:visited {
|
||
|
|
color: var(--text-color-contrast);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:active {
|
||
|
|
&::before {
|
||
|
|
background-color: var(--accent-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
outline-color: var(--accent-color-hover);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
font-weight: $fontweight_base;
|
||
|
|
|
||
|
|
p &:last-child {
|
||
|
|
margin-bottom:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fake {
|
||
|
|
background-color: transparent !important;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
color:var(--text-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn.disabled, .btn:disabled {
|
||
|
|
opacity: 0.8;
|
||
|
|
background-color: var(--accent-color)!important;
|
||
|
|
outline-color: var(--accent-color)!important;
|
||
|
|
color: var(--text-color-contrast)!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-small {
|
||
|
|
padding: $button_small/3 $button_small/2;
|
||
|
|
margin: $button_small/3 $button_small/2 $lineheight;
|
||
|
|
&:before {
|
||
|
|
left: -$button_small/2;
|
||
|
|
right: -$button_small/2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.btn-readmore, .btn-link {
|
||
|
|
color: var(--link-color);
|
||
|
|
&:visited {
|
||
|
|
color: var(--link-color);
|
||
|
|
}
|
||
|
|
background-color: transparent!important;
|
||
|
|
&::before {
|
||
|
|
background-color: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:active {
|
||
|
|
&::before {
|
||
|
|
background-color: var(--link-color-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|