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 |
|
39 |
|
40 |
|
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 | }
|