@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/assets/scss-old/angular-material/_datepicker.scss

@@ -0,0 +1,191 @@
+//mat-datepicker-content
+
+.e-datepicker.e-popup{
+  box-shadow: var(--box-shadow) !important;
+  border-radius: var(--box-radius);
+  .e-calendar{
+
+    //border: 4px solid var(--light-gray) !important;
+    //border-radius: 0 !important;
+    max-width: 296px !important;
+    width: 296px !important;
+    .e-header{
+      .e-title{
+        color: var(--black);
+        font-size: 1rem;
+        font-weight: var(--font-bold);
+      }
+      .e-icon-container{
+        .e-icons{
+          color: var(--coral);
+        }
+      }
+    }
+
+    .e-content{
+      .e-week-header{
+        th{
+          color: var(--purple);
+          font-size: 0.875rem;
+          font-weight: var(--font-bold);
+        }
+      }
+      .e-cell{
+        background-color: transparent !important;
+        border: 0 !important;
+        &.e-other-month{
+          .e-day{
+            color: rgba(var(--rgb-gray), 60%);
+
+          }
+        }
+        .e-day{
+          color: rgba(var(--rgb-black), 80%);
+          font-weight: 500;
+          border-radius: 50%;
+          border: 1px solid transparent;
+          line-height: 1.3;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          overflow: visible;
+        }
+        // &.e-other-month{
+        //   .e-day{
+        //     display: block;
+        //     color:  rgba(var(--rgb-black),20%);
+        //   }
+        // }
+        &.e-today{
+          .e-day{
+            color: var(--coral);
+            border-color: var(--coral);
+            background-color: rgba(var(--rgb-coral), 10%);
+          }
+        }
+        &.e-selected{
+          .e-day{
+            background-color: var(--coral) !important;
+            color:var(--white) !important;
+          }
+        }
+        &:hover{
+          .e-day{
+            background-color: rgba(var(--rgb-coral), 10%);
+            border-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary{
+    color: var(--coral);
+  }
+
+}
+.mat-datepicker-content {
+  box-shadow: var(--box-shadow) !important;
+  border-radius: var(--box-radius);
+
+  .mat-calendar {
+    .mat-calendar-header {
+      .mat-calendar-controls {
+        display: flex !important;
+        justify-content: space-between !important;
+        margin: 0;
+
+        .mat-calendar-spacer {
+          display: none !important;
+        }
+
+        .mat-calendar-period-button {
+          .mat-button-focus-overlay {
+            display: none !important;
+          }
+
+          .mat-calendar-arrow {
+            display: none !important;
+          }
+        }
+
+        .mat-calendar-previous-button {
+          order: -1;
+        }
+      }
+    }
+
+    .mat-calendar-content {
+      table.mat-calendar-table {
+        .mat-calendar-table-header {
+          tr:first-child {
+            th {
+              color:var(--dark-gray);
+              font-weight: bold;
+            }
+          }
+
+          tr:nth-child(2) {
+            .mat-calendar-table-header-divider {
+              &:after {
+                left: 0;
+                right: 0;
+              }
+            }
+          }
+        }
+
+        .mat-calendar-body {
+          tr .mat-calendar-body-label {
+            //display: none;
+          }
+
+          tr td {
+            color: var(--black);
+            font-weight: 500;
+            border-radius: 50%;
+
+            &.mat-calendar-body-in-range{
+
+              &:before{
+                background-color: var(--light-gray);
+
+              }
+              .mat-calendar-body-cell-content{
+                color: rgba(var(--rgb-black), 60%);
+              }
+            }
+
+            .mat-calendar-body-cell{
+              background: transparent;
+              text-shadow: none;
+              color: inherit;
+            }
+
+
+
+            .mat-calendar-body-cell-content{
+              background-color: transparent;
+
+              &.mat-calendar-body-today {
+                border-color: var(--coral);
+                background-color: rgba(var(--rgb-coral), 10%);
+              }
+
+              &.mat-calendar-body-selected {
+                background-color: var(--coral) !important;
+                color:var(--white) !important;
+              }
+
+              &:hover{
+                background: rgba(var(--rgb-coral), 10%);
+                border-color: transparent;
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+}