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

package/src/components/events/OEventsApply.vue

@@ -71,7 +71,7 @@ defineProps<EventsApplyPropsT>();
   // 移动端时间线序号
   .timeline-number {
     display: none; // 桌面端隐藏
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       display: flex;
       align-items: flex-start;
       padding-top: var(--o-gap-3); // 与 step-title 的 padding 对齐
@@ -118,7 +118,7 @@ defineProps<EventsApplyPropsT>();
     gap: var(--o-gap-6);
 
     // 移动端：2列布局（序号列 + 内容列）
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
       grid-template-rows: auto; // 行数自动
       gap: var(--o-gap-3); // 列间距12px，行间距12px
@@ -132,7 +132,7 @@ defineProps<EventsApplyPropsT>();
       --idx-size: 20px;
       --idx-gap: var(--o-gap-3);
       // 移动端：强制在第2列显示
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         grid-column: 2 !important;
         grid-row: auto !important;
       }
@@ -145,13 +145,13 @@ defineProps<EventsApplyPropsT>();
         display: flex;
         align-items: center;
         @include h2;
-        @include respond('pad_v') {
+        @include respond-to('pad_v') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
           border-bottom: 1px solid var(--o-color-control4);
           @include text1;
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
           border-bottom: 1px solid var(--o-color-control4);
@@ -169,10 +169,10 @@ defineProps<EventsApplyPropsT>();
           color: #fff;
           text-align: center;
           font-weight: 400;
-          @include respond('pad_v') {
+          @include respond-to('pad_v') {
             display: none;
           }
-          @include respond('phone') {
+          @include respond-to('phone') {
             display: none;
           }
         }
@@ -182,10 +182,10 @@ defineProps<EventsApplyPropsT>();
         color: var(--o-color-info2);
         padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
         @include tip1;
-        @include respond('pad_v') {
+        @include respond-to('pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
 
@@ -195,7 +195,7 @@ defineProps<EventsApplyPropsT>();
 
         .desc-list-title {
           padding-left: calc(var(--idx-size) + var(--idx-gap));
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             display: none;
           }
         }
@@ -214,10 +214,10 @@ defineProps<EventsApplyPropsT>();
               font-size: 16px;
               margin-right: var(--o-gap-4);
               color: #fff;
-              @include respond('pad_v') {
+              @include respond-to('pad_v') {
                 margin-right: var(--o-gap-2);
               }
-              @include respond('phone') {
+              @include respond-to('phone') {
                 margin-right: var(--o-gap-2);
               }
 
@@ -236,11 +236,13 @@ defineProps<EventsApplyPropsT>();
             --padding-left: var(--o-gap-4);
             padding-left: calc(var(--o-gap-4) + var(--o-gap-4));
             color: rgba(255, 255, 255, 0.8);
-            @include respond('pad_v') {
+            @include respond-to('pad_v') {
               padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
             }
-            @include respond('phone') {
+            @include respond-to('phone') {
               padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
             }
           }
         }
@@ -255,20 +257,20 @@ defineProps<EventsApplyPropsT>();
       }
 
       .img-wrapper {
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           display: none;
         }
       }
 
       .img-wrapper-phone {
-        @include respond('>pad_v') {
+        @include respond-to('>pad_v') {
           display: none;
         }
       }
 
       &.step-1 {
         .step-desc {
-          @include respond('>pad_v') {
+          @include respond-to('>pad_v') {
             padding-bottom: 0;
           }
         }
@@ -286,7 +288,7 @@ defineProps<EventsApplyPropsT>();
 
       &.step-2 {
         .step-desc {
-          @include respond('>pad_v') {
+          @include respond-to('>pad_v') {
             padding-bottom: 0;
           }
         }
@@ -303,33 +305,31 @@ defineProps<EventsApplyPropsT>();
       }
 
       &.step-3 {
-        background: linear-gradient(
-            142.13deg,
-            color-mix(in srgb, transparent 0%, transparent) 0%,
-            color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
-        ),
-        var(--o-color-primary1);
-
-        &.is-dark {
+        @include respond-to('>pad_v') {
           background: linear-gradient(
               142.13deg,
-              color-mix(in srgb, var(--o-color-primary1) 40%, transparent) 0%,
-              color-mix(in srgb, var(--o-color-primary1) 16%, transparent) 100%
+              color-mix(in srgb, transparent 0%, transparent) 0%,
+              color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
           ),
-          var(--o-color-fill2);
-        }
-
-        .step-idx {
-          background-color: #fff;
-          color: #000;
-        }
-
-        .step-title {
-          color: #fff;
-        }
-
-        .step-desc {
-          color: #fff;
+          var(--o-color-primary1);
+          &.is-dark {
+            background: linear-gradient(
+                142.13deg,
+                color-mix(in srgb, var(--o-color-primary1) 40%, transparent) 0%,
+                color-mix(in srgb, var(--o-color-primary1) 16%, transparent) 100%
+            ),
+            var(--o-color-fill2);
+          }
+          .step-idx {
+            background-color: #fff;
+            color: #000;
+          }
+          .step-title {
+            color: #fff;
+          }
+          .step-desc {
+            color: #fff;
+          }
         }
 
         .img-wrapper {
@@ -349,10 +349,10 @@ defineProps<EventsApplyPropsT>();
       &.step-4 {
         position: relative;
         padding-right: 292px;
-        @include respond('pad_h') {
+        @include respond-to('pad_h') {
           padding-right: 192px;
         }
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           padding-right: var(--o-gap-4);
         }
 

package/src/components/events/OEventsCalendar.vue

@@ -248,10 +248,10 @@ const getIcon = (item: CalendarItemT) => {
       height: var(--header-height);
       line-height: var(--header-height);
       text-align: center;
-      @include respond('laptop') {
+      @include respond-to('laptop') {
         --header-height: 40px;
       }
-      @include respond('pad_h') {
+      @include respond-to('pad_h') {
         --header-height: 38px;
       }
     }
@@ -260,10 +260,10 @@ const getIcon = (item: CalendarItemT) => {
   .o-collapse {
     --collapse-padding: 0;
     --collapse-radius: 0 0 var(--o-radius_control-l) var(--o-radius_control-l);
-    @include respond('pad_v') {
+    @include respond-to('pad_v') {
       --collapse-radius: var(--o-radius_control-l);
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       --collapse-radius: var(--o-radius_control-l);
     }
 
@@ -271,7 +271,7 @@ const getIcon = (item: CalendarItemT) => {
       .o-collapse-item-header {
         padding: var(--o-gap-4) var(--o-gap-6);
         align-items: center;
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           padding: var(--o-gap-2) var(--o-gap-3);
         }
 
@@ -298,7 +298,7 @@ const getIcon = (item: CalendarItemT) => {
     align-items: center;
     justify-content: space-between;
     margin-right: var(--o-gap-4);
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       flex-direction: column;
       align-items: flex-start;
     }
@@ -317,7 +317,7 @@ const getIcon = (item: CalendarItemT) => {
         justify-content: center;
         margin-right: var(--o-gap-4);
         background-color: rgb(var(--bg-color));
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           margin-right: var(--o-gap-2);
         }
       }
@@ -325,10 +325,10 @@ const getIcon = (item: CalendarItemT) => {
       .o-icon {
         font-size: 20px;
         color: var(--o-white);
-        @include respond('laptop') {
+        @include respond-to('laptop') {
           font-size: 16px;
         }
-        @include respond('pad_h') {
+        @include respond-to('pad_h') {
           font-size: 16px;
         }
 
@@ -350,7 +350,7 @@ const getIcon = (item: CalendarItemT) => {
       color: var(--o-color-info3);
       white-space: normal;
       @include text1;
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         margin-top: var(--o-gap-1);
         font-size: 12px;
       }
@@ -364,7 +364,7 @@ const getIcon = (item: CalendarItemT) => {
   .month-content {
     padding: var(--o-gap-3) 0;
     position: relative;
-    @include respond('pad_h') {
+    @include respond-to('pad_h') {
       padding: var(--o-gap-2) 0;
     }
     background-image: linear-gradient(
@@ -446,7 +446,7 @@ const getIcon = (item: CalendarItemT) => {
     );
 
     --event-gap: 6px;
-    @include respond('pad_h') {
+    @include respond-to('pad_h') {
       --event-gap: var(--o-gap-1);
     }
     // 跨月事件布局：Grid
@@ -507,7 +507,7 @@ const getIcon = (item: CalendarItemT) => {
           --link-gap: 2px;
           display: flex;
           @include tip1;
-          @include respond('pad_v') {
+          @include respond-to('pad_v') {
             color: var(--o-color-info1);
           }
 
@@ -549,7 +549,7 @@ const getIcon = (item: CalendarItemT) => {
         color: var(--o-color-info2);
         font-weight: 400;
         @include tip1;
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           @include text2;
         }
       }

package/src/components/events/OEventsList.vue

@@ -196,7 +196,7 @@ const list = computed(() => {
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       padding: var(--o-gap-3) var(--o-gap-4);
     }
 
@@ -210,10 +210,10 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
-        @include respond('pad_v') {
+        @include respond-to('pad_v') {
           margin-right: var(--o-gap-4);
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           margin-right: var(--o-gap-4);
         }
       }
@@ -236,7 +236,7 @@ const list = computed(() => {
     .o-input {
       .o-icon-search {
         font-size: 24px;
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           font-size: 16px;
         }
       }
@@ -247,15 +247,15 @@ const list = computed(() => {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--o-gap-6);
     margin-top: var(--o-gap-6);
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
       container-type: inline-size;
     }
-    @include respond('pad_v') {
+    @include respond-to('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
@@ -263,7 +263,7 @@ const list = computed(() => {
     .o-card {
       aspect-ratio: 1 / 1;
       position: relative;
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         aspect-ratio: 1 / 0.4;
       }
       @container (max-width: 300px) {
@@ -301,10 +301,10 @@ const list = computed(() => {
         text-align: center;
         padding: var(--o-gap-6);
 
-        @include respond('pad_v') {
+        @include respond-to('pad_v') {
           margin-top: var(--o-gap-4);
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           margin-top: var(--o-gap-4);
         }
 
@@ -317,7 +317,7 @@ const list = computed(() => {
           top: var(--o-gap-3);
           right: var(--o-gap-3);
           border-radius: var(--o-radius-xs);
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
         }
@@ -328,10 +328,10 @@ const list = computed(() => {
           height: 3lh; // 3倍行高
           @include h2;
           @include text-truncate(3);
-          @include respond('pad_v') {
+          @include respond-to('pad_v') {
             @include h1;
           }
-          @include respond('phone') {
+          @include respond-to('phone') {
             height: 2lh;
             @include text-truncate(2);
           }
@@ -349,13 +349,13 @@ const list = computed(() => {
           }
 
           @include text1;
-          @include respond('pad_v') {
+          @include respond-to('pad_v') {
             margin-top: var(--o-gap-2);
           }
-          @include respond('phone') {
+          @include respond-to('phone') {
             margin-top: var(--o-gap-2);
           }
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             display: flex;
             align-items: center;
             .o-divider {

package/src/components/header/OHeader.vue

@@ -149,9 +149,9 @@ const handleMouseleaveSub = (val: string) => {
 }
 
 .header-wrap-dark {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
+  box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
   .header-nav-content {
-    box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
+    box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
   }
 }
 </style>