plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/packages/components/DatePicker/date.scss

@@ -1,542 +1,542 @@
-@import "./date.mixin";
-
-$width: 276px;
-
-.#{componentName(date-base-panel)} {
-
-  border: solid 1px plv(border-color);
-  border-radius: 2px;
-  display: inline-block;
-  padding: 8px 12px 12px 12px;
-  width: 302px;
-  height: 282px;
-  transition: all ease 300ms;
-  box-sizing: border-box;
-
-  .date-base-panel-header {
-    width: $width;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    color: plv(text-2);
-    height: 40px;
-    font-size: 14px;
-
-    & > div:nth-child(2) {
-      flex: 1;
-      text-align: center;
-
-      span {
-        transition: all ease 300ms;
-
-        &:hover:not(.date-base-panel-header-static-label) {
-          color: plv(primary-6);
-          cursor: pointer;
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .#{componentName(button)} {
-      color: plv(txet-3) !important;
-
-      &:hover {
-        color: plv(primary-6) !important;
-      }
-    }
-  }
-
-  .date-base-panel-body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $width;
-    height: 220px;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: block;
-
-    .date-base-panel-item {
-      cursor: pointer;
-      box-sizing: border-box;
-      display: inline-block;
-      font-size: 12px;
-      color: plv(text-2);
-      user-select: none;
-
-      & > div {
-        width: 100%;
-        height: 100%;
-        padding: 4px;
-        box-sizing: border-box;
-        border-radius: 100px;
-
-        span {
-          display: inline-flex;
-          width: 100%;
-          height: 100%;
-          border-radius: 100px;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-
-      &.date-base-panel-item-temp-start {
-        & > div {
-          background-color: plv(secondary-2);
-          border-radius: 100px 0 0 100px;
-
-          & > span {
-            background-color: plv(secondary-4);
-            color: plv(secondary-8);
-          }
-        }
-      }
-
-      &.date-base-panel-item-temp-end {
-        & > div {
-          background-color: plv(secondary-2);
-          border-radius: 0 100px 100px 0;
-
-          & > span {
-            background-color: plv(secondary-4);
-            color: plv(secondary-8);
-          }
-        }
-
-        &.date-base-panel-item-temp-start {
-          & > div {
-            border-top-left-radius: 100px;
-            border-bottom-left-radius: 100px;
-          }
-        }
-      }
-
-      &.date-base-panel-item-temp-hover {
-        & > div {
-          background-color: plv(secondary-2);
-          border-radius: 0;
-        }
-      }
-
-      &:hover:not(.date-base-panel-item-disabled) {
-
-        & > div {
-          background-color: plv(primary-1);
-        }
-      }
-
-      &.date-base-panel-item-now {
-        color: plv(primary-6);
-        font-weight: bold;
-      }
-
-      &.date-base-panel-item-active {
-        & > div {
-          background-color: plv(primary-1);
-
-          & > span {
-            background-color: plv(primary-6);
-            color: white;
-          }
-        }
-      }
-
-      &.date-base-panel-item-disabled {
-        cursor: not-allowed;
-        color: plv(text-4);
-      }
-
-      &.date-base-panel-item-hover {
-
-        & > div {
-          background-color: plv(primary-1);
-          border-radius: 0;
-        }
-      }
-
-      &.date-base-panel-item-hover-start {
-
-        & > div {
-          background-color: plv(primary-1);
-          border-radius: 100px 0 0 100px;
-        }
-      }
-
-      &.date-base-panel-item-hover-end {
-
-        & > div {
-          background-color: plv(primary-1);
-          border-radius: 0 100px 100px 0;
-        }
-
-        &.date-base-panel-item-hover-start {
-          & > div {
-            border-top-left-radius: 100px;
-            border-bottom-left-radius: 100px;
-          }
-
-        }
-      }
-    }
-  }
-
-}
-
-.#{componentName(date-base-panel-year)} {
-  .date-base-panel-body {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .date-base-panel-year-list {
-    background-color: plv(background-lite);
-    transition: all ease 300ms;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-
-    .date-base-panel-year-item {
-      width: 63px;
-      height: 36px;
-    }
-  }
-}
-
-.#{componentName(date-base-panel-month-wrapper)} {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-
-  .#{componentName(date-base-panel-month)} {
-
-    .date-base-panel-body {
-      position: relative;
-      overflow: hidden;
-    }
-
-    .date-base-panel-month-item {
-      height: 36px;
-    }
-
-    .date-base-panel-month-quarter-list, .date-base-panel-month-list {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-wrap: wrap;
-      transition: all ease 300ms;
-    }
-
-    .date-base-panel-month-quarter-list {
-      left: 0;
-      width: 56px;
-      border-right: dashed 1px plv(border-color);
-
-      .date-base-panel-month-item {
-        width: 36px;
-
-        & > div {
-          border-radius: 100px;
-        }
-      }
-    }
-
-    .date-base-panel-month-list {
-      right: 0;
-
-      .date-base-panel-month-item {
-        width: 92px;
-      }
-
-      &.date-base-panel-month-list-show-quarter {
-        width: 216px;
-        left: initial;
-
-        .date-base-panel-month-item {
-          width: 72px;
-
-          & > div > span {
-            background-color: transparent;
-            color: inherit;
-          }
-        }
-      }
-    }
-  }
-
-  padding: 0;
-
-  & > div {
-    border: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-}
-
-.#{componentName(date-panel-quarter)} {
-  .date-base-panel-month-item {
-    &:nth-child(3n+1) {
-      & > div {
-        border-top-left-radius: 100px !important;
-        border-bottom-left-radius: 100px !important;
-
-        &:before {
-          display: none;
-        }
-      }
-    }
-
-    &:nth-child(3n) {
-      & > div {
-        border-top-right-radius: 100px !important;
-        border-bottom-right-radius: 100px !important;
-
-        &:after {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.#{componentName(date-base-panel-date-wrapper)} {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-
-  .#{componentName(date-base-panel-date)} {
-
-    .date-base-panel-body {
-      flex-direction: column;
-    }
-
-    .date-base-panel-date-time-label {
-      margin-left: 8px;
-    }
-
-    ul {
-      $itemWidth: 36px;
-      $itemHeight: 30px;
-
-      &.date-base-panel-date-week-list {
-        border-bottom: solid 1px plv(border-color);
-        padding-bottom: 4px;
-        width: $itemWidth*7;
-
-        .date-base-panel-date-week-item {
-          width: $itemWidth;
-          height: $itemHeight;
-          padding: 0 3px;
-
-          & > div {
-            background-color: plv(background);
-            cursor: auto;
-          }
-        }
-      }
-
-      &.date-base-panel-date-list {
-        width: $itemWidth*7;
-
-        .date-base-panel-date-item {
-          width: $itemWidth;
-          height: $itemHeight;
-          text-align: center;
-          margin-top: 2px;
-
-          & > div {
-            width: $itemHeight;
-            height: $itemHeight;
-            display: inline-block;
-            padding: 3px;
-          }
-
-          &, & span {
-            transition: all ease 300ms;
-          }
-
-          &.date-base-panel-date-item-other-month:not(:hover) {
-            span {
-              opacity: 0.2;
-            }
-          }
-
-          &.date-base-panel-item-disabled {
-            & > div {
-              span {
-                position: relative;
-
-                &:after {
-                  position: absolute;
-                  left: 5px;
-                  top: 5px;
-                  bottom: 0;
-                  width: 1px;
-                  content: '';
-                  background-color: plv(border-color);
-                  transform: rotate(-45deg);
-                  transform-origin: top left;
-                }
-              }
-            }
-          }
-
-          /*---------------------------------------temp start-------------------------------------------*/
-
-          @include dateItemStart(date-base-panel-item-temp-start, plv(secondary-2));
-
-          &.date-base-panel-item-temp-start {
-            & > div {
-              &:before {
-                background-color: plv(secondary-2);
-              }
-            }
-          }
-
-          @include dateItemHover(date-base-panel-item-temp-hover, plv(secondary-2));
-
-          @include dateItemEnd(date-base-panel-item-temp-end, plv(primary-2));
-
-          &.date-base-panel-item-temp-end {
-            & > div {
-              &:before {
-                background-color: plv(secondary-2);
-              }
-            }
-          }
-
-          /*---------------------------------------temp end-------------------------------------------*/
-
-          @include dateItemStart(date-base-panel-item-hover-start, plv(primary-1));
-
-          @include dateItemHover(date-base-panel-item-hover, plv(primary-1));
-
-          @include dateItemEnd(date-base-panel-item-hover-end, plv(primary-1))
-        }
-      }
-    }
-  }
-
-  .date-base-panel-body {
-    & > .#{componentName(time-panel)} {
-      border: none;
-    }
-  }
-
-  padding: 0;
-
-  & > div {
-    border: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-}
-
-.#{componentName(date-panel-date-range)} {
-  width: auto;
-  padding: 0;
-  white-space: nowrap;
-
-  & > .#{componentName(date-base-panel)} {
-    border: none;
-    white-space: normal;
-
-    &:first-child {
-      &:after {
-        top: 16px;
-        bottom: 16px;
-        right: 0;
-        content: '';
-        position: absolute;
-        background-color: plv(border-color);
-        width: 1px;
-      }
-    }
-  }
-}
-
-.#{componentName(date-panel-week)} {
-  .date-base-panel-date-item {
-    &:nth-child(7n+1) {
-      & > div {
-        border-top-left-radius: 100px !important;
-        border-bottom-left-radius: 100px !important;
-
-        &:before {
-          display: none;
-        }
-      }
-    }
-
-    &:nth-child(7n) {
-      & > div {
-        border-top-right-radius: 100px !important;
-        border-bottom-right-radius: 100px !important;
-
-        &:after {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.#{componentName(date)} {
-  .date-inner {
-    display: flex;
-    align-items: stretch;
-    height: 100%;
-
-    & > span {
-      color: plv(txet-3);
-    }
-
-    .date-input-inner {
-      border: none;
-      outline: none;
-      width: 90px;
-      height: 100%;
-      background: transparent;
-    }
-  }
-
-  &.date-range {
-    .date-input-inner {
-      text-align: center;
-    }
-  }
-}
-
-.#{componentName(date-foot)} {
-  padding: 8px;
-  border-top: solid 1px plv(border-color);
-  display: flex;
-  justify-content: center;
-
-  & > * + * {
-    margin-left: 8px;
-  }
-}
-
-.#{componentName(popup-item)} {
-  .popup-item-content {
-    & > .#{componentName(date-base-panel)} {
-      border: none;
-    }
-  }
-}
+@import "./date.mixin";
+
+$width: 276px;
+
+.#{componentName(date-base-panel)} {
+
+  border: solid 1px plv(border-color);
+  border-radius: 2px;
+  display: inline-block;
+  padding: 8px 12px 12px 12px;
+  width: 302px;
+  height: 282px;
+  transition: all ease 300ms;
+  box-sizing: border-box;
+
+  .date-base-panel-header {
+    width: $width;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    color: plv(text-2);
+    height: 40px;
+    font-size: 14px;
+
+    & > div:nth-child(2) {
+      flex: 1;
+      text-align: center;
+
+      span {
+        transition: all ease 300ms;
+
+        &:hover:not(.date-base-panel-header-static-label) {
+          color: plv(primary-6);
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .#{componentName(button)} {
+      color: plv(txet-3) !important;
+
+      &:hover {
+        color: plv(primary-6) !important;
+      }
+    }
+  }
+
+  .date-base-panel-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $width;
+    height: 220px;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: block;
+
+    .date-base-panel-item {
+      cursor: pointer;
+      box-sizing: border-box;
+      display: inline-block;
+      font-size: 12px;
+      color: plv(text-2);
+      user-select: none;
+
+      & > div {
+        width: 100%;
+        height: 100%;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: 100px;
+
+        span {
+          display: inline-flex;
+          width: 100%;
+          height: 100%;
+          border-radius: 100px;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &.date-base-panel-item-temp-start {
+        & > div {
+          background-color: plv(secondary-2);
+          border-radius: 100px 0 0 100px;
+
+          & > span {
+            background-color: plv(secondary-4);
+            color: plv(secondary-8);
+          }
+        }
+      }
+
+      &.date-base-panel-item-temp-end {
+        & > div {
+          background-color: plv(secondary-2);
+          border-radius: 0 100px 100px 0;
+
+          & > span {
+            background-color: plv(secondary-4);
+            color: plv(secondary-8);
+          }
+        }
+
+        &.date-base-panel-item-temp-start {
+          & > div {
+            border-top-left-radius: 100px;
+            border-bottom-left-radius: 100px;
+          }
+        }
+      }
+
+      &.date-base-panel-item-temp-hover {
+        & > div {
+          background-color: plv(secondary-2);
+          border-radius: 0;
+        }
+      }
+
+      &:hover:not(.date-base-panel-item-disabled) {
+
+        & > div {
+          background-color: plv(primary-1);
+        }
+      }
+
+      &.date-base-panel-item-now {
+        color: plv(primary-6);
+        font-weight: bold;
+      }
+
+      &.date-base-panel-item-active {
+        & > div {
+          background-color: plv(primary-1);
+
+          & > span {
+            background-color: plv(primary-6);
+            color: white;
+          }
+        }
+      }
+
+      &.date-base-panel-item-disabled {
+        cursor: not-allowed;
+        color: plv(text-4);
+      }
+
+      &.date-base-panel-item-hover {
+
+        & > div {
+          background-color: plv(primary-1);
+          border-radius: 0;
+        }
+      }
+
+      &.date-base-panel-item-hover-start {
+
+        & > div {
+          background-color: plv(primary-1);
+          border-radius: 100px 0 0 100px;
+        }
+      }
+
+      &.date-base-panel-item-hover-end {
+
+        & > div {
+          background-color: plv(primary-1);
+          border-radius: 0 100px 100px 0;
+        }
+
+        &.date-base-panel-item-hover-start {
+          & > div {
+            border-top-left-radius: 100px;
+            border-bottom-left-radius: 100px;
+          }
+
+        }
+      }
+    }
+  }
+
+}
+
+.#{componentName(date-base-panel-year)} {
+  .date-base-panel-body {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .date-base-panel-year-list {
+    background-color: plv(background-lite);
+    transition: all ease 300ms;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .date-base-panel-year-item {
+      width: 63px;
+      height: 36px;
+    }
+  }
+}
+
+.#{componentName(date-base-panel-month-wrapper)} {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+
+  .#{componentName(date-base-panel-month)} {
+
+    .date-base-panel-body {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .date-base-panel-month-item {
+      height: 36px;
+    }
+
+    .date-base-panel-month-quarter-list, .date-base-panel-month-list {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      transition: all ease 300ms;
+    }
+
+    .date-base-panel-month-quarter-list {
+      left: 0;
+      width: 56px;
+      border-right: dashed 1px plv(border-color);
+
+      .date-base-panel-month-item {
+        width: 36px;
+
+        & > div {
+          border-radius: 100px;
+        }
+      }
+    }
+
+    .date-base-panel-month-list {
+      right: 0;
+
+      .date-base-panel-month-item {
+        width: 92px;
+      }
+
+      &.date-base-panel-month-list-show-quarter {
+        width: 216px;
+        left: initial;
+
+        .date-base-panel-month-item {
+          width: 72px;
+
+          & > div > span {
+            background-color: transparent;
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  padding: 0;
+
+  & > div {
+    border: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+.#{componentName(date-panel-quarter)} {
+  .date-base-panel-month-item {
+    &:nth-child(3n+1) {
+      & > div {
+        border-top-left-radius: 100px !important;
+        border-bottom-left-radius: 100px !important;
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+
+    &:nth-child(3n) {
+      & > div {
+        border-top-right-radius: 100px !important;
+        border-bottom-right-radius: 100px !important;
+
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.#{componentName(date-base-panel-date-wrapper)} {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+
+  .#{componentName(date-base-panel-date)} {
+
+    .date-base-panel-body {
+      flex-direction: column;
+    }
+
+    .date-base-panel-date-time-label {
+      margin-left: 8px;
+    }
+
+    ul {
+      $itemWidth: 36px;
+      $itemHeight: 30px;
+
+      &.date-base-panel-date-week-list {
+        border-bottom: solid 1px plv(border-color);
+        padding-bottom: 4px;
+        width: $itemWidth*7;
+
+        .date-base-panel-date-week-item {
+          width: $itemWidth;
+          height: $itemHeight;
+          padding: 0 3px;
+
+          & > div {
+            background-color: plv(background);
+            cursor: auto;
+          }
+        }
+      }
+
+      &.date-base-panel-date-list {
+        width: $itemWidth*7;
+
+        .date-base-panel-date-item {
+          width: $itemWidth;
+          height: $itemHeight;
+          text-align: center;
+          margin-top: 2px;
+
+          & > div {
+            width: $itemHeight;
+            height: $itemHeight;
+            display: inline-block;
+            padding: 3px;
+          }
+
+          &, & span {
+            transition: all ease 300ms;
+          }
+
+          &.date-base-panel-date-item-other-month:not(:hover) {
+            span {
+              opacity: 0.2;
+            }
+          }
+
+          &.date-base-panel-item-disabled {
+            & > div {
+              span {
+                position: relative;
+
+                &:after {
+                  position: absolute;
+                  left: 5px;
+                  top: 5px;
+                  bottom: 0;
+                  width: 1px;
+                  content: '';
+                  background-color: plv(border-color);
+                  transform: rotate(-45deg);
+                  transform-origin: top left;
+                }
+              }
+            }
+          }
+
+          /*---------------------------------------temp start-------------------------------------------*/
+
+          @include dateItemStart(date-base-panel-item-temp-start, plv(secondary-2));
+
+          &.date-base-panel-item-temp-start {
+            & > div {
+              &:before {
+                background-color: plv(secondary-2);
+              }
+            }
+          }
+
+          @include dateItemHover(date-base-panel-item-temp-hover, plv(secondary-2));
+
+          @include dateItemEnd(date-base-panel-item-temp-end, plv(primary-2));
+
+          &.date-base-panel-item-temp-end {
+            & > div {
+              &:before {
+                background-color: plv(secondary-2);
+              }
+            }
+          }
+
+          /*---------------------------------------temp end-------------------------------------------*/
+
+          @include dateItemStart(date-base-panel-item-hover-start, plv(primary-1));
+
+          @include dateItemHover(date-base-panel-item-hover, plv(primary-1));
+
+          @include dateItemEnd(date-base-panel-item-hover-end, plv(primary-1))
+        }
+      }
+    }
+  }
+
+  .date-base-panel-body {
+    & > .#{componentName(time-panel)} {
+      border: none;
+    }
+  }
+
+  padding: 0;
+
+  & > div {
+    border: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+.#{componentName(date-panel-date-range)} {
+  width: auto;
+  padding: 0;
+  white-space: nowrap;
+
+  & > .#{componentName(date-base-panel)} {
+    border: none;
+    white-space: normal;
+
+    &:first-child {
+      &:after {
+        top: 16px;
+        bottom: 16px;
+        right: 0;
+        content: '';
+        position: absolute;
+        background-color: plv(border-color);
+        width: 1px;
+      }
+    }
+  }
+}
+
+.#{componentName(date-panel-week)} {
+  .date-base-panel-date-item {
+    &:nth-child(7n+1) {
+      & > div {
+        border-top-left-radius: 100px !important;
+        border-bottom-left-radius: 100px !important;
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+
+    &:nth-child(7n) {
+      & > div {
+        border-top-right-radius: 100px !important;
+        border-bottom-right-radius: 100px !important;
+
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.#{componentName(date)} {
+  .date-inner {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+
+    & > span {
+      color: plv(txet-3);
+    }
+
+    .date-input-inner {
+      border: none;
+      outline: none;
+      width: 90px;
+      height: 100%;
+      background: transparent;
+    }
+  }
+
+  &.date-range {
+    .date-input-inner {
+      text-align: center;
+    }
+  }
+}
+
+.#{componentName(date-foot)} {
+  padding: 8px;
+  border-top: solid 1px plv(border-color);
+  display: flex;
+  justify-content: center;
+
+  & > * + * {
+    margin-left: 8px;
+  }
+}
+
+.#{componentName(popup-item)} {
+  .popup-item-content {
+    & > .#{componentName(date-base-panel)} {
+      border: none;
+    }
+  }
+}