From f048d7001f87d38e6b86822fc777347b63cdc959 Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Thu, 17 Oct 2024 16:18:06 +0300 Subject: [PATCH] UHF-10808: Fix visual bugs on kasko unit search variants --- .../custom/hdbt_subtheme/dist/css/styles.min.css | 2 +- .../themes/custom/hdbt_subtheme/package-lock.json | 12 ++++++------ .../paragraphs/_unit-search-variants.scss | 15 +++++++++++++++ 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css index 1c4f2bfb..de0e42bf 100644 --- a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css +++ b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css @@ -1 +1 @@ -.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{align-items:flex-end;grid-column-gap:24px;-moz-column-gap:24px;column-gap:24px;display:grid;grid-template-columns:1fr 1fr;grid-row-gap:32px;row-gap:32px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:0;width:100%}}.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{grid-area:submit;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-submit{max-width:280px;min-width:44px;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form{grid-template-areas:"filter filter" "filter filter" "submit .";grid-template-rows:auto auto auto}}@media(min-width: 768px){.unit-search--vocational-school .views--unit-search .views-exposed-form{grid-template-areas:"filter ." "submit .";grid-template-rows:auto auto}}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form,.unit-search--playground-search .bef-exposed-form,.unit-search--after-school-activity-search .bef-exposed-form{position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child,.unit-search--playground-search .bef-exposed-form>.form-item:first-child,.unit-search--after-school-activity-search .bef-exposed-form>.form-item:first-child{margin-top:0}.unit-search--daycare-search .fieldgroup,.unit-search--playground-search .fieldgroup,.unit-search--after-school-activity-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item,.unit-search--playground-search .bef-checkboxes .form-item,.unit-search--after-school-activity-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions,.unit-search--playground-search .form-actions,.unit-search--after-school-activity-search .form-actions{margin-top:16px;width:100%}.unit-search--daycare-search .form-actions .form-submit,.unit-search--playground-search .form-actions .form-submit,.unit-search--after-school-activity-search .form-actions .form-submit{display:inline-flex;margin-top:16px;max-width:280px;min-width:44px;width:100%}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.comprehensive-school__instruction-language::after{content:", "}.comprehensive-school__instruction-language:last-child::after{content:""}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:rgba(0,0,0,0);margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive--group-news{max-width:860px}.news-archive--group-news .news-listing__item{border-bottom:1px solid #f2f2f2}.unit__ontologyword-details h5{margin-bottom:16px}.unit__ontologyword-details__schoolyear{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:var(--line-height);display:block;margin-top:16px;padding-top:16px}@media(min-width: 992px){.unit__ontologyword-details__schoolyear{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.unit__ontologyword-details__detail-group{--line-height: 1.2222222222;font-size:1.125rem;font-weight:500;line-height:var(--line-height);margin-bottom:8px;margin-top:24px}@media(min-width: 992px){.unit__ontologyword-details__detail-group{--line-height: 1.5;font-size:1.25rem;font-weight:500}}.unit__ontologyword-details-row{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-bottom:16px}.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);align-items:flex-start;display:flex}@media(min-width: 992px){.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}} +.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{align-items:flex-end;grid-column-gap:24px;-moz-column-gap:24px;column-gap:24px;display:grid;grid-template-columns:1fr 1fr;grid-row-gap:32px;row-gap:32px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:0;width:100%}}.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{grid-area:submit;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-submit{max-width:280px;min-width:44px;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form{grid-template-areas:"filter filter" "filter filter" "submit .";grid-template-rows:auto auto auto}}@media(min-width: 768px){.unit-search--vocational-school .views--unit-search .views-exposed-form{grid-template-areas:"filter ." "submit .";grid-template-rows:auto auto}}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form,.unit-search--playground-search .bef-exposed-form,.unit-search--after-school-activity-search .bef-exposed-form{align-items:flex-start;gap:24px;position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{margin-top:0;width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child,.unit-search--playground-search .bef-exposed-form>.form-item:first-child,.unit-search--after-school-activity-search .bef-exposed-form>.form-item:first-child{margin-top:0;width:100%}.unit-search--daycare-search .fieldgroup,.unit-search--playground-search .fieldgroup,.unit-search--after-school-activity-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .fieldgroup .fieldset-legend,.unit-search--playground-search .fieldgroup .fieldset-legend,.unit-search--after-school-activity-search .fieldgroup .fieldset-legend{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{flex-direction:row;margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item,.unit-search--playground-search .bef-checkboxes .form-item,.unit-search--after-school-activity-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions,.unit-search--playground-search .form-actions,.unit-search--after-school-activity-search .form-actions{margin-top:16px;width:100%}.unit-search--daycare-search .form-actions .form-submit,.unit-search--playground-search .form-actions .form-submit,.unit-search--after-school-activity-search .form-actions .form-submit{display:inline-flex;margin-top:16px;max-width:280px;min-width:44px;width:100%}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.comprehensive-school__instruction-language::after{content:", "}.comprehensive-school__instruction-language:last-child::after{content:""}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:rgba(0,0,0,0);margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive--group-news{max-width:860px}.news-archive--group-news .news-listing__item{border-bottom:1px solid #f2f2f2}.unit__ontologyword-details h5{margin-bottom:16px}.unit__ontologyword-details__schoolyear{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:var(--line-height);display:block;margin-top:16px;padding-top:16px}@media(min-width: 992px){.unit__ontologyword-details__schoolyear{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.unit__ontologyword-details__detail-group{--line-height: 1.2222222222;font-size:1.125rem;font-weight:500;line-height:var(--line-height);margin-bottom:8px;margin-top:24px}@media(min-width: 992px){.unit__ontologyword-details__detail-group{--line-height: 1.5;font-size:1.25rem;font-weight:500}}.unit__ontologyword-details-row{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-bottom:16px}.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);align-items:flex-start;display:flex}@media(min-width: 992px){.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}} diff --git a/public/themes/custom/hdbt_subtheme/package-lock.json b/public/themes/custom/hdbt_subtheme/package-lock.json index 9b212491..ddb1a4af 100644 --- a/public/themes/custom/hdbt_subtheme/package-lock.json +++ b/public/themes/custom/hdbt_subtheme/package-lock.json @@ -3346,9 +3346,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001659", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001659.tgz", - "integrity": "sha512-Qxxyfv3RdHAfJcXelgf0hU4DFUVXBGTjqrBUZLUh8AtlGnsDo+CnncYtTd95+ZKfnANUOzxyIQCuU/UeBZBYoA==", + "version": "1.0.30001669", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz", + "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==", "funding": [ { "type": "opencollective", @@ -13194,9 +13194,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001659", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001659.tgz", - "integrity": "sha512-Qxxyfv3RdHAfJcXelgf0hU4DFUVXBGTjqrBUZLUh8AtlGnsDo+CnncYtTd95+ZKfnANUOzxyIQCuU/UeBZBYoA==" + "version": "1.0.30001669", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz", + "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==" }, "chalk": { "version": "2.4.2", diff --git a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss index 948af565..eef67435 100644 --- a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss +++ b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss @@ -60,6 +60,8 @@ // Daycare and playground search filters .bef-exposed-form { @include breakpoint($breakpoint-m) { + align-items: flex-start; + gap: $spacing-and-half; position: relative; } @@ -68,12 +70,14 @@ margin-top: $spacing-and-half; @include breakpoint($breakpoint-m) { + margin-top: 0; width: auto; } // Sort by distance to an address &:first-child { margin-top: 0; + width: 100%; } } } @@ -83,15 +87,26 @@ margin-bottom: 0; margin-left: 0; margin-right: 0; + + // Emulate hds-text-input__label styles since the legend is used here in a similar way. + .fieldset-legend { + color: var(--label-color-default); + display: block; + font-size: var(--fontsize-body-m); + font-weight: 500; + margin-bottom: var(--spacing-3-xs); + } } .bef-checkboxes { display: flex; + flex-direction: column; flex-wrap: wrap; justify-content: flex-start; // Compensate the checkboxes height so that it matches the select height. @include breakpoint($breakpoint-m) { + flex-direction: row; margin-bottom: $spacing; }