mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-04 10:18:41 +02:00
86 lines
1.7 KiB
CSS
86 lines
1.7 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 https://mozilla.org/MPL/2.0/. */
|
|
|
|
#password-rules-wrapper {
|
|
margin: 0;
|
|
position: absolute;
|
|
padding: var(--space-large) var(--space-xlarge);
|
|
background-color: var(--background-color-box);
|
|
border: var(--border-width) solid var(--border-color-interactive);
|
|
border-radius: var(--border-radius-small);
|
|
overflow: visible;
|
|
z-index: 10;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: start;
|
|
gap: 0.5rem;
|
|
|
|
&:last-child {
|
|
margin-block-start: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Arrow */
|
|
&::before {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
position: absolute;
|
|
content: "";
|
|
background-color: var(--background-color-box);
|
|
border-block-start: var(--border-width) solid var(--border-color-interactive);
|
|
border-inline-start: var(--border-width) solid var(--border-color-interactive);
|
|
}
|
|
|
|
/* Default, not zoomed in */
|
|
@media (min-width: 1200px) {
|
|
&::before {
|
|
inset-inline-start: -0.4rem;
|
|
inset-block-start: 1.25rem;
|
|
rotate: -45deg;
|
|
}
|
|
|
|
&:dir(rtl)::before {
|
|
rotate: 45deg;
|
|
}
|
|
}
|
|
|
|
/* Zoomed in */
|
|
@media (max-width: 1200px) {
|
|
&::before {
|
|
inset-inline-start: 1.25rem;
|
|
inset-block-start: -0.46rem;
|
|
rotate: 45deg;
|
|
}
|
|
|
|
&:dir(rtl)::before {
|
|
rotate: -45deg;
|
|
}
|
|
}
|
|
}
|
|
|
|
#password-rules-header {
|
|
margin-block-start: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.icon {
|
|
-moz-context-properties: fill, stroke;
|
|
fill: currentColor;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.success {
|
|
color: var(--icon-color-success);
|
|
}
|
|
|
|
.warning {
|
|
color: var(--icon-color-warning);
|
|
}
|