200 lines
3.6 KiB
SCSS
200 lines
3.6 KiB
SCSS
// --------------------------------------------------
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
// Base
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 6px 12px;
|
|
font-weight: 500;
|
|
font-size: 1em;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all .25s;
|
|
|
|
&:active, &.btn-active {
|
|
text-shadow: none;
|
|
}
|
|
&[disabled], &.disabled {
|
|
cursor: default;
|
|
opacity: 0.4;
|
|
}
|
|
.fa {
|
|
margin-right: 7px;
|
|
}
|
|
&.no-text {
|
|
.fa {
|
|
margin-right: 0;
|
|
line-height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn.hidden {
|
|
display: none;
|
|
}
|
|
|
|
// Default button
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
border: none;
|
|
color: $primary;
|
|
font-weight: normal;
|
|
background: $primary-low;
|
|
|
|
&[href] {
|
|
color: $primary;
|
|
}
|
|
&:hover, &.btn-hover {
|
|
background: $primary-medium;
|
|
color: $secondary;
|
|
}
|
|
&[disabled], &.disabled {
|
|
background: $primary-low;
|
|
&:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.d-icon {
|
|
opacity: 0.7;
|
|
}
|
|
&.btn-primary .d-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Primary button
|
|
// --------------------------------------------------
|
|
|
|
.btn-primary {
|
|
border: none;
|
|
font-weight: normal;
|
|
color: dark-light-choose(#fff, scale-color($primary, $lightness: 60%));
|
|
background: $tertiary;
|
|
|
|
&[href] {
|
|
color: $secondary;
|
|
}
|
|
&:hover, &.btn-hover {
|
|
color: #fff;
|
|
background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%));
|
|
}
|
|
&:active, &.btn-active {
|
|
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
|
|
color: $secondary;
|
|
}
|
|
&[disabled], &.disabled {
|
|
background: $tertiary;
|
|
}
|
|
}
|
|
|
|
// Danger button
|
|
// --------------------------------------------------
|
|
|
|
.btn-danger {
|
|
color: $secondary;
|
|
font-weight: normal;
|
|
background: $danger;
|
|
&[href] {
|
|
color: $secondary;
|
|
}
|
|
&:hover, &.btn-hover {
|
|
background: scale-color($danger, $lightness: -20%);
|
|
}
|
|
&:active, &.btn-active {
|
|
@include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
|
|
}
|
|
&[disabled], &.disabled {
|
|
background: $danger;
|
|
}
|
|
}
|
|
|
|
// Social buttons
|
|
// --------------------------------------------------
|
|
|
|
.btn-social {
|
|
color: $secondary;
|
|
text-shadow: 0 1px 0 rgba($primary, 0.2);
|
|
box-shadow: inset 0 1px 0 rgba(0,0,0, 0.1);
|
|
&[href] {
|
|
color: $secondary;
|
|
}
|
|
&:before {
|
|
margin-right: 9px;
|
|
font-family: FontAwesome;
|
|
font-size: 17px;
|
|
}
|
|
&.google, &.google_oauth2 {
|
|
background: $google;
|
|
&:before {
|
|
content: $fa-var-google;
|
|
}
|
|
}
|
|
&.instagram {
|
|
background: $instagram;
|
|
&:before {
|
|
content: $fa-var-instagram;
|
|
}
|
|
}
|
|
&.facebook {
|
|
background: $facebook;
|
|
&:before {
|
|
content: $fa-var-facebook;
|
|
}
|
|
}
|
|
&.cas {
|
|
background: $cas;
|
|
}
|
|
&.twitter {
|
|
background: $twitter;
|
|
&:before {
|
|
content: $fa-var-twitter;
|
|
}
|
|
}
|
|
&.yahoo {
|
|
background: $yahoo;
|
|
&:before {
|
|
content: $fa-var-yahoo;
|
|
}
|
|
}
|
|
&.github {
|
|
background: $github;
|
|
&:before {
|
|
content: $fa-var-github;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
// Small
|
|
|
|
.btn-small {
|
|
padding: 3px 6px;
|
|
font-size: 0.857em;
|
|
line-height: 16px;
|
|
}
|
|
|
|
// Large
|
|
|
|
.btn-large {
|
|
padding: 9px 18px;
|
|
font-size: 1.143em;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-flat {
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
.d-icon {
|
|
opacity: 0.7;
|
|
}
|
|
}
|