theme-bootstrap/src/assets/scss/components/_listbox.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
/* @docs */
/* @docs */

/* @bootstrap docs */
// $list-group-color:                  var(--#{$prefix}body-color);
// $list-group-bg:                     var(--#{$prefix}body-bg);
// $list-group-border-color:           var(--#{$prefix}border-color);
// $list-group-border-width:           var(--#{$prefix}border-width);
// $list-group-border-radius:          var(--#{$prefix}border-radius);

// $list-group-item-padding-y:         $spacer * .5;
// $list-group-item-padding-x:         $spacer;
// // fusv-disable
// $list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
// $list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// // fusv-enable

// $list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
// $list-group-active-color:           $component-active-color;
// $list-group-active-bg:              $component-active-bg;
// $list-group-active-border-color:    $list-group-active-bg;

// $list-group-disabled-color:         var(--#{$prefix}secondary-color);
// $list-group-disabled-bg:            $list-group-bg;

// $list-group-action-color:           var(--#{$prefix}secondary-color);
// $list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

// $list-group-action-active-color:    var(--#{$prefix}body-color);
// $list-group-action-active-bg:       var(--#{$prefix}secondary-bg);
/* @bootstrap docs */

.listbox {
    position: relative;
    border: var(--#{$prefix}list-group-border-width) solid
        var(--#{$prefix}list-group-border-color);

    .list-group-item {
        border-width: 0 0 var(--#{$prefix}list-group-border-width);

        &.disabled {
            --bs-list-group-disabled-bg: var(--bs-secondary-bg-subtle);
            --bs-list-group-border-color: var(--bs-secondary-border-subtle);
        }
    }

    > .list-group-item:last-child {
        border-bottom: unset;
    }

    .list-group-list {
        overflow: auto;
        position: relative;
        border-radius: inherit;

        &,
        > ul {
            margin: 0;
            padding: 0;
        }

        &:not(:first-child) {
            &,
            > .list-group-item:first-child {
                border-top-left-radius: unset;
                border-top-right-radius: unset;
            }
        }

        &:not(:last-child) {
            &,
            > .list-group-item:last-child {
                border-bottom-left-radius: unset;
                border-bottom-right-radius: unset;
            }
        }

        &:last-child {
            > .list-group-item:last-child {
                border-bottom: unset;
            }
        }
    }

    &.selectable {
        .list-group-list .list-group-item {
            cursor: pointer;

            &.focused,
            &:hover {
                &:not(.active) {
                    color: var(--#{$prefix}list-group-action-hover-color);
                    background-color: var(
                        --#{$prefix}list-group-action-hover-bg
                    );
                }

                &.active {
                    filter: brightness(95%);
                }
            }
        }
    }
}