UNPKG

2.66 kBtext/lessView Raw
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; // reset scale avoid mousePosition bug
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; // lesshint duplicateProperty: false
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}