@opensig/opendesign
Version:
287 lines (280 loc) • 10.3 kB
CSS
:root {
--grid-1: var(--grid-column-width);
--layout-content-width: var(--grid-full);
}
@media (min-width: 1921px) {
:root {
--grid-padding: 64px;
--grid-layout-width: 1920px;
--grid-column-gutter: 32px;
--grid-column-total: 24;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
}
}
@media (min-width: 1681px) {
:root {
--grid-padding: 64px;
--grid-layout-width: 100vw;
--grid-column-gutter: 32px;
--grid-column-total: 24;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
}
}
@media (min-width: 1441px) and (max-width: 1680px) {
:root {
--grid-padding: 64px;
--grid-layout-width: 100vw;
--grid-column-gutter: 32px;
--grid-column-total: 24;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
:root {
--grid-padding: 40px;
--grid-layout-width: 100vw;
--grid-column-gutter: 24px;
--grid-column-total: 24;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
}
}
@media (min-width: 1201px) {
:root {
--grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
--grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
--grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
--grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
--grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
--grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
--grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
--grid-9: calc(var(--grid-column-width) * 9 + var(--grid-column-gutter) * 8);
--grid-10: calc(var(--grid-column-width) * 10 + var(--grid-column-gutter) * 9);
--grid-11: calc(var(--grid-column-width) * 11 + var(--grid-column-gutter) * 10);
--grid-12: calc(var(--grid-column-width) * 12 + var(--grid-column-gutter) * 11);
--grid-13: calc(var(--grid-column-width) * 13 + var(--grid-column-gutter) * 12);
--grid-14: calc(var(--grid-column-width) * 14 + var(--grid-column-gutter) * 13);
--grid-15: calc(var(--grid-column-width) * 15 + var(--grid-column-gutter) * 14);
--grid-16: calc(var(--grid-column-width) * 16 + var(--grid-column-gutter) * 15);
--grid-17: calc(var(--grid-column-width) * 17 + var(--grid-column-gutter) * 16);
--grid-18: calc(var(--grid-column-width) * 18 + var(--grid-column-gutter) * 17);
--grid-19: calc(var(--grid-column-width) * 19 + var(--grid-column-gutter) * 18);
--grid-20: calc(var(--grid-column-width) * 20 + var(--grid-column-gutter) * 19);
--grid-21: calc(var(--grid-column-width) * 21 + var(--grid-column-gutter) * 20);
--grid-22: calc(var(--grid-column-width) * 22 + var(--grid-column-gutter) * 21);
--grid-23: calc(var(--grid-column-width) * 23 + var(--grid-column-gutter) * 22);
--grid-24: calc(var(--grid-column-width) * 24 + var(--grid-column-gutter) * 23);
}
}
@media (min-width: 841px) and (max-width: 1200px) {
:root {
--grid-padding: 32px;
--grid-layout-width: 100vw;
--grid-column-gutter: 16px;
--grid-column-total: 12;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
--grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
--grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
--grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
--grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
--grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
--grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
--grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
--grid-9: calc(var(--grid-column-width) * 9 + var(--grid-column-gutter) * 8);
--grid-10: calc(var(--grid-column-width) * 10 + var(--grid-column-gutter) * 9);
--grid-11: calc(var(--grid-column-width) * 11 + var(--grid-column-gutter) * 10);
--grid-12: calc(var(--grid-column-width) * 12 + var(--grid-column-gutter) * 11);
--grid-13: var(--grid-full);
--grid-14: var(--grid-full);
--grid-15: var(--grid-full);
--grid-16: var(--grid-full);
--grid-17: var(--grid-full);
--grid-18: var(--grid-full);
--grid-19: var(--grid-full);
--grid-20: var(--grid-full);
--grid-21: var(--grid-full);
--grid-22: var(--grid-full);
--grid-23: var(--grid-full);
--grid-24: var(--grid-full);
}
}
@media (min-width: 601px) and (max-width: 840px) {
:root {
--grid-padding: 32px;
--grid-layout-width: 100vw;
--grid-column-gutter: 16px;
--grid-column-total: 8;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
--grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
--grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
--grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
--grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
--grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
--grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
--grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
--grid-9: var(--grid-full);
--grid-10: var(--grid-full);
--grid-11: var(--grid-full);
--grid-12: var(--grid-full);
--grid-13: var(--grid-full);
--grid-14: var(--grid-full);
--grid-15: var(--grid-full);
--grid-16: var(--grid-full);
--grid-17: var(--grid-full);
--grid-18: var(--grid-full);
--grid-19: var(--grid-full);
--grid-20: var(--grid-full);
--grid-21: var(--grid-full);
--grid-22: var(--grid-full);
--grid-23: var(--grid-full);
--grid-24: var(--grid-full);
}
}
@media (max-width: 600px) {
:root {
--grid-padding: 24px;
--grid-layout-width: 100vw;
--grid-column-gutter: 12px;
--grid-column-total: 4;
--grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
--grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
--grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
--grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
--grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
--grid-5: var(--grid-full);
--grid-6: var(--grid-full);
--grid-7: var(--grid-full);
--grid-8: var(--grid-full);
--grid-9: var(--grid-full);
--grid-10: var(--grid-full);
--grid-11: var(--grid-full);
--grid-12: var(--grid-full);
--grid-13: var(--grid-full);
--grid-14: var(--grid-full);
--grid-15: var(--grid-full);
--grid-16: var(--grid-full);
--grid-17: var(--grid-full);
--grid-18: var(--grid-full);
--grid-19: var(--grid-full);
--grid-20: var(--grid-full);
--grid-21: var(--grid-full);
--grid-22: var(--grid-full);
--grid-23: var(--grid-full);
--grid-24: var(--grid-full);
}
}
.o-dialog-exlarge {
--dlg-width: var(--grid-16);
}
.o-dialog-large {
--dlg-width: var(--grid-14);
}
.o-dialog-medium {
--dlg-width: var(--grid-10);
}
.o-dialog-small {
--dlg-width: var(--grid-6);
}
@media (min-width: 1201px) and (max-width: 1680px) {
.o-dialog-exlarge {
--dlg-width: var(--grid-18);
}
.o-dialog-large {
--dlg-width: var(--grid-14);
}
.o-dialog-medium {
--dlg-width: var(--grid-10);
}
.o-dialog-small {
--dlg-width: var(--grid-6);
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-exlarge {
--dlg-width: var(--grid-10);
}
.o-dialog-large {
--dlg-width: var(--grid-8);
}
.o-dialog-medium {
--dlg-width: var(--grid-6);
}
.o-dialog-small {
--dlg-width: var(--grid-4);
}
}
@media (min-width: 601px) and (max-width: 840px) {
.o-dialog-exlarge {
--dlg-width: 100%;
}
.o-dialog-large {
--dlg-width: 100%;
}
.o-dialog-medium {
--dlg-width: var(--grid-6);
}
.o-dialog-small {
--dlg-width: var(--grid-6);
}
}
@media (max-width: 600px) {
.o-dialog-exlarge {
--dlg-width: 100%;
}
.o-dialog-large {
--dlg-width: 100%;
}
.o-dialog-medium {
--dlg-width: var(--grid-4);
}
.o-dialog-small {
--dlg-width: var(--grid-4);
}
.o-dialog-phone-half-full {
--dlg-width: 100%;
--dlg-margin: 0;
}
}
@media (max-width: 1680px) {
.o-dlg-body {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
}
.c-dlg-action-end {
display: flex;
justify-content: flex-end;
}
.c-dlg-action-end > * + * {
margin-left: var(--dlg-btn-gap);
}
.c-dlg-action-center {
display: flex;
justify-content: center;
}
.c-dlg-action-center > * + * {
margin-left: var(--dlg-btn-gap);
}
.c-dlg-operation {
--layer-align: center ;
--dlg-body-padding: 0 ;
--dlg-margin: 40px;
--dlg-min-height: 320px;
--dlg-max-height: 468px;
}
.c-dlg-operation .o-dlg-btn-close {
right: 50%;
transform: translateX(50%);
top: calc(100% + 16px);
border: 1px solid var(--o-color-info1-inverse);
border-radius: 50%;
font-size: var(--o-icon_size_control-xs);
color: var(--o-color-info1-inverse);
padding: 4px;
display: flex;
}