itsblue-website/themes/quark-hugo/assets/scss/theme/_controls.scss
2021-10-07 11:21:03 +02:00

95 lines
1.5 KiB
SCSS
Executable file

/* Button */
.btn {
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 0 0 0 2px $border-color;
color: $dark-color !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
font-weight: _font(weight-bold);
height: 3em;
letter-spacing: _font(kerning-alt);
line-height: 3em;
padding: 0 2.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
font-size: 12pt;
@include breakpoint(md) {
font-size: 9pt;
}
&:hover {
box-shadow: inset 0 0 0 2px $primary-color;
background-color: transparent;
background-color: transparentize($primary-color, 0.92);
&:active {
box-shadow: inset 0 0 0 2px $primary-color;
background-color: transparentize($primary-color, 0.7);
}
}
&.icon {
padding-left: 1.35em;
&:before {
margin-right: 0.5em;
}
}
&.fit {
display: block;
width: 100%;
}
&.small {
font-size: 0.8em;
}
&.big {
font-size: 1.35em;
}
&.btn-primary {
background-color: $primary-color;
box-shadow: none;
color: $light-color !important;
&:hover {
background-color: darken($primary-color, 10);
&:active {
background-color: lighten($primary-color, 10);
}
}
}
&.btn-lg {
font-size: 0.9rm;
height: 3em;
padding: 0 2.5em;
}
}
/* a */
a {
color: $primary-color;
&:visited {
color: $primary-color;
}
&:hover {
text-decoration: none;
color: darken($primary-color, 20);
}
}