discourse/app/assets/stylesheets/common/components/buttons.scss

201 lines
3.4 KiB
SCSS
Raw Normal View History

2013-02-05 14:16:51 -05:00
// --------------------------------------------------
// Buttons
// --------------------------------------------------
// Base
// --------------------------------------------------
.btn {
display: inline-block;
margin: 0;
padding: 6px 12px;
font-weight: 500;
2018-01-12 17:27:38 -05:00
font-size: $font-0;
line-height: $line-height-medium;
2013-02-05 14:16:51 -05:00
text-align: center;
cursor: pointer;
2014-08-06 09:31:13 -04:00
transition: all .25s;
&:active, &.btn-active {
2013-02-05 14:16:51 -05:00
text-shadow: none;
}
&[disabled], &.disabled {
2013-02-05 14:16:51 -05:00
cursor: default;
opacity: 0.4;
}
2013-12-09 16:27:49 -05:00
.fa {
2013-02-05 14:16:51 -05:00
margin-right: 7px;
}
&.no-text {
2013-12-09 16:27:49 -05:00
.fa {
margin-right: 0;
}
}
2013-02-05 14:16:51 -05:00
}
.btn.hidden {
display: none;
}
2013-02-05 14:16:51 -05:00
// Default button
// --------------------------------------------------
.btn {
2013-10-28 12:25:52 -04:00
border: none;
color: $primary;
2013-10-28 12:25:52 -04:00
font-weight: normal;
2017-06-11 22:20:14 -04:00
background: $primary-low;
2013-02-05 14:16:51 -05:00
&[href] {
color: $primary;
2013-02-05 14:16:51 -05:00
}
&:hover, &.btn-hover {
2017-06-11 22:20:14 -04:00
background: $primary-medium;
2016-03-30 12:05:16 -04:00
color: $secondary;
2013-02-05 14:16:51 -05:00
}
&[disabled], &.disabled {
2017-06-11 22:20:14 -04:00
background: $primary-low;
2017-10-10 16:07:46 -04:00
&:hover { color: dark-light-choose($primary-low-mid, $secondary-high); }
cursor: not-allowed;
2013-02-05 14:16:51 -05:00
}
2017-05-11 14:47:08 -04:00
.d-icon {
2017-05-11 14:47:08 -04:00
opacity: 0.7;
2018-01-12 17:27:38 -05:00
line-height: $line-height-medium; // Match button text line-height
2017-05-11 14:47:08 -04:00
}
&.btn-primary .d-icon {
2017-05-12 15:11:44 -04:00
opacity: 1;
}
2013-02-05 14:16:51 -05:00
}
// Primary button
// --------------------------------------------------
.btn-primary {
2013-10-28 12:25:52 -04:00
border: none;
font-weight: normal;
2017-11-27 18:30:12 -05:00
color: $secondary;
2015-08-18 16:20:07 -04:00
background: $tertiary;
2013-10-28 12:25:52 -04:00
2013-02-05 14:16:51 -05:00
&[href] {
color: $secondary;
2013-02-05 14:16:51 -05:00
}
&:hover, &.btn-hover {
color: #fff;
2017-10-10 16:07:46 -04:00
background: dark-light-choose($tertiary, $tertiary);
2013-02-05 14:16:51 -05:00
}
&:active, &.btn-active {
2017-10-10 16:07:46 -04:00
@include linear-gradient($tertiary, $tertiary);
2016-03-30 12:05:16 -04:00
color: $secondary;
2013-02-05 14:16:51 -05:00
}
&[disabled], &.disabled {
background: $tertiary;
2013-02-05 14:16:51 -05:00
}
2013-02-14 02:56:13 -05:00
}
2013-02-14 02:56:13 -05:00
// Danger button
// --------------------------------------------------
2013-02-14 02:56:13 -05:00
.btn-danger {
color: $secondary;
font-weight: normal;
background: $danger;
2013-02-14 02:56:13 -05:00
&[href] {
color: $secondary;
2013-02-14 02:56:13 -05:00
}
&:hover, &.btn-hover {
background: scale-color($danger, $lightness: -20%);
2013-02-14 02:56:13 -05:00
}
&:active, &.btn-active {
@include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
2013-02-14 02:56:13 -05:00
}
&[disabled], &.disabled {
background: $danger;
2013-02-14 02:56:13 -05:00
}
2013-02-05 14:16:51 -05:00
}
// Social buttons
// --------------------------------------------------
.btn-social {
color: #fff;
&:hover {
color: #fff;
}
2013-02-05 14:16:51 -05:00
&[href] {
color: $secondary;
2013-02-05 14:16:51 -05:00
}
&:before {
margin-right: 9px;
font-family: FontAwesome;
font-size: $font-0;
2013-02-05 14:16:51 -05:00
}
&.google, &.google_oauth2 {
2013-02-05 14:16:51 -05:00
background: $google;
&:before {
content: $fa-var-google;
2013-02-05 14:16:51 -05:00
}
}
2016-02-24 20:21:59 -05:00
&.instagram {
background: $instagram;
&:before {
content: $fa-var-instagram;
}
}
2013-02-05 14:16:51 -05:00
&.facebook {
background: $facebook;
&:before {
content: $fa-var-facebook;
2013-02-05 14:16:51 -05:00
}
}
2013-05-23 16:40:50 -04:00
&.cas {
background: $cas;
}
2013-02-05 14:16:51 -05:00
&.twitter {
background: $twitter;
&:before {
content: $fa-var-twitter;
2013-02-05 14:16:51 -05:00
}
}
&.yahoo {
background: $yahoo;
&:before {
content: $fa-var-yahoo;
2013-02-05 14:16:51 -05:00
}
}
&.github {
background: $github;
&:before {
content: $fa-var-github;
}
}
2013-02-05 14:16:51 -05:00
}
// Button Sizes
// --------------------------------------------------
// Small
.btn-small {
padding: 3px 6px;
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
2013-02-05 14:16:51 -05:00
}
// Large
.btn-large {
padding: 9px 18px;
2018-01-12 17:27:38 -05:00
font-size: $font-up-1;
line-height: $line-height-small;
2013-02-14 02:56:13 -05:00
}
.btn-flat {
background: transparent;
border: 0;
outline: 0;
2018-01-12 17:27:38 -05:00
line-height: $line-height-small;
.d-icon {
opacity: 0.7;
}
}