94 lines
1.8 KiB
SCSS
Executable File
94 lines
1.8 KiB
SCSS
Executable File
/**
|
|
* Button Module
|
|
* namespace : .btn
|
|
*/
|
|
|
|
/* ----------------------------------------------------------- */
|
|
/* == configuration */
|
|
/* ----------------------------------------------------------- */
|
|
|
|
|
|
$btn-primary: $color-primary;
|
|
$btn-secondary: $color-secondary;
|
|
$btn-success: #1cb841;
|
|
$btn-danger: #c53a3a;
|
|
$btn-hover: 5%;
|
|
$btn-radius: .2rem;
|
|
|
|
|
|
/* ----------------------------------------------------------- */
|
|
/* == module */
|
|
/* ----------------------------------------------------------- */
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: .8em 1.6em;
|
|
border: none;
|
|
border-radius: $btn-radius;
|
|
background-color: $btn-primary;
|
|
box-shadow: none;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
text-decoration: none !important;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
transition: background-color .4s;
|
|
}
|
|
|
|
.btn:active,
|
|
.btn:focus {
|
|
outline: none;
|
|
box-shadow: $focus-ring;
|
|
}
|
|
|
|
/* colors
|
|
-------------------------------------------------------------- */
|
|
|
|
.btn--primary,
|
|
.btn--primary:link,
|
|
.btn--primary:visited {
|
|
background-color: $btn-primary;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn--primary:hover,
|
|
.btn--primary:active,
|
|
.btn--primary:focus {
|
|
background-color: darken($btn-primary, $btn-hover);
|
|
}
|
|
|
|
.btn--secondary,
|
|
.btn--secondary:link,
|
|
.btn--secondary:visited {
|
|
background-color: $btn-secondary;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn--secondary:hover,
|
|
.btn--secondary:active,
|
|
.btn--secondary:focus {
|
|
background-color: darken($btn-secondary, $btn-hover);
|
|
}
|
|
|
|
.btn--danger,
|
|
.btn--danger:link,
|
|
.btn--danger:visited {
|
|
background-color: $btn-danger;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.btn--danger:hover,
|
|
.btn--danger:active,
|
|
.btn--danger:focus {
|
|
background-color: darken($btn-danger, $btn-hover);
|
|
}
|
|
|
|
/* size
|
|
-------------------------------------------------------------- */
|
|
|
|
.btn--big {
|
|
font-size: $base-font + 4;
|
|
}
|