wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-10 02:08:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

Bug 1325922: [DateTimePicker] Add arrows svg file and style month-year button for date picker

Browse source
This commit is contained in:
janekptacijarabaci 2018-02-14 13:38:47 +01:00 • committed by Roy Tam
commit a13a3afc1b
7 changed files with 101 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

64
toolkit/themes/shared/datetimeinputpickers.css
View file

@ -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);
}
.month-year {
.nav > button:hover {
background-color: var(--button-font-color-hover);
}
.nav > button.active {
background-color: var(--button-font-color-active);
}
.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);
}