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

package/es/DatePicker/style/mixin.scss

@@ -0,0 +1,340 @@
+@use "../../styles/theme" as *;
+@use "./params" as *;
+
+@mixin reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: $NT1;
+  font-size: $small;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+}
+
+@mixin hover {
+  border-color: $NP1;
+  border-right-width: 1px !important;
+}
+
+@mixin placeholder {
+  &::-moz-placeholder {
+    opacity: 1;
+  }
+
+  &::placeholder {
+    color: $NT3;
+    font-size: $small;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}
+
+@mixin active {
+  border-color: $NP1;
+  border-right-width: 1px !important;
+  outline: 0;
+}
+
+@mixin disabled {
+  color: $NT1;
+  background-color: $NA3;
+  cursor: not-allowed;
+  opacity: 1;
+
+  &:hover {
+    border-color: $NA1;
+    border-right-width: 1px !important;
+  }
+}
+
+@mixin input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  padding: 4px 11px;
+  color: $NT1;
+  font-size: $small;
+  line-height: 1.5715;
+  background-color: $NA4;
+  background-image: none;
+  transition: all 0.3s;
+  @include placeholder; // Reset placeholder
+
+  &:hover {
+    @include hover;
+  }
+
+  &:focus,
+  &-focused {
+    @include active;
+  }
+
+  &-disabled {
+    @include disabled;
+  }
+
+  &[disabled] {
+    @include disabled;
+  }
+
+  &-borderless {
+
+    &,
+    &:hover,
+    &:focus,
+    &-focused,
+    &-disabled,
+    &[disabled] {
+      background-color: transparent;
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  // Reset height for `textarea`s
+  &textarea {
+    max-width: 100%;
+    height: auto;
+    min-height: 32px;
+    line-height: 1.5715;
+    vertical-align: bottom;
+    transition: all 0.3s, height 0s;
+  }
+
+  // Size
+  &-lg {
+    padding: 6.5px 11px;
+    font-size: $medium;
+  }
+
+  &-sm {
+    padding: 0px 7px;
+  }
+}
+
+@mixin picker-cell-inner($cellClassName) {
+  $pre: &;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: 24px;
+    transform: translateY(-50%);
+    content: '';
+  }
+
+  // >>> Default
+  .#{$cellClassName} {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 2px;
+    transition: background 0.3s, border 0.3s;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  // >>> Hover
+  &:hover:not(&-in-view),
+  &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
+    .#{$cellClassName} {
+      background: $NA3;
+      border-radius: $radius-sm;
+    }
+  }
+
+  // >>> Today
+  &-in-view#{$pre}-today .#{$cellClassName} {
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 1;
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background-color: $NP1;
+      //border: 1px solid $NP1;
+      // background-color: $NA3;
+      border-radius: $radius;
+      content: '';
+    }
+  }
+
+  // >>> In Range
+  &-in-view#{$pre}-in-range {
+    position: relative;
+    color: $NP1;
+
+    &::before {
+      background: $NA3;
+    }
+  }
+
+  // >>> Selected
+  &-in-view#{$pre}-selected .#{$cellClassName},
+  &-in-view#{$pre}-range-start .#{$cellClassName},
+  &-in-view#{$pre}-range-end .#{$cellClassName} {
+    color: $NA4;
+    background: $NP1;
+    border-radius: 2px;
+  }
+
+  &-in-view#{$pre}-range-start:not(&-range-start-single),
+  &-in-view#{$pre}-range-end:not(&-range-end-single) {
+    &::before {
+      background: $NA3;
+    }
+  }
+
+  &-in-view#{$pre}-range-start::before {
+    left: 50%;
+  }
+
+  &-in-view#{$pre}-range-end::before {
+    right: 50%;
+  }
+
+  // >>> Range Hover
+  &-in-view#{$pre}-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
+  &-in-view#{$pre}-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
+  &-in-view#{$pre}-range-hover-start#{$pre}-range-start-single,
+  &-in-view#{$pre}-range-hover-start#{$pre}-range-start#{$pre}-range-end#{$pre}-range-end-near-hover,
+  &-in-view#{$pre}-range-hover-end#{$pre}-range-start#{$pre}-range-end#{$pre}-range-start-near-hover,
+  &-in-view#{$pre}-range-hover-end#{$pre}-range-end-single,
+  &-in-view#{$pre}-range-hover:not(&-in-range) {
+    &::after {
+      position: absolute;
+      top: 50%;
+      z-index: 0;
+      height: 22px;
+      border-top: 1px dashed $NP1;
+      border-bottom: 1px dashed $NP1;
+      transform: translateY(-50%);
+      content: '';
+    }
+  }
+
+  // Add space for stash
+  &-range-hover-start::after,
+  &-range-hover-end::after,
+  &-range-hover::after {
+    right: 0;
+    left: 2px;
+  }
+
+  // Hover with in range
+  &-in-view#{$pre}-in-range#{$pre}-range-hover::before,
+  &-in-view#{$pre}-range-start#{$pre}-range-hover::before,
+  &-in-view#{$pre}-range-end#{$pre}-range-hover::before,
+  &-in-view#{$pre}-range-start:not(&-range-start-single) &-range-hover-start::before,
+  &-in-view#{$pre}-range-end:not(&-range-end-single) &-range-hover-end::before,
+  .#{$picker-prefix-cls}-panel> :not(.#{$picker-prefix-cls}-date-panel) &-in-view#{$pre}-in-range#{$pre}-range-hover-start::before,
+  .#{$picker-prefix-cls}-panel> :not(.#{$picker-prefix-cls}-date-panel) &-in-view#{$pre}-in-range#{$pre}-range-hover-end::before {
+    //background: #f00;
+  }
+
+  // range start border-radius
+  &-in-view#{$pre}-rage-start:not(&-range-start-single):not(&-range-end) .#{$cellClassName} {
+    border-radius: $radius;
+  }
+
+  // range end border-radius
+  &-in-view#{$pre}-range-end:not(&-range-end-single):not(&-range-start) .#{$cellClassName} {
+    border-radius: $radius;
+  }
+
+  // DatePanel only
+  .#{$picker-prefix-cls}-date-panel &-in-view#{$pre}-in-range#{$pre}-range-hover-start .#{$cellClassName},
+  .#{$picker-prefix-cls}-date-panel &-in-view#{$pre}-in-range#{$pre}-range-hover-end .#{$cellClassName} {
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      background: $NA3;
+      content: '';
+    }
+  }
+
+  .#{$picker-prefix-cls}-date-panel &-in-view#{$pre}-in-range#{$pre}-range-hover-start .#{$cellClassName}::after {
+    right: -6px;
+    left: 0;
+  }
+
+  .#{$picker-prefix-cls}-date-panel &-in-view#{$pre}-in-range#{$pre}-range-hover-end .#{$cellClassName}::after {
+    right: 0;
+    left: -6px;
+  }
+
+  // Hover with range start & end
+  &-range-hover#{#{$pre}
+}
+
+-range-start::after {
+  right: 50%;
+}
+
+&-range-hover#{#{$pre}
+}
+
+-range-end::after {
+  left: 50%;
+}
+
+// Edge start
+tr>&-in-view#{$pre}-range-hover:first-child::after,
+tr>&-in-view#{$pre}-range-hover-end:first-child::after,
+&-in-view#{$pre}-start#{$pre}-range-hover-edge-start#{$pre}-range-hover-edge-start-near-range::after,
+&-in-view#{$pre}-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
+&-in-view#{$pre}-range-hover-start::after {
+  left: 6px;
+  border-left: 1px dashed $NP1;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+// Edge end
+tr>&-in-view#{$pre}-range-hover:last-child::after,
+tr>&-in-view#{$pre}-range-hover-start:last-child::after,
+&-in-view#{$pre}-end#{$pre}-range-hover-edge-end#{$pre}-range-hover-edge-end-near-range::after,
+&-in-view#{$pre}-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
+&-in-view#{$pre}-range-hover-end::after {
+  right: 6px;
+  border-right: 1px dashed $NP1;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+// >>> Disabled
+&-disabled {
+  pointer-events: none;
+
+  .#{$cellClassName} {
+    color: #bbbecb;
+    background: transparent;
+  }
+
+  &::before {
+    background: #f8f8f8;
+  }
+}
+
+&-disabled#{$pre}-today .#{$cellClassName}::before {
+  border-color: $NT3;
+}
+}

package/es/DatePicker/style/override.scss

@@ -0,0 +1,11 @@
+@use "../../styles/theme" as *;
+@use "./params" as *;
+
+.#{$picker-prefix-cls}-wrapper {
+  position: relative;
+  display: inline-block;
+
+  .#{$picker-prefix-cls}-error {
+    border-color: $NG1;
+  }
+}