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

package/src/components/header/components/HeaderContent.vue

@@ -168,7 +168,7 @@ const onClickShortcut = (item: any) => {
   overflow-y: auto;
   white-space: nowrap;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --scroller-padding: 0 var(--layout-content-padding);
   }
 
@@ -198,11 +198,11 @@ const onClickShortcut = (item: any) => {
 .content-item {
   width: 200px;
   margin-top: 24px;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     width: 170px;
     margin-top: 16px;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     width: 132px;
     margin-top: 12px;
   }
@@ -224,14 +224,14 @@ const onClickShortcut = (item: any) => {
   .o-icon {
     --icon-size: 24px;
     margin-left: var(--o-gap-2);
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       --icon-size: 16px;
     }
   }
   .content-tag {
     margin-left: var(--o-gap-2);
     --layout-pkg-radius: var(--o-radius-xs);
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       display: none;
     }
   }
@@ -256,7 +256,7 @@ const onClickShortcut = (item: any) => {
   margin: 0 16px;
   flex-shrink: 0;
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     display: none;
   }
 }
@@ -264,15 +264,15 @@ const onClickShortcut = (item: any) => {
   width: 342px;
   padding: 32px 0;
   flex-shrink: 0;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     width: 240px;
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     width: 240px;
   }
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     display: none;
   }
 
@@ -287,11 +287,11 @@ const onClickShortcut = (item: any) => {
     cursor: pointer;
     @include tip1;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       @include text1;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       @include text1;
     }
 
@@ -329,7 +329,7 @@ const onClickShortcut = (item: any) => {
       text-decoration: none;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       &:not(:last-child) {
         &:after {
           content: '';
@@ -353,7 +353,7 @@ const onClickShortcut = (item: any) => {
       display: block;
       object-fit: contain;
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         display: none;
       }
     }
@@ -367,7 +367,7 @@ const onClickShortcut = (item: any) => {
       justify-content: space-between;
       white-space: normal;
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: unset;
         height: auto;
       }
@@ -384,7 +384,7 @@ const onClickShortcut = (item: any) => {
         @include hover {
           color: var(--o-color-primary1);
         }
-        @include respond-to('pad_v-laptop') {
+        @include respond('pad_v-laptop') {
           max-height: 44px;
         }
       }
@@ -409,7 +409,7 @@ const onClickShortcut = (item: any) => {
   background-size: cover;
   z-index: -1;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     display: none;
   }
 }
@@ -422,7 +422,7 @@ const onClickShortcut = (item: any) => {
   background-size: cover;
   z-index: -1;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     display: none;
   }
 }
@@ -447,7 +447,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -464,7 +464,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: 344px;
@@ -473,7 +473,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -504,20 +504,20 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('>laptop') {
+      @include respond('>laptop') {
         width: 200px;
       }
 
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         width: 170px;
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         width: 132px;
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           flex: 1 1 auto;
@@ -548,7 +548,7 @@ const onClickShortcut = (item: any) => {
               margin-right: 0;
             }
 
-            @include respond-to('<=laptop') {
+            @include respond('<=laptop') {
               margin-right: 24px;
             }
           }
@@ -557,20 +557,20 @@ const onClickShortcut = (item: any) => {
               margin-right: 40px;
             }
           }
-          @include respond-to('>laptop') {
+          @include respond('>laptop') {
             width: 992px;
           }
-          @include respond-to('laptop') {
+          @include respond('laptop') {
             width: 752px;
           }
-          @include respond-to('pad_h') {
+          @include respond('pad_h') {
             width: auto;
           }
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 80%;
@@ -606,7 +606,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(2) {
           .content-container {
@@ -618,7 +618,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(2) {
           .content-container {
             width: auto;
@@ -627,7 +627,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -670,7 +670,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -688,7 +688,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(n) {
           .content-container {
             width: auto;
@@ -697,7 +697,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 20%;
@@ -728,7 +728,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         &:nth-child(n) {
           .content-container {
             width: 170px;
@@ -736,7 +736,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-child(n) {
           .content-container {
             width: 132px;
@@ -745,7 +745,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           .content-container {
@@ -789,7 +789,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -800,7 +800,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         &:nth-of-type(1) {
           .content-container {
             width: 558px;
@@ -813,7 +813,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: auto;
@@ -827,7 +827,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 20%;
@@ -870,7 +870,7 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         .content-container {
           :deep(.content-item) {
@@ -878,20 +878,20 @@ const onClickShortcut = (item: any) => {
           }
         }
       }
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         .content-container {
           width: 364px;
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .content-container {
           width: auto;
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 40%;
@@ -913,10 +913,10 @@ const onClickShortcut = (item: any) => {
   }
   .item-sub + .item-sub {
     margin-left: 48px;
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       margin-left: 32px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-left: 16px;
     }
   }
@@ -957,7 +957,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -974,7 +974,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: 344px;
@@ -983,7 +983,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -1031,7 +1031,7 @@ const onClickShortcut = (item: any) => {
               margin-right: 0;
             }
 
-            @include respond-to('<=laptop') {
+            @include respond('<=laptop') {
               margin-right: 24px;
             }
           }
@@ -1040,20 +1040,20 @@ const onClickShortcut = (item: any) => {
               margin-right: 40px;
             }
           }
-          @include respond-to('>laptop') {
+          @include respond('>laptop') {
             width: 992px;
           }
-          @include respond-to('laptop') {
+          @include respond('laptop') {
             width: 752px;
           }
-          @include respond-to('pad_h') {
+          @include respond('pad_h') {
             width: auto;
           }
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 80%;
@@ -1086,7 +1086,7 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         .content-container {
           :deep(.content-item) {
@@ -1094,20 +1094,20 @@ const onClickShortcut = (item: any) => {
           }
         }
       }
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         .content-container {
           width: 364px;
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .content-container {
           width: auto;
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 40%;

package/src/components/header/components/HeaderNav.vue

@@ -187,7 +187,7 @@ onUnmounted(() => {
     height: 100%;
     right: 0;
     top: 0;
-    background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-1), 0) 0%, rgba(var(--o-mixedgray-1), 1) 100%);
+    background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
     z-index: 0;
   }
   &::-webkit-scrollbar {
@@ -195,7 +195,7 @@ onUnmounted(() => {
   }
   &.dark {
     &::after {
-      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
+      background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
     }
   }
 }
@@ -255,10 +255,10 @@ onUnmounted(() => {
     padding: 22px var(--o-gap-4);
     @include text1;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       padding: 22px 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       padding: 22px 8px;
     }
     &.en {

package/src/components/header/components/HeaderNavMobile.vue

@@ -245,7 +245,7 @@ watch(
           top: 0;
           width: 100%;
           height: 1px;
-          background-color: rgba(var(--o-mixedgray-14), 0.1);
+          background-color: rgba(var(--o-grey-14), 0.1);
         }
       }
       .content-label {
@@ -343,7 +343,7 @@ watch(
         word-break: normal;
         @include tip1;
         @include text-truncate(2);
-        @include respond-to('phone') {
+        @include respond('phone') {
           @include text1;
         }
       }
@@ -368,7 +368,7 @@ watch(
   width: 99px;
   @include nav-item;
   @include tip1;
-  @include respond-to('phone') {
+  @include respond('phone') {
     @include text1;
   }
 }