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

.modal {
    &.show {
        display: flex;
    }

    &-backdrop {
        opacity: var(--#{$prefix}backdrop-opacity);
    }

    &-dialog {
        z-index: var(--#{$prefix}modal-zindex);
        pointer-events: all;
        margin: auto;

        &.fullscreen {
            --#{$prefix}modal-width: 100%;
            width: 100%;
        }

        .modal-content {
            overflow: hidden;
        }

        > .btn-close {
            --#{$prefix}btn-close-opacity: 1;
            position: fixed;
            top: 1.5rem;
            right: 1.5rem;
        }
    }
}