moebius#92: HTML - input - datetime

+ native in moebius:

Bug 1317600: https://bugzilla.mozilla.org/show_bug.cgi?id=1317600
A note - not implemented: Bug 1282768:
https://bugzilla.mozilla.org/show_bug.cgi?id=1282768
*.css: filter: url("chrome://global/skin/filters.svg#fill");, fill:

Bug 1283385: https://bugzilla.mozilla.org/show_bug.cgi?id=1283385
Bug 1323109: https://bugzilla.mozilla.org/show_bug.cgi?id=1323109
Bug 1314544: https://bugzilla.mozilla.org/show_bug.cgi?id=1314544
Bug 1286182: https://bugzilla.mozilla.org/show_bug.cgi?id=1286182

Bug 1325922: https://bugzilla.mozilla.org/show_bug.cgi?id=1325922
A note - not implemented: Bug 1282768:
https://bugzilla.mozilla.org/show_bug.cgi?id=1282768
*.css: filter: url("chrome://global/skin/filters.svg#fill");, fill:

Bug 1320225: https://bugzilla.mozilla.org/show_bug.cgi?id=1320225
Bug 1341190: https://bugzilla.mozilla.org/show_bug.cgi?id=1341190
This commit is contained in:
janekptacijarabaci 2018-03-30 12:17:17 +02:00 • committed by Roy Tam
commit cac5c5adc7
34 changed files with 1267 additions and 248 deletions

View file

@ -12,7 +12,8 @@
--colon-width: 2rem;
--day-period-spacing-width: 1rem;
--calendar-width: 23.1rem;
--date-picker-item-height: 2.4rem;
--date-picker-item-height: 2.5rem;
--date-picker-item-width: 3.3rem;
--border: 0.1rem solid #D6D6D6;
--border-radius: 0.3rem;
@ -21,6 +22,8 @@
--font-color: #191919;
--fill-color: #EBEBEB;
--today-fill-color: rgb(212, 212, 212);
--selected-font-color: #FFFFFF;
--selected-fill-color: #0996F8;
@ -29,10 +32,16 @@
--button-font-color-active: #191919;
--button-fill-color-active: #D4D4D4;
--weekday-font-color: #6C6C6C;
--weekday-outside-font-color: #6C6C6C;
--weekend-font-color: #DA4E44;
--weekend-outside-font-color: #FF988F;
--weekday-header-font-color: #6C6C6C;
--weekend-header-font-color: rgb(218, 78, 68);
--weekend-font-color: rgb(218, 78, 68);
--weekday-outside-font-color: rgb(153, 153, 153);
--weekend-outside-font-color: rgb(255, 152, 143);
--weekday-disabled-font-color: rgba(25, 25, 25, 0.2);
--weekend-disabled-font-color: rgba(218, 78, 68, 0.2);
--disabled-fill-color: rgba(235, 235, 235, 0.8);
--disabled-opacity: 0.2;
}
@ -181,11 +190,11 @@ button.month-year.active::after {
}
.week-header > div {
color: var(--weekday-font-color);
color: var(--weekday-header-font-color);
}
.week-header > div.weekend {
color: var(--weekend-font-color);
color: var(--weekend-header-font-color);
}
.days-viewport {
@ -206,24 +215,49 @@ button.month-year.active::after {
align-items: center;
display: flex;
height: var(--date-picker-item-height);
margin: 0.05rem 0.15rem;
position: relative;
justify-content: center;
width: 3rem;
width: var(--date-picker-item-width);
}
.days-view > div.outside {
.days-view > .outside {
color: var(--weekday-outside-font-color);
}
.days-view > div.weekend {
.days-view > .weekend {
color: var(--weekend-font-color);
}
.days-view > div.weekend.outside {
.days-view > .weekend.outside {
color: var(--weekend-outside-font-color);
}
.days-view > .out-of-range {
color: var(--weekday-disabled-font-color);
background: var(--disabled-fill-color);
}
.days-view > .out-of-range.weekend {
color: var(--weekend-disabled-font-color);
}
.days-view > .today {
font-weight: bold;
}
.days-view > .out-of-range::before {
display: none;
}
.days-view > div:hover::before,
.days-view > .select::before,
.days-view > .today::before {
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}
#time-picker,
.month-year-view {
display: flex;
@ -283,22 +317,31 @@ button.month-year.active::after {
scroll-snap-coordinate: 0 0;
}
.spinner-container > .spinner > div::before,
.calendar-container .days-view > div::before {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
z-index: -10;
border-radius: var(--border-radius);
}
.spinner-container > .spinner > div:hover::before,
.calendar-container .days-view > div:hover::before {
background: var(--fill-color);
border: var(--border);
border-radius: var(--border-radius);
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: -10;
}
.calendar-container .days-view > div.today::before {
background: var(--today-fill-color);
content: "";
}
.spinner-container > .spinner:not(.scrolling) > div.selection,
.calendar-container .days-view > div.selection {
.calendar-container .days-view > div.selection:not(.out-of-range) {
color: var(--selected-font-color);
}
@ -306,14 +349,7 @@ button.month-year.active::after {
.calendar-container .days-view > div.selection::before {
background: var(--selected-fill-color);
border: none;
border-radius: var(--border-radius);
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: -10;
}
.spinner-container > .spinner > div.disabled::before,