mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-02-23 02:16:23 +00:00
57 lines
953 B
SCSS
Executable File
57 lines
953 B
SCSS
Executable File
/**
|
|
*
|
|
* Button
|
|
*
|
|
**/
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: (($lineHeight / 2) - 1) 32px;
|
|
margin-bottom: $lineHeight / 2;
|
|
margin-top: $lineHeight / 2;
|
|
min-height: $lineHeight;
|
|
|
|
text-align: center;
|
|
|
|
font-family: $fontHighlight;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
|
|
outline: 0;
|
|
|
|
transition: none;
|
|
|
|
&:hover {
|
|
background: #4d4d4d;
|
|
color: #ffffff;
|
|
border: 1px solid #4d4d4d;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Mixin to create buttons
|
|
@mixin style-button($color, $textColor, $isInverted: false) {
|
|
|
|
background: $color;
|
|
color: $textColor;
|
|
border: 1px solid darken($color, 10%);
|
|
|
|
@if $isInverted { border-color: transparent;}
|
|
}
|
|
|
|
|
|
.button--primary {
|
|
@extend .button;
|
|
@include style-button(#4285f4, #ffffff);
|
|
}
|
|
|
|
.button--secondary {
|
|
@extend .button;
|
|
@include style-button(#ffffff, $colorBlue);
|
|
}
|
|
|
|
.button--secondary-variation {
|
|
@extend .button;
|
|
@include style-button(#ffffff, $colorBlue, true);
|
|
}
|