@anglr/datetime 5.0.0-beta.20221020044622 → 5.0.0-beta.20221020100553

package/styles/components/_date-time-picker.scss

@@ -4,5 +4,134 @@
     {
         display: block;
         position: absolute;
+
+        background-color: #FFFFFF;
+        border: 1px solid #333333;
+        border-radius: 6px;
+        z-index: 123;
+        padding: 4px 8px;
+
+        .date-time-period
+        {
+            .period
+            {
+                display: grid;
+                grid-template-columns: auto 1fr auto;
+                grid-template-rows: auto;
+                align-items: center;
+            }
+
+            .period-value
+            {
+                font-weight: bold;
+                text-align: center;
+                border-radius: 4px;
+            }
+
+            .period-data
+            {
+                width: 280px;
+
+                display: grid;
+                grid-template-rows: auto;
+                justify-items: stretch;
+            }
+
+            .period-datum
+            {
+                text-align: center;
+                border-radius: 4px;
+                border-width: 1px;
+                border-style: solid;
+                border-color: transparent;
+            }
+
+            .active
+            {
+                border-color: transparent;
+            }
+
+            .fas
+            {
+                border-radius: 4px;
+                padding-left: 6px;
+                padding-right: 6px;
+                cursor: pointer;
+                font-weight: bold;
+            }
+
+            .clickable
+            {
+                transition: all 200ms;
+            }
+
+            .clickable:hover
+            {
+                border-color: transparent;
+                cursor: pointer;
+            }
+
+            .disabled
+            {
+                opacity: 0.4;
+                border-radius: 0;
+            }
+
+            .disabled:hover
+            {
+                cursor: not-allowed;
+            }
+
+            .today
+            {
+                border-color: #0077ff;
+            }
+
+            .active
+            {
+                background-color: #00c3ff;
+            }
+
+            .clickable:hover
+            {
+                background-color: #00e7ff;
+            }
+
+            .disabled:not(.active)
+            {
+                background-color: #CFCFCF;
+            }
+        }
+
+        day-picker
+        {
+            .period-data
+            {
+                grid-template-columns: repeat(7, 1fr);
+            }
+    
+            .weekday
+            {
+                text-align: center;
+                font-weight: bold;
+                opacity: 0.7;
+                margin-bottom: 6px;
+            }
+    
+            .period-datum:not(.other-month)
+            {
+                font-weight: bold;
+            }
+    
+            .other-month
+            {
+                opacity: 0.5;
+            }
+
+            .weekend
+            {
+                color: #850000;
+            }
+        }
     }
 }

package/version.bak

@@ -1 +1 @@
-5.0.0-beta.20221020044622 
+5.0.0-beta.20221020100553 

package/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.css

@@ -1,27 +0,0 @@
-:host
-{
-    position: absolute;
-}
-
-.period-data
-{
-    grid-template-columns: repeat(7, 1fr);
-}
-
-.weekday
-{
-    text-align: center;
-    font-weight: bold;
-    opacity: 0.7;
-    margin-bottom: 6px;
-}
-
-.period-datum:not(.other-month)
-{
-    font-weight: bold;
-}
-
-.other-month
-{
-    opacity: 0.5;
-}