🌈 style:日历组件衔接scss文件

2022-09-21 10:17:33 +08:00
parent adc7c36193
commit 6757d91a03
12 changed files with 1318 additions and 187 deletions
@@ -0,0 +1,180 @@
+
+@import '../../styles/variables/default.scss';
+@import '../../styles/mixins/index.scss';
+.at-calendar {
+    overflow: hidden;
+  
+    /* elements */
+    &__header {
+      .header__flex {
+        @include display-flex;
+        @include align-items(center);
+  
+        height: 72px;
+        color: $at-calendar-header-color;
+        text-align: center;
+  
+        &-item {
+          @include flex(0 0 calc(100% / 7));
+  
+          font-size: 30px;
+        }
+      }
+    }
+  
+    &__list {
+      &.flex {
+        @include display-flex;
+        @include align-items();
+        @include flex-wrap(wrap);
+  
+        color: $at-calendar-day-color;
+  
+        .flex__item {
+          @include flex(0 0 calc(100% / 7));
+  
+          font-size: 30px;
+          text-align: center;
+          position: relative;
+          margin: 5px 0;
+  
+          &-container {
+            @include align-items(center);
+            @include display-flex;
+  
+            width: $at-calendar-day-size;
+            height: $at-calendar-day-size;
+            margin-left: auto;
+            margin-right: auto;
+            border-radius: 50%;
+  
+            .container-text {
+              @include flex;
+            }
+          }
+  
+          &-extra {
+            .extra-marks {
+              position: absolute;
+              bottom: 5px;
+              line-height: 0;
+              left: 50%;
+              transform: translateX(-50%);
+  
+              .mark {
+                width: $at-calendar-mark-size;
+                height: $at-calendar-mark-size;
+                margin-right: 4px;
+                display: inline-block;
+                background-color: $at-calendar-main-color;
+                border-radius: 50%;
+                overflow: hidden;
+  
+                &:last-child {
+                  margin-right: 0;
+                }
+              }
+            }
+          }
+  
+          &--today {
+            color: $at-calendar-main-color;
+            font-weight: bolder;
+          }
+  
+          &--blur {
+            color: #e1e4e7;
+          }
+  
+          &--selected {
+            color: white;
+            background-color: rgba($color: $at-calendar-main-color, $alpha: 1);
+  
+            &-head {
+              border-top-left-radius: 40px;
+              border-bottom-left-radius: 40px;
+            }
+  
+            &-tail {
+              border-top-right-radius: 40px;
+              border-bottom-right-radius: 40px;
+            }
+  
+            /* stylelint-disable-next-line */
+            .extra-marks .mark {
+              background-color: white;
+            }
+  
+            &-head.flex__item--selected-tail {
+              background-color: transparent;
+  
+              .flex__item-container {
+                background-color: rgba($color: $at-calendar-main-color,
+                    $alpha: 0.7);
+              }
+            }
+          }
+        }
+      }
+    }
+  
+    &__controller {
+      @include display-flex;
+      @include align-items(center);
+      @include justify-content(center);
+  
+      margin-bottom: 20px;
+  
+      .controller__arrow {
+        @include flex(0 0 40px);
+  
+        height: 40px;
+        border-radius: 12px;
+        display: inline-block;
+        background-size: 16px 24px;
+        background-position: center;
+        background-color: #f7f8fc;
+        background-repeat: no-repeat;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=");
+  
+        &--right {
+          transform: rotate(180deg);
+        }
+  
+        &--disabled {
+          opacity: 0.5;
+        }
+      }
+  
+      .controller__info {
+        @include flex(0 0 auto);
+  
+        font-size: 30px;
+        margin-left: 40px;
+        margin-right: 40px;
+      }
+    }
+  }
+  
+  .at-calendar-slider__main {
+    .main__body {
+      @include display-flex;
+  
+      width: 100%;
+  
+      &--animate {
+        transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
+      }
+  
+      .body__slider {
+        @include flex(0 0 100%);
+      }
+    }
+  
+    &--weapp,
+    &--swan {
+      .main__body {
+        height: 480px;
+      }
+    }
+  }
@@ -12,7 +12,7 @@ import {
 } from '../../types/calendar'
 import AtCalendarBody from './body/index'
 import AtCalendarController from './controller/index'
-
+import './index.scss'
 const defaultProps: AtCalendarDefaultProps = {
  validDates: [],
  marks: [],