spee.ch/client/scss/_horizontal-split.scss

63 lines
1.2 KiB
SCSS
Raw Normal View History

.horizontal-split {
2018-11-08 19:44:59 -05:00
max-width: $width-content-constrained;
width: 100%;
display : flex;
flex-direction : row;
2019-01-25 19:37:07 -05:00
justify-content: center;
box-sizing: border-box;
2018-11-10 14:59:53 -05:00
&.horizontal-split--mobile-collapse {
2019-01-25 19:37:07 -05:00
@media (max-width: $break-point-tablet) {
2018-11-10 14:59:53 -05:00
flex-direction: column;
.horizontal-split__column {
}
2019-01-25 19:37:07 -05:00
.horizontal-split__column--left {
padding-top: $thin-padding;
}
2018-11-10 14:59:53 -05:00
.horizontal-split__column--right {
2019-01-25 19:37:07 -05:00
padding-top: $thin-padding;
2018-11-10 14:59:53 -05:00
}
}
}
};
2018-06-10 16:07:15 -07:00
2018-11-08 19:44:59 -05:00
.horizontal-split__column {
2019-01-25 19:37:07 -05:00
display : flex;
flex: 1 1 auto;
2018-11-08 19:44:59 -05:00
box-sizing: border-box;
2019-01-25 19:37:07 -05:00
width: 100%;
2018-11-08 19:44:59 -05:00
}
.horizontal-split__column--left {
2019-01-25 19:37:07 -05:00
padding: $tertiary-padding;
2018-11-10 14:59:53 -05:00
2019-01-25 19:37:07 -05:00
@media (max-width: $break-point-tablet) {
padding-left: 0px;
padding-right: 0px;
2018-11-10 14:59:53 -05:00
}
2018-11-08 19:44:59 -05:00
}
2018-06-10 16:07:15 -07:00
2018-11-08 19:44:59 -05:00
.horizontal-split__column--right {
2018-11-10 14:59:53 -05:00
2019-01-25 19:37:07 -05:00
padding: $tertiary-padding;
@media (max-width: $break-point-tablet) {
padding-left: 0px;
padding-right: 0px;
2018-11-10 14:59:53 -05:00
}
2018-11-08 19:44:59 -05:00
}
2018-06-10 16:07:15 -07:00
2018-10-22 21:26:19 +01:00
@media (max-width: $break-point-tablet) {
2018-06-10 16:07:15 -07:00
2018-11-08 19:44:59 -05:00
.horizontal-split__column {
2018-06-10 16:07:15 -07:00
justify-content: space-between;
};
2018-11-08 19:44:59 -05:00
.column {
width: 100%;
padding-left: 0;
padding-right: 0;
padding-bottom: $secondary-padding;
}
2018-06-10 16:07:15 -07:00
}