Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

REFACTOR: Convert main button styles into a central mixin

This commit is contained in:
Kris 2019-12-13 14:09:48 -05:00
parent a04a631674
commit b76ae9e0f5
2 changed files with 96 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/stylesheets/common/base/discourse.scss
View File

@ -94,32 +94,6 @@ h6 {
margin-bottom: 0.5rem;
}
button {
&.ok {
background: $success;
color: $secondary;
.d-icon {
color: currentColor;
}
@include hover {
background: lighten($success, 10%);
color: $secondary;
}
}
&.cancel {
background: $danger;
color: $secondary;
.d-icon {
color: currentColor;
}
@include hover {
background: lighten($danger, 10%);
color: $secondary;
}
}
}
a.cancel {
margin-left: 1.25em;
line-height: normal;

203
app/assets/stylesheets/common/components/buttons.scss
View File

@ -5,38 +5,68 @@
// Base
// --------------------------------------------------
.btn {
@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;
font-weight: 500;
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;
box-sizing: border-box;
min-height: 30px;
.d-icon {
color: $icon-color;
margin-right: 0.45em;
transition: color 0.25s;
}
&:active,
&.btn-active {
text-shadow: none;
}
&[disabled],
&.disabled {
cursor: default;
opacity: 0.4;
}
.d-icon {
margin-right: 7px;
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;
}
}
.btn.hidden {
@ -47,117 +77,68 @@
// --------------------------------------------------
.btn {
border: none;
color: $primary;
font-weight: normal;
background: $primary-low;
.d-icon {
color: $primary-high;
}
&[href] {
color: $primary;
min-height: unset; // ovverides button defaults
}
@include hover {
background: $primary-medium;
color: $secondary;
.d-icon {
color: $secondary-very-high;
}
}
&[disabled],
&.disabled {
background: $primary-low;
.d-icon {
color: $primary-medium;
}
&:hover {
color: dark-light-choose($primary-low-mid, $secondary-high);
.d-icon {
color: $primary-low-mid;
}
}
cursor: not-allowed;
}
.d-icon {
line-height: $line-height-medium; // Match button text line-height
}
@include btn;
}
// Primary button
// --------------------------------------------------
.btn-primary {
border: none;
font-weight: normal;
color: $secondary;
background: $tertiary;
.d-icon {
color: currentColor;
}
&[href] {
color: $secondary;
}
@include hover {
background: dark-light-choose(
scale-color($tertiary, $lightness: -20%),
scale-color($tertiary, $lightness: 20%)
@include btn(
$text-color: $secondary,
$bg-color: $tertiary,
$icon-color: $secondary,
$hover-bg-color: darken($tertiary, 10%),
$hover-icon-color: $secondary
);
.d-icon {
color: currentColor;
}
}
&:active,
&.btn-active {
@include linear-gradient(
scale-color($tertiary, $lightness: -20%),
$tertiary
);
}
&[disabled],
&.disabled {
background: $tertiary;
.d-icon {
color: currentColor;
}
}
}
// Danger button
// --------------------------------------------------
.btn-danger {
color: $secondary;
font-weight: normal;
background: $danger;
.d-icon {
color: $danger-low;
}
&[href] {
color: $secondary;
}
@include hover {
background: dark-light-choose(
@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
);
.d-icon {
color: $danger-low;
}
}
&:active,
&.btn-active {
@include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
}
&[disabled],
&.disabled {
background: $danger;
.d-icon {
color: $danger-low;
}
}
}
// Social buttons