Skip to content

Commit 2655973

Browse files
author
AMJones
committed
Corrects various issues. Matches classes to BS4.
1 parent d926b89 commit 2655973

3 files changed

Lines changed: 98 additions & 65 deletions

File tree

‎scss/_buttons-mixins.scss‎

100755100644
Lines changed: 69 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,78 @@
11
@import "buttons-variables";
22

33
// Outline Button Mixin
4-
@mixin btn-outline-variant($color, $active-color: darken($color, 7.5%)) {
5-
&.btn-outline {
6-
color: $color !important;
7-
.active &, &:active, &.active, &:hover, &:focus {
8-
border-color: $active-color !important;
9-
color: $active-color !important;
10-
background-color: rgba(0, 0, 0, .05) !important;
11-
}
4+
@mixin btn-transparent-variant($outline: false, $color: $btn-default-color, $color-hover: darken($color, 7.5%), $active-background: rgba($color, .05), $active-border: darken($color, 7.5%)) {
5+
// Set Border Color
6+
$border-color: transparent;
7+
$border-color-hover: transparent;
8+
$border-color-active: transparent;
9+
@if $outline {
10+
$border-color: $color;
11+
$border-color-hover: $color-hover;
12+
$border-color-active: $active-border;
13+
}
14+
15+
color: $color;
16+
background-color: transparent;
17+
border-color: $border-color;
18+
19+
&:hover {
20+
color: $color-hover;
21+
background-color: $active-background;
22+
border-color: $border-color-hover;
23+
}
24+
25+
&.active, .active > & {
26+
color: $active-border;
27+
background-color: $active-background;
1228
}
29+
30+
&:focus {
31+
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
32+
}
33+
}
34+
35+
@mixin btn-outline-variant($color, $color-hover: darken($color, 7.5%), $active-background: rgba($color, .05), $active-border: darken($color, 7.5%)) {
36+
@include btn-transparent-variant(true, $color, $color-hover, $active-background, $active-border);
1337
}
1438

1539
// Material Design Flat Button Mixin
16-
@mixin btn-flat-variant($color, $active-color: darken($color, 7.5%)) {
17-
&.btn-flat {
18-
color: $color !important;
19-
.active &, &:active, &.active, &:hover, &:focus {
20-
@if $btn-border-width > 0 {
21-
border-color: transparent !important;
22-
}
23-
color: $active-color !important;
24-
background-color: rgba(0, 0, 0, .03) !important;
25-
}
26-
}
40+
@mixin btn-flat-variant($color, $color-hover: darken($color, 7.5%), $active-background: rgba($color, .05)) {
41+
@include btn-transparent-variant(false, $color, $color-hover, $active-background, transparent);
42+
}
43+
44+
@function _btn-color($background) {
45+
@return if(isLight($background), $btn-dark-color, $btn-light-color);
2746
}
2847

2948
// Master Button Variant Mixin (Calls Flat & Outline Button Mixins)
30-
@mixin btn-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
49+
@mixin btn-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
50+
$color: _btn-color($background);
51+
$active-color: _btn-color($active-background);
52+
$hover-color: _btn-color($hover-background);
53+
3154
@if $background != transparent {
3255
background-color: $background;
56+
color: $color;
57+
} @else {
58+
color: $btn-dark-color;
3359
}
3460
@if $btn-border-width > 0 {
3561
border-color: $border;
3662
}
37-
@if isLight($background) {
38-
color: color("black");
39-
} @else {
40-
// Only using here due to dark bg/light font.
41-
//-webkit-font-smoothing: antialiased;
42-
color: color("white");
63+
&:hover {
64+
@if($background != $hover-background) { background-color: $hover-background; }
65+
@if($hover-border != $border && $btn-border-width > 0) { border-color: $hover-border; }
66+
color: $hover-color;
4367
}
44-
// Disabled comes first so active can properly restyle
45-
.disabled &, &:disabled {
46-
opacity: .5;
68+
.active > &, &.active {
69+
@if($background != $active-background) { background-color: $active-background; }
70+
@if($active-border != $border && $btn-border-width > 0) { border-color: $active-border; }
71+
color: $active-color;
4772
}
48-
.active &, &:active, &.active, &:hover, &:focus {
49-
background-color: $active-background;
50-
border-color: $active-border;
51-
text-decoration: none;
52-
@if isLight($background) {
53-
color: $black;
54-
} @else {
55-
color: $white;
56-
}
73+
&:focus {
74+
box-shadow: 0 0 0 $btn-focus-width rgba($active-border, .5);
5775
}
58-
@include btn-outline-variant($background, $active-background);
59-
@include btn-flat-variant($background, $active-background);
6076
}
6177

6278
// Button sizes
@@ -73,4 +89,17 @@
7389
@include btn-variant($value, $value);
7490
}
7591
}
92+
93+
@each $color, $value in $theme-colors {
94+
.btn-outline-#{$color} {
95+
@include btn-outline-variant($value);
96+
}
97+
}
98+
99+
100+
@each $color, $value in $theme-colors {
101+
.btn-flat-#{$color} {
102+
@include btn-flat-variant($value)
103+
}
104+
}
76105
}

‎scss/_buttons-variables.scss‎

100755100644
Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
$enable-framework: false !default;
66

7+
// Spacing
78
$btn-padding-x: (space-x(md) * 1rem) !default;
89
$btn-padding-y: (space-y(md) * 1rem) !default;
910
$btn-line-height: $line-height-base !default;
@@ -21,14 +22,19 @@ $btn-lg-padding-x: (space-x(lg) * 1rem) !default;
2122
$btn-lg-padding-y: (space-y(lg) * 1rem) !default;
2223
$btn-lg-height: (($btn-lg-padding-y * 2) + $line-height-lg) !default;
2324

24-
$btn-border-width: 0 !default;
25-
$btn-font-weight: if(variable-exists(font-weight-medium), $font-weight-medium, $font-weight-bold) !default;
26-
25+
// Colors
26+
$btn-dark-color: #000;
27+
$btn-light-color: #fff;
2728
$btn-default-color: gray(600);
2829
$btn-default-bg: color(white);
30+
31+
// Borders
32+
$btn-border-width: 0 !default;
33+
$btn-focus-width: 1px;
2934
$btn-border-radius: $border-radius-sm;
3035

36+
// Other
37+
$btn-font-weight: if(variable-exists(font-weight-medium), $font-weight-medium, $font-weight-bold) !default;
3138
$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
3239
$btn-raised-transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
33-
3440
$btn-cursor: pointer !default;

‎scss/_buttons.scss‎

100755100644
Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
@import "buttons-mixins";
33

44
@if not($enable-framework) {
5-
/*!
6-
* StrapLess Buttons v1.0 (http://github.com/strapless/buttons)
7-
* Inspiration from (https://getbootstrap.com) and (https://material.io/components/web/catalog/buttons)
8-
* Licensed under MIT (https://github.com/strapless/buttons/blob/master/LICENSE)
9-
*/
5+
/*!
6+
* StrapLess Buttons v1.0 (http://github.com/strapless/buttons)
7+
* Inspiration from (https://getbootstrap.com) and (https://material.io/components/web/catalog/buttons)
8+
* Licensed under MIT (https://github.com/strapless/buttons/blob/master/LICENSE)
9+
*/
1010
}
1111

1212
.btn {
@@ -42,19 +42,20 @@
4242
@if theme(rounded) {
4343
border-radius: $btn-border-radius;
4444
}
45-
@if $btn-border-width == 0 {
46-
&.btn-outline {
47-
border-width: 1px;
48-
}
49-
}
50-
&.btn-flat {
51-
box-shadow: none !important;
52-
@if $btn-border-width > 0 {
53-
border-color: transparent !important;
54-
}
45+
&:not([class*=btn-flat-]) {
46+
@include elevation(1);
5547
}
5648
}
5749

50+
.btn-compact {
51+
padding-left: $btn-padding-x / 2;
52+
padding-right: $btn-padding-x / 2;
53+
}
54+
55+
.btn-dense {
56+
letter-spacing: 0;
57+
}
58+
5859
// Material Design Ripple
5960
@keyframes ripple {
6061
0% {
@@ -92,16 +93,13 @@
9293
@if component("icons") and variable-exists(icon-css-prefix) {
9394
//noinspection SassScssUnresolvedVariable
9495
.btn > .#{$icon-css-prefix} + span {
95-
margin-left: $btn-padding-x;
96+
margin-left: $btn-padding-x;
9697
}
9798
}
9899

99100
// Themed Buttons
100-
@each $color, $value in $theme-colors {
101-
.btn-#{$color} {
102-
@include btn-variant($value, $value);
103-
}
104-
}
101+
@include btn-variants();
102+
105103
.btn-default {
106104
@include btn-variant($btn-default-bg,transparent);
107105
}

0 commit comments

Comments
 (0)