mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Adjust block chooser styles to match latest designs

stable/6.4.x
Thibaud Colas 2025-01-30 16:23:34 +00:00 zatwierdzone przez Sage Abdullah
rodzic f8fb1d6d36
commit 53df6a2492
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: EB1A33CC51CC0217
1 zmienionych plików z 17 dodań i 9 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

26
client/src/components/ComboBox/ComboBox.scss
Wyświetl plik

@ -1,8 +1,8 @@
// Ensure consistent spacing across the whole component.
// With the scrolling and show/hide of the field, correct spacing is critical.
$spacing: theme('spacing.[2.5]');
$spacing-sm: theme('spacing.5');
$width: min(1000px, 75vw);
$spacing-sm: theme('spacing.4');
$width: clamp(300px, 75vw, 1000px);
.w-combobox-container {
@include dark-theme() {
@ -28,9 +28,9 @@ $width: min(1000px, 75vw);
// Case 1: base case
// Use max-content width to minimize shifting due to content wrapping,
// while also ensuring it's not wider than 75% of the viewport.
// constraining width to 75% of viewport for devices above 400px width.
width: max-content;
max-width: 75vw;
max-width: max(300px, 75vw);
// Case 2: there's a previewable block, but the preview may or may not be active
// On smaller screens, the preview will be shown below. We don't want the
@ -87,12 +87,13 @@ $width: min(1000px, 75vw);
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
gap: theme('spacing.[0.5]');
gap: theme('spacing.1');
padding: $spacing;
padding-top: 0;
@include media-breakpoint-up(sm) {
width: 100%;
column-gap: theme('spacing.5');
padding: $spacing-sm;
padding-top: 0;
}
@ -120,15 +121,22 @@ $width: min(1000px, 75vw);
}
.w-combobox__option-preview {
@include more-contrast-interactive();
@include show-focus-outline-inside();
color: theme('colors.icon-secondary');
background: none;
border: 1px solid transparent;
padding: 0;
width: 100%;
.icon {
color: theme('colors.icon-secondary');
width: theme('spacing.3');
height: theme('spacing.3');
}
&:hover {
color: theme('colors.icon-secondary-hover');
}
}
.w-combobox__option-row--col1 {
@ -143,17 +151,17 @@ $width: min(1000px, 75vw);
display: grid;
grid-template-columns: theme('spacing.8') 1fr;
align-items: center;
padding: theme('spacing.2');
border: 1px solid transparent;
padding: theme('spacing.[2.5]');
border: 1px dotted theme('colors.border-button-small-outline-default');
font-size: 0.875rem;
line-height: theme('lineHeight.tight');
border-radius: theme('borderRadius.sm');
cursor: pointer;
&[aria-selected='true'] {
border-color: theme('colors.border-button-outline-default');
color: theme('colors.text-link-default');
background: transparent;
cursor: pointer;
@media (forced-colors: active) {
background: Highlight;