amis2/scss/layout/_hbox.scss
吴多益 d640afd1f6
样式细节调整 (#1764)
* 样式细节调整,通过 gap 可以设置更多间距;radios 和 checkbox 默认 inline

* 统一一下命名

* 改回之前的写法

* 补充漏下的

* 恢复几个之前的大小

* 尝试修复跳转到示例有时候不生效问题
2021-04-08 23:19:23 +08:00

100 lines
1.6 KiB
SCSS

.#{$ns}Hbox {
display: table;
table-layout: fixed;
border-spacing: 0;
width: 100%;
// height: 100%;
&-col {
display: table-cell;
vertical-align: top;
height: 100%;
width: 100%;
float: none;
}
}
.#{$ns}FormHbox {
margin-left: calc(var(--gap-md) * -1);
margin-right: calc(var(--gap-md) * -1);
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: var(--gap-md);
padding-right: var(--gap-md);
vertical-align: top;
> .#{$ns}Form-group {
margin-left: 0;
margin-right: 0;
}
> .#{$ns}Form-group:last-child {
margin-bottom: 0;
}
}
&.#{$ns}Hbox--xs {
margin-left: -5px;
margin-right: -5px;
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 5px;
padding-right: 5px;
}
}
&.#{$ns}Hbox--sm {
margin-left: -10px;
margin-right: -10px;
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 10px;
padding-right: 10px;
}
}
}
@include media-breakpoint-down(md) {
.#{$ns}Hbox--autoSm {
display: block;
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
&.show {
display: block !important;
}
}
& .#{$ns}Vbox {
height: auto;
}
& .cell-inner {
position: static !important;
}
}
}
@include media-breakpoint-down(sm) {
.#{$ns}Hbox--autoXs {
display: block;
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
}
& .#{$ns}Vbox {
height: auto;
}
& .cell-inner {
position: static !important;
}
}
}