mirror of
https://github.com/Feodor2/Mypal68.git
synced 2025-06-18 14:55:44 -04:00
84 lines
1.8 KiB
CSS
84 lines
1.8 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/. */
|
|
|
|
.rich-picker {
|
|
display: grid;
|
|
grid-template-columns: 5fr auto auto;
|
|
grid-template-areas:
|
|
"label edit add"
|
|
"dropdown dropdown dropdown"
|
|
"invalid invalid invalid";
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.rich-picker > label {
|
|
color: #0c0c0d;
|
|
font-weight: 700;
|
|
grid-area: label;
|
|
}
|
|
|
|
.rich-picker > .add-link,
|
|
.rich-picker > .edit-link {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.rich-picker > .add-link {
|
|
grid-area: add;
|
|
}
|
|
|
|
.rich-picker > .edit-link {
|
|
grid-area: edit;
|
|
border-inline-end: 1px solid #0C0C0D33;
|
|
}
|
|
|
|
.rich-picker > rich-select {
|
|
grid-area: dropdown;
|
|
}
|
|
|
|
.invalid-selected-option > rich-select > select {
|
|
border: 1px solid #c70011;
|
|
}
|
|
|
|
.rich-picker > .invalid-label {
|
|
grid-area: invalid;
|
|
font-weight: normal;
|
|
color: #c70011;
|
|
}
|
|
|
|
:not(.invalid-selected-option) > .invalid-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Payment Method Picker */
|
|
payment-method-picker.rich-picker {
|
|
grid-template-columns: 20fr 1fr auto auto;
|
|
grid-template-areas:
|
|
"label spacer edit add"
|
|
"dropdown csc csc csc"
|
|
"invalid invalid invalid invalid";
|
|
}
|
|
|
|
.security-code-container {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
grid-area: csc;
|
|
margin: 10px 0; /* Has to be same as rich-select */
|
|
}
|
|
|
|
.rich-picker .security-code {
|
|
border: 1px solid #0C0C0D33;
|
|
/* Underlap the 1px border from common.css */
|
|
margin-inline-start: -1px;
|
|
flex-grow: 1;
|
|
padding: 8px;
|
|
}
|
|
|
|
.rich-picker .security-code:-moz-ui-invalid,
|
|
.rich-picker .security-code:focus {
|
|
/* So the error outline and focus ring appear above the adjacent dropdown when appropriate. */
|
|
/* We don't want to always be on top or we will cover the error outline or focus outline from the
|
|
dropdown. */
|
|
z-index: 1;
|
|
}
|