nuxt-starter/app/assets/scss/components/_v-button-outlined.scss at c626e54a096789856581da57b0b52775ba7b6577 · rezozero/nuxt-starter · 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
@use 'assets/scss/mixins/css-vars-map';
@use 'assets/scss/mixins/sizes' as *;
@use 'assets/scss/functions/ease' as *;

$vars: (
    (vars: (xs: (padding: 8px 12px,
                gap: 6px,
            ),
            sm: (padding: 10px 16px,
                gap: 8px,
            ),
            md: (padding: 16px 20px,
                gap: 12px,
            ),
            lg: (padding: 18px 28px,
                gap: 12px,
            ),
        ),
        prefix: '',
    ),
    (vars: (xs: (font-size: 14px,
            ),
            sm: (font-size: 16px,
            ),
            md: (font-size: 18px,
            ),
            lg: (font-size: 20px,
            ),
        ),
        prefix: 'label',
    ),
    (vars: (xs: (font-size: 16px,
            ),
            sm: (font-size: 20px,
            ),
            md: (font-size: 24px,
            ),
            lg: (font-size: 32px,
            ),
        ),
        prefix: 'icon',
    ),
);
$component: 'v-button';

// Outputs CSS property declarations using the CSS variables set by `size()`, with sm values as fallbacks.
// Usage: @include v-button.apply('') or @include v-button.apply('label')
@mixin apply($prefix: '') {
    @if $prefix == '' {
        border: initial;
        background: transparent;
        outline: 1px solid var(--v-button-outline-color, var(--button-label-on-light-outline-border, #010101));
        transition: color 0.3s ease(out-quad), background-color 0.3s ease(out-quad);

        &:where([inert], #{&}--disabled, [disabled]) {
            color: var(--button-label-on-light-outline-content-disabled, #bdbdbd);
            outline-color: var(--button-label-on-light-outline-border-disabled, rgba(1, 1, 1, 0.3));
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--button-label-on-light-outline-bg, #010101);
                color: var(--button-label-on-light-outline-content-hover, #FFF);
            }
        }
    }

    @include css-vars-map.apply($vars, $component, $prefix, $fallback-size: 'sm');
}

// Sets the CSS variables for a given size (xs, sm, md, lg) from $vars.
// Call this on the component element to drive properties() declarations elsewhere.
// eg: @include v-button-solid.size('md') generates:
//   --v-button-solid-min-height: 56px;
//   --v-button-solid-padding-inline: 20px;
//   --v-button-solid-label-font-size: 18px;
//   --v-button-solid-icon-font-size: 24px; etc.
@mixin size($size) {
    @include css-vars-map.deep-get($vars, $size, $component);
}

// Generates a BEM modifier class for each size in $vars.
// Call this on the component root to enable size variants via CSS class.
// eg: @include v-button-solid.size-classes() generates:
//   &--size-xs { --v-button-solid-min-height: 32px; … }
//   &--size-sm { --v-button-solid-min-height: 40px; … }
//   &--size-md { --v-button-solid-min-height: 56px; … } etc.
@mixin size-classes() {
    @include sizes($vars, $component);
}