amis2/scss/layout/_hbox.scss
2021-08-05 17:17:04 +08:00

75 lines
1.1 KiB
SCSS

.#{$ns}Hbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
&-col {
flex-basis: 0;
flex-grow: 1;
min-height: 1px;
max-width: 100%;
width: 100%;
&--customWidth {
flex-grow: unset;
flex-basis: unset;
}
&--auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
}
&.#{$ns}Hbox--xs {
margin-left: -5px;
margin-right: -5px;
> .#{$ns}Hbox-col {
padding-left: 5px;
padding-right: 5px;
}
}
&.#{$ns}Hbox--sm {
margin-left: -10px;
margin-right: -10px;
> .#{$ns}Hbox-col {
padding-left: 10px;
padding-right: 10px;
}
}
&.#{$ns}Hbox--base {
margin-left: -15px;
margin-right: -15px;
> .#{$ns}Hbox-col {
padding-left: 15px;
padding-right: 15px;
}
}
&.#{$ns}Hbox--md {
margin-left: -20px;
margin-right: -20px;
> .#{$ns}Hbox-col {
padding-left: 20px;
padding-right: 20px;
}
}
&.#{$ns}Hbox--lg {
margin-left: -30px;
margin-right: -30px;
> .#{$ns}Hbox-col {
padding-left: 30px;
padding-right: 30px;
}
}
}