ywana-core8 0.0.909 → 0.0.911

package/dist/index.css

@@ -1948,43 +1948,164 @@ li.selected {
     justify-content: center;
     align-items: center;
 }
+.calendar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.calendar-range-control {
+    margin: .3rem;
+    border: solid 1px var(--divider-color);
+    background-color: var(--background-color);
+    border-radius: 3px;
+    padding: .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &>.btn {
+        flex: 1;
+        margin-left: 1rem;
+        border-radius: 2px;
+        background-color: var(--background-color);
+        &.outlined {
+            border: solid 1px var(--divider-color);
+            background-color: var(--paper-color);
+        }
+    }
+}
 
-.calendar { 
+.year-calendar {
     margin: 1rem;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     padding: 0rem;
-
 }
 
-.calendar>nav {
+.year-calendar>nav {
     display: flex;
     padding: .5rem;
     display: flex;
     align-items: center;
 }
 
-.calendar>nav>label {
+.year-calendar>nav>label {
     flex: 1;
     font-size: 1.3rem;
     font-weight: 500;
 }
 
-.calendar>nav>button {
+.year-calendar>nav>button {
     margin-left: 1px;
+    border-radius: 3px;
 }
 
-.calendar>header {
+.year-calendar>main {
+    flex: 1;
     border: solid 1px var(--divider-color);
-    border-top: 0px;
-    border-width: 1px 1px 0 0px;
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    grid-auto-rows: minmax(12rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
+}
+
+.year-calendar .month-cell {
+    border-width: 0 0 1px 1px;
+    overflow: hidden;
+    padding: .5rem;
+    text-align: right;
+    font-weight: 400;
+    
+    &>nav {
+        display: flex;
+        padding: .5rem;
+        display: flex;
+        align-items: center;
+    }
+    
+    &>header {
+        display:flex;
+
+        &>.week-day-cell {
+            flex: 1;
+            border: solid 0px var(--divider-color);
+            padding: 2px;
+            text-align: right;
+            min-width: 2rem !important;
+        }
+    }
+    
+    &>main {
+        flex: 1;
+        border: solid 0px var(--divider-color);
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0px;
+        grid-auto-rows: minmax(2rem, auto);
+        overflow: hidden;
+        font-size: .8rem;
+
+        &>.day-cell {
+            border: solid 0px;
+            padding: .5rem;
+            text-align: right;
+            min-height: 1rem;
+            width: 1rem;
+            min-width: 1rem !important;
+            font-weight: 400;
+            color: var(--text-color);
+        }
+
+
+        &>.day-cell.other-month {
+            color: var(--text-color-lighter);
+        }
+
+    }
+}
+
+
+
+.month-calendar { 
+    margin: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
+
+}
+
+.month-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.month-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.month-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
+}
+
+.month-calendar>header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     font-size: .8rem;
 }
 
-.calendar>main {
+.month-calendar>main {
     flex: 1;
     border: solid 1px var(--divider-color);
     border-width: 1px 1px 0 0;
@@ -2008,7 +2129,7 @@ li.selected {
     border-width: 0 0 1px 1px;
     padding: .5rem;
     text-align: right;
-    min-height: 5rem;
+    min-height: 6rem;
     min-width: 5rem;
     font-weight: 400;
 }