amis/scss/layout/_hbox.scss

96 lines
1.4 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Hbox {
2020-07-28 13:14:33 +08:00
display: flex;
flex-grow: row;
2019-12-06 09:58:08 +08:00
width: 100%;
height: 100%;
& > .#{$ns}Hbox-col {
2020-07-28 13:14:33 +08:00
flex-grow: 1;
width: 0;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}FormHbox {
2019-12-06 09:58:08 +08:00
margin-left: -15px;
margin-right: -15px;
2019-12-06 09:58:08 +08:00
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 15px;
padding-right: 15px;
vertical-align: top;
> .#{$ns}Form-group {
margin-left: 0;
margin-right: 0;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
> .#{$ns}Form-group:last-child {
margin-bottom: 0;
}
}
2019-12-06 09:58:08 +08:00
&.#{$ns}Hbox--xs {
margin-left: -5px;
margin-right: -5px;
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 5px;
padding-right: 5px;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&.#{$ns}Hbox--sm {
margin-left: -10px;
margin-right: -10px;
2019-12-06 09:58:08 +08:00
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 10px;
padding-right: 10px;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
@include media-breakpoint-down(md) {
2019-12-06 09:58:08 +08:00
.#{$ns}Hbox--autoSm {
display: block;
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
&.show {
display: block !important;
}
}
& .#{$ns}Vbox {
height: auto;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
& .cell-inner {
position: static !important;
}
}
2019-04-30 11:11:25 +08:00
}
@include media-breakpoint-down(sm) {
2019-12-06 09:58:08 +08:00
.#{$ns}Hbox--autoXs {
display: block;
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
}
& .#{$ns}Vbox {
height: auto;
}
& .cell-inner {
position: static !important;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}