@para-ui/core 5.0.0-beta.1 → 5.0.0-beta.2

package/es/DatePicker/style/panel.scss

@@ -0,0 +1,534 @@
+@use "../../styles/theme" as *;
+@use "./params" as *;
+@use "./mixin" as *;
+
+.#{$picker-prefix-cls} {
+
+  &-panel {
+    display: inline-flex;
+    flex-direction: column;
+    text-align: center;
+    background: #fff;
+    border: 1px solid $NA2;
+    border-radius: 2px;
+    outline: none;
+
+    &-focused {
+      border-color: $NP1;
+    }
+  }
+
+  // ========================================================
+  // =                     Shared Panel                     =
+  // ========================================================
+  &-decade-panel,
+  &-year-panel,
+  &-quarter-panel,
+  &-month-panel,
+  &-week-panel,
+  &-date-panel,
+  &-time-panel {
+    display: flex;
+    flex-direction: column;
+    width: 272px;
+  }
+
+  // ======================= Header =======================
+  &-header {
+    display: flex;
+    padding: 0 10px;
+    color: $NT1;
+    border-bottom: 1px solid $NA2;
+
+    >* {
+      flex: none;
+    }
+
+    button {
+      padding: 0;
+      color: $NT1;
+      line-height: 40px;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      transition: color 0.3s;
+    }
+
+    >button {
+      min-width: 1.6em;
+      line-height: 0;
+      font-size: $medium;
+      color: $NT1;
+
+      &:hover {
+        color: $NP1;
+      }
+    }
+
+    &-view {
+      flex: auto;
+      line-height: 40px;
+      font-size: $small;
+
+      button {
+        color: $NT1;
+        font-weight: 400;
+
+        &:not(:first-child) {
+          margin-left: 8px;
+        }
+
+        &:hover {
+          color: $NP1;
+        }
+      }
+    }
+  }
+
+  // Arrow button
+  &-prev-icon,
+  &-next-icon,
+  &-super-prev-icon,
+  &-super-next-icon {
+    position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border: 0 solid currentColor;
+      border-width: 1.5px 0 0 1.5px;
+      content: '';
+    }
+  }
+
+  &-super-prev-icon,
+  &-super-next-icon {
+    &::after {
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border: 0 solid currentColor;
+      border-width: 1.5px 0 0 1.5px;
+      content: '';
+    }
+  }
+
+  &-prev-icon,
+  &-super-prev-icon {
+    transform: rotate(-45deg);
+  }
+
+  &-next-icon,
+  &-super-next-icon {
+    transform: rotate(135deg);
+  }
+
+  // ======================== Body ========================
+  &-content {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    th,
+    td {
+      position: relative;
+      min-width: 24px;
+      font-weight: 400;
+    }
+
+    th {
+      height: 30px;
+      color: $NT1;
+      line-height: 30px;
+    }
+  }
+
+
+
+  &-cell {
+    padding: 3px 0;
+    color: $NT3;
+    cursor: pointer;
+
+    // In view
+    &-in-view {
+      color: $NT1;
+    }
+
+    // Disabled
+    &-disabled {
+      cursor: not-allowed;
+    }
+
+    @include picker-cell-inner('#{$picker-cell-inner-cls}')
+  }
+
+  &-decade-panel,
+  &-year-panel,
+  &-quarter-panel,
+  &-month-panel {
+    .#{$picker-prefix-cls}-content {
+      // height: 264px;
+      margin: 8px 0;
+    }
+
+    .#{$picker-cell-inner-cls} {
+      padding: 0 8px;
+    }
+
+    .#{$picker-prefix-cls}-cell {
+      &-disabled .#{$picker-cell-inner-cls} {
+        // background: #f5f5f5;
+      }
+    }
+  }
+
+  &-quarter-panel {
+    .#{$picker-prefix-cls}-content {
+      // height: 56px;
+    }
+  }
+
+  // ======================== Footer ========================
+  &-footer {
+    width: min-content;
+    min-width: 100%;
+    line-height: 36px;
+    text-align: center;
+
+    .#{$picker-prefix-cls}-panel & {
+      border-top: 1px solid $NA2;
+    }
+
+    &-extra {
+      padding: 0 12px;
+      line-height: 38px;
+      text-align: left;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid $NA2;
+      }
+    }
+  }
+
+  &-now {
+    text-align: left;
+
+    &-btn {
+      color: $NP1;
+      font-size: $small;
+      cursor: pointer;
+
+      &:hover {
+        color: $NPT8;
+      }
+    }
+  }
+
+  &-today-btn {
+    color: $NP1;
+    cursor: pointer;
+    font-size: $small;
+
+    &:hover {
+      color: $NPT8;
+    }
+
+    &:active {
+      color: $NPT8;
+    }
+
+    &-disabled {
+      &-disabled {
+        cursor: not-allowed;
+        color: $NT3;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  // ========================================================
+  // =                       Special                        =
+  // ========================================================
+
+  // ===================== Decade Panel =====================
+  &-decade-panel {
+    .#{$picker-cell-inner-cls} {
+      padding: 0 4px;
+    }
+
+    .#{$picker-prefix-cls}-cell::before {
+      display: none;
+    }
+  }
+
+  // ============= Year & Quarter & Month Panel =============
+  &-year-panel,
+  &-quarter-panel,
+  &-month-panel {
+    .#{$picker-prefix-cls}-body {
+      padding: 0 8px;
+    }
+
+    .#{$picker-cell-inner-cls} {
+      width: 60px;
+    }
+
+    .#{$picker-prefix-cls}-cell-range-hover-start::after {
+      left: 14px;
+      border-left: 1px dashed #7ec1ff;
+      border-radius: 2px 0 0 2px;
+
+      .#{$picker-prefix-cls}-panel-rtl & {
+        right: 14px;
+        border-right: 1px dashed #7ec1ff;
+        border-radius: 0 2px 2px 0;
+      }
+    }
+
+    .#{$picker-prefix-cls}-cell-range-hover-end::after {
+      right: 14px;
+      border-right: 1px dashed #7ec1ff;
+      border-radius: 0 2px 2px 0;
+
+      .#{$picker-prefix-cls}-panel-rtl & {
+        left: 14px;
+        border-left: 1px dashed #7ec1ff;
+        border-radius: 2px 0 0 2px;
+      }
+    }
+  }
+
+  // ====================== Week Panel ======================
+  &-week-panel {
+    .#{$picker-prefix-cls}-body {
+      padding: 8px 10px;
+    }
+
+    // Clear cell style
+    .#{$picker-prefix-cls}-cell {
+
+      &:hover .#{$picker-cell-inner-cls},
+      &-selected .#{$picker-cell-inner-cls},
+      .#{$picker-cell-inner-cls} {
+        background: transparent !important;
+      }
+    }
+
+    &-row {
+      td {
+        transition: background 0.3s;
+      }
+
+      &:hover td {
+        &::before {
+          background: $NA3;
+        }
+
+        &:first-child {
+          &::before {
+            border-radius: 2px 0 0 2px;
+          }
+        }
+
+        &:last-child {
+          &::before {
+            border-radius: 0 2px 2px 0;
+          }
+        }
+      }
+
+      &-selected td,
+      &-selected:hover td {
+        &::before {
+          background: $NP1;
+        }
+
+        &:first-child {
+          &::before {
+            border-radius: 2px 0 0 2px;
+          }
+        }
+
+        &:last-child {
+          &::before {
+            border-radius: 0 2px 2px 0;
+          }
+        }
+
+        &.#{$picker-prefix-cls}-cell-week {
+          color: rgba(255, 255, 255, 0.5);
+        }
+
+        &.#{$picker-prefix-cls}-cell-today .#{$picker-cell-inner-cls}::before {
+          border-color: $NA4;
+        }
+
+        .#{$picker-cell-inner-cls} {
+          color: $NA4;
+        }
+      }
+    }
+  }
+
+  // ====================== Date Panel ======================
+  &-date-panel {
+    .#{$picker-prefix-cls}-body {
+      padding: 8px 10px;
+    }
+
+    .#{$picker-prefix-cls}-content {
+      width: 252px;
+
+      th {
+        width: 36px
+      }
+    }
+  }
+
+  // ==================== Datetime Panel ====================
+  &-datetime-panel {
+    display: flex;
+
+    .#{$picker-prefix-cls}-time-panel {
+      border-left: 1px solid $NA2;
+    }
+
+    .#{$picker-prefix-cls}-date-panel,
+    .#{$picker-prefix-cls}-time-panel {
+      transition: opacity 0.3s;
+    }
+
+    // Keyboard
+    &-active {
+
+      .#{$picker-prefix-cls}-date-panel,
+      .#{$picker-prefix-cls}-time-panel {
+        opacity: 0.3;
+
+        &-active {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  // ====================== Time Panel ======================
+  &-time-panel {
+    width: auto;
+    min-width: auto;
+
+    .#{$picker-prefix-cls}-content {
+      display: flex;
+      flex: auto;
+      height: 204px;
+    }
+
+    &-column {
+      flex: 1 0 auto;
+      width: 56px;
+      margin: 0;
+      padding: 0;
+      overflow-y: hidden;
+      text-align: left;
+      list-style: none;
+      transition: background 0.3s;
+
+      //use12Hours
+      .#{$picker-prefix-cls}-use12Hours &:last-child {
+        // width: 52px;
+
+        // > li {
+        //   .#{$picker-prefix-cls}-time-panel-cell-inner {
+        //     padding: 0 12px;
+        //   }
+        // }
+      }
+
+      &::after {
+        display: block;
+        height: 196px;
+        content: '';
+
+        .#{$picker-prefix-cls}-datetime-panel & {
+          height: 198px;
+        }
+      }
+
+      &:not(:first-child) {}
+
+      &-active {
+        background: rgba(230, 247, 255, 0.2);
+      }
+
+      &:hover {
+        overflow-y: auto;
+      }
+
+      >li {
+        margin: 0;
+        padding: 0;
+        margin: 0 4px 6px 4px;
+
+        &.#{$picker-prefix-cls}-time-panel-cell {
+          .#{$picker-prefix-cls}-time-panel-cell-inner {
+            display: block;
+            width: 100%;
+            height: 24px;
+            margin: 0;
+            padding: 0 0 0 16px;
+            color: $NT1;
+            line-height: 24px;
+            border-radius: 2px;
+            cursor: pointer;
+            transition: background 0.3s;
+
+            &:hover {
+              background: $NA3;
+            }
+          }
+
+          &-selected {
+            .#{$picker-prefix-cls}-time-panel-cell-inner {
+              background: $NA3;
+              color: $NP1;
+            }
+          }
+
+          &-disabled {
+            .#{$picker-prefix-cls}-time-panel-cell-inner {
+              color: #BBBECB;
+              background: transparent;
+              cursor: not-allowed;
+
+              &:hover {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+_:-ms-fullscreen,
+:root {
+  .#{$picker-prefix-cls}-range-wrapper {
+
+    .#{$picker-prefix-cls}-month-panel .#{$picker-prefix-cls}-cell,
+    .#{$picker-prefix-cls}-year-panel .#{$picker-prefix-cls}-cell {
+      padding: 21px 0;
+    }
+  }
+}