150 lines
2.5 KiB
SCSS
150 lines
2.5 KiB
SCSS
/**
|
|
* BUTTON
|
|
*
|
|
* Markup:
|
|
* -------
|
|
*
|
|
* <button class="button">Default</button>
|
|
* <button class="button button--big">Button big</button>
|
|
* <button class="button button--secondary">Button secondary</button>
|
|
*
|
|
*/
|
|
|
|
|
|
// reset default buttons
|
|
button {
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button {
|
|
background-color: $bg-button;
|
|
border: 0;
|
|
border-radius: $bdr-button;
|
|
color: $c-button;
|
|
display: inline-block;
|
|
font-family: $ff-button;
|
|
font-size: $fz-button;
|
|
font-weight: $fw-button;
|
|
line-height: $lh-button;
|
|
margin: $m-button;
|
|
padding: $p-button;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: $tt-button;
|
|
transition: opacity .2s ease-in-out;
|
|
white-space: nowrap;
|
|
|
|
&:focus,
|
|
&:hover,
|
|
&:active {
|
|
color: $c-button;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba($c-primary, .8);
|
|
color: $c-white;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
// sizes
|
|
&--big {
|
|
font-size: $fz-button-big;
|
|
padding: $p-button-big;
|
|
}
|
|
|
|
&--small {
|
|
font-size: $fz-button-small;
|
|
padding: $p-button-small;
|
|
}
|
|
|
|
&--mobileFull {
|
|
@include media-breakpoint-down(md) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// colors
|
|
&--secondary {
|
|
background-color: $c-secondary;
|
|
color: $c-white;
|
|
|
|
&:hover {
|
|
background-color: rgba($c-secondary, .8);
|
|
color: $c-white;
|
|
}
|
|
}
|
|
|
|
&--white {
|
|
background-color: $c-white;
|
|
color: $c-primary;
|
|
|
|
&:hover {
|
|
background-color: rgba($c-white, .8);
|
|
color: rgba($c-primary, .8);
|
|
}
|
|
}
|
|
|
|
&--green {
|
|
background-color: $c-success;
|
|
color: $c-white;
|
|
|
|
&:hover {
|
|
background-color: rgba($c-success, .8);
|
|
color: $c-white;
|
|
}
|
|
}
|
|
|
|
&--red {
|
|
background-color: $c-error;
|
|
color: $c-white;
|
|
|
|
&:hover {
|
|
background-color: rgba($c-error, .8);
|
|
color: $c-white;
|
|
}
|
|
}
|
|
|
|
&--transparent {
|
|
background-color: transparent;
|
|
color: $c-button-transparent;
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
color: rgba($c-button-transparent, .8);
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
&--outlined {
|
|
background-color: transparent;
|
|
border: $bd-medium;
|
|
color: $c-button-outlined;
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
color: rgba($c-button-outlined, .8);
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|