Reduce grid gutter

This commit is contained in:
grandeljay 2022-02-23 22:46:34 +01:00
parent f3428e87d6
commit e45e1de224
33 changed files with 129 additions and 129 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -46,7 +46,7 @@
margin-right: auto;
}
.ui.ui.ui.grid.container {
width: calc(975px + 2rem);
width: calc(975px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
width: calc(975px + 3rem);
@ -64,7 +64,7 @@
margin-right: auto;
}
.ui.ui.ui.grid.container {
width: calc(927px + 2rem);
width: calc(927px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
width: calc(927px + 3rem);
@ -82,7 +82,7 @@
margin-right: auto;
}
.ui.ui.ui.grid.container {
width: calc(1119px + 2rem);
width: calc(1119px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
width: calc(1119px + 3rem);

View file

@ -6,4 +6,4 @@
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/.ui.container{display:block;max-width:100%}@media only screen and (max-width:1023.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:1024px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:975px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(975px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(975px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(975px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.16666667rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
*/.ui.container{display:block;max-width:100%}@media only screen and (max-width:1023.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:1024px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:975px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(975px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(975px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(975px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.16666667rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -34,10 +34,10 @@
-----------------------*/
.ui.grid {
margin-top: -1rem;
margin-bottom: -1rem;
margin-left: -1rem;
margin-right: -1rem;
margin-top: -0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.ui.relaxed.grid {
margin-left: -1.5rem;
@ -50,7 +50,7 @@
/* Preserve Rows Spacing on Consecutive Grids */
.ui.grid + .grid {
margin-top: 1rem;
margin-top: 0.5rem;
}
/*-------------------
@ -64,13 +64,13 @@
position: relative;
display: inline-block;
width: 6.25%;
padding-left: 1rem;
padding-right: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
vertical-align: top;
}
.ui.grid > * {
padding-left: 1rem;
padding-right: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/*-------------------
@ -96,8 +96,8 @@
align-items: stretch;
width: 100% !important;
padding: 0;
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/*-------------------
@ -107,8 +107,8 @@
/* Vertical padding when no rows */
.ui.grid > .column:not(.row) {
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.ui.grid > .row > .column {
margin-top: 0;
@ -148,10 +148,10 @@
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 1rem 1rem;
margin: 0.5rem 0.5rem;
}
.ui.grid .column + .ui.vertical.divider {
height: calc(50% - 1rem);
height: calc(50% - 0.5rem);
}
/* Remove Border on Last Horizontal Segment */
@ -1051,8 +1051,8 @@
/* Swap from padding to margin on columns to have dividers align */
.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-top: 0;
padding-bottom: 0;
}
@ -1092,9 +1092,9 @@
content: "";
top: 0;
left: 0;
width: calc(100% - 2rem);
width: calc(100% - 1rem);
height: 1px;
margin: 0 1rem;
margin: 0 0.5rem;
-webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
@ -1614,8 +1614,8 @@
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
display: inline-block !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin: 0;
@ -1706,8 +1706,8 @@
}
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
margin: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
@ -1810,7 +1810,7 @@
margin: 0 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 1rem 1rem;
padding: 0.5rem 0.5rem;
}
.ui.stackable.grid:not(.vertically) > .row {
margin: 0;
@ -1827,8 +1827,8 @@
/* Don't pad inside segment or nested grid */
.ui.grid .ui.stackable.grid,
.ui.segment:not(.vertical) .ui.stackable.page.grid {
margin-left: -1rem !important;
margin-right: -1rem !important;
margin-left: -0.5rem !important;
margin-right: -0.5rem !important;
}
/* Divided Stackable */
@ -1851,8 +1851,8 @@
border-top: 1px solid rgba(34, 36, 38, 0.15);
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-top: 2rem !important;
padding-bottom: 2rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.ui.stackable.celled.grid > .row {
-webkit-box-shadow: none !important;
@ -1999,30 +1999,30 @@
-----------------*/
.ui.ui.ui.compact.grid {
margin: -0.5rem;
margin: -0.25rem;
}
.ui.ui.ui.compact.grid > .column:not(.row),
.ui.ui.ui.compact.grid > .row > .column {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ui.ui.ui.compact.grid > * {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Row */
.ui.ui.ui.compact.grid > .row {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0;
padding-right: 0;
}
/* Columns */
.ui.ui.ui.compact.grid > .column:not(.row) {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* Relaxed + Celled */
@ -2040,30 +2040,30 @@
-----------------*/
.ui.ui.ui[class*="very compact"].grid {
margin: -0.25rem;
margin: -0.125rem;
}
.ui.ui.ui[class*="very compact"].grid > .column:not(.row),
.ui.ui.ui[class*="very compact"].grid > .row > .column {
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.ui.ui.ui[class*="very compact"].grid > * {
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
/* Row */
.ui.ui.ui[class*="very compact"].grid > .row {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
padding-left: 0;
padding-right: 0;
}
/* Columns */
.ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
/* Relaxed + Celled */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -5725,7 +5725,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
}
.ui.ui.ui.grid.container {
width: calc(975px + 2rem);
width: calc(975px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
@ -5747,7 +5747,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
}
.ui.ui.ui.grid.container {
width: calc(927px + 2rem);
width: calc(927px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
@ -5769,7 +5769,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
}
.ui.ui.ui.grid.container {
width: calc(1119px + 2rem);
width: calc(1119px + 1rem);
}
.ui.ui.ui.relaxed.grid.container {
@ -43420,10 +43420,10 @@ span.ui.massive.text {
-----------------------*/
.ui.grid {
margin-top: -1rem;
margin-bottom: -1rem;
margin-left: -1rem;
margin-right: -1rem;
margin-top: -0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.ui.relaxed.grid {
@ -43439,7 +43439,7 @@ span.ui.massive.text {
/* Preserve Rows Spacing on Consecutive Grids */
.ui.grid + .grid {
margin-top: 1rem;
margin-top: 0.5rem;
}
/*-------------------
@ -43453,14 +43453,14 @@ span.ui.massive.text {
position: relative;
display: inline-block;
width: 6.25%;
padding-left: 1rem;
padding-right: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
vertical-align: top;
}
.ui.grid > * {
padding-left: 1rem;
padding-right: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/*-------------------
@ -43486,8 +43486,8 @@ span.ui.massive.text {
align-items: stretch;
width: 100% !important;
padding: 0;
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/*-------------------
@ -43497,8 +43497,8 @@ span.ui.massive.text {
/* Vertical padding when no rows */
.ui.grid > .column:not(.row) {
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.ui.grid > .row > .column {
@ -43542,11 +43542,11 @@ span.ui.massive.text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 1rem 1rem;
margin: 0.5rem 0.5rem;
}
.ui.grid .column + .ui.vertical.divider {
height: calc(50% - 1rem);
height: calc(50% - 0.5rem);
}
/* Remove Border on Last Horizontal Segment */
@ -44585,8 +44585,8 @@ span.ui.massive.text {
.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-top: 0;
padding-bottom: 0;
}
@ -44633,9 +44633,9 @@ span.ui.massive.text {
content: "";
top: 0;
left: 0;
width: calc(100% - 2rem);
width: calc(100% - 1rem);
height: 1px;
margin: 0 1rem;
margin: 0 0.5rem;
-webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
@ -45219,8 +45219,8 @@ span.ui.massive.text {
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
display: inline-block !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin: 0;
@ -45328,8 +45328,8 @@ span.ui.massive.text {
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
margin: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
@ -45448,7 +45448,7 @@ span.ui.massive.text {
margin: 0 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 1rem 1rem;
padding: 0.5rem 0.5rem;
}
.ui.stackable.grid:not(.vertically) > .row {
@ -45468,8 +45468,8 @@ span.ui.massive.text {
.ui.grid .ui.stackable.grid,
.ui.segment:not(.vertical) .ui.stackable.page.grid {
margin-left: -1rem !important;
margin-right: -1rem !important;
margin-left: -0.5rem !important;
margin-right: -0.5rem !important;
}
/* Divided Stackable */
@ -45495,8 +45495,8 @@ span.ui.massive.text {
border-top: 1px solid rgba(34, 36, 38, 0.15);
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-top: 2rem !important;
padding-bottom: 2rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.ui.stackable.celled.grid > .row {
@ -45661,25 +45661,25 @@ span.ui.massive.text {
-----------------*/
.ui.ui.ui.compact.grid {
margin: -0.5rem;
margin: -0.25rem;
}
.ui.ui.ui.compact.grid > .column:not(.row),
.ui.ui.ui.compact.grid > .row > .column {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ui.ui.ui.compact.grid > * {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Row */
.ui.ui.ui.compact.grid > .row {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0;
padding-right: 0;
}
@ -45687,8 +45687,8 @@ span.ui.massive.text {
/* Columns */
.ui.ui.ui.compact.grid > .column:not(.row) {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* Relaxed + Celled */
@ -45708,25 +45708,25 @@ span.ui.massive.text {
-----------------*/
.ui.ui.ui[class*="very compact"].grid {
margin: -0.25rem;
margin: -0.125rem;
}
.ui.ui.ui[class*="very compact"].grid > .column:not(.row),
.ui.ui.ui[class*="very compact"].grid > .row > .column {
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.ui.ui.ui[class*="very compact"].grid > * {
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
/* Row */
.ui.ui.ui[class*="very compact"].grid > .row {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
padding-left: 0;
padding-right: 0;
}
@ -45734,8 +45734,8 @@ span.ui.massive.text {
/* Columns */
.ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
/* Relaxed + Celled */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -16,8 +16,8 @@
@minWidth: 320px;
@gutterWidth: 2rem;
@rowSpacing: 2rem;
@gutterWidth: 1rem;
@rowSpacing: 1rem;
@tableWidth: e(%("calc(100%% + %d)", @gutterWidth));
@columnMaxImageWidth: 100%;

View file

@ -28,7 +28,7 @@
@largeMonitorGutter: auto;
/* Coupling (Add Negative Margin to container size) */
@gridGutterWidth: 2rem;
@gridGutterWidth: 1rem;
@relaxedGridGutterWidth: 3rem;
@veryRelaxedGridGutterWidth: 5rem;