bez zadnego
flex-grow, wiec kurczy sie do tresci, a .mdc-text-field { width: 100% } liczy sie juz
od tego waskiego pudelka. Rosnac ma wiec kontener, nie etykieta.
Selektor z dzieckiem bezposrednim celuje wylacznie w pole potwierdzenia: przy polu
hasla .d-flex.caps-check nie jest bezposrednim dzieckiem .mdc-input-group. */
#passwordManagementForm .mdc-input-group > .d-flex.caps-check {
flex: 1 1 auto;
min-width: 0;
}
/* 2. Miernik sily hasla byl NIEWIDOCZNY, a etykieta ("Slabe", "Dobre") wedrowala po ekranie.
passwordMeter.js ustawia #progress-strength-indicator szerokosc w procentach i wpisuje
w niego etykiete, a szablon ma na nim text-center - stad napis przesuwal sie wraz
z sila hasla. Samego paska nie bylo widac, bo ANI /cas/css/cas.css, ANI arkusz motywu
nie definiuja .progress i .progress-bar, a z Bootstrapa ladowany jest wylacznie
bootstrap-grid, czyli sama siatka bez komponentow.
min-width: max-content sprawia, ze wypelnienie nigdy nie jest wezsze od napisu -
etykieta zawsze zaczyna sie w tym samym miejscu, niezaleznie od wyniku. */
#strengthProgressBar.progress {
display: block;
height: 1.75rem;
margin-top: .35rem;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
/* Wariant MDC paska jest w szablonie, ale pozostaje martwy: passwordMeter.js sprawdza
bar.foundation na obiekcie jQuery, ktory takiej wlasciwosci nie ma, wiec zawsze schodzi
do wariantu procentowego. Pusty tor MDC tylko dokladalby wysokosci. */
#strengthProgressBar .mdc-linear-progress {
display: none;
}
#progress-strength-indicator.progress-bar {
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
min-width: max-content;
padding: 0 .75rem;
color: #fff;
font-weight: 600;
white-space: nowrap;
background: #6c757d;
transition: width .25s ease, background-color .25s ease;
}
#strengthProgressBar.progress-bar-danger #progress-strength-indicator { background: #c62828; }
#strengthProgressBar.progress-bar-warning #progress-strength-indicator { background: #ef6c00; }
#strengthProgressBar.progress-bar-success #progress-strength-indicator { background: #2e7d32; }
/* 3. Ostrzezenie i podpowiedzi zxcvbn zlewaly sie w jeden akapit - szablon rozdziela je
samym , a passwordMeter.js skleja podpowiedzi zwyklym odstepem. Rozdzielenie
na osobne wiersze; kropki na koncach zdan dodaje zxcvbn-pl.js. */
#password-strength-msg #password-strength-warning,
#password-strength-msg #password-strength-suggestions {
display: block;
}
#password-strength-msg #password-strength-warning:not(:empty) {
font-weight: 600;
margin-bottom: .25rem;
}
/* 5. Spojny rytm pionowy calego formularza zmiany hasla.
Szablon rozdziela sekcje klasami my-3 (1rem gora i dol), ale nie wszedzie: dwa dolne
komunikaty bledu sa sasiednimi
bez zadnego odstepu i przylegaly do siebie,
a wewnatrz ramki z podpowiedziami siedzi dodatkowe mb-2. Do tego marginesy sasiadow
sie zlewaja, wiec odstep wynikowy zalezy od tego, ktore bloki sa akurat widoczne.
Zamiast latac kazdy przypadek z osobna: formularz i kontener komunikatow dostaja
uklad kolumnowy z jednym gap, a wlasne marginesy blokow sa zerowane. Odstep jest
wtedy ten sam wszedzie i nie zalezy od zlewania sie marginesow.
gap, a nie margines na sasiedztwie (div + div): bloki sa pokazywane i ukrywane przez
display:none, a element ukryty pozostaje sasiadem w drzewie dokumentu - margines
dokladalby pustej przestrzeni takze wtedy, gdy widoczny jest tylko jeden z nich.
gap dotyczy wylacznie elementow faktycznie renderowanych.
!important jest konieczne, bo klasy odstepow Bootstrapa (my-3, my-4, mb-2) same go
uzywaja i inaczej wygralyby z ta regula. */
#passwordManagementForm {
display: flex;
flex-direction: column;
gap: 1rem;
}
#passwordManagementForm > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#password-strength-notes {
display: flex;
flex-direction: column;
gap: 1rem;
}
#password-strength-msg .suggestions {
margin-bottom: 0 !important;
}