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

/* @bootstrap docs */
// $modal-inner-padding:               $spacer;

// $modal-footer-margin-between:       .5rem;

// $modal-dialog-margin:               .5rem;
// $modal-dialog-margin-y-sm-up:       1.75rem;

// $modal-title-line-height:           $line-height-base;

// $modal-content-color:               null;
// $modal-content-bg:                  var(--#{$prefix}body-bg);
// $modal-content-border-color:        var(--#{$prefix}border-color-translucent);
// $modal-content-border-width:        var(--#{$prefix}border-width);
// $modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
// $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
// $modal-content-box-shadow-xs:       $box-shadow-sm;
// $modal-content-box-shadow-sm-up:    $box-shadow;

// $modal-backdrop-bg:                 $black;
// $modal-backdrop-opacity:            .5;

// $modal-header-border-color:         var(--#{$prefix}border-color);
// $modal-header-border-width:         $modal-content-border-width;
// $modal-header-padding-y:            $modal-inner-padding;
// $modal-header-padding-x:            $modal-inner-padding;
// $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

// $modal-footer-bg:                   null;
// $modal-footer-border-color:         $modal-header-border-color;
// $modal-footer-border-width:         $modal-header-border-width;

// $modal-sm:                          300px;
// $modal-md:                          500px;
// $modal-lg:                          800px;
// $modal-xl:                          1140px;

// $modal-fade-transform:              translate(0, -50px);
// $modal-show-transform:              none;
// $modal-transition:                  transform .3s ease-out;
// $modal-scale-transform:             scale(1.02);
/* @bootstrap docs */

.dialog {
    // extend bootstrap modal class
    @extend .modal;

    // override browser default appearance
    background-color: transparent;
    border-width: 0;

    &[open] {
        display: block;
    }

    &::backdrop {
        @extend .modal-backdrop;
    }

    // root class extension
    &.modal {
        &-dialog {
            position: fixed;
        }

        &-fullscreen {
            // override browser default appearance
            padding: 0;
            margin: 0;
        }

        &:not(&-fullscreen) {
            // restore browser default appearance
            margin: auto;
            width: fit-content;
            height: fit-content;
        }
    }

    // inner classes
    .modal {
        &-header {
            flex-direction: column;
            align-items: inherit;

            &:has(.btn-close) {
                padding-right: 3rem;
            }

            > .btn-close {
                position: absolute;
                top: 1.5rem;
                right: 1.5rem;
            }
        }

        &-title,
        &-subtitle {
            margin: 0;
            padding: 0;
        }
    }
}