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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

299 lines
5.4 KiB
SCSS
Raw Normal View History

2013-02-06 03:16:51 +08:00
// --------------------------------------------------
// 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
) {
2013-02-06 03:16:51 +08:00
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;
2018-01-13 06:27:38 +08:00
font-size: $font-0;
line-height: $line-height-small;
2013-02-06 03:16:51 +08:00
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
2013-02-06 03:16:51 +08:00
}
&.no-text {
.d-icon {
margin-right: 0;
}
}
@include hover {
background: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
}
2013-02-06 03:16:51 +08:00
}
&[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;
2013-02-06 03:16:51 +08:00
}
.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;
}
}
}
2017-05-12 02:47:08 +08:00
.btn.hidden {
display: none;
}
// Default button
// --------------------------------------------------
.btn {
@include btn;
2013-02-06 03:16:51 +08:00
}
// 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
);
2013-02-14 15:56:13 +08:00
}
2013-02-14 15:56:13 +08:00
// Danger button
// --------------------------------------------------
2013-02-14 15:56:13 +08:00
.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
);
2013-02-06 03:16:51 +08:00
}
// Social buttons
// --------------------------------------------------
.btn-social {
.d-icon {
color: #fff;
}
color: #fff;
background: #666;
&:hover {
color: #fff;
}
2013-02-06 03:16:51 +08:00
&[href] {
color: $secondary;
2013-02-06 03:16:51 +08:00
}
&:before {
margin-right: 9px;
font-size: $font-0;
2013-02-06 03:16:51 +08:00
}
&.google_oauth2 {
2013-02-06 03:16:51 +08:00
background: $google;
2018-10-25 10:11:19 +08:00
color: #333;
border: 1px solid $primary-low;
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-27 05:49:57 +08:00
// non-FA SVG icon for Google in login-buttons.hbs
.d-icon {
opacity: 0.9;
2013-02-06 03:16:51 +08:00
}
&:hover {
color: currentColor;
background: darken($google, 5%);
}
2013-02-06 03:16:51 +08:00
}
2016-02-25 09:21:59 +08:00
&.instagram {
background: $instagram;
&:hover {
background: darken($instagram, 15%);
}
2016-02-25 09:21:59 +08:00
}
2013-02-06 03:16:51 +08:00
&.facebook {
background: $facebook;
&:hover {
background: darken($facebook, 15%);
}
2013-02-06 03:16:51 +08:00
}
2013-05-24 04:40:50 +08:00
&.cas {
background: $cas;
}
2013-02-06 03:16:51 +08:00
&.twitter {
background: $twitter;
&:hover {
background: darken($twitter, 10%);
}
2013-02-06 03:16:51 +08:00
}
&.github {
background: $github;
&:hover {
background: lighten($github, 20%);
}
}
&.discord {
background: $discord;
&:hover {
background: darken($discord, 10%);
}
}
2013-02-06 03:16:51 +08:00
}
// Button Sizes
// --------------------------------------------------
// Small
.btn-small {
padding: 6px;
2018-01-13 06:27:38 +08:00
font-size: $font-down-1;
min-height: 20px;
.d-icon {
max-height: 0.87em;
}
2013-02-06 03:16:51 +08:00
}
// Large
.btn-large {
padding: 9px 18px;
2018-01-13 06:27:38 +08:00
font-size: $font-up-1;
line-height: $line-height-small;
2013-02-14 15:56:13 +08:00
}
.btn-flat {
background: transparent;
border: 0;
outline: 0;
2018-01-13 06:27:38 +08:00
line-height: $line-height-small;
2019-02-01 03:06:32 +08:00
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;
2019-02-01 04:13:22 +08:00
.d-icon {
color: $primary;
}
}
}
}
.btn-link {
background: transparent;
border: 0;
outline: 0;
padding: 0;
color: $tertiary;
&:focus {
outline: 1px currentColor dotted;
}
}