UNPKG

5.42 kBSCSSView Raw
1@import "../core/index-noreset.scss";
2@import "scss/variable";
3@import "./rtl.scss";
4
5#{$dialog-prefix} {
6 @include box-sizing;
7 position: fixed;
8 z-index: 1001;
9 background: $dialog-bg;
10 border: $dialog-border-width $dialog-border-style $dialog-border-color;
11 border-radius: $dialog-corner;
12 box-shadow: $dialog-shadow;
13 text-align: left;
14 overflow: hidden;
15 max-width: 90%;
16
17 &-header {
18 padding: $dialog-title-padding-top $dialog-title-padding-left-right $dialog-title-padding-bottom $dialog-title-padding-left-right;
19 border-bottom: $dialog-title-border-width $line-solid $dialog-title-border-color;
20 font-size: $dialog-title-font-size;
21 font-weight: $dialog-title-font-weight;
22 background: $dialog-title-bg-color;
23 color: $dialog-title-color;
24 }
25
26 &-body {
27 padding: $dialog-content-padding-top $dialog-content-padding-left-right $dialog-content-padding-bottom $dialog-content-padding-left-right;
28 font-size: $dialog-content-font-size;
29 line-height: $font-lineheight-2;
30 color: $dialog-content-color;
31 }
32
33 &-body-no-footer {
34 margin-bottom: $dialog-content-margin-bottom-no-footer;
35 }
36
37 /* 让用户自己设置 */
38 /* &.#{$css-prefix}closeable &-header, */
39 /* &.#{$css-prefix}closeable &-body, { */
40 /* padding-right: $dialog-part-padding-right-closeable; */
41 /* } */
42
43 &-footer {
44 padding: $dialog-footer-padding-top $dialog-footer-padding-left-right $dialog-footer-padding-bottom $dialog-footer-padding-left-right;
45 border-top: $dialog-footer-border-width $line-solid $dialog-footer-border-color;
46 background: $dialog-footer-bg-color;
47
48 &.#{$css-prefix}align-left {
49 text-align: left;
50 }
51
52 &.#{$css-prefix}align-center {
53 text-align: center;
54 }
55
56 &.#{$css-prefix}align-right {
57 text-align: right;
58 }
59 }
60
61 &-footer-fixed-height {
62 position: absolute;
63 width: 100%;
64 bottom: 0;
65 }
66
67 &-btn + &-btn {
68 margin-left: $dialog-footer-button-spacing;
69 }
70
71 &-close {
72 position: absolute;
73 top: $dialog-close-top;
74 right: $dialog-close-right;
75 width: $dialog-close-width;
76 height: $dialog-close-width;
77 color: $dialog-close-color;
78 cursor: pointer;
79
80 &:link,
81 &:visited {
82 height: $dialog-close-width;
83 color: $dialog-close-color;
84 }
85
86 &:hover {
87 background: $dialog-close-bg-hovered;
88 color: $dialog-close-color-hovered;
89 }
90
91 & &-icon.#{$css-prefix}icon {
92 position: absolute;
93 top: 50%;
94 left: 50%;
95 @include icon-square-size(
96 $size: $dialog-close-size,
97 $marginTop: calc(0px - #{$dialog-close-size} / 2),
98 $marginLeft: calc(0px - #{$dialog-close-size} / 2)
99 );
100 }
101 }
102
103 &-container {
104 position: fixed;
105 top: 0;
106 left: 0;
107 right: 0;
108 bottom: 0;
109 z-index: 1001;
110 padding: $s-10;
111 overflow: auto;
112 text-align: center;
113 box-sizing: border-box;
114
115 &:before {
116 display: inline-block;
117 vertical-align: middle;
118 width: 0;
119 height: 100%;
120 content: '';
121 }
122
123 #{$dialog-prefix} {
124 display: inline-block;
125 position: relative;
126 vertical-align: middle;
127 }
128 }
129
130 &-quick #{$dialog-prefix}-body {
131 padding: $dialog-message-content-padding-top $dialog-message-content-padding-left-right $dialog-message-content-padding-bottom $dialog-message-content-padding-left-right;
132 }
133
134 & &-message.#{$css-prefix}message {
135 min-width: calc(#{$s-25} * 3);
136 padding: 0;
137 }
138}
139
140#{$dialog-prefix} {
141 &-wrapper {
142 position: fixed;
143 top: 0;
144 left: 0;
145 bottom: 0;
146 right: 0;
147 overflow: auto;
148 }
149 &-inner-wrapper {
150 display: flex;
151 position: relative;
152 top: 100px;
153 pointer-events: none;
154 padding-bottom: 24px;
155 }
156
157 &-v2 {
158 pointer-events: auto;
159 margin: 0 auto;
160
161 #{$dialog-prefix}-header {
162 word-break: break-word;
163 padding-right: calc(#{$dialog-close-right} * 2 + #{$dialog-close-width});
164 }
165 #{$dialog-prefix}-body {
166 padding-right: calc(#{$dialog-close-right} * 2 + #{$dialog-close-width});
167 }
168 #{$dialog-prefix}-header + #{$dialog-prefix}-body {
169 padding: $dialog-content-padding-top $dialog-content-padding-left-right $dialog-content-padding-bottom $dialog-content-padding-left-right;
170 }
171 #{$dialog-prefix}-header + #{$dialog-prefix}-body-no-footer {
172 margin-bottom: $dialog-content-margin-bottom-no-footer;
173 }
174 }
175
176 &#{$dialog-prefix}-v2 {
177 position: relative;
178 }
179
180 &-centered {
181 text-align: center;
182
183 &::before {
184 display: inline-block;
185 width: 0;
186 height: 100%;
187 vertical-align: middle;
188 content: '';
189 }
190 #{$dialog-prefix}-v2 {
191 margin: 40px 0;
192 display: inline-block;
193 text-align: left;
194 vertical-align: middle;
195 }
196 }
197}