dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

media and autogrid without o- prefix

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

32
css/knacss-unminified.css
View file

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

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

2
sass/components/autogrid.scss
View file

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

21
sass/components/media.scss
View file

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