@opendesign-plus/components 0.0.1-rc.21 → 0.0.1-rc.23

package/src/components/meeting/OMeetingCalendar.vue

@@ -402,11 +402,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 </template>
 <style lang="scss">
 .o-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
 
   .o-select {
     flex-grow: 1;
     max-width: 320px;
-    --select-radius: var(--o-radius-xs);
+    --select-radius: var(--meeting-input-radius);
   }
 
   .el-calendar-table {
@@ -417,10 +420,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
   .calendar-body {
     display: flex;
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--meeting-card-radius);
     background-color: var(--o-color-fill2);
     overflow: hidden;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       background-color: transparent;
       flex-direction: column;
     }
@@ -429,11 +432,11 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 56%;
       --el-calendar-borde: none;
       --el-calendar-selected-bg-color: none;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         width: 100%;
         flex-direction: column;
         background-color: var(--o-color-fill2);
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
       }
 
       .el-calendar__header {
@@ -445,7 +448,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-to('<=pad_v') {
+        @include respond('<=pad_v') {
           justify-content: center;
           border-bottom: none;
           height: 52px;
@@ -459,7 +462,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
           .o-select {
             max-width: 240px;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               display: none;
             }
           }
@@ -471,7 +474,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           flex-shrink: 0;
           color: var(--o-color-info1);
           @include text2;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             @include h3;
           }
 
@@ -492,7 +495,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           color: var(--o-color-info2);
           word-break: keep-all;
           @include text2;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: none;
           }
         }
@@ -512,7 +515,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             background: none;
             border: none;
             @include text1;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               padding: 0;
               text-align: center;
             }
@@ -536,7 +539,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           border: none;
           padding: 0 16px 16px;
           thead {
@@ -548,13 +551,13 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
 
             th:first-child {
-              border-top-left-radius: var(--o-radius-xs);
-              border-bottom-left-radius: var(--o-radius-xs);
+              border-top-left-radius: var(--meeting-cell-radius);
+              border-bottom-left-radius: var(--meeting-cell-radius);
             }
 
             th:last-child {
-              border-top-right-radius: var(--o-radius-xs);
-              border-bottom-right-radius: var(--o-radius-xs);
+              border-top-right-radius: var(--meeting-cell-radius);
+              border-bottom-right-radius: var(--meeting-cell-radius);
             }
           }
           tr:last-child {
@@ -575,7 +578,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         margin-bottom: var(--o-gap-2);
         height: 64px;
         color: var(--o-color-info1);
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           display: flex;
           justify-content: center;
           padding: 0;
@@ -584,7 +587,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .out-box {
           position: relative;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-cell-radius);
           padding: 8px 12px;
           width: 100%;
           height: 100%;
@@ -593,7 +596,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           @include tip1;
           @include hover {
             background-color: var(--o-color-control3-light);
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               @include hover {
                 background-color: inherit;
                 border: 1px solid transparent;
@@ -624,7 +627,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               font-size: 12px;
               margin-left: -4px;
               margin-top: 0;
-              @include respond-to('<=pad_v') {
+              @include respond('<=pad_v') {
                 height: 6px;
                 width: 6px;
                 margin-left: -2px;
@@ -642,7 +645,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
 
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             background-color: transparent;
             padding: 0;
             margin: 6px 8px;
@@ -697,7 +700,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-to('<=pad_v') {
+          @include respond('<=pad_v') {
             background-color: transparent;
             border: 1px solid transparent;
             .date-calender {
@@ -709,7 +712,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
                 height: 24px;
                 width: 40px;
                 background-color: var(--o-color-control3-light);
-                border-radius: var(--o-radius-l);
+                border-radius: var(--meeting-cell-radius);
                 border: 1px solid var(--o-color-primary1);
               }
             }
@@ -734,7 +737,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             border-radius: 50%;
           }
 
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             height: auto;
             width: auto;
             &::after {
@@ -745,7 +748,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               transform: translate(-50%, -50%);
               height: 24px;
               width: 40px;
-              border-radius: var(--o-radius-l);
+              border-radius: var(--meeting-cell-radius);
               z-index: -1;
             }
           }
@@ -757,14 +760,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 44%;
 
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-top: 12px;
         padding-top: 16px;
         background-color: var(--o-color-fill2);
         width: 100%;
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
 
         margin-top: 16px;
         padding-top: 12px;
@@ -772,15 +775,15 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
       .current-day {
         color: var(--o-color-info2);
-        @include respond-to('>pad_v') {
+        @include respond('>pad_v') {
           display: none;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           display: flex;
           margin: 16px 16px 12px;
           padding: 7px 12px;
           justify-content: center;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-card-radius);
           background-color: var(--o-color-control4-light);
           @include text2;
         }
@@ -794,14 +797,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         position: relative;
         height: 60px;
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           justify-content: space-between;
           padding: 0 16px;
           gap: 24px;
           height: auto;
           align-items: flex-start;
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           flex-direction: column;
           align-items: center;
           gap: 8px;
@@ -819,10 +822,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .o-select {
           display: none;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: inline-flex;
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             display: flex;
             width: 100%;
             max-width: 100%;
@@ -845,10 +848,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond-to('pad_v-laptop') {
+        @include respond('pad_v-laptop') {
           --tab-nav-padding: 0 0 14px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           border-bottom: none;
           height: auto;
           .o-icon {
@@ -862,7 +865,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           .o-tab-navs-wrap {
             height: auto;
           }
@@ -871,7 +874,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               width: 16px;
             }
           }
@@ -881,7 +884,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
     .meeting-list {
       height: var(--height);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         height: auto;
       }
     }

package/src/components/meeting/OMeetingForm.vue

@@ -704,6 +704,9 @@ defineExpose({
 
 <style lang="scss">
 .o-meeting-form {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 592px;
@@ -733,7 +736,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--meeting-input-radius);
     }
 
     input,
@@ -741,8 +744,17 @@ defineExpose({
       color: var(--o-input-color);
       @include text1;
 
+      @include respond('phone') {
+        @include text2;
+      }
+
       &::placeholder {
         color: var(--o-placeholder-color);
+        @include text1;
+
+        @include respond('phone') {
+          font-size: 14px !important;
+        }
       }
     }
 
@@ -760,7 +772,7 @@ defineExpose({
       align-items: center;
       --form-label-gap-top: 0;
       color: var(--o-color-info2);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         height: fit-content;
         @include text2;
       }
@@ -774,13 +786,13 @@ defineExpose({
       align-items: center;
 
       .o-form-item-main-wrap {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           @include text2;
         }
       }
     }
     .record-item {
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -793,7 +805,7 @@ defineExpose({
       }
 
       .o-form-item-main {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           flex-grow: 0;
         }
       }
@@ -805,7 +817,7 @@ defineExpose({
       column-gap: var(--o-gap-4);
       row-gap: var(--o-gap-2);
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-bottom: var(--o-gap-3);
         flex-direction: column;
         align-items: flex-start;
@@ -854,11 +866,8 @@ defineExpose({
     align-items: center;
 
     .o-btn {
-      height: 40px !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 20px !important;
       --btn-min-width: 90px;
+      --btn-radius: calc(var(--btn-height) / 2);
     }
   }
 
@@ -867,7 +876,7 @@ defineExpose({
     display: flex;
     align-items: center;
     border: 1px solid var(--o-color-control1);
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--meeting-card-radius);
     padding: 0 15px;
     background-color: var(--o-color-fill2);
 
@@ -879,7 +888,7 @@ defineExpose({
       border-color: var(--o-color-primary2);
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       background-color: var(--o-color-fill2);
     }
 
@@ -899,9 +908,6 @@ defineExpose({
         gap: 0;
       }
 
-      .el-select__placeholder {
-        @include text1;
-      }
 
       .el-select__caret,
       .el-input__prefix-icon {
@@ -910,7 +916,7 @@ defineExpose({
 
       div.o-form-item-main {
         margin-left: 0;
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-top: 0;
         }
       }
@@ -923,7 +929,7 @@ defineExpose({
     }
   }
 
-  @include respond-to('phone') {
+  @include respond('phone') {
     width: auto;
     .o-form {
       .o-form-item-main {
@@ -944,10 +950,10 @@ defineExpose({
         margin-left: 0;
       }
 
-      @include respond-to('pad_v') {
+      @include respond('pad_v') {
         margin-bottom: var(--o-gap-4);
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
         margin-bottom: var(--o-gap-3);
       }
     }
@@ -955,8 +961,8 @@ defineExpose({
     .repeat-config {
       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-to('<=pad_v') {
+      border-radius: var(--meeting-card-radius);
+      @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }
 
@@ -974,10 +980,10 @@ defineExpose({
 
       .o-form-item-main {
         margin-left: var(--o-gap-6);
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-left: 0;
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-left: 0;
           max-width: 100%;
         }
@@ -1025,8 +1031,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-control-light);
-  --el-fill-color-blank: var(--o-color-control-light);
+  --el-input-bg-color: var(--o-color-control5-light);
+  --el-fill-color-blank: var(--o-color-control5-light);
 }
 
 .o-meeting-form-popover-content {
@@ -1051,7 +1057,7 @@ defineExpose({
 }
 
 .o-meeting-form-date-picker-popper {
-  @include respond-to('phone') {
+  @include respond('phone') {
     .el-picker-panel {
       width: min(var(--grid-content-width), 400px);