theme-bootstrap/src/assets/scss/components/_button.scss at main · oruga-ui/theme-bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
@use "sass:map";

/* @docs */
$btn-spacer: 0.5rem !default;
$btn-height: 2.35em !default;
$btn-border-color: var(--#{$prefix}border-color);
$btn-hover-border-color: var(--#{$prefix}border-color);
$btn-hover-box-shadow: $box-shadow-sm !default;
/* @docs */

/* @bootstrap docs */
// $btn-color:                   var(--#{$prefix}body-color);
// $btn-padding-y:               $input-btn-padding-y;
// $btn-padding-x:               $input-btn-padding-x;
// $btn-font-family:             $input-btn-font-family;
// $btn-font-size:               $input-btn-font-size;
// $btn-line-height:             $input-btn-line-height;
// $btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

// $btn-padding-y-sm:            $input-btn-padding-y-sm;
// $btn-padding-x-sm:            $input-btn-padding-x-sm;
// $btn-font-size-sm:            $input-btn-font-size-sm;

// $btn-padding-y-lg:            $input-btn-padding-y-lg;
// $btn-padding-x-lg:            $input-btn-padding-x-lg;
// $btn-font-size-lg:            $input-btn-font-size-lg;

// $btn-border-width:            $input-btn-border-width;

// $btn-font-weight:             $font-weight-normal;
// $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
// $btn-focus-width:             $input-btn-focus-width;
// $btn-focus-box-shadow:        $input-btn-focus-box-shadow;
// $btn-disabled-opacity:        .65;
// $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

// $btn-link-color:              var(--#{$prefix}link-color);
// $btn-link-hover-color:        var(--#{$prefix}link-hover-color);
// $btn-link-disabled-color:     $gray-600;

// // Allows for customizing button radius independently from global border radius
// $btn-border-radius:           var(--#{$prefix}border-radius);
// $btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
// $btn-border-radius-lg:        var(--#{$prefix}border-radius-lg);

// $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

// $btn-hover-bg-shade-amount:       15%;
// $btn-hover-bg-tint-amount:        15%;
// $btn-hover-border-shade-amount:   20%;
// $btn-hover-border-tint-amount:    10%;
// $btn-active-bg-shade-amount:      20%;
// $btn-active-bg-tint-amount:       20%;
// $btn-active-border-shade-amount:  25%;
// $btn-active-border-tint-amount:   10%;
/* @bootstrap docs */

.btn {
    --#{$prefix}btn-spacer: #{$btn-spacer};
    --#{$prefix}btn-height: #{$btn-height};
    --#{$prefix}btn-border-color: #{$btn-border-color};
    --#{$prefix}btn-hover-border-color: #{$btn-hover-border-color};
    --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--#{$prefix}btn-height);

    .button-wrapper {
        display: inline-flex;
        align-items: center;
    }

    .icon {
        margin: 0 4px;

        &:not(:last-child) {
            margin-right: var(--#{$prefix}btn-spacer);
        }

        &:not(:first-child) {
            margin-left: var(--#{$prefix}btn-spacer);
        }
    }

    &:hover {
        box-shadow: var(--#{$prefix}btn-hover-box-shadow);
    }

    &.expanded {
        width: 100%;
    }

    &.disabled,
    &.btn-disabled {
        pointer-events: auto;
        cursor: auto;
    }

    &.btn-inverted {
        --#{$prefix}btn-bg: transparent;
        --#{$prefix}btn-border-color: transparent;
    }

    &:not([class*="btn-"]) {
        @extend .focus-ring;
    }

    // inverted color
    @each $name, $color in $theme-colors {
        &.variant-#{$name}-inverted,
        &.btn-inverted-#{$name} {
            // default style
            --#{$prefix}btn-color: var(--#{$prefix}#{$name});
            --#{$prefix}btn-bg: transparent;
            --#{$prefix}btn-border-color: transparent;

            // hover style
            --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name});
            --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}-bg-subtle);
            --#{$prefix}btn-hover-border-color: var(
                --#{$prefix}#{$name}-border-subtle
            );
        }

        &.variant-#{$name}-subtle,
        &.btn-#{$name}-subtle {
            // default style
            --#{$prefix}btn-color: var(--#{$prefix}#{$name});
            --#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle);
            --#{$prefix}btn-border-color: var(
                --#{$prefix}#{$name}-border-subtle
            );

            // hover style
            --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-contrast);
            --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
            --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
        }
    }

    &:has(.badge) {
        position: relative;
    }
}