1 | @dialog-prefix-cls: ~'@{c7n-prefix}-modal';
|
2 |
|
3 | .@{dialog-prefix-cls} {
|
4 | .reset-component;
|
5 | position: relative;
|
6 | top: 1rem;
|
7 | width: auto;
|
8 | margin: 0 auto;
|
9 | padding-bottom: 0.24rem;
|
10 |
|
11 | &-wrap {
|
12 | position: fixed;
|
13 | top: 0;
|
14 | right: 0;
|
15 | bottom: 0;
|
16 | left: 0;
|
17 | z-index: @zindex-modal;
|
18 | overflow: auto;
|
19 | outline: 0;
|
20 | -webkit-overflow-scrolling: touch;
|
21 | }
|
22 |
|
23 | &-title {
|
24 | margin: 0;
|
25 | color: @modal-title-color;
|
26 | font-weight: @modal-title-font-weight;
|
27 | font-size: @modal-title-font-size-base;
|
28 | line-height: @modal-title-line-height;
|
29 | letter-spacing: 0;
|
30 | }
|
31 |
|
32 | &-content {
|
33 | position: relative;
|
34 | padding: 0.24rem;
|
35 | background-color: @component-background;
|
36 | background-clip: padding-box;
|
37 | border: 0;
|
38 | border-radius: @border-radius-base;
|
39 | box-shadow: @modal-content-shadow;
|
40 | }
|
41 |
|
42 | &-close {
|
43 | position: absolute;
|
44 | top: 0;
|
45 | right: 0;
|
46 | z-index: 10;
|
47 | padding: 0;
|
48 | color: @text-color-secondary;
|
49 | font-weight: 700;
|
50 | line-height: 1;
|
51 | text-decoration: none;
|
52 | background: transparent;
|
53 | border: 0;
|
54 | outline: 0;
|
55 | cursor: pointer;
|
56 | transition: color @animation-duration-slow;
|
57 |
|
58 | &-x.icon {
|
59 | display: block;
|
60 | width: 0.56rem;
|
61 | height: 0.56rem;
|
62 | font-style: normal;
|
63 | line-height: 0.56rem;
|
64 | text-align: center;
|
65 | text-transform: none;
|
66 | vertical-align: baseline;
|
67 | text-rendering: auto;
|
68 | }
|
69 |
|
70 | &:focus,
|
71 | &:hover {
|
72 | color: #444;
|
73 | text-decoration: none;
|
74 | }
|
75 | }
|
76 |
|
77 | &-header {
|
78 | color: @text-color;
|
79 | background: @component-background;
|
80 | }
|
81 |
|
82 | &-body {
|
83 | font-size: @font-size-base;
|
84 | line-height: @line-height-base;
|
85 | word-wrap: break-word;
|
86 | }
|
87 |
|
88 | &-footer {
|
89 | margin-bottom: -0.24rem;
|
90 | padding: 0.12rem 0;
|
91 | text-align: right;
|
92 | border-radius: 0 0 @border-radius-base @border-radius-base;
|
93 | button + button {
|
94 | margin-bottom: 0;
|
95 | margin-left: 0.08rem;
|
96 | }
|
97 | }
|
98 |
|
99 | &.zoom-enter,
|
100 | &.zoom-appear {
|
101 | transform: none;
|
102 | opacity: 0;
|
103 | animation-duration: @animation-duration-slow;
|
104 | }
|
105 |
|
106 | &-mask {
|
107 | position: fixed;
|
108 | top: 0;
|
109 | right: 0;
|
110 | bottom: 0;
|
111 | left: 0;
|
112 | z-index: @zindex-modal-mask;
|
113 | height: 100%;
|
114 | background-color: #373737;
|
115 | background-color: @modal-mask-bg;
|
116 | filter: ~'alpha(opacity=50)';
|
117 |
|
118 | &-hidden {
|
119 | display: none;
|
120 | }
|
121 | }
|
122 |
|
123 | &-open {
|
124 | overflow: hidden;
|
125 | }
|
126 | }
|
127 |
|
128 | @media (max-width: @screen-md) {
|
129 | .@{dialog-prefix-cls} {
|
130 | width: auto !important;
|
131 | margin: 0.1rem;
|
132 | }
|
133 | .vertical-center-modal {
|
134 | .@{dialog-prefix-cls} {
|
135 | flex: 1;
|
136 | }
|
137 | }
|
138 | }
|