forked from mirrors/gecko-dev
c336c3e5b8
When the programmatically disabled `<fieldset>` contains an `<input type="date">`, the date input should also be rendered as disabled and the calendar button should be hidden. This patch also refactors the date input's code and updates the tests affected by the refactoring. Differential Revision: https://phabricator.services.mozilla.com/D194271
107 lines
2.2 KiB
CSS
107 lines
2.2 KiB
CSS
/* 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/. */
|
|
|
|
.datetimebox {
|
|
display: flex;
|
|
line-height: normal;
|
|
/* TODO: Enable selection once bug 1455893 is fixed */
|
|
user-select: none;
|
|
}
|
|
|
|
.datetime-input-box-wrapper {
|
|
display: inline-flex;
|
|
flex: 1;
|
|
background-color: inherit;
|
|
min-width: 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.datetime-input-edit-wrapper {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.datetime-edit-field {
|
|
display: inline;
|
|
text-align: center;
|
|
padding: 1px 3px;
|
|
border: 0;
|
|
margin: 0;
|
|
ime-mode: disabled;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.datetime-calendar-button {
|
|
-moz-context-properties: fill;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
fill: currentColor;
|
|
opacity: .65;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0.2em;
|
|
flex: none;
|
|
margin-block: 0;
|
|
margin-inline: 0.075em 0.15em;
|
|
padding: 0 0.15em;
|
|
line-height: 1;
|
|
|
|
&:focus-visible {
|
|
outline: 0.15em solid SelectedItem;
|
|
}
|
|
|
|
&:focus-visible,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
opacity: 1;
|
|
background-color: ButtonFace;
|
|
color: ButtonText;
|
|
|
|
> .datetime-calendar-button-svg {
|
|
background-color: ButtonFace;
|
|
-moz-context-properties: fill;
|
|
fill: ButtonText;
|
|
}
|
|
|
|
&:focus-visible,
|
|
&:hover {
|
|
background-color: SelectedItem;
|
|
|
|
> .datetime-calendar-button-svg {
|
|
background-color: SelectedItem;
|
|
-moz-context-properties: fill;
|
|
fill: SelectedItemText;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.datetime-calendar-button-svg {
|
|
pointer-events: none;
|
|
/* When using a very small font-size, we don't want the button to take extra
|
|
* space (which will affect the baseline of the form control) */
|
|
max-width: 1em;
|
|
max-height: 1em;
|
|
}
|
|
|
|
:host(:is(:disabled, :read-only, [type="time"])) .datetime-calendar-button {
|
|
display: none;
|
|
}
|
|
|
|
:host(:is(:disabled, :read-only)) .datetime-edit-field {
|
|
user-select: none;
|
|
pointer-events: none;
|
|
-moz-user-focus: none;
|
|
}
|