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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
@import './variables.less';
.clearfix() {
&:before,
&:after {
content: ' '; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.@{prefixCls} {
// Container that the rc-dialog scrolls within
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
}
// Shell div to position the rc-dialog with bottom padding
position: relative;
width: auto;
margin: 10px;
// Actual rc-dialog
&-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
// Remove focus outline from opened rc-dialog
outline: 0;
}
// Modal header
// Top section of the rc-dialog w/ title and dismiss
&-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
&:extend(.clearfix all);
}
&-close {
cursor: pointer;
border: 0;
background: transparent;
font-size: 21px;
position: absolute;
right: 20px;
top: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: 0.2;
text-decoration: none;
&-x:after {
content: '×';
}
&:hover {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
}
// Title text within header
&-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all rc-dialog content resides (sibling of &-header and &-footer)
&-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
&-footer {
padding: @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
}
// Scale up the rc-dialog
@media (min-width: @screen-sm-min) {
.@{prefixCls} {
// Automatically set rc-dialog's width for larger viewports
width: @modal-md;
margin: 30px auto;
&-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
}
@import './effect.less';