Skip to content

Commit b158357

Browse files
StevenRotelliStevenRotelli
authored
Update Boilerplate.css
beautified syntax
1 parent c89f60f commit b158357

File tree

1 file changed

+213
-89
lines changed

1 file changed

+213
-89
lines changed

‎Boilerplate.css‎

Lines changed: 213 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,57 @@
1-
/*Makes data panel full size*/
2-
.DataGridDocument { width: auto !important; }
3-
/*DataModel Setup*/
1+
/* Makes data panel full size */
2+
self {
3+
width: auto !important;
4+
}
5+
/* DataModel Setup */
46
.DataModel {
57
display: flex;
68
flex-wrap: wrap;
79
transition: flex;
810
border: 1px solid gray;
911
border-radius: 8px;
10-
padding-top:8px;
11-
padding-left:8px !important;
12-
margin:10px;
13-
width:auto !important
14-
}
15-
/*Table Setup*/
16-
hr { display:none; }
17-
.caption { padding-right: 0.5em; width: 95%; order: 1; }
18-
.header { margin-right: 100%; order: 1; }
19-
.scroll-container { order: 1; max-height:1000px !important;}
20-
.scroll-container > div:first-child{ max-height:1000px !important; height:auto !important;}
21-
.footer { order:1; margin-right:auto; }
22-
/*Field Setup*/
23-
.DataField { display: flex; flex-direction: column; margin-top: auto; order:1; }
24-
/*Section and Tables Styling*/
25-
.DataSection,.DataTable,.DataGridCollection {
12+
padding-top: 8px;
13+
padding-left: 8px !important;
14+
margin: 10px;
15+
width: auto !important;
16+
overflow: none !important;
17+
}
18+
/* Table Setup */
19+
hr {
20+
display: none;
21+
}
22+
.caption {
23+
padding-right: 0.5em;
24+
width: 100%;
25+
order: 1;
26+
margin-right: 0;
27+
}
28+
.header {
29+
margin-right: 100%;
30+
order: 1;
31+
}
32+
.scroll-container {
33+
order: 1;
34+
max-height: 1000px !important;
35+
}
36+
.scroll-container > div:first-child {
37+
max-height: 1000px !important;
38+
height: auto !important;
39+
}
40+
.footer {
41+
order: 1;
42+
margin-right: auto;
43+
}
44+
/* Field Setup */
45+
.DataField {
46+
display: flex;
47+
flex-direction: column;
48+
margin-top: auto;
49+
order: 1;
50+
}
51+
/* Section and Tables Styling */
52+
.DataSection,
53+
.DataTable,
54+
.DataGridCollection {
2655
display: flex;
2756
flex-flow: wrap;
2857
flex-basis: 100%;
@@ -31,36 +60,68 @@ hr { display:none; }
3160
transition: flex;
3261
padding: 8px;
3362
padding-right: 0px;
34-
margin:8px;
35-
margin-left:0px;
63+
margin: 8px;
64+
margin-left: 0px;
3665
width: auto;
3766
border: 1px solid gray;
3867
border-radius: 8px;
39-
order:1;
40-
}
41-
/*Correct flex properties just for tables*/
42-
.DataTable { flex-direction:column; flex-wrap:nowrap; }
43-
/*Makes MultiInstance Sections Look Normal*/
44-
.DataGridCollection > .DataSection { border: none; padding: 0px; margin: 0px; }
45-
.DataSection > .DataSection { margin-left: 0px; height: auto; }
46-
/*Sets hover color*/
47-
.DataSection:hover, .DataTable:hover, .DataGridCollection:hover {
48-
border-color: lightgray;
49-
}
50-
/*Sets focus color*/
51-
.DataSection:focus-within,.DataTable:focus-within,.DataGridCollection:focus-within {
52-
border-color: #27a7ad;
53-
}
54-
/*SPECIAL CLASSES*/
55-
.SoftError > .invalid { background-color: #7f7f27; }
56-
.SoftError > .invalid:focus-within { border-color: #ffcc00;}
57-
.lite-mode .SoftError > .invalid { background-color: #feffbd; }
58-
.lite-mode .SoftError > .invalid:focus-within { border-color: Yellow; }
59-
.Secure > Input:hover{ filter: blur(3px);}
60-
.Secure > Input:focus-within { filter: none; }
61-
.Secure > Input:not(focus-within) { filter: blur(3px); }
62-
.Banner > label { display: none;}
63-
.Banner { width: 100%; }
68+
order: 1;
69+
}
70+
/* Correct flex properties just for tables */
71+
.DataTable {
72+
flex-direction: column;
73+
flex-wrap: nowrap;
74+
}
75+
/* Makes MultiInstance Sections Look Normal */
76+
.DataGridCollection > .DataSection {
77+
border: none;
78+
padding: 0px;
79+
margin: 0px;
80+
}
81+
.DataSection > .DataSection {
82+
margin-left: 0px;
83+
height: auto;
84+
}
85+
/* Sets hover color */
86+
.DataSection:hover,
87+
.DataTable:hover,
88+
.DataGridCollection:hover {
89+
border-color: lightgray;
90+
}
91+
/* Sets focus color */
92+
.DataSection:focus-within,
93+
.DataTable:focus-within,
94+
.DataGridCollection:focus-within {
95+
border-color: var(--grp-teal-1);
96+
}
97+
/* SPECIAL CLASSES */
98+
.SoftError > .invalid {
99+
background-color: #7f7f27;
100+
}
101+
.SoftError > .invalid:focus-within {
102+
border-color: #ffcc00;
103+
}
104+
.lite-mode .SoftError > .invalid {
105+
background-color: #feffbd;
106+
}
107+
.lite-mode .SoftError > .invalid:focus-within {
108+
border-color: Yellow;
109+
}
110+
.Secure > Input:hover {
111+
filter: blur(3px);
112+
}
113+
.Secure > Input:focus-within {
114+
filter: none;
115+
}
116+
.Secure > Input:not(focus-within) {
117+
filter: blur(3px);
118+
}
119+
.Banner > label {
120+
display: none;
121+
}
122+
.Banner {
123+
width: 100%;
124+
}
64125
.Banner > input {
65126
width: 100% !important;
66127
padding-right: 0px;
@@ -70,64 +131,127 @@ hr { display:none; }
70131
text-align: center;
71132
font-size: 17px;
72133
}
73-
.NoLabel > input { margin: 0px; }
74-
.NoLabel > label { display: none; }
75-
.NoLabel > .caption { display: none; }
76-
.NoLabel > .toolbar > div > .caption { display: none; }
77-
.NoBorder.DataGridCollection, .NoBorder.DataTable, .NoBorder.DataField, .NoBorder.DataSection {
78-
padding:0px !important; margin: 0px !important; border:0px !important;
134+
.NoLabel > input {
135+
margin: 0px;
136+
}
137+
.NoLabel > label {
138+
display: none;
139+
}
140+
.NoLabel > .caption {
141+
display: none;
142+
}
143+
.NoLabel > .toolbar > div > .caption {
144+
display: none;
145+
}
146+
.NoBorder.DataGridCollection,
147+
.NoBorder.DataTable,
148+
.NoBorder.DataField,
149+
.NoBorder.DataSection {
150+
padding: 0px !important;
151+
margin: 0px !important;
152+
border: 0px !important;
153+
background-color: transparent;
79154
}
80155
.NoBorder.DataModel {
81-
border:none;
82-
padding-left:0px !important;
83-
margin-right:0px;
84-
}
85-
.Half { flex: 0 0 calc(50% - 8px); }
86-
.Third { flex: 0 0 calc(33.333% - 8px); }
87-
.Quarter { flex: 0 0 calc(25% - 8px); }
88-
.OneFourth { flex: 0 0 calc(25% - 8px); }
89-
.ThreeFourths { flex: 0 0 calc(75% - 8px); }
90-
.Fifth { flex: 0 0 calc(20% - 8px); }
91-
.OneFifth { flex: 0 0 calc(20% - 8px); }
92-
.TwoFifths { flex: 0 0 calc(40% - 8px); }
93-
.ThreeFifths { flex: 0 0 calc(60% - 8px); }
94-
.OneThird { flex: 0 0 calc(33.333% - 8px); }
95-
.TwoThirds { flex: 0 0 calc(66.666% - 8px); }
96-
.Column { flex-direction: column; flex-wrap: nowrap; }
97-
.Column > .DataField { flex-direction: row; }
98-
.Column > .DataField > label { padding-right: 5px; }
99-
.Column > .header { width: 0; margin-right: 100%; }
156+
border: none;
157+
padding-left: 0px !important;
158+
margin-right: 0px;
159+
background-color: transparent;
160+
}
161+
/* Sizes */
162+
.Half {
163+
flex: 0 0 calc(50% - 8px);
164+
}
165+
.Third {
166+
flex: 0 0 calc(33.333% - 8px);
167+
}
168+
.Quarter,
169+
.OneFourth {
170+
flex: 0 0 calc(25% - 8px);
171+
}
172+
.ThreeFourths {
173+
flex: 0 0 calc(75% - 8px);
174+
}
175+
.Fifth,
176+
.OneFifth {
177+
flex: 0 0 calc(20% - 8px);
178+
}
179+
.TwoFifths {
180+
flex: 0 0 calc(40% - 8px);
181+
}
182+
.ThreeFifths {
183+
flex: 0 0 calc(60% - 8px);
184+
}
185+
.OneThird {
186+
flex: 0 0 calc(33.333% - 8px);
187+
}
188+
.TwoThirds {
189+
flex: 0 0 calc(66.666% - 8px);
190+
}
191+
.Column {
192+
flex-direction: column;
193+
flex-wrap: nowrap;
194+
}
195+
.Column > .DataField {
196+
flex-direction: row;
197+
}
198+
.Column > .DataField > label {
199+
padding-right: 5px;
200+
}
201+
.Column > .header {
202+
width: 0;
203+
margin-right: 100%;
204+
}
100205
.AutoSize > .scroll-container > div > table div {
101-
height:100% !important;
102-
max-height:fit-content !important;
103-
overflow-y:hidden;
206+
height: 100% !important;
207+
max-height: fit-content !important;
208+
overflow-y: hidden;
209+
}
210+
.Shy {
211+
width: 100%;
212+
}
213+
.Shy > label {
214+
width: fit-content;
215+
margin-right: auto;
216+
}
217+
.Shy > input {
218+
margin-right: 8px;
104219
}
105-
.Shy {width:100%}
106-
.Shy > label{ width:fit-content; margin-right:auto;}
107-
.Shy > input {margin-right:8px;}
108220
@font-face {
109221
font-family: "MesloLGS NF Regular";
110222
src: url("../Fonts/MesloLGS-NF-Regular.ttf") format("truetype");
111223
}
112-
/*in progress*/
113-
.Icon { font-family: "MesloLGS NF Regular"; order: 0;}
114-
.Icon > label { font-size: x-large; }
115-
.Icon > input { display: none; }
116-
/*Makes section-add button blue*/
117-
button[id="delete-section"] { color: #1ebcc5; } /*Change off color*/
118-
/*LIGHT-MODE changes the confirmation color*/
224+
/* in progress */
225+
.Icon {
226+
font-family: "MesloLGS NF Regular";
227+
order: 0;
228+
}
229+
.Icon > label {
230+
font-size: x-large;
231+
}
232+
.Icon > input {
233+
display: none;
234+
}
235+
/* Makes section-add button blue */
236+
button[id="delete-section"] {
237+
color: var(--grp-teal-2);
238+
}
239+
/* LIGHT-MODE changes the confirmation color */
119240
.lite-mode .confirmed {
120241
background-color: rgb(105, 205, 180);
121-
}
122-
select { position: relative; padding-left: 4px; }
123-
select[multiple] { height: 6em; }
242+
}
243+
select {
244+
position: relative;
245+
padding-left: 4px;
246+
}
247+
select[multiple] {
248+
height: 6em;
249+
}
124250
select:after {
125251
content: "A\25BC";
126252
position: absolute;
127253
right: 0.5em;
128254
top: 50%;
129-
/*transform: translateY(-30%);*/
130-
pointer-events: none;
131255
}
132256
select::before {
133257
content: "B";

0 commit comments

Comments
 (0)