From 30c683d986ffec16096c39f473feec23aed7b18d Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 08:26:47 +0100 Subject: Bug 1317600: [DateTimePicker] Spinner arrow buttons shouldn't depend on find bar resources --- toolkit/themes/shared/icons/spinner-arrows.svg | 13 +++++++++++++ toolkit/themes/shared/jar.inc.mn | 1 + toolkit/themes/shared/timepicker.css | 4 ++-- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 toolkit/themes/shared/icons/spinner-arrows.svg (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/icons/spinner-arrows.svg b/toolkit/themes/shared/icons/spinner-arrows.svg new file mode 100644 index 000000000..a8ba72d6b --- /dev/null +++ b/toolkit/themes/shared/icons/spinner-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 9c3d86a40..cfb4e99af 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -27,6 +27,7 @@ toolkit.jar: skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) skin/classic/global/icons/loading.png (../../shared/icons/loading.png) skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png) + skin/classic/global/icons/spinner-arrows.svg (../../shared/icons/spinner-arrows.svg) skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg) skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css) diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css index e8d081b30..ca4955748 100644 --- a/toolkit/themes/shared/timepicker.css +++ b/toolkit/themes/shared/timepicker.css @@ -68,11 +68,11 @@ body { } .spinner-container > button.up { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; } .spinner-container > button.down { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; } .spinner-container.hide-buttons > button { -- cgit v1.2.3 From 8fd370c9f39b4bc1d78cc0f763bf4e99dfd0c382 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 12:32:46 +0100 Subject: Bug 1283385: Implement UI for --- toolkit/themes/shared/datetimeinputpickers.css | 291 +++++++++++++++++++++++++ toolkit/themes/shared/jar.inc.mn | 2 +- toolkit/themes/shared/timepicker.css | 153 ------------- 3 files changed, 292 insertions(+), 154 deletions(-) create mode 100644 toolkit/themes/shared/datetimeinputpickers.css delete mode 100644 toolkit/themes/shared/timepicker.css (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css new file mode 100644 index 000000000..df93bc3a1 --- /dev/null +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -0,0 +1,291 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --calendar-width: 23.1rem; + --date-picker-item-height: 2.4rem; + + --border: 0.1rem solid #D6D6D6; + --border-radius: 0.3rem; + + --font-color: #191919; + --fill-color: #EBEBEB; + + --selected-font-color: #FFFFFF; + --selected-fill-color: #0996F8; + + --button-font-color: #858585; + --button-font-color-hover: #4D4D4D; + --button-font-color-active: #191919; + + --weekday-font-color: #6C6C6C; + --weekday-outside-font-color: #6C6C6C; + --weekend-font-color: #DA4E44; + --weekend-outside-font-color: #FF988F; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav button { + -moz-appearance: none; + background: none; + border: none; + width: 3rem; + height: var(--date-picker-item-height); +} + +.month-year { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 3rem; + width: 17.1rem; + height: var(--date-picker-item-height); + z-index: 10; +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: window; + opacity: 1; + transition: opacity 0.15s; +} + +.month-year-view.hidden { + visibility: hidden; + opacity: 0; +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 0 0.5rem; +} + +.month-year-view .spinner { + transform: scaleY(1); + transform-origin: top; + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner { + transform: scaleY(0); + transition: none; +} + +.month-year-view .spinner > div { + transform: scaleY(1); + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner > div { + transform: scaleY(2.5); + transition: none; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-font-color); +} + +.days-viewport { + height: 15rem; + overflow: hidden; + position: relative; +} + +.days-view { + position: absolute; + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.week-header > div, +.days-view > div { + align-items: center; + display: flex; + height: var(--date-picker-item-height); + margin: 0.05rem 0.15rem; + position: relative; + justify-content: center; + width: 3rem; +} + +.days-view > div.outside { + color: var(--weekday-outside-font-color); +} + +.days-view > div.weekend { + color: var(--weekend-font-color); +} + +.days-view > div.weekend.outside { + color: var(--weekend-outside-font-color); +} + +#time-picker, +.month-year-view { + display: flex; + flex-direction: row; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + -moz-appearance: none; + border: none; + background: none; + background-color: var(--button-font-color); + height: var(--spinner-button-height); +} + +.spinner-container > button:hover { + background-color: var(--button-font-color-hover); +} + +.spinner-container > button.active { + background-color: var(--button-font-color-active); +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.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; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection, +.calendar-container .days-view > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before, +.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, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} \ No newline at end of file diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index cfb4e99af..e7f1f7c67 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -21,7 +21,7 @@ toolkit.jar: skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) - skin/classic/global/timepicker.css (../../shared/timepicker.css) + skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css deleted file mode 100644 index ca4955748..000000000 --- a/toolkit/themes/shared/timepicker.css +++ /dev/null @@ -1,153 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -:root { - --font-size-default: 1.1rem; - --spinner-width: 3rem; - --spinner-margin-top-bottom: 0.4rem; - --spinner-item-height: 2.4rem; - --spinner-item-margin-bottom: 0.1rem; - --spinner-button-height: 1.2rem; - --colon-width: 2rem; - --day-period-spacing-width: 1rem; - - --border: 0.1rem solid #D6D6D6; - --border-radius: 0.3rem; - - --font-color: #191919; - --fill-color: #EBEBEB; - - --selected-font-color: #FFFFFF; - --selected-fill-color: #0996F8; - - --button-font-color: #858585; - --button-font-color-hover: #4D4D4D; - --button-font-color-active: #191919; - - --disabled-opacity: 0.2; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - color: var(--font-color); - font-size: var(--font-size-default); -} - -#time-picker { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.spinner-container { - font-family: sans-serif; - display: flex; - flex-direction: column; - width: var(--spinner-width); -} - -.spinner-container > button { - -moz-appearance: none; - border: none; - background: none; - background-color: var(--button-font-color); - height: var(--spinner-button-height); -} - -.spinner-container > button:hover { - background-color: var(--button-font-color-hover); -} - -.spinner-container > button.active { - background-color: var(--button-font-color-active); -} - -.spinner-container > button.up { - background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; -} - -.spinner-container > button.down { - background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; -} - -.spinner-container.hide-buttons > button { - visibility: hidden; -} - -.spinner-container > .spinner { - position: relative; - width: 100%; - margin: var(--spinner-margin-top-bottom) 0; - cursor: default; - overflow-y: scroll; - scroll-snap-type: mandatory; - scroll-snap-points-y: repeat(100%); -} - -.spinner-container > .spinner > div { - box-sizing: border-box; - position: relative; - text-align: center; - padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; - margin-bottom: var(--spinner-item-margin-bottom); - height: var(--spinner-item-height); - -moz-user-select: none; - scroll-snap-coordinate: 0 0; -} - -.spinner-container > .spinner > 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; -} - -.spinner-container > .spinner:not(.scrolling) > div.selection { - color: var(--selected-font-color); -} - -.spinner-container > .spinner > 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, -.spinner-container > .spinner.scrolling > div.selection::before, -.spinner-container > .spinner.scrolling > div:hover::before { - display: none; -} - -.spinner-container > .spinner > div.disabled { - opacity: var(--disabled-opacity); -} - -.colon { - display: flex; - justify-content: center; - align-items: center; - width: var(--colon-width); - margin-bottom: 0.3rem; -} - -.spacer { - width: var(--day-period-spacing-width); -} \ No newline at end of file -- cgit v1.2.3 From 260e399a1ff7756cda9b6320a801f1198b27604a Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 13:24:40 +0100 Subject: Bug 1323109: [DateTimePicker] Date time picker popup does not open near input box --- toolkit/themes/shared/datetimepopup.css | 11 +++++++++++ toolkit/themes/shared/jar.inc.mn | 1 + 2 files changed, 12 insertions(+) create mode 100644 toolkit/themes/shared/datetimepopup.css (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimepopup.css b/toolkit/themes/shared/datetimepopup.css new file mode 100644 index 000000000..52f6fc7a2 --- /dev/null +++ b/toolkit/themes/shared/datetimepopup.css @@ -0,0 +1,11 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: 0; + margin-right: 0; +} diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index e7f1f7c67..39acff1c6 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -22,6 +22,7 @@ toolkit.jar: skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) + skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) -- cgit v1.2.3 From c87dbe6922ec79f988744f5aab0cde1a166292e6 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 13:38:47 +0100 Subject: Bug 1325922: [DateTimePicker] Add arrows svg file and style month-year button for date picker --- toolkit/themes/shared/datetimeinputpickers.css | 64 +++++++++++++++++++++---- toolkit/themes/shared/icons/calendar-arrows.svg | 13 +++++ toolkit/themes/shared/jar.inc.mn | 1 + 3 files changed, 70 insertions(+), 8 deletions(-) create mode 100644 toolkit/themes/shared/icons/calendar-arrows.svg (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index df93bc3a1..741f15281 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -16,6 +16,7 @@ --border: 0.1rem solid #D6D6D6; --border-radius: 0.3rem; + --border-active-color: #B1B1B1; --font-color: #191919; --fill-color: #EBEBEB; @@ -26,6 +27,7 @@ --button-font-color: #858585; --button-font-color-hover: #4D4D4D; --button-font-color-active: #191919; + --button-fill-color-active: #D4D4D4; --weekday-font-color: #6C6C6C; --weekday-outside-font-color: #6C6C6C; @@ -46,6 +48,12 @@ body { font-size: var(--font-size-default); } +button { + -moz-appearance: none; + background: none; + border: none; +} + .nav { display: flex; width: var(--calendar-width); @@ -54,15 +62,29 @@ body { justify-content: space-between; } -.nav button { - -moz-appearance: none; - background: none; - border: none; +.nav > button { width: 3rem; height: var(--date-picker-item-height); + background-color: var(--button-font-color); +} + +.nav > button:hover { + background-color: var(--button-font-color-hover); +} + +.nav > button.active { + background-color: var(--button-font-color-active); } -.month-year { +.nav > button.left { + background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%; +} + +.nav > button.right { + background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%; +} + +.month-year-container { position: absolute; display: flex; justify-content: center; @@ -74,6 +96,35 @@ body { z-index: 10; } +button.month-year { + font-size: 1.3rem; + border: var(--border); + border-radius: 0.3rem; + padding: 0.2rem 2.6rem 0.2rem 1.2rem; +} + +button.month-year:hover { + background: var(--fill-color); +} + +button.month-year.active { + border-color: var(--border-active-color); + background: var(--button-fill-color-active); +} + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; + background-color: var(--button-font-color); +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + .month-year-view { position: absolute; z-index: 5; @@ -187,9 +238,6 @@ body { } .spinner-container > button { - -moz-appearance: none; - border: none; - background: none; background-color: var(--button-font-color); height: var(--spinner-button-height); } diff --git a/toolkit/themes/shared/icons/calendar-arrows.svg b/toolkit/themes/shared/icons/calendar-arrows.svg new file mode 100644 index 000000000..858676f55 --- /dev/null +++ b/toolkit/themes/shared/icons/calendar-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 39acff1c6..bdfca2a05 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -23,6 +23,7 @@ toolkit.jar: skin/classic/global/config.css (../../shared/config.css) skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css) + skin/classic/global/icons/calendar-arrows.svg (../../shared/icons/calendar-arrows.svg) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) -- cgit v1.2.3 From e25430117a67f5c898e5e9388ebd44b185d469ab Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 12:17:17 +0200 Subject: 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 --- toolkit/themes/shared/datetimeinputpickers.css | 90 ++++++++++++++++++-------- 1 file changed, 63 insertions(+), 27 deletions(-) (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index 741f15281..a0c046f6f 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -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, -- cgit v1.2.3 From 6f1fcab2d81caedd96d9404386bc92f9884c30ce Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 20:56:33 +0200 Subject: Bug 1363672 - Add step support to date picker --- toolkit/themes/shared/datetimeinputpickers.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index a0c046f6f..42f2bc517 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -232,12 +232,14 @@ button.month-year.active::after { color: var(--weekend-outside-font-color); } -.days-view > .out-of-range { +.days-view > .out-of-range, +.days-view > .off-step { color: var(--weekday-disabled-font-color); background: var(--disabled-fill-color); } -.days-view > .out-of-range.weekend { +.days-view > .out-of-range.weekend, +.days-view > .off-step.weekend { color: var(--weekend-disabled-font-color); } @@ -245,7 +247,8 @@ button.month-year.active::after { font-weight: bold; } -.days-view > .out-of-range::before { +.days-view > .out-of-range::before, +.days-view > .off-step::before { display: none; } @@ -341,7 +344,7 @@ button.month-year.active::after { } .spinner-container > .spinner:not(.scrolling) > div.selection, -.calendar-container .days-view > div.selection:not(.out-of-range) { +.calendar-container .days-view > div.selection { color: var(--selected-font-color); } -- cgit v1.2.3 From bbfe249fd06ffa7b7084755578c06f43fe0fe474 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 31 Mar 2018 07:14:59 +0200 Subject: A nicer button for class="month-year::after" A small replacement for: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 --- toolkit/themes/shared/datetimeinputpickers.css | 1 - 1 file changed, 1 deletion(-) (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index 42f2bc517..f0c4315e5 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -127,7 +127,6 @@ button.month-year::after { width: 2.6rem; height: 1.6rem; background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; - background-color: var(--button-font-color); } button.month-year.active::after { -- cgit v1.2.3