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.

363 lines
6.6 KiB
SCSS
Raw Normal View History

2013-02-05 14:16:51 -05:00
// --------------------------------------------------
// Buttons
// --------------------------------------------------
// Base
// --------------------------------------------------
@mixin btn(
$text-color: var(--primary),
$bg-color: var(--primary-low),
$icon-color: var(--primary-high),
$hover-text-color: var(--secondary),
$hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low)
) {
@include form-item-sizing;
display: inline-flex;
align-items: center;
justify-content: center;
2013-02-05 14:16:51 -05:00
margin: 0;
font-weight: normal;
color: $text-color;
background: $bg-color;
border-radius: var(--d-button-border-radius);
2013-02-05 14:16:51 -05:00
cursor: pointer;
transition: all 0.25s;
.d-icon {
color: $icon-color;
margin-right: 0.45em;
transition: color 0.25s;
// For Windows High Contrast (see whcm.scss for more)
@media (forced-colors: active) {
color: ButtonText;
}
}
.d-button-label + .d-icon {
margin-left: 0.45em;
margin-right: 0;
2013-02-05 14:16:51 -05:00
}
&.no-text {
.d-icon {
margin-right: 0;
}
}
@include hover {
background: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
// For Windows High Contrast (see whcm.scss for more)
@media (forced-colors: active) {
color: Highlight;
}
}
2013-02-05 14:16:51 -05:00
}
&:focus {
outline: none;
background: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
@media (forced-colors: active) {
color: Highlight;
}
}
}
&[href] {
color: $text-color;
}
&:active,
&.btn-active {
@include linear-gradient($hover-bg-color 0%, $bg-color 100%);
border-bottom-color: $bg-color;
}
&[disabled],
&.disabled {
&:not(.is-loading) {
opacity: 0.4;
}
&:hover {
color: $text-color;
background: $bg-color;
.d-icon {
color: $icon-color;
}
}
cursor: not-allowed;
2013-02-05 14:16:51 -05:00
}
.loading-container {
display: none;
margin: 0 6.75px 0 0;
}
&.is-loading {
&.btn-text {
.d-button-label {
font-size: var(--font-down-2);
}
&.btn-small {
.loading-icon {
font-size: var(--font-down-1);
margin-right: 0.2em;
}
}
}
.loading-icon {
animation: rotate-forever 1s infinite linear, fadein 1s;
}
}
}
2017-05-11 14:47:08 -04:00
.btn.hidden {
display: none;
}
// Default button
// --------------------------------------------------
.btn {
@include btn;
2013-02-05 14:16:51 -05:00
}
// Primary button
// --------------------------------------------------
.btn-primary {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--tertiary),
$icon-color: var(--secondary),
$hover-bg-color: var(--tertiary-hover),
$hover-icon-color: var(--secondary)
);
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 {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--danger),
$icon-color: var(--danger-low),
$hover-bg-color: var(--danger-hover),
$hover-icon-color: var(--danger-low)
);
}
// ✘ and ✔ buttons
// --------------------------------------------------
.btn.cancel {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--danger),
$icon-color: var(--secondary),
$hover-bg-color: var(--danger-hover),
$hover-icon-color: var(--secondary)
);
}
.btn.ok {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--success),
$icon-color: var(--secondary),
$hover-bg-color: var(--success-hover),
$hover-icon-color: var(--secondary)
);
2013-02-05 14:16:51 -05:00
}
// Social buttons
// --------------------------------------------------
2021-03-30 14:16:50 -04:00
.btn-social {
color: #000;
2021-03-30 14:16:50 -04:00
background: #fff;
border: 1px solid transparent;
border-radius: var(--d-border-radius);
2021-03-30 14:16:50 -04:00
&:hover,
&:focus {
box-shadow: shadow("card");
outline: 1px solid #000;
}
2013-02-05 14:16:51 -05:00
&[href] {
color: var(--secondary);
2013-02-05 14:16:51 -05:00
}
&:before {
margin-right: 9px;
font-size: var(--font-0);
2013-02-05 14:16:51 -05:00
}
.d-icon,
&.btn:hover .d-icon {
color: #000;
}
&.google_oauth2 {
background: var(--google);
2018-10-24 22:11:19 -04:00
color: #333;
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-26 16:49:57 -05:00
// non-FA SVG icon for Google in login-buttons.hbs
.d-icon {
opacity: 0.9;
2013-02-05 14:16:51 -05:00
}
&:hover,
&:focus {
color: currentColor;
}
2013-02-05 14:16:51 -05:00
}
2013-05-23 16:40:50 -04:00
&.cas {
.d-icon {
color: var(--cas);
}
&:hover {
.d-icon {
color: var(--cas);
}
}
2013-05-23 16:40:50 -04:00
}
2013-02-05 14:16:51 -05:00
&.twitter {
.d-icon {
color: var(--twitter);
}
&:hover {
.d-icon {
color: var(--twitter);
}
}
2013-02-05 14:16:51 -05:00
}
&.github {
.d-icon {
color: var(--github);
}
&:hover {
.d-icon {
color: var(--github);
}
}
}
&.discord {
.d-icon {
color: var(--discord);
}
&:hover {
.d-icon {
color: var(--discord);
}
}
}
2013-02-05 14:16:51 -05:00
}
// Button Sizes
// --------------------------------------------------
// Small
.btn-small {
font-size: var(--font-down-1);
min-height: 20px;
2013-02-05 14:16:51 -05:00
}
// Large
.btn-large {
font-size: var(--font-up-1);
2013-02-14 02:56:13 -05:00
}
// Bonus Buttons
// --------------------------------------------------
.btn-flat {
background: transparent;
border: 0;
line-height: var(--line-height-small);
2019-01-31 14:06:32 -05:00
transition: color 0.25s, background 0.25s;
.d-icon {
color: var(--primary-low-mid);
}
@include hover {
background: transparent;
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.close {
padding: 0;
background: transparent;
font-size: var(--font-up-3);
.d-icon {
color: var(--primary-high);
}
@include hover {
background: transparent;
2019-01-31 15:13:22 -05:00
.d-icon {
color: var(--primary);
2019-01-31 15:13:22 -05:00
}
}
}
&.btn-text {
color: var(--tertiary);
&[disabled] {
&,
&:hover,
&.btn-hover,
&:focus {
color: var(--primary);
}
}
&:not([disabled]) {
&:hover,
&.btn-hover,
&:focus {
color: var(--tertiary-hover);
}
&:active,
&.btn-active {
@include linear-gradient(
var(--primary-low-mid) 0%,
var(--primary-very-low) 100%
);
}
}
}
&:focus {
outline: none;
background: var(--primary-low);
.d-icon {
color: var(--primary);
}
}
}
.btn-link {
background: transparent;
border: 0;
padding: 0;
color: var(--tertiary);
}
.btn-mini-toggle {
border-radius: var(--d-border-radius);
padding: 0.4em 0.467em;
.d-icon {
color: var(--primary-high);
}
@include hover {
background: transparent;
.d-icon {
color: var(--primary);
}
}
&:focus {
background: var(--primary-low);
.d-icon {
color: var(--primary);
}
}
}