Skip to content

Instantly share code, notes, and snippets.

@gswalden

gswalden/egg-cartons.css

Created September 23, 2015 14:28
Show Gist options
  • Save gswalden/cdd7d6ea4d437e8323f4 to your computer and use it in GitHub Desktop.
Save gswalden/cdd7d6ea4d437e8323f4 to your computer and use it in GitHub Desktop.
Download ZIP
egg cartons core compiled
Raw
egg-cartons.css
* {
box-sizing: border-box
}
.box {
position: relative;
width: 100%;
max-width: 1020px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box
}
.carton {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 -15px;
box-sizing: border-box
}
[class*=egg] {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
padding: 0 15px
}
.egg-1,
.one-egg,
.one-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.33333333%;
-ms-flex: 0 0 8.33333333%;
flex: 0 0 8.33333333%;
max-width: 8.33333333%
}
.eat-1,
.eat-one-egg,
.eat-one-eggs {
margin-left: 8.33333333%
}
.egg-2,
.two-egg,
.two-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.66666667%;
-ms-flex: 0 0 16.66666667%;
flex: 0 0 16.66666667%;
max-width: 16.66666667%
}
.eat-2,
.eat-two-egg,
.eat-two-eggs {
margin-left: 16.66666667%
}
.egg-3,
.three-egg,
.three-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-3,
.eat-three-egg,
.eat-three-eggs {
margin-left: 25%
}
.egg-1-4,
.one-fourth-egg,
.one-fourth-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-1-4,
.eat-one-fourth-egg,
.eat-one-fourth-eggs {
margin-left: 25%
}
.egg-4,
.four-egg,
.four-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-4,
.eat-four-egg,
.eat-four-eggs {
margin-left: 33.33333333%
}
.egg-1-3,
.one-third-egg,
.one-third-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-1-3,
.eat-one-third-egg,
.eat-one-third-eggs {
margin-left: 33.33333333%
}
.egg-5,
.five-egg,
.five-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.66666667%;
-ms-flex: 0 0 41.66666667%;
flex: 0 0 41.66666667%;
max-width: 41.66666667%
}
.eat-5,
.eat-five-egg,
.eat-five-eggs {
margin-left: 41.66666667%
}
.egg-6,
.six-egg,
.six-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-6,
.eat-six-egg,
.eat-six-eggs {
margin-left: 50%
}
.egg-1-2,
.one-half-egg,
.one-half-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-1-2,
.eat-one-half-egg,
.eat-one-half-eggs {
margin-left: 50%
}
.egg-7,
.seven-egg,
.seven-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.33333333%;
-ms-flex: 0 0 58.33333333%;
flex: 0 0 58.33333333%;
max-width: 58.33333333%
}
.eat-7,
.eat-seven-egg,
.eat-seven-eggs {
margin-left: 58.33333333%
}
.egg-8,
.eight-egg,
.eight-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-8,
.eat-eight-egg,
.eat-eight-eggs {
margin-left: 66.66666667%
}
.egg-2-3,
.two-thirds-egg,
.two-thirds-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-2-3,
.eat-two-thirds-egg,
.eat-two-thirds-eggs {
margin-left: 66.66666667%
}
.egg-9,
.nine-egg,
.nine-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-9,
.eat-nine-egg,
.eat-nine-eggs {
margin-left: 75%
}
.egg-3-4,
.three-fourths-egg,
.three-fourths-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-3-4,
.eat-three-fourths-egg,
.eat-three-fourths-eggs {
margin-left: 75%
}
.egg-10,
.ten-egg,
.ten-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.33333333%;
-ms-flex: 0 0 83.33333333%;
flex: 0 0 83.33333333%;
max-width: 83.33333333%
}
.eat-10,
.eat-ten-egg,
.eat-ten-eggs {
margin-left: 83.33333333%
}
.egg-11,
.eleven-egg,
.eleven-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.66666667%;
-ms-flex: 0 0 91.66666667%;
flex: 0 0 91.66666667%;
max-width: 91.66666667%
}
.eat-11,
.eat-eleven-egg,
.eat-eleven-eggs {
margin-left: 91.66666667%
}
.egg-12,
.egg-all,
.twelve-egg,
.twelve-eggs,
.whole-egg,
.whole-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.first {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.start {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.no-gutter {
margin: 0
}
.no-gutter [class*=egg] {
padding: 0
}
.top {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.horizontal {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
@media (min-width: 768px) {
.egg-1-md,
.one-md-egg,
.one-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.33333333%;
-ms-flex: 0 0 8.33333333%;
flex: 0 0 8.33333333%;
max-width: 8.33333333%
}
.eat-1-md,
.eat-one-md-egg,
.eat-one-md-eggs {
margin-left: 8.33333333%
}
.egg-2-md,
.two-md-egg,
.two-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.66666667%;
-ms-flex: 0 0 16.66666667%;
flex: 0 0 16.66666667%;
max-width: 16.66666667%
}
.eat-2-md,
.eat-two-md-egg,
.eat-two-md-eggs {
margin-left: 16.66666667%
}
.egg-3-md,
.three-md-egg,
.three-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-3-md,
.eat-three-md-egg,
.eat-three-md-eggs {
margin-left: 25%
}
.egg-1-4-md,
.one-fourth-md-egg,
.one-fourth-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-1-4-md,
.eat-one-fourth-md-egg,
.eat-one-fourth-md-eggs {
margin-left: 25%
}
.egg-4-md,
.four-md-egg,
.four-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-4-md,
.eat-four-md-egg,
.eat-four-md-eggs {
margin-left: 33.33333333%
}
.egg-1-3-md,
.one-third-md-egg,
.one-third-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-1-3-md,
.eat-one-third-md-egg,
.eat-one-third-md-eggs {
margin-left: 33.33333333%
}
.egg-5-md,
.five-md-egg,
.five-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.66666667%;
-ms-flex: 0 0 41.66666667%;
flex: 0 0 41.66666667%;
max-width: 41.66666667%
}
.eat-5-md,
.eat-five-md-egg,
.eat-five-md-eggs {
margin-left: 41.66666667%
}
.egg-6-md,
.six-md-egg,
.six-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-6-md,
.eat-six-md-egg,
.eat-six-md-eggs {
margin-left: 50%
}
.egg-1-2-md,
.one-half-md-egg,
.one-half-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-1-2-md,
.eat-one-half-md-egg,
.eat-one-half-md-eggs {
margin-left: 50%
}
.egg-7-md,
.seven-md-egg,
.seven-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.33333333%;
-ms-flex: 0 0 58.33333333%;
flex: 0 0 58.33333333%;
max-width: 58.33333333%
}
.eat-7-md,
.eat-seven-md-egg,
.eat-seven-md-eggs {
margin-left: 58.33333333%
}
.egg-8-md,
.eight-md-egg,
.eight-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-8-md,
.eat-eight-md-egg,
.eat-eight-md-eggs {
margin-left: 66.66666667%
}
.egg-2-3-md,
.two-thirds-md-egg,
.two-thirds-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-2-3-md,
.eat-two-thirds-md-egg,
.eat-two-thirds-md-eggs {
margin-left: 66.66666667%
}
.egg-9-md,
.nine-md-egg,
.nine-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-9-md,
.eat-nine-md-egg,
.eat-nine-md-eggs {
margin-left: 75%
}
.egg-3-4-md,
.three-fourths-md-egg,
.three-fourths-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-3-4-md,
.eat-three-fourths-md-egg,
.eat-three-fourths-md-eggs {
margin-left: 75%
}
.egg-10-md,
.ten-md-egg,
.ten-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.33333333%;
-ms-flex: 0 0 83.33333333%;
flex: 0 0 83.33333333%;
max-width: 83.33333333%
}
.eat-10-md,
.eat-ten-md-egg,
.eat-ten-md-eggs {
margin-left: 83.33333333%
}
.egg-11-md,
.eleven-md-egg,
.eleven-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.66666667%;
-ms-flex: 0 0 91.66666667%;
flex: 0 0 91.66666667%;
max-width: 91.66666667%
}
.eat-11-md,
.eat-eleven-md-egg,
.eat-eleven-md-eggs {
margin-left: 91.66666667%
}
.egg-12-md,
.egg-all-md,
.twelve-md-egg,
.twelve-md-eggs,
.whole-md-egg,
.whole-md-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.first-at-md {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-at-md {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.start-at-md {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-at-md {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-at-md {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.no-gutter-at-md {
margin: 0
}
.no-gutter-at-md [class*=egg] {
padding: 0
}
.top-at-md {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-at-md {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-at-md {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.reverse-at-md {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.vertical-at-md {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.horizontal-at-md {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
}
@media (min-width: 992px) {
.egg-1-lg,
.one-lg-egg,
.one-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.33333333%;
-ms-flex: 0 0 8.33333333%;
flex: 0 0 8.33333333%;
max-width: 8.33333333%
}
.eat-1-lg,
.eat-one-lg-egg,
.eat-one-lg-eggs {
margin-left: 8.33333333%
}
.egg-2-lg,
.two-lg-egg,
.two-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.66666667%;
-ms-flex: 0 0 16.66666667%;
flex: 0 0 16.66666667%;
max-width: 16.66666667%
}
.eat-2-lg,
.eat-two-lg-egg,
.eat-two-lg-eggs {
margin-left: 16.66666667%
}
.egg-3-lg,
.three-lg-egg,
.three-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-3-lg,
.eat-three-lg-egg,
.eat-three-lg-eggs {
margin-left: 25%
}
.egg-1-4-lg,
.one-fourth-lg-egg,
.one-fourth-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.eat-1-4-lg,
.eat-one-fourth-lg-egg,
.eat-one-fourth-lg-eggs {
margin-left: 25%
}
.egg-4-lg,
.four-lg-egg,
.four-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-4-lg,
.eat-four-lg-egg,
.eat-four-lg-eggs {
margin-left: 33.33333333%
}
.egg-1-3-lg,
.one-third-lg-egg,
.one-third-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
}
.eat-1-3-lg,
.eat-one-third-lg-egg,
.eat-one-third-lg-eggs {
margin-left: 33.33333333%
}
.egg-5-lg,
.five-lg-egg,
.five-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.66666667%;
-ms-flex: 0 0 41.66666667%;
flex: 0 0 41.66666667%;
max-width: 41.66666667%
}
.eat-5-lg,
.eat-five-lg-egg,
.eat-five-lg-eggs {
margin-left: 41.66666667%
}
.egg-6-lg,
.six-lg-egg,
.six-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-6-lg,
.eat-six-lg-egg,
.eat-six-lg-eggs {
margin-left: 50%
}
.egg-1-2-lg,
.one-half-lg-egg,
.one-half-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.eat-1-2-lg,
.eat-one-half-lg-egg,
.eat-one-half-lg-eggs {
margin-left: 50%
}
.egg-7-lg,
.seven-lg-egg,
.seven-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.33333333%;
-ms-flex: 0 0 58.33333333%;
flex: 0 0 58.33333333%;
max-width: 58.33333333%
}
.eat-7-lg,
.eat-seven-lg-egg,
.eat-seven-lg-eggs {
margin-left: 58.33333333%
}
.egg-8-lg,
.eight-lg-egg,
.eight-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-8-lg,
.eat-eight-lg-egg,
.eat-eight-lg-eggs {
margin-left: 66.66666667%
}
.egg-2-3-lg,
.two-thirds-lg-egg,
.two-thirds-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
}
.eat-2-3-lg,
.eat-two-thirds-lg-egg,
.eat-two-thirds-lg-eggs {
margin-left: 66.66666667%
}
.egg-9-lg,
.nine-lg-egg,
.nine-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-9-lg,
.eat-nine-lg-egg,
.eat-nine-lg-eggs {
margin-left: 75%
}
.egg-3-4-lg,
.three-fourths-lg-egg,
.three-fourths-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.eat-3-4-lg,
.eat-three-fourths-lg-egg,
.eat-three-fourths-lg-eggs {
margin-left: 75%
}
.egg-10-lg,
.ten-lg-egg,
.ten-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.33333333%;
-ms-flex: 0 0 83.33333333%;
flex: 0 0 83.33333333%;
max-width: 83.33333333%
}
.eat-10-lg,
.eat-ten-lg-egg,
.eat-ten-lg-eggs {
margin-left: 83.33333333%
}
.egg-11-lg,
.eleven-lg-egg,
.eleven-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.66666667%;
-ms-flex: 0 0 91.66666667%;
flex: 0 0 91.66666667%;
max-width: 91.66666667%
}
.eat-11-lg,
.eat-eleven-lg-egg,
.eat-eleven-lg-eggs {
margin-left: 91.66666667%
}
.egg-12-lg,
.egg-all-lg,
.twelve-lg-egg,
.twelve-lg-eggs,
.whole-lg-egg,
.whole-lg-eggs {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.first-at-lg {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-at-lg {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.start-at-lg {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-at-lg {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-at-lg {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.no-gutter-at-lg {
margin: 0
}
.no-gutter-at-lg [class*=egg] {
padding: 0
}
.top-at-lg {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-at-lg {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-at-lg {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.reverse-at-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.vertical-at-lg {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.horizontal-at-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment