amis/scss/layout/_hbox.scss

128 lines
2.3 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Hbox {
2021-08-05 17:05:12 +08:00
display: flex;
flex-direction: row;
flex-wrap: nowrap;
2019-12-06 09:58:08 +08:00
2020-10-14 11:09:04 +08:00
&-col {
2021-08-05 17:05:12 +08:00
flex-basis: 0;
flex-grow: 1;
min-height: 1px;
max-width: 100%;
2020-10-14 11:09:04 +08:00
width: 100%;
2021-08-05 17:05:12 +08:00
&--customWidth {
flex-grow: unset;
flex-basis: unset;
}
2021-08-05 17:17:04 +08:00
&--auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
2019-12-06 09:58:08 +08:00
}
&--hRight {
justify-content: flex-end;
}
&--hCenter {
justify-content: center;
}
&--hBetween {
justify-content: space-between;
}
&--vMiddle > &-col {
display: flex;
flex-direction: column;
justify-content: center;
}
&--vBottom > &-col {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
&--vBetween > &-col {
display: flex;
flex-direction: column;
justify-content: space-between;
}
& > &-col--vTop {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
& > &-col--vMiddle {
display: flex;
flex-direction: column;
justify-content: center;
}
& > &-col--vBottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
& > &-col--vBetween {
display: flex;
flex-direction: column;
justify-content: space-between;
}
2021-08-05 18:10:14 +08:00
}
2021-08-05 18:10:14 +08:00
.#{$ns}Hbox--xs {
margin-left: calc(var(--gap-xs) * -0.5);
margin-right: calc(var(--gap-xs) * -0.5);
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
> .#{$ns}Hbox-col {
padding-left: calc(var(--gap-xs) * 0.5);
padding-right: calc(var(--gap-xs) * 0.5);
2019-12-06 09:58:08 +08:00
}
2021-08-05 18:10:14 +08:00
}
2021-08-05 18:10:14 +08:00
.#{$ns}Hbox--sm {
margin-left: calc(var(--gap-sm) * -0.5);
margin-right: calc(var(--gap-sm) * -0.5);
2021-08-05 18:10:14 +08:00
> .#{$ns}Hbox-col {
padding-left: calc(var(--gap-sm) * 0.5);
padding-right: calc(var(--gap-sm) * 0.5);
2019-12-06 09:58:08 +08:00
}
2021-08-05 18:10:14 +08:00
}
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
.#{$ns}Hbox--base {
margin-left: calc(var(--gap-base) * -0.5);
margin-right: calc(var(--gap-base) * -0.5);
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
> .#{$ns}Hbox-col {
padding-left: calc(var(--gap-base) * 0.5);
padding-right: calc(var(--gap-base) * 0.5);
2019-12-06 09:58:08 +08:00
}
2021-08-05 18:10:14 +08:00
}
2019-04-30 11:11:25 +08:00
2021-08-05 18:10:14 +08:00
.#{$ns}Hbox--md {
margin-left: calc(var(--gap-md) * -0.5);
margin-right: calc(var(--gap-md) * -0.5);
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
> .#{$ns}Hbox-col {
padding-left: calc(var(--gap-md) * 0.5);
padding-right: calc(var(--gap-md) * 0.5);
2021-08-05 17:05:12 +08:00
}
2021-08-05 18:10:14 +08:00
}
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
.#{$ns}Hbox--lg {
margin-left: calc(var(--gap-lg) * -0.5);
margin-right: calc(var(--gap-lg) * -0.5);
2019-12-06 09:58:08 +08:00
2021-08-05 18:10:14 +08:00
> .#{$ns}Hbox-col {
padding-left: calc(var(--gap-lg) * 0.5);
padding-right: calc(var(--gap-lg) * 0.5);
2019-12-06 09:58:08 +08:00
}
}