amis/scss/layout/_hbox.scss

100 lines
1.6 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Hbox {
2020-07-29 15:07:53 +08:00
display: table;
table-layout: fixed;
border-spacing: 0;
2019-12-06 09:58:08 +08:00
width: 100%;
2020-10-14 11:09:04 +08:00
// height: 100%;
2019-12-06 09:58:08 +08:00
2020-10-14 11:09:04 +08:00
&-col {
2020-07-29 15:07:53 +08:00
display: table-cell;
vertical-align: top;
height: 100%;
2020-10-14 11:09:04 +08:00
width: 100%;
2020-07-29 15:07:53 +08:00
float: none;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}FormHbox {
margin-left: calc(var(--gap-md) * -1);
margin-right: calc(var(--gap-md) * -1);
2019-12-06 09:58:08 +08:00
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: var(--gap-md);
padding-right: var(--gap-md);
2019-12-06 09:58:08 +08:00
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
}
}