@componyx/ui 0.0.0-stage → 1.0.4

package/DatePicker/DatePicker.css

@@ -0,0 +1,227 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.date-picker.theme .numeric-box.theme:not(:first-child) > input
+{
+    border-radius: 0px;
+}
+
+.date-picker.theme .numeric-box.theme:first-child > input
+{
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.date-picker.theme .numeric-box.theme.day > input,
+.date-picker.theme .numeric-box.theme.month > input
+{
+    width: 22px;
+    padding: 0px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.date-picker.theme .numeric-box.theme.year > input
+{
+    width: 35px;
+    padding: 0px;
+    padding-left: 2px;
+    padding-right: 2px;
+    margin: 0px;
+}
+
+.date-picker.theme .button.theme.picker
+{
+    vertical-align: top;
+}
+
+.date-picker.theme .button.theme.picker,
+.date-picker.theme .button.theme.prev,
+.date-picker.theme .button.theme.next
+{
+    width: 16px;
+}
+
+    .date-picker.theme .button.theme.prev span.icon,
+    .date-picker.theme .button.theme.next span.icon,
+    .date-picker.theme .button.theme.picker
+    {
+        font-family: 'UI';
+    }
+
+        .date-picker.theme .button.theme.prev span.icon::after
+        {
+            content: var(--cui-ico-arrow-l);
+        }
+
+        .date-picker.theme .button.theme.next span.icon::after
+        {
+            content: var(--cui-ico-arrow-r);
+        }
+
+        .date-picker.theme .button.theme.picker span.icon::after
+        {
+            content: var(--cui-ico-date);
+            font-size: 16px !important;
+        }
+
+.date-picker.theme .dialog.theme
+{
+    display: block;
+}
+
+    .date-picker.theme .dialog.theme .box.dialog-box
+    {
+        display: inline-block;
+    }
+
+        .date-picker.theme .dialog.theme .box.dialog-box > div.content > div > div.content-holder
+        {
+            padding-top: 0px;
+            padding-right: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+        }
+
+        .date-picker.theme .dialog.theme .box.dialog-box div.content div.header
+        {
+            padding: 0px;
+        }
+
+            .date-picker.theme .dialog.theme .box.dialog-box div.content div.header > div
+            {
+                position: relative;
+                top: 1px;
+                transform: none;
+                height: 100%;
+                width: 100%;
+                vertical-align: top;
+            }
+
+                .date-picker.theme .dialog.theme .box.dialog-box div.content div.header > div > *
+                {
+                    position: relative;
+                    top: 50%;
+                    -webkit-transform: translateY(-50%);
+                    -moz-transform: translateY(-50%);
+                    -ms-transform: translateY(-50%);
+                    transform: translateY(-50%);
+                }
+
+        .date-picker.theme .dialog.theme .box.dialog-box div.header > div.button-holder,
+        .date-picker.theme .dialog.theme .box.dialog-box div.footer > div.button-holder
+        {
+            display: none;
+        }
+
+    .date-picker.theme .dialog.theme table
+    {
+        font-weight: normal;
+        border-collapse: separate;
+        border-spacing: 0;
+        width: 100%;
+    }
+
+    .date-picker.theme .dialog.theme div.header
+    {
+        text-align: center;
+    }
+
+    .date-picker.theme .dialog.theme .box.dialog-box div.content div.header > div > span.header-label
+    {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+.date-picker.theme span.header-label span.month,
+.date-picker.theme span.header-label span.year
+{
+    margin-right: 5px;
+}
+
+.date-picker.theme .dialog.theme .box.dialog-box div.content div.header > div .button.theme.prev
+{
+    position: absolute;
+    left: 9px;
+}
+
+.date-picker.theme .dialog.theme .box.dialog-box div.content div.header > div .button.theme.next
+{
+    position: absolute;
+    left: auto;
+    right: 9px;
+}
+
+.date-picker.theme .dialog.theme table th, .date-picker.theme .dialog.theme table td
+{
+    padding: 0px;
+    min-width: 30px;
+    height: 30px;
+    text-align: center;
+}
+
+    .date-picker.theme .dialog.theme table td > div
+    {
+        position: relative;
+        padding: 2px;
+    }
+
+.date-picker.theme .dialog.theme table tr td
+{
+    background: transparent;
+    color: inherit;
+}
+
+.date-picker.theme .dialog.theme table td.day .button.theme
+{
+    padding: 0px;
+    text-align: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 100%;
+}
+
+.date-picker.theme .numeric-box.theme input
+{
+    border-right-width: 0px;
+}
+
+.date-picker.theme .numeric-box.theme:not(:first-of-type) input
+{
+    border-left-width: 0px;
+}
+
+.date-picker.theme .numeric-box.theme:not(.buttons).last input
+{
+    border-right-width: 1px;
+}
+
+.date-picker.theme .dialog.theme table th
+{
+    border-bottom-style: solid;
+    font-weight: normal;
+}
+
+.date-picker.theme .dialog.theme table td
+{
+    border-style: solid;
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+
+    .date-picker.theme .dialog.theme table td:last-child
+    {
+        border-right-color: transparent;
+    }
+
+    .date-picker.theme .dialog.theme table td.day.today .button.theme *,
+    .date-picker.theme.theme-default .dialog.theme table tr.current-week td.week-number
+    {
+        font-weight: bold;
+    }
+
+    .date-picker.theme .dialog.theme table tr:not(.current-week) td.week-number,
+    .date-picker.theme .dialog.theme table td.day.inactive .button.theme *
+    {
+        opacity: 0.6;
+    }