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

package/src/components/meeting/OMeetingCalendar.vue

@@ -420,7 +420,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
     border-radius: var(--o-radius-xs);
     background-color: var(--o-color-fill2);
     overflow: hidden;
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       background-color: transparent;
       flex-direction: column;
     }
@@ -429,7 +429,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 56%;
       --el-calendar-borde: none;
       --el-calendar-selected-bg-color: none;
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         width: 100%;
         flex-direction: column;
         background-color: var(--o-color-fill2);
@@ -445,7 +445,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         gap: var(--o-gap-6);
         border-bottom: 1px solid var(--o-color-control4);
         background: var(--o-color-fill2);
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           justify-content: center;
           border-bottom: none;
           height: 52px;
@@ -459,7 +459,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
           .o-select {
             max-width: 240px;
-            @include respond('<=pad_v') {
+            @include respond-to('<=pad_v') {
               display: none;
             }
           }
@@ -471,7 +471,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           flex-shrink: 0;
           color: var(--o-color-info1);
           @include text2;
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             @include h3;
           }
 
@@ -492,7 +492,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           color: var(--o-color-info2);
           word-break: keep-all;
           @include text2;
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             display: none;
           }
         }
@@ -512,7 +512,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             background: none;
             border: none;
             @include text1;
-            @include respond('<=pad_v') {
+            @include respond-to('<=pad_v') {
               padding: 0;
               text-align: center;
             }
@@ -536,7 +536,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           border: none;
           padding: 0 16px 16px;
           thead {
@@ -575,7 +575,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         margin-bottom: var(--o-gap-2);
         height: 64px;
         color: var(--o-color-info1);
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           display: flex;
           justify-content: center;
           padding: 0;
@@ -593,7 +593,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           @include tip1;
           @include hover {
             background-color: var(--o-color-control3-light);
-            @include respond('<=pad_v') {
+            @include respond-to('<=pad_v') {
               @include hover {
                 background-color: inherit;
                 border: 1px solid transparent;
@@ -624,7 +624,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               font-size: 12px;
               margin-left: -4px;
               margin-top: 0;
-              @include respond('<=pad_v') {
+              @include respond-to('<=pad_v') {
                 height: 6px;
                 width: 6px;
                 margin-left: -2px;
@@ -642,7 +642,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
 
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             background-color: transparent;
             padding: 0;
             margin: 6px 8px;
@@ -697,7 +697,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .out-box {
           background-color: var(--o-color-control3-light);
           border: 1px solid var(--o-color-primary1);
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             background-color: transparent;
             border: 1px solid transparent;
             .date-calender {
@@ -734,7 +734,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             border-radius: 50%;
           }
 
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             height: auto;
             width: auto;
             &::after {
@@ -757,14 +757,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 44%;
 
 
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         margin-top: 12px;
         padding-top: 16px;
         background-color: var(--o-color-fill2);
         width: 100%;
         border-radius: var(--o-radius-xs);
       }
-      @include respond('phone') {
+      @include respond-to('phone') {
 
         margin-top: 16px;
         padding-top: 12px;
@@ -772,10 +772,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
       .current-day {
         color: var(--o-color-info2);
-        @include respond('>pad_v') {
+        @include respond-to('>pad_v') {
           display: none;
         }
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           display: flex;
           margin: 16px 16px 12px;
           padding: 7px 12px;
@@ -794,14 +794,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         position: relative;
         height: 60px;
 
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           justify-content: space-between;
           padding: 0 16px;
           gap: 24px;
           height: auto;
           align-items: flex-start;
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           flex-direction: column;
           align-items: center;
           gap: 8px;
@@ -819,10 +819,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .o-select {
           display: none;
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             display: inline-flex;
           }
-          @include respond('phone') {
+          @include respond-to('phone') {
             display: flex;
             width: 100%;
             max-width: 100%;
@@ -845,10 +845,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond('pad_v-laptop') {
+        @include respond-to('pad_v-laptop') {
           --tab-nav-padding: 0 0 14px;
         }
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           border-bottom: none;
           height: auto;
           .o-icon {
@@ -862,7 +862,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           .o-tab-navs-wrap {
             height: auto;
           }
@@ -871,7 +871,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;
-            @include respond('<=pad_v') {
+            @include respond-to('<=pad_v') {
               width: 16px;
             }
           }
@@ -881,7 +881,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
     .meeting-list {
       height: var(--height);
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         height: auto;
       }
     }

package/src/components/meeting/OMeetingForm.vue

@@ -760,7 +760,7 @@ defineExpose({
       align-items: center;
       --form-label-gap-top: 0;
       color: var(--o-color-info2);
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         height: fit-content;
         @include text2;
       }
@@ -774,13 +774,13 @@ defineExpose({
       align-items: center;
 
       .o-form-item-main-wrap {
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           @include text2;
         }
       }
     }
     .record-item {
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -793,7 +793,7 @@ defineExpose({
       }
 
       .o-form-item-main {
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           flex-grow: 0;
         }
       }
@@ -805,7 +805,7 @@ defineExpose({
       column-gap: var(--o-gap-4);
       row-gap: var(--o-gap-2);
 
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         margin-bottom: var(--o-gap-3);
         flex-direction: column;
         align-items: flex-start;
@@ -879,7 +879,7 @@ defineExpose({
       border-color: var(--o-color-primary2);
     }
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       background-color: var(--o-color-fill2);
     }
 
@@ -910,7 +910,7 @@ defineExpose({
 
       div.o-form-item-main {
         margin-left: 0;
-        @include respond('phone') {
+        @include respond-to('phone') {
           margin-top: 0;
         }
       }
@@ -923,7 +923,7 @@ defineExpose({
     }
   }
 
-  @include respond('phone') {
+  @include respond-to('phone') {
     width: auto;
     .o-form {
       .o-form-item-main {
@@ -944,10 +944,10 @@ defineExpose({
         margin-left: 0;
       }
 
-      @include respond('pad_v') {
+      @include respond-to('pad_v') {
         margin-bottom: var(--o-gap-4);
       }
-      @include respond('phone') {
+      @include respond-to('phone') {
         margin-bottom: var(--o-gap-3);
       }
     }
@@ -956,7 +956,7 @@ defineExpose({
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
       border-radius: var(--o-radius-xs);
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         padding: var(--o-gap-4);
       }
 
@@ -974,10 +974,10 @@ defineExpose({
 
       .o-form-item-main {
         margin-left: var(--o-gap-6);
-        @include respond('pad_v') {
+        @include respond-to('pad_v') {
           margin-left: 0;
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           margin-left: 0;
           max-width: 100%;
         }
@@ -1025,8 +1025,8 @@ defineExpose({
   --el-color-primary: var(--o-color-primary1);
   --el-datepicker-active-color: var(--o-color-primary1);
   --el-fill-color-light: var(--o-color-control2-light);
-  --el-input-bg-color: var(--o-color-control5-light);
-  --el-fill-color-blank: var(--o-color-control5-light);
+  --el-input-bg-color: var(--o-color-control-light);
+  --el-fill-color-blank: var(--o-color-control-light);
 }
 
 .o-meeting-form-popover-content {
@@ -1051,7 +1051,7 @@ defineExpose({
 }
 
 .o-meeting-form-date-picker-popper {
-  @include respond('phone') {
+  @include respond-to('phone') {
     .el-picker-panel {
       width: min(var(--grid-content-width), 400px);
 

package/src/components/meeting/OMeetingPlayback.vue

@@ -272,7 +272,7 @@ onUnmounted(() => {
   gap: var(--grid-column-gutter);
   align-items: flex-start;
 
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     flex-wrap: wrap;
   }
 
@@ -284,7 +284,7 @@ onUnmounted(() => {
 
   .left-card {
     width: 60%;
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       width: 100%;
     }
 
@@ -317,7 +317,7 @@ onUnmounted(() => {
 
         .o-tab-nav {
           padding-bottom: var(--o-gap-4);
-          @include respond('<=pad_v') {
+          @include respond-to('<=pad_v') {
             padding-bottom: var(--o-gap-2);
           }
         }
@@ -431,7 +431,7 @@ onUnmounted(() => {
 
   .right-card {
     width: 40%;
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       width: 100%;
     }
   }

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -787,11 +787,11 @@ const cancelActions = 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));
@@ -831,7 +831,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         }
       }
 
-      @include respond('phone') {
+      @include respond-to('phone') {
         padding-top: var(--o-gap-7);
         background-color: var(--o-color-fill1);
         padding-bottom: var(--o-gap-4);
@@ -850,7 +850,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       width: 334px;
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
 
-      @include respond('pad_h') {
+      @include respond-to('pad_h') {
         .el-calendar {
           .el-calendar__body {
             padding-left: 12px;
@@ -868,10 +868,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
           }
         }
       }
-      @include respond('pad_v') {
+      @include respond-to('pad_v') {
         width: 100%;
       }
-      @include respond('phone') {
+      @include respond-to('phone') {
         display: none;
       }
       .el-calendar {
@@ -1006,11 +1006,11 @@ const cancelActions = 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));
                 }
               }
             }
@@ -1028,7 +1028,7 @@ const cancelActions = 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));
       }
       &.is-empty {
@@ -1049,7 +1049,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         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;
         }
 
@@ -1061,7 +1061,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             flex-grow: 1;
           }
 
-          @include respond('phone') {
+          @include respond-to('phone') {
             padding-left: var(--o-gap-2);
           }
 
@@ -1090,13 +1090,13 @@ const cancelActions = 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;
               }
 
@@ -1145,7 +1145,7 @@ const cancelActions = 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);
             }
 
@@ -1160,7 +1160,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
     .list-body {
       height: 100%;
 
-      @include respond('phone') {
+      @include respond-to('phone') {
         height: fit-content;
         padding: var(--o-gap-4) !important;
       }
@@ -1176,7 +1176,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           --btn-color: var(--o-color-primary2);
         }
 
-        @include respond('phone') {
+        @include respond-to('phone') {
           display: none;
         }
 
@@ -1235,21 +1235,21 @@ const cancelActions = 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;
             }
           }
@@ -1272,7 +1272,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             position: relative;
             top: 4px;
             flex-shrink: 0;
-            @include respond('phone') {
+            @include respond-to('phone') {
               position: absolute;
               right: 0;
               width: 20px;
@@ -1297,7 +1297,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               gap: var(--o-gap-3);
               width: 100%;
               margin-bottom: var(--o-gap-2);
-              @include respond('phone') {
+              @include respond-to('phone') {
                 flex-grow: 1;
                 width: 100%;
                 align-self: stretch;
@@ -1399,7 +1399,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               height: 18px;
               width: 18px;
               display: var(--copy-display);
-              @include respond('phone') {
+              @include respond-to('phone') {
                 bottom: var(--o-gap-2);
                 right: calc(20px + var(--o-gap-2))
               }
@@ -1423,7 +1423,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           .meeting-detail {
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
 
-            @include respond('phone') {
+            @include respond-to('phone') {
               padding-left: 0;
             }
 

package/src/components/meeting/OSigMeetingCalendar.vue

@@ -312,7 +312,7 @@ onMounted(() => {
   background-color: var(--o-color-fill2);
   border-radius: var(--o-radius-xs);
   margin-top: var(--o-gap-5);
-  @include respond('phone') {
+  @include respond-to('phone') {
     .meeting-card-header {
       padding: 12px 16px 0;
 
@@ -339,7 +339,7 @@ onMounted(() => {
     align-items: center;
     padding: 12px 32px 0;
     @include text1;
-    @include respond('<=pad') {
+    @include respond-to('<=pad') {
       padding: 12px 16px 0;
     }
 
@@ -405,7 +405,7 @@ onMounted(() => {
   .list-content {
     flex-grow: 1;
     height: 400px;
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       height: auto;
     }
   }

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -251,13 +251,13 @@ const computedList = computed<any[]>(() => {
   .o-collapse {
     --icon-size2: 24px;
     --icon-right: 12px;
-    @include respond('<=pad') {
+    @include respond-to('<=pad') {
       --icon-size2: 20px;
     }
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       --icon-right: 8px;
     }
-    @include respond('phone') {
+    @include respond-to('phone') {
       --icon-right: 4px;
     }
 
@@ -285,7 +285,7 @@ const computedList = computed<any[]>(() => {
           color: var(--o-color-primary1);
         }
       }
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         &::after {
           width: calc(100% - 2 * 16px);
         }
@@ -320,7 +320,7 @@ const computedList = computed<any[]>(() => {
       padding: var(--o-gap-4) var(--o-gap-5);
       position: relative;
 
-      @include respond('>pad_v') {
+      @include respond-to('>pad_v') {
         &:hover {
           .o-collapse-item-title {
             .copy-icon {
@@ -330,7 +330,7 @@ const computedList = computed<any[]>(() => {
           }
         }
       }
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         padding: 12px 16px;
       }
 
@@ -392,11 +392,11 @@ const computedList = computed<any[]>(() => {
         border-radius: var(--o-radius-xs);
         @include tip1;
 
-        @include respond('<=pad_v') {
+        @include respond-to('<=pad_v') {
           padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
 
         }
-        @include respond('phone') {
+        @include respond-to('phone') {
           padding: 12px 16px;
         }
 
@@ -446,7 +446,7 @@ const computedList = computed<any[]>(() => {
       color: var(--o-color-info2);
       @include text2;
 
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         @include h3;
       }
 

package/src/components/meeting/components/OMeetingDetail.vue

@@ -156,7 +156,7 @@ defineExpose({ copyInfo });
     font-size: 14px;
     gap: var(--o-gap-5);
 
-    @include respond('<=pad_v') {
+    @include respond-to('<=pad_v') {
       font-size: 12px;
       gap: var(--o-gap-2);
     }
@@ -233,7 +233,7 @@ defineExpose({ copyInfo });
     justify-content: flex-end;
     gap: var(--o-gap-2);
 
-    @include respond('phone') {
+    @include respond-to('phone') {
       border-top: 1px solid var(--o-color-control4);
       padding-top: var(--o-gap-2);
       position: static;

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -475,7 +475,7 @@ watch(
 
   .captions-tab {
     .captions-scroller {
-      @include respond('<=pad_v') {
+      @include respond-to('<=pad_v') {
         max-height: 600px;
       }
     }