discourse/app/assets/stylesheets/components/buttons.css.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;
}