206 lines
4.7 KiB
SCSS
206 lines
4.7 KiB
SCSS
@import "foundation/variables";
|
|
@import "foundation/mixins";
|
|
|
|
// --------------------------------------------------
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
// Base
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
outline: 0;
|
|
margin: 0;
|
|
padding: 6px 12px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
@include border-radius-all(4px);
|
|
&:active {
|
|
text-shadow: none;
|
|
}
|
|
&[disabled], &.disabled {
|
|
cursor: default;
|
|
opacity: 0.4;
|
|
}
|
|
.icon {
|
|
margin-right: 7px;
|
|
}
|
|
&.no-text {
|
|
.icon {
|
|
margin-right: 0;
|
|
line-height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Default button
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
border: 1px solid rgba($black, 0.3);
|
|
color: $btn-default-color;
|
|
text-shadow: 0 1px 0 $white;
|
|
@include linear-gradient($white, $btn-default-background-color);
|
|
@include box-shadow(inset 0 -1px 2px rgba($black, 0.2));
|
|
&[href] {
|
|
color: $btn-default-color;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
@include linear-gradient($white, $btn-default-background-color-hover);
|
|
@include box-shadow(none);
|
|
}
|
|
&:active {
|
|
@include linear-gradient($btn-default-background-color, $white);
|
|
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
|
|
}
|
|
&[disabled] {
|
|
text-shadow: 0 1px 0 $white;
|
|
@include linear-gradient($white, $btn-default-background-color);
|
|
@include box-shadow(inset 0 -1px 2px rgba($black, 0.2));
|
|
}
|
|
}
|
|
|
|
// Buttons used in admin panel
|
|
// --------------------------------------------------
|
|
.btn-admin {
|
|
text-align:left;
|
|
}
|
|
|
|
// Primary button
|
|
// --------------------------------------------------
|
|
|
|
.btn-primary {
|
|
border: 1px solid $btn-primary-border-color;
|
|
color: $white;
|
|
text-shadow: 0 1px 0 rgba($black, 0.2);
|
|
font-weight: bold;
|
|
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
|
|
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
|
|
&[href] {
|
|
color: $white;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-light);
|
|
@include box-shadow(inset 0 1px 0 rgba($white, 0.33));
|
|
}
|
|
&:active {
|
|
@include linear-gradient($btn-primary-background-color-dark, $btn-primary-background-color);
|
|
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
|
|
}
|
|
&[disabled] {
|
|
text-shadow: 0 1px 0 rgba($black, 0.2);
|
|
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
|
|
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
|
|
}
|
|
}
|
|
|
|
// Danger button
|
|
// --------------------------------------------------
|
|
|
|
.btn-danger {
|
|
border: 1px solid $btn-danger-border-color;
|
|
color: $white;
|
|
text-shadow: 0 1px 0 rgba($black, 0.2);
|
|
font-weight: bold;
|
|
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-dark);
|
|
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
|
|
&[href] {
|
|
color: $white;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-light);
|
|
@include box-shadow(inset 0 1px 0 rgba($white, 0.33));
|
|
}
|
|
&:active {
|
|
@include linear-gradient($btn-danger-background-color-dark, $btn-danger-background-color);
|
|
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
|
|
}
|
|
&[disabled] {
|
|
text-shadow: 0 1px 0 rgba($black, 0.2);
|
|
@include linear-gradient($btn-danger-background-color, $btn-danger-background-color-dark);
|
|
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
|
|
}
|
|
}
|
|
|
|
// Social buttons
|
|
// --------------------------------------------------
|
|
|
|
.btn-social {
|
|
color: $white;
|
|
text-shadow: 0 1px 0 rgba($black, 0.2);
|
|
@include box-shadow(inset 0 1px 0 rgba($white, 0.1));
|
|
&[href] {
|
|
color: $white;
|
|
}
|
|
&:before {
|
|
margin-right: 7px;
|
|
font-family: zocial;
|
|
line-height: 0.9;
|
|
}
|
|
&.google {
|
|
background: $google;
|
|
&:before {
|
|
content: "G";
|
|
}
|
|
}
|
|
&.facebook {
|
|
background: $facebook;
|
|
&:before {
|
|
content: "f";
|
|
}
|
|
}
|
|
&.cas {
|
|
background: $cas;
|
|
}
|
|
&.twitter {
|
|
background: $twitter;
|
|
&:before {
|
|
content: "T";
|
|
}
|
|
}
|
|
&.yahoo {
|
|
background: $yahoo;
|
|
&:before {
|
|
content: "Y";
|
|
}
|
|
}
|
|
&.github {
|
|
background: $github;
|
|
&:before {
|
|
content: "g";
|
|
}
|
|
}
|
|
&.persona {
|
|
background: $persona;
|
|
&:before {
|
|
content: "]";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
// Small
|
|
|
|
.btn-small {
|
|
padding: 3px 6px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
// Large
|
|
|
|
.btn-large {
|
|
padding: 9px 18px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|