249e3113ff
*sigh* ... spent way too much time encoding/decoding date types... I need my database, server, client, and JSON need to agree on types. TL;DR: - Add CSS for elm/datepicker library - Create Common.allErrors to display UI errors - Prefer Data.Time.Calendar.Day instead of newtype Date wrapper around Text
142 lines
2.1 KiB
CSS
142 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.elm-datepicker--container {
|
|
position: relative;
|
|
}
|
|
|
|
.elm-datepicker--input:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.elm-datepicker--picker {
|
|
position: absolute;
|
|
border: 1px solid #CCC;
|
|
z-index: 10;
|
|
background-color: white;
|
|
}
|
|
|
|
.elm-datepicker--picker-header,
|
|
.elm-datepicker--weekdays {
|
|
background: #F2F2F2;
|
|
}
|
|
|
|
.elm-datepicker--picker-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.elm-datepicker--prev-container,
|
|
.elm-datepicker--next-container {
|
|
flex: 0 1 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.elm-datepicker--month-container {
|
|
flex: 1 1 auto;
|
|
padding: 0.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.elm-datepicker--month,
|
|
.elm-datepicker--year {
|
|
flex: 1 1 auto;
|
|
cursor: default;
|
|
text-align: center;
|
|
}
|
|
|
|
.elm-datepicker--year {
|
|
font-size: 0.6em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.elm-datepicker--prev,
|
|
.elm-datepicker--next {
|
|
border: 6px solid transparent;
|
|
background-color: inherit;
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
padding: 0 0.2em;
|
|
}
|
|
|
|
.elm-datepicker--prev {
|
|
border-right-color: #AAA;
|
|
}
|
|
|
|
.elm-datepicker--prev:hover {
|
|
border-right-color: #BBB;
|
|
}
|
|
|
|
.elm-datepicker--next {
|
|
border-left-color: #AAA;
|
|
}
|
|
|
|
.elm-datepicker--next:hover {
|
|
border-left-color: #BBB;
|
|
}
|
|
|
|
.elm-datepicker--table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.elm-datepicker--table td {
|
|
width: 2em;
|
|
height: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.elm-datepicker--row {
|
|
border-top: 1px solid #F2F2F2;
|
|
}
|
|
|
|
.elm-datepicker--dow {
|
|
border-bottom: 1px solid #CCC;
|
|
cursor: default;
|
|
}
|
|
|
|
.elm-datepicker--day {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.elm-datepicker--day:hover {
|
|
background: #F2F2F2;
|
|
}
|
|
|
|
.elm-datepicker--disabled {
|
|
cursor: default;
|
|
color: #DDD;
|
|
}
|
|
|
|
.elm-datepicker--disabled:hover {
|
|
background: inherit;
|
|
}
|
|
|
|
.elm-datepicker--picked {
|
|
color: white;
|
|
background: darkblue;
|
|
}
|
|
|
|
.elm-datepicker--picked:hover {
|
|
background: darkblue;
|
|
}
|
|
|
|
.elm-datepicker--today {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.elm-datepicker--other-month {
|
|
color: #AAA;
|
|
}
|
|
|
|
.elm-datepicker--other-month.elm-datepicker--disabled {
|
|
color: #EEE;
|
|
}
|
|
|
|
.elm-datepicker--other-month.elm-datepicker--picked {
|
|
color: white;
|
|
}
|