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

299 lines
5.4 KiB
SCSS

// --------------------------------------------------
// Buttons
// --------------------------------------------------
// Base
// --------------------------------------------------
@mixin btn(
$text-color: $primary,
$bg-color: $primary-low,
$icon-color: $primary-high,
$hover-text-color: $secondary,
$hover-bg-color: $primary-medium,
$hover-icon-color: $primary-low
) {
display: inline-block;
margin: 0;
padding: 6px 12px;
min-height: 30px;
border: none;
box-sizing: border-box;
font-weight: normal;
color: $text-color;
background: $bg-color;
font-size: $font-0;
line-height: $line-height-small;
text-align: center;
cursor: pointer;
transition: all 0.25s;
.d-icon {
color: $icon-color;
margin-right: 0.45em;
transition: color 0.25s;
line-height: $line-height-medium; // Match button text line-height
}
&.no-text {
.d-icon {
margin-right: 0;
}
}
@include hover {
background: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
}
}
&[href] {
color: $text-color;
}
&:active,
&.btn-active {
@include linear-gradient(
scale-color($bg-color, $lightness: -20%),
$bg-color
);
}
&[disabled],
&.disabled {
opacity: 0.4;
&:hover {
color: $text-color;
background: $bg-color;
.d-icon {
color: $icon-color;
}
}
cursor: not-allowed;
}
.loading-container {
display: none;
margin: 0 6.75px 0 0;
}
&.is-loading {
&.btn-text {
.d-button-label {
font-size: $font-down-2;
}
&.btn-small {
.loading-icon {
font-size: $font-down-1;
margin-right: 0.2em;
}
}
}
.loading-icon {
-webkit-animation: rotate-forever 1s infinite linear, fadein 1s;
animation: rotate-forever 1s infinite linear, fadein 1s;
}
}
}
.btn.hidden {
display: none;
}
// Default button
// --------------------------------------------------
.btn {
@include btn;
}
// Primary button
// --------------------------------------------------
.btn-primary {
@include btn(
$text-color: $secondary,
$bg-color: $tertiary,
$icon-color: $secondary,
$hover-bg-color: darken($tertiary, 10%),
$hover-icon-color: $secondary
);
}
// Danger button
// --------------------------------------------------
.btn-danger {
@include btn(
$text-color: $secondary,
$bg-color: $danger,
$icon-color: $danger-low,
$hover-bg-color:
dark-light-choose(
scale-color($danger, $lightness: -20%),
scale-color($danger, $lightness: 20%)
),
$hover-icon-color: $danger-low
);
}
// ✘ and ✔ buttons
// --------------------------------------------------
.btn.cancel {
@include btn(
$text-color: $secondary,
$bg-color: $danger,
$icon-color: $secondary,
$hover-bg-color:
dark-light-choose(
scale-color($danger, $lightness: -20%),
scale-color($danger, $lightness: 20%)
),
$hover-icon-color: $secondary
);
}
.btn.ok {
@include btn(
$text-color: $secondary,
$bg-color: $success,
$icon-color: $secondary,
$hover-bg-color:
dark-light-choose(
scale-color($success, $lightness: -20%),
scale-color($success, $lightness: 20%)
),
$hover-icon-color: $secondary
);
}
// Social buttons
// --------------------------------------------------
.btn-social {
.d-icon {
color: #fff;
}
color: #fff;
background: #666;
&:hover {
color: #fff;
}
&[href] {
color: $secondary;
}
&:before {
margin-right: 9px;
font-size: $font-0;
}
&.google_oauth2 {
background: $google;
color: #333;
border: 1px solid $primary-low;
// non-FA SVG icon for Google in login-buttons.hbs
.d-icon {
opacity: 0.9;
}
&:hover {
color: currentColor;
background: darken($google, 5%);
}
}
&.instagram {
background: $instagram;
&:hover {
background: darken($instagram, 15%);
}
}
&.facebook {
background: $facebook;
&:hover {
background: darken($facebook, 15%);
}
}
&.cas {
background: $cas;
}
&.twitter {
background: $twitter;
&:hover {
background: darken($twitter, 10%);
}
}
&.github {
background: $github;
&:hover {
background: lighten($github, 20%);
}
}
&.discord {
background: $discord;
&:hover {
background: darken($discord, 10%);
}
}
}
// Button Sizes
// --------------------------------------------------
// Small
.btn-small {
padding: 6px;
font-size: $font-down-1;
min-height: 20px;
.d-icon {
max-height: 0.87em;
}
}
// Large
.btn-large {
padding: 9px 18px;
font-size: $font-up-1;
line-height: $line-height-small;
}
.btn-flat {
background: transparent;
border: 0;
outline: 0;
line-height: $line-height-small;
transition: color 0.25s, background 0.25s;
.d-icon {
color: $primary-low-mid;
}
@include hover {
.d-icon {
color: $primary;
}
}
&.close {
padding: 0;
min-height: unset;
background: transparent;
font-size: $font-up-3;
.d-icon {
color: $primary-high;
}
@include hover {
background: transparent;
.d-icon {
color: $primary;
}
}
}
}
.btn-link {
background: transparent;
border: 0;
outline: 0;
padding: 0;
color: $tertiary;
&:focus {
outline: 1px currentColor dotted;
}
}