deepcrayon/lila
deepcrayon/lila
1
0
Fork 0
Code Releases Activity

generic .box__top flex gutters

Browse source
This commit is contained in:
Thibault Duplessis 2019-04-30 08:14:16 +07:00
parent 4af334a0aa
commit e1cd85d16a
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/analyse/css/study/_index.scss
View file

@ -5,6 +5,12 @@ $top-height: 3.2rem;
.study-index {
.box__top {
@extend %flex-center;
/* flex gutters, waiting for row-gap to be implemented for flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items */
margin: 0 0 -1em -1em;
> * { margin: 0 0 1em 1em; }
/* end of flex gutter hack */
.search {
flex: 3 1 auto;
display: flex;

11
ui/common/css/component/_box.scss
View file

@ -17,16 +17,17 @@ $vp-max-width: 1200px;
&__top {
@extend %flex-between, %box-padding;
/* flex gutters, waiting for row-gap to be implemented for flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items */
margin: 0 0 -1em -1em;
> * { margin: 0 0 1em 1em; }
/* end of flex gutter hack */
h1 {
margin: 0;
}
&__actions {
@extend %flex-wrap;
/* flex gutters, waiting for row-gap to be implemented for flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items */
margin-bottom: -1em;
> * { margin: 0 0 1em 1em; }
/* end of flex gutter hack */
.button {
@extend %flex-center;
}