summaryrefslogtreecommitdiff
path: root/sass/components/_datepicker.scss
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
committerDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
commite3fba3dcd493f609e107435867c4a67cb7ee420f (patch)
treecd228574b1d4f4e446fac87e9d6fe3eeffe27b63 /sass/components/_datepicker.scss
parent88d3e67474c518a5c422b5f0e47c58147f31fe6e (diff)
import materialize sass sources instead of relying on npm
Diffstat (limited to 'sass/components/_datepicker.scss')
-rw-r--r--sass/components/_datepicker.scss191
1 files changed, 191 insertions, 0 deletions
diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
new file mode 100644
index 0000000..d2c920b
--- /dev/null
+++ b/sass/components/_datepicker.scss
@@ -0,0 +1,191 @@
+/* Modal */
+.datepicker-modal {
+ max-width: 325px;
+ min-width: 300px;
+ max-height: none;
+}
+
+.datepicker-container.modal-content {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+}
+
+.datepicker-controls {
+ display: flex;
+ justify-content: space-between;
+ width: 280px;
+ margin: 0 auto;
+
+ .selects-container {
+ display: flex;
+ }
+
+ .select-wrapper {
+ input {
+ &:focus {
+ border-bottom: none;
+ }
+ border-bottom: none;
+ text-align: center;
+ margin: 0;
+ }
+
+ .caret {
+ display: none;
+ }
+ }
+
+ .select-year input {
+ width: 50px;
+ }
+
+ .select-month input {
+ width: 70px;
+ }
+}
+
+.month-prev, .month-next {
+ margin-top: 4px;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+}
+
+
+/* Date Display */
+.datepicker-date-display {
+ flex: 1 auto;
+ background-color: $secondary-color;
+ color: #fff;
+ padding: 20px 22px;
+ font-weight: 500;
+
+ .year-text {
+ display: block;
+ font-size: 1.5rem;
+ line-height: 25px;
+ color: $datepicker-year;
+ }
+
+ .date-text {
+ display: block;
+ font-size: 2.8rem;
+ line-height: 47px;
+ font-weight: 500;
+ }
+}
+
+
+/* Calendar */
+.datepicker-calendar-container {
+ flex: 2.5 auto;
+}
+
+.datepicker-table {
+ width: 280px;
+ font-size: 1rem;
+ margin: 0 auto;
+
+ thead {
+ border-bottom: none;
+ }
+
+ th {
+ padding: 10px 5px;
+ text-align: center;
+ }
+
+ tr {
+ border: none;
+ }
+
+ abbr {
+ text-decoration: none;
+ color: $datepicker-calendar-header-color;
+ }
+
+ td {
+ &.is-today {
+ color: $secondary-color;
+ }
+
+ &.is-selected {
+ background-color: $secondary-color;
+ color: #fff;
+ }
+
+ &.is-outside-current-month,
+ &.is-disabled {
+ color: $datepicker-disabled-day-color;
+ pointer-events: none;
+ }
+
+ border-radius: 50%;
+ padding: 0;
+ }
+}
+
+.datepicker-day-button {
+ &:focus {
+ background-color: $datepicker-day-focus;
+ }
+
+ background-color: transparent;
+ border: none;
+ line-height: 38px;
+ display: block;
+ width: 100%;
+ border-radius: 50%;
+ padding: 0 5px;
+ cursor: pointer;
+ color: inherit;
+}
+
+
+/* Footer */
+.datepicker-footer {
+ width: 280px;
+ margin: 0 auto;
+ padding-bottom: 5px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.datepicker-cancel,
+.datepicker-clear,
+.datepicker-today,
+.datepicker-done {
+ color: $secondary-color;
+ padding: 0 1rem;
+}
+
+.datepicker-clear {
+ color: $error-color;
+}
+
+
+/* Media Queries */
+@media #{$medium-and-up} {
+ .datepicker-modal {
+ max-width: 625px;
+ }
+
+ .datepicker-container.modal-content {
+ flex-direction: row;
+ }
+
+ .datepicker-date-display {
+ flex: 0 1 270px;
+ }
+
+ .datepicker-controls,
+ .datepicker-table,
+ .datepicker-footer {
+ width: 320px;
+ }
+
+ .datepicker-day-button {
+ line-height: 44px;
+ }
+}