Skip to content

Commit 28b3a25

Browse files
jlukicjlukic
committed
Moving whole grid to flex
1 parent e15f251 commit 28b3a25

File tree

17 files changed

+655
-317
lines changed

17 files changed

+655
-317
lines changed

‎dist/components/container.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@
3232
margin-right: auto !important;
3333
}
3434
}
35-
@media only screen and (min-width: 988px) and (max-width: 1228px) {
35+
@media only screen and (min-width: 988px) and (max-width: 1148px) {
3636
.ui.container {
3737
width: 960px;
3838
margin-left: auto !important;
3939
margin-right: auto !important;
4040
}
4141
}
42-
@media only screen and (min-width: 1228px) {
42+
@media only screen and (min-width: 1148px) {
4343
.ui.container {
44-
width: 1200px;
44+
width: 1120px;
4545
margin-left: auto !important;
4646
margin-right: auto !important;
4747
}
@@ -58,7 +58,7 @@
5858
max-width: 700px !important;
5959
line-height: 1.5;
6060
}
61-
.ui.text.container p {
61+
.ui.text.container {
6262
font-size: 1.14285714rem;
6363
}
6464

‎dist/components/container.min.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
* Released under the MIT license
88
* http://opensource.org/licenses/MIT
99
*
10-
*/.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:988px)and (max-width:1228px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:1228px){.ui.container{width:1200px;margin-left:auto!important;margin-right:auto!important}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5}.ui.text.container p{font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}
10+
*/.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:988px)and (max-width:1148px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:1148px){.ui.container{width:1120px;margin-left:auto!important;margin-right:auto!important}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5;font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}

‎dist/components/grid.css‎

Lines changed: 37 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,24 @@
1515
*******************************/
1616

1717
.ui.grid {
18-
display: block;
19-
text-align: left;
20-
font-size: 0em;
18+
display: -webkit-box;
19+
display: -webkit-flex;
20+
display: -ms-flexbox;
21+
display: flex;
22+
-webkit-box-orient: horizontal;
23+
-webkit-box-direction: normal;
24+
-webkit-flex-direction: row;
25+
-ms-flex-direction: row;
26+
flex-direction: row;
27+
-webkit-flex-wrap: wrap;
28+
-ms-flex-wrap: wrap;
29+
flex-wrap: wrap;
30+
-webkit-box-align: start;
31+
-webkit-align-items: flex-start;
32+
-ms-flex-align: start;
33+
align-items: flex-start;
2134
padding: 0em;
2235
}
23-
.ui.grid:after,
24-
.ui.grid > .row:after {
25-
content: '';
26-
display: block;
27-
height: 0px;
28-
clear: both;
29-
visibility: hidden;
30-
}
3136

3237
/*----------------------
3338
Remove Gutters
@@ -63,7 +68,6 @@
6368
.ui.grid > .row > .column {
6469
position: relative;
6570
display: inline-block;
66-
font-size: 1rem;
6771
width: 6.25%;
6872
padding-left: 1rem;
6973
padding-right: 1rem;
@@ -80,10 +84,24 @@
8084

8185
.ui.grid > .row {
8286
position: relative;
83-
display: block;
84-
width: auto !important;
87+
display: -webkit-box;
88+
display: -webkit-flex;
89+
display: -ms-flexbox;
90+
display: flex;
91+
-webkit-box-orient: horizontal;
92+
-webkit-box-direction: normal;
93+
-webkit-flex-direction: row;
94+
-ms-flex-direction: row;
95+
flex-direction: row;
96+
-webkit-flex-wrap: wrap;
97+
-ms-flex-wrap: wrap;
98+
flex-wrap: wrap;
99+
-webkit-box-align: start;
100+
-webkit-align-items: flex-start;
101+
-ms-flex-align: start;
102+
align-items: flex-start;
103+
width: 100% !important;
85104
padding: 0rem;
86-
font-size: 0rem;
87105
padding-top: 1rem;
88106
padding-bottom: 1rem;
89107
}
@@ -193,8 +211,8 @@ body > .ui.grid {
193211
width: auto;
194212
margin-left: 0em;
195213
margin-right: 0em;
196-
padding-left: 15%;
197-
padding-right: 15%;
214+
padding-left: 18%;
215+
padding-right: 18%;
198216
}
199217
}
200218
@media only screen and (min-width: 1920px) {
@@ -1018,9 +1036,11 @@ body > .ui.grid {
10181036

10191037
.ui.grid [class*="left floated"].column {
10201038
float: left;
1039+
margin-right: auto;
10211040
}
10221041
.ui.grid [class*="right floated"].column {
10231042
float: right;
1043+
margin-left: auto;
10241044
}
10251045

10261046
/*----------------------
@@ -1458,39 +1478,6 @@ body > .ui.grid {
14581478
Equal Height
14591479
-----------------------*/
14601480

1461-
.ui[class*="equal height"].grid {
1462-
display: table;
1463-
table-layout: fixed;
1464-
}
1465-
.ui[class*="equal height"].grid > .row,
1466-
.ui.grid > [class*="equal height"].row {
1467-
display: table;
1468-
table-layout: fixed;
1469-
width: 100% !important;
1470-
}
1471-
.ui[class*="equal height"].grid > .column:not(.row),
1472-
.ui[class*="equal height"].grid > .row > .column,
1473-
.ui.grid > [class*="equal height"].row > .column {
1474-
display: table-cell;
1475-
}
1476-
1477-
/* Flexbox (Experimental / Overrides Where Supported) */
1478-
.ui[class*="equal height"].grid,
1479-
.ui[class*="equal height"].grid > .row,
1480-
.ui.grid > [class*="equal height"].row {
1481-
display: -webkit-box;
1482-
display: -webkit-flex;
1483-
display: -ms-flexbox;
1484-
display: flex;
1485-
-webkit-box-orient: horizontal;
1486-
-webkit-box-direction: normal;
1487-
-webkit-flex-direction: row;
1488-
-ms-flex-direction: row;
1489-
flex-direction: row;
1490-
-webkit-flex-wrap: wrap;
1491-
-ms-flex-wrap: wrap;
1492-
flex-wrap: wrap;
1493-
}
14941481
.ui[class*="equal height"].grid > .column:not(.row),
14951482
.ui[class*="equal height"].grid > .row > .column,
14961483
.ui.grid > [class*="equal height"].row > .column {
@@ -1505,39 +1492,6 @@ body > .ui.grid {
15051492
Equal Width
15061493
-----------------------*/
15071494

1508-
.ui[class*="equal width"].grid {
1509-
display: table;
1510-
table-layout: fixed;
1511-
}
1512-
.ui[class*="equal width"].grid > .row,
1513-
.ui.grid > [class*="equal width"].row {
1514-
display: table;
1515-
table-layout: fixed;
1516-
width: 100% !important;
1517-
}
1518-
.ui[class*="equal width"].grid > .column:not(.row),
1519-
.ui[class*="equal width"].grid > .row > .column,
1520-
.ui.grid > [class*="equal width"].row > .column {
1521-
display: table-cell;
1522-
}
1523-
1524-
/* Flexbox (Experimental / Overrides Where Supported) */
1525-
.ui[class*="equal width"].grid,
1526-
.ui[class*="equal width"].grid > .row,
1527-
.ui.grid > [class*="equal width"].row {
1528-
display: -webkit-box;
1529-
display: -webkit-flex;
1530-
display: -ms-flexbox;
1531-
display: flex;
1532-
-webkit-box-orient: horizontal;
1533-
-webkit-box-direction: normal;
1534-
-webkit-flex-direction: row;
1535-
-ms-flex-direction: row;
1536-
flex-direction: row;
1537-
-webkit-flex-wrap: wrap;
1538-
-ms-flex-wrap: wrap;
1539-
flex-wrap: wrap;
1540-
}
15411495
.ui[class*="equal width"].grid > .column:not(.row),
15421496
.ui[class*="equal width"].grid > .row > .column,
15431497
.ui.grid > [class*="equal width"].row > .column {

‎dist/components/grid.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/components/menu.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@
246246
/* Menu Items */
247247
.ui.menu .ui.dropdown .menu > .item {
248248
font-size: 1em !important;
249-
padding: 0.92857143em 1.14285714em !important;
249+
padding: 0.71428571em 1.14285714em !important;
250250
background: transparent !important;
251251
color: rgba(0, 0, 0, 0.8) !important;
252252
text-transform: none !important;

‎dist/components/menu.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)