init

cms/src/styles/_breakpoints.scss

@@ -0,0 +1,2 @@
+$cms-bp-tablet: 767px;
+$cms-bp-phone: 480px;

cms/src/styles/responsive.scss

@@ -0,0 +1,124 @@
+@use './breakpoints' as *;
+
+.cms-table-scroll {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.cms-page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cms-gate {
+    padding: 24px;
+}
+
+.el-select__popper {
+    max-width: min(560px, calc(100vw - 32px));
+}
+
+.el-select-dropdown__item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: $cms-bp-tablet) {
+    html,
+    body,
+    #app {
+        overflow-x: hidden;
+    }
+
+    .el-header {
+        --el-header-padding: 0 10px;
+    }
+
+    .el-main,
+    .el-main.main-wrapper {
+        --el-main-padding: 12px 10px;
+        padding: 12px 10px !important;
+    }
+
+    .cms-page-header {
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+
+    .el-dialog {
+        width: calc(100vw - 32px) !important;
+        max-width: 100%;
+    }
+
+    .order-detail-row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        row-gap: 24px;
+
+        > .el-col {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+        }
+    }
+
+    .cms-gate {
+        padding: 12px 10px;
+    }
+}
+
+@media (max-width: $cms-bp-phone) {
+    .el-header {
+        --el-header-padding: 0 5px;
+    }
+
+    .cms-header.el-header {
+        --el-header-padding: 12px 5px 0;
+    }
+
+    .cms-header__bar {
+        flex-wrap: wrap;
+        row-gap: 8px;
+    }
+
+    .cms-header__bar .logo {
+        flex-basis: 100%;
+        width: 100%;
+    }
+
+    .el-main,
+    .el-main.main-wrapper {
+        --el-main-padding: 12px 5px;
+        padding: 12px 5px !important;
+    }
+
+    .el-dialog {
+        width: calc(100vw - 10px) !important;
+    }
+
+    .el-picker__popper {
+        max-width: calc(100vw - 10px);
+    }
+
+    .el-date-picker {
+        width: min(322px, calc(100vw - 10px)) !important;
+    }
+
+    .el-date-picker .el-picker-panel__content {
+        width: min(292px, calc(100vw - 30px)) !important;
+    }
+
+    .el-time-panel {
+        width: min(180px, calc(100vw - 10px)) !important;
+    }
+
+    .el-select__popper {
+        max-width: calc(100vw - 10px);
+    }
+
+    .cms-gate {
+        padding: 12px 5px;
+    }
+}

cms/src/styles/utils.scss

@@ -0,0 +1,158 @@
+$space-scale: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64;
+
+@each $s in $space-scale {
+    .m-#{$s} {
+        margin: #{$s}px;
+    }
+    .mt-#{$s} {
+        margin-top: #{$s}px;
+    }
+    .mr-#{$s} {
+        margin-right: #{$s}px;
+    }
+    .mb-#{$s} {
+        margin-bottom: #{$s}px;
+    }
+    .ml-#{$s} {
+        margin-left: #{$s}px;
+    }
+    .mx-#{$s} {
+        margin-left: #{$s}px;
+        margin-right: #{$s}px;
+    }
+    .my-#{$s} {
+        margin-top: #{$s}px;
+        margin-bottom: #{$s}px;
+    }
+
+    .p-#{$s} {
+        padding: #{$s}px;
+    }
+    .pt-#{$s} {
+        padding-top: #{$s}px;
+    }
+    .pr-#{$s} {
+        padding-right: #{$s}px;
+    }
+    .pb-#{$s} {
+        padding-bottom: #{$s}px;
+    }
+    .pl-#{$s} {
+        padding-left: #{$s}px;
+    }
+    .px-#{$s} {
+        padding-left: #{$s}px;
+        padding-right: #{$s}px;
+    }
+    .py-#{$s} {
+        padding-top: #{$s}px;
+        padding-bottom: #{$s}px;
+    }
+
+    .gap-#{$s} {
+        gap: #{$s}px;
+    }
+}
+
+.w-full {
+    width: 100%;
+}
+
+.box-border {
+    box-sizing: border-box;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1 1 0%;
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.min-h-0 {
+    min-height: 0;
+}
+
+.min-w-0 {
+    min-width: 0;
+}
+
+.text-ellipsis {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.flex-ellipsis {
+    flex: 1 1 0%;
+    min-width: 0;
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.text-break {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-start {
+    align-items: flex-start;
+}
+
+.self-start {
+    align-self: flex-start;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.clickable-table .el-table__body tr {
+    cursor: pointer;
+}
+
+.detail-loading-host {
+    min-height: min(50vh, 440px);
+}
+
+.mono {
+    font-family: monospace;
+
+    input,
+    textarea {
+        font-family: inherit;
+    }
+}
+
+.secondary-text {
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-small);
+}
+
+.descriptions-row-labels {
+    .el-descriptions__label {
+        font-weight: bold;
+    }
+}