@opendesign-plus-test/components 0.0.1-rc.45 → 0.0.1-rc.46

package/src/components/OHeaderUser.vue

@@ -169,7 +169,7 @@ const jumpToPage = (val: any) => {
   @include text-truncate(1);
 }
 
-@include respond('<=pad_v') {
+@include respond-to('<=pad_v') {
   .header-user {
     min-width: auto;
 
@@ -207,8 +207,7 @@ const jumpToPage = (val: any) => {
     color: var(--o-color-primary1);
   }
 }
-
-@include respond('<=pad_v') {
+@include respond-to('<=pad_v') {
   .user-dropdown {
     .o-divider {
       display: none;

package/src/components/OSection.vue

@@ -121,11 +121,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
     color: var(--o-color-info2);
     @include text1;
 
-    @include respond('pad-laptop') {
+    @include respond-to('pad-laptop') {
       margin-top: 8px;
     }
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       margin-top: 12px;
       text-align: center;
     }
@@ -155,11 +155,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
       border-radius: var(--btn-height);
     }
 
-    @include respond('<=laptop') {
+    @include respond-to('<=laptop') {
       margin-top: 16px;
     }
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       margin-top: 12px;
     }
 

package/src/components/activity/OActivityApproval.vue

@@ -589,12 +589,12 @@ const reviewActions = computed<DialogActionT[]>(() => {
       margin-left: 24px;
     }
 
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       .o-btn + .o-btn {
         margin-left: 16px;
       }
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       margin-top: 8px;
       .o-btn + .o-btn {
         margin-left: 12px;
@@ -737,7 +737,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
       margin-left: 16px;
     }
 
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       .o-btn {
         width: 140px;
         color: var(--o-color-info1);
@@ -828,7 +828,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 .handle-dialog-approval {
   --dlg-width: 450px;
   --dlg-radius: var(--o-radius-xs);
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     width: 100%;
     --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
   }

package/src/components/activity/OActivityForm.vue

@@ -498,7 +498,7 @@ defineExpose({
       padding: var(--o-gap-5);
       padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
       border-radius: var(--o-radius-xs);
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         padding: var(--o-gap-4);
       }
 
@@ -522,7 +522,7 @@ defineExpose({
     margin-left: var(--o-gap-4);
   }
 
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     .o-btn {
       --btn-min-width: 74px;
     }

package/src/components/activity/OMyActivityCalendar.vue

@@ -763,11 +763,11 @@ const deleteActions = computed<DialogActionT[]>(() => {
     gap: var(--o-gap-4);
     height: 100%;
     --phone-padding-top: 0;
-    @include respond('pad_v') {
+    @include respond-to('pad_v') {
       flex-direction: column;
       gap: var(--o-gap-4);
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       flex-direction: column;
       gap: var(--o-gap-3);
       --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
@@ -808,7 +808,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
     }
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       padding-top: var(--o-gap-7);
       background-color: var(--o-color-ubmc-bg);
       padding-bottom: var(--o-gap-4);
@@ -826,7 +826,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
-    @include respond('pad_h') {
+    @include respond-to('pad_h') {
       .el-calendar {
         .el-calendar__body {
           padding-left: 12px;
@@ -844,10 +844,10 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
       }
     }
-    @include respond('pad_v') {
+    @include respond-to('pad_v') {
       width: 100%;
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       display: none;
     }
 
@@ -977,7 +977,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
             &.clickable {
               &::after {
-                background-color: rgb(var(--o-grey-6));
+                background-color: rgb(var(--o-mixedgray-6));
               }
 
               &.approved::after {
@@ -985,11 +985,11 @@ const deleteActions = computed<DialogActionT[]>(() => {
               }
 
               &.expired::after {
-                background-color: rgb(var(--o-grey-6));
+                background-color: rgb(var(--o-mixedgray-6));
               }
 
               &.all-deleted::after {
-                background-color: rgb(var(--o-grey-6));
+                background-color: rgb(var(--o-mixedgray-6));
               }
             }
           }
@@ -1008,7 +1008,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     flex-grow: 1;
     background-color: var(--o-color-fill2);
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
     }
 
@@ -1028,7 +1028,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     .scroller-container {
       height: 100%;
       max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
-      @include respond('phone') {
+      @include respond-to('phone') {
         max-height: fit-content;
       }
 
@@ -1040,7 +1040,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           flex-grow: 1;
         }
 
-        @include respond('phone') {
+        @include respond-to('phone') {
           padding-left: var(--o-gap-2);
         }
 
@@ -1069,13 +1069,13 @@ const deleteActions = computed<DialogActionT[]>(() => {
             width: 16px;
             height: 26px;
             position: relative;
-            @include respond('laptop') {
+            @include respond-to('laptop') {
               height: 24px;
             }
-            @include respond('pad_h') {
+            @include respond-to('pad_h') {
               height: 22px;
             }
-            @include respond('<=pad_v') {
+            @include respond-to('<=pad_v') {
               height: 22px;
             }
 
@@ -1128,7 +1128,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           margin-bottom: var(--o-gap-2);
           color: var(--o-color-info1);
           @include text2;
-          @include respond('phone') {
+          @include respond-to('phone') {
             padding-left: var(--o-gap-5);
           }
 
@@ -1143,7 +1143,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .list-body {
     height: 100%;
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       height: fit-content;
       padding: var(--o-gap-4) !important;
     }
@@ -1158,7 +1158,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       @include hover {
         --btn-color: var(--o-color-primary2);
       }
-      @include respond('phone') {
+      @include respond-to('phone') {
         display: none;
       }
 
@@ -1209,22 +1209,22 @@ const deleteActions = computed<DialogActionT[]>(() => {
         transition: margin var(--o-easing-standard) var(--o-duration-s);
         --copy-display: none;
         --icon-size: 24px;
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
 
         &:hover {
-          @include respond('>pad_v') {
+          @include respond-to('>pad_v') {
             --copy-display: inline-flex;
           }
         }
 
-        @include respond('phone') {
+        @include respond-to('phone') {
           --icon-size: 20px;
         }
 
         &.o-collapse-item-expanded {
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             --copy-display: inline-flex;
           }
         }
@@ -1248,7 +1248,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           position: relative;
           top: 4px;
           flex-shrink: 0;
-          @include respond('phone') {
+          @include respond-to('phone') {
             position: absolute;
             right: 0;
             width: 20px;
@@ -1275,7 +1275,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             gap: var(--o-gap-3);
             width: 100%;
             padding-right: 48px;
-            @include respond('phone') {
+            @include respond-to('phone') {
               flex-grow: 1;
               width: 100%;
               align-self: stretch;
@@ -1409,7 +1409,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             height: 18px;
             width: 18px;
             display: var(--copy-display);
-            @include respond('phone') {
+            @include respond-to('phone') {
               bottom: var(--o-gap-2);
               transform: revert;
               top: revert;
@@ -1435,7 +1435,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
         .activity-detail {
           padding-left: calc(var(--o-gap-3) + var(--icon-size));
-          @include respond('phone') {
+          @include respond-to('phone') {
             padding-left: 0;
           }
 

package/src/components/common/ContentWrapper.vue

@@ -59,16 +59,16 @@ const paddingBottom = computed(() => {
   --layout-content-padding: 64px;
   --layout-header-height: 80px;
 
-  @include respond('<=laptop') {
+  @include respond-to('<=laptop') {
     --layout-content-max-width: 100%;
     --layout-content-padding: 40px;
   }
 
-  @include respond('<=pad') {
+  @include respond-to('<=pad') {
     --layout-content-padding: 32px;
   }
 
-  @include respond('phone') {
+  @include respond-to('phone') {
     --layout-content-padding: 24px;
   }
 

package/src/components/element-plus/OElCookieNotice.vue

@@ -291,7 +291,7 @@ defineExpose({
 }
 
 .cookie-notice-content {
-  background-color: rgba(var(--o-grey-1), 0.9);
+  background-color: rgba(var(--o-mixedgray-1), 0.9);
   backdrop-filter: blur(5px);
   box-shadow: var(--o-shadow-1);
 }
@@ -304,13 +304,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px var(--layout-content-padding);
   }
-  @include respond('pad_h') {
+  @include respond-to('pad_h') {
     padding: 8px var(--layout-content-padding);
   }
   @media (max-width: 840px) {
     padding: 16px var(--layout-content-padding);
   }
-  @include respond('phone') {
+  @include respond-to('phone') {
     padding: 16px var(--layout-content-padding);
   }
   &:not([type='zh']) {
@@ -327,13 +327,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px 0;
   }
-  @include respond('pad_h') {
+  @include respond-to('pad_h') {
     padding: 8px 0;
   }
   @media (max-width: 840px) {
     padding: 16px 0;
   }
-  @include respond('phone') {
+  @include respond-to('phone') {
     padding: 16px 0;
   }
   &:not([type='zh']) {
@@ -353,13 +353,13 @@ defineExpose({
   @media (max-width: 1680px) {
     font-size: 14px;
   }
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     text-align: center;
   }
 }
 
 .cookie-en-title {
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     margin-left: auto;
   }
 }
@@ -369,7 +369,7 @@ defineExpose({
   line-height: 22px;
   margin-right: 8px;
   text-align: start;
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
   }
@@ -379,7 +379,7 @@ defineExpose({
   display: flex;
   width: 100%;
   margin-top: 8px;
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     flex-direction: column;
   }
 }
@@ -394,10 +394,10 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     margin-right: 40px;
   }
-  @include respond('pad') {
+  @include respond-to('pad') {
     margin-right: 24px;
   }
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     margin: 0;
   }
 }
@@ -411,7 +411,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-left: 12px;
     }
-    @include respond('pad_h') {
+    @include respond-to('pad_h') {
       margin-left: 8px;
     }
     @media (min-width: 841px) {
@@ -419,7 +419,7 @@ defineExpose({
     }
   }
 
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     margin-top: 16px;
     width: 100%;
     display: grid;
@@ -464,7 +464,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond('<=pad') {
+    @include respond-to('<=pad') {
       margin-top: 12px;
     }
     &:nth-child(2) {
@@ -485,7 +485,7 @@ defineExpose({
         @media (1680px >= width >= 1201px) {
           font-size: 18px;
         }
-        @include respond('<=pad') {
+        @include respond-to('<=pad') {
           font-size: 16px;
         }
       }
@@ -494,7 +494,7 @@ defineExpose({
         font-size: 14px;
         color: var(--o-color-info3);
         margin-left: 24px;
-        @include respond('<=pad') {
+        @include respond-to('<=pad') {
           font-size: 12px;
         }
       }
@@ -508,7 +508,7 @@ defineExpose({
         margin-top: 12px;
         font-size: 14px;
       }
-      @include respond('<=pad') {
+      @include respond-to('<=pad') {
         margin-top: 8px;
       }
       @media (max-width: 840px) {
@@ -524,7 +524,7 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     font-size: 20px;
   }
-  @include respond('<=pad') {
+  @include respond-to('<=pad') {
     font-size: 18px;
   }
 }
@@ -550,29 +550,29 @@ defineExpose({
 }
 
 :deep(.el-dialog) {
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     --el-dialog-width: 100vw;
   }
   &.grid-width-dlg {
-    @include respond('>pad') {
+    @include respond-to('>pad') {
       --el-dialog-width: var(--grid-14);
     }
-    @include respond('pad_h') {
+    @include respond-to('pad_h') {
       --el-dialog-width: var(--grid-8);
     }
   }
 }
 
 :deep(.el-dialog) {
-  --el-bg-color: var(--o-color-control5-light);
+  --el-bg-color: var(--o-color-control-light);
   --el-dialog-padding-primary: 32px;
-  @include respond('laptop') {
+  @include respond-to('laptop') {
     --el-dialog-padding-primary: 24px;
   }
-  @include respond('pad_h') {
+  @include respond-to('pad_h') {
     --el-dialog-padding-primary: 16px;
   }
-  @include respond('phone') {
+  @include respond-to('phone') {
     --el-dialog-padding-primary: 16px 24px;
   }
   .el-dialog__header {
@@ -586,7 +586,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond('<=pad_h') {
+    @include respond-to('<=pad_h') {
       margin-top: 12px;
     }
     .el-button+.el-button {