media and autogrid without o- prefix

This commit is contained in:
Raphael Goetter 2017-08-01 17:00:16 +02:00
parent 9ff52d9858
commit 319b116243
4 changed files with 30 additions and 37 deletions

View File

@ -1732,7 +1732,7 @@ ul.is-unstyled, ul.unstyled {
/* ----------------------------- */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: 576px) {
.o-media {
.media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -1740,27 +1740,21 @@ ul.is-unstyled, ul.unstyled {
-ms-flex-align: start;
align-items: flex-start;
}
.o-media-content {
.media-media-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
/* avoid min-width:auto */
}
.media-figure--center {
-ms-flex-item-align: center;
align-self: center;
}
/* Media variants */
@media (min-width: 576px) {
.o-media--reverse {
.media--reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.o-media-figure--center {
-ms-flex-item-align: center;
align-self: center;
}
}
/* ----------------------------- */
@ -1768,19 +1762,19 @@ ul.is-unstyled, ul.unstyled {
/* ----------------------------- */
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
@media (min-width: 576px) {
.o-autogrid {
.autogrid {
display: -ms-grid;
display: grid;
grid-auto-flow: column;
grid-auto-column: 1fr;
}
.o-autogrid.has-gutter {
.autogrid.has-gutter {
grid-column-gap: 1rem;
}
.o-autogrid.has-gutter-l {
.autogrid.has-gutter-l {
grid-column-gap: 2rem;
}
.o-autogrid.has-gutter-xl {
.autogrid.has-gutter-xl {
grid-column-gap: 4rem;
}
}
@ -2109,12 +2103,14 @@ button:focus {
.btn--small,
.button--small {
font-size: 1rem;
padding: 0.7rem 1rem;
font-size: .8em;
}
.btn--big,
.button--big {
font-size: 1.8rem;
padding: 1.5rem 2rem;
font-size: 1.4em;
}
.btn--block,

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,7 @@
/* ----------------------------- */
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
.o-autogrid {
.autogrid {
@media (min-width: $small) {
display: grid;
grid-auto-flow: column;

View File

@ -4,24 +4,21 @@
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: $small) {
.o-media {
.media {
display: flex;
align-items: flex-start;
}
.o-media-content {
&-media-content {
flex: 1;
min-width: 0; /* avoid min-width:auto */
}
}
/* Media variants */
@media (min-width: $small) {
.o-media--reverse {
flex-direction: row-reverse;
}
.o-media-figure--center {
// vertical align image
&-figure--center {
align-self: center;
}
// reverse variant
&--reverse {
flex-direction: row-reverse;
}
}
}