/
styles-contentdialog.less
153 lines (130 loc) · 4.99 KB
/
styles-contentdialog.less
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
// Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.
@import "base.less";
@import "mixins.less";
.win-contentdialog {
/* Dialog's positioning and sizing rules:
- Horizontal alignment
- Always horizontally centered
- Vertical alignment
- If height of window < @dialogVerticallyCenteredThreshold, dialog is attached to top of window
- Otherwise, dialog is vertically centered
- Width:
- Always stays between @minWidth and @maxWidth
- Sizes to width of window
- Height:
- Always stays between @minHeight and @maxHeight
- If window height < @maxHeight and dialog height > 50% of window
height, dialog height = window height
- Otherwise, dialog height sizes to its content
*/
@minWidth: 320px;
@maxWidth: 456px;
@minHeight: 184px;
@maxHeight: 758px;
@dialogVerticallyCenteredThreshold: 640px;
&.win-contentdialog-verticalalignment {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
overflow: hidden;
&.win-contentdialog-devicefixedsupported {
// We have to use different techniques for sizing the height due to browser bugs:
// - In Edge, height:100vh doesn't work properly on elements with
// position:-ms-device-fixed so we use top:0 and bottom:0.
// - In Chrome, using top:0 and bottom:0 breaks percentage heights within the
// flexbox so we use height:100vh.
position: -ms-device-fixed;
height: auto;
bottom: 0;
}
display: none;
&.win-contentdialog-visible {
#flex > .display-flex();
}
#flex > .flex-flow(column; wrap);
#flex > .justify-content(center); /* center on flex axis (vertically) */
#flex > .align-content(center); /* maintain horizontal centering when the flexbox has 2 columns */
}
.win-contentdialog-backgroundoverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.win-contentdialog-dialog {
#flex > .display-flex();
#flex > .flex-direction(column);
#flex > .flex(@grow: 1; @shrink: 1);
z-index: 1; /* Put the dialog's body above the backgroundoverlay */
outline-style: solid;
outline-width: 1px;
box-sizing: border-box;
padding: 18px 24px 24px 24px;
width: 100%;
min-width: @minWidth;
max-width: @maxWidth;
min-height: @minHeight;
max-height: @maxHeight;
/* Center horizontally */
margin-left: auto;
margin-right: auto;
}
/* Purpose of this element is to control the dialog body's height based on the height
of the window. The dialog body's height should:
- Match height of window when dialog body's intrinsic height < 50% of window height.
In this case, .win-contentdialog-column0or1 will be in column 1 allowing
the dialog's body to fill the height of the window.
- Size to content otherwise.
In this case, .win-contentdialog-column0or1 will be in column 0 preventing
the dialog's body from growing.
This element works by moving between flexbox columns as the window's height changes.
*/
.win-contentdialog-column0or1 {
#flex > .flex(@grow: 10000; @shrink: 0; @basis: 50%);
width: 0;
}
@media (min-height: @dialogVerticallyCenteredThreshold) {
.win-contentdialog-dialog {
#flex > .flex(@grow: 0; @shrink: 1); // shrink: 1 so dialog never becomes taller than window
}
.win-contentdialog-column0or1 {
display: none;
}
}
.win-contentdialog-scroller {
#flex > .flex(@grow: 1; @shrink: 1);
#flex > .display-flex();
#flex > .flex-direction(column);
overflow: auto;
}
.win-contentdialog-title {
#flex > .flex(@grow: 0; @shrink: 0);
._win-type-subtitle();
}
.win-contentdialog-content {
#flex > .flex(@grow: 1; @shrink: 0);
._win-type-body();
}
.win-contentdialog-commands {
#flex > .flex(@grow: 0; @shrink: 0);
#flex > .display-flex();
margin-top: 24px;
margin-right: -4px; /* Chop off margin on last command */
}
.win-contentdialog-commandspacer {
visibility: hidden;
}
.win-contentdialog-commands > button {
/* Each command should have the same width. Flexbox distributes widths using each
item's width and flex-grow as weights. Giving each command a flex-grow of 1
and a width of 0 causes each item to have equal weights and thus equal widths.
*/
#flex > .flex(@grow: 1; @shrink: 1);
width: 0;
margin-right: 4px; /* 4px of space between each command */
white-space: nowrap;
}
}