diff --git a/config/sync/page_manager.page_variant.homepage-layout_builder-1.yml b/config/sync/page_manager.page_variant.homepage-layout_builder-1.yml index 029b559c8c..a1127155e5 100644 --- a/config/sync/page_manager.page_variant.homepage-layout_builder-1.yml +++ b/config/sync/page_manager.page_variant.homepage-layout_builder-1.yml @@ -84,7 +84,7 @@ variant_settings: label: 'For fresh start on creating content' provider: layout_builder_block label_display: '0' - text: "

How to video Guided tour FAQ

\r\n" + text: "

How to video Guided tour FAQ

\r\n" format: full_html context_mapping: { } additional: diff --git a/web/modules/custom/solution/solution.module b/web/modules/custom/solution/solution.module index facb32bdf8..09f75d9eb0 100644 --- a/web/modules/custom/solution/solution.module +++ b/web/modules/custom/solution/solution.module @@ -354,7 +354,7 @@ function solution_rdf_entity_view(array &$build, RdfInterface $solution, EntityV try { $link = $solution->toLink(t('Read more'), 'about-page', [ 'attributes' => [ - 'class' => ['about-page', 'read-more', 'fieldset__read-more'], + 'class' => ['about-page', 'read-more', 'fieldset__read-more', 'btn', 'btn-secondary'], ], ]); $build['read_more'] = $link->toRenderable(); diff --git a/web/themes/ventuno/src/scss/components/_about-block.scss b/web/themes/ventuno/src/scss/components/_about-block.scss index d9879ea15b..cec2503c17 100644 --- a/web/themes/ventuno/src/scss/components/_about-block.scss +++ b/web/themes/ventuno/src/scss/components/_about-block.scss @@ -23,9 +23,3 @@ .about-how { color: $gray-700; } -.about-how { - a { - @extend .btn; - @extend .btn-secondary; - } -} diff --git a/web/themes/ventuno/src/scss/components/_discover-topics-block.scss b/web/themes/ventuno/src/scss/components/_discover-topics-block.scss deleted file mode 100644 index 404382c7f9..0000000000 --- a/web/themes/ventuno/src/scss/components/_discover-topics-block.scss +++ /dev/null @@ -1,127 +0,0 @@ -.block-views-blockdiscover-topics-block { - @extend .col-lg; - > h2 { - font-size: $font-size-sm; - font-weight: $display-font-weight; - color: $gray-500; - text-transform: uppercase; - text-align: center; - @include media-breakpoint-up(lg) { - margin-top: calc(2.75rem + (1.375rem + 1.5vw)*2); // Super custom spacing to align badges with search bar - text-align: left; - } - @include media-breakpoint-up(xl) { - margin-top: calc(2.75rem + 2.5rem*2); // Super custom spacing to align badges with search bar - } - } - .view-discover-topics { - .discover-topics__items { - display: flex; - flex-wrap: wrap; - justify-content: center; - - // On mobile, limit the topics shown to occupy max 3 lines: #ISAICP-6701. - @include media-breakpoint-down(md) { - max-height: 8.4rem; - overflow: hidden; - padding: 0.1rem 0; - margin-bottom: .4rem; - } - @include media-breakpoint-up(lg) { - justify-content: flex-start; - } - .field__item { - a { - display: inline-block; - border: 1px solid $gray-300; - padding: $btn-padding-y $btn-padding-x; - background-color: $white; - color: $gray-400; - border-radius: $btn-border-radius; - margin: 0 .5rem .5rem 0; - &:hover { - text-decoration: none; - } - } - } - } - .view-footer { - text-align: center; - @include media-breakpoint-up(lg) { - text-align: left; - } - a { - display: inline-block; - padding: $btn-padding-y $btn-padding-x; - background-color: $secondary; - color: $brand; - border-radius: $btn-border-radius; - margin: 0 .5rem .5rem 0; - &:hover { - text-decoration: none; - } - } - } - } -} - -.ui-widget-overlay { - background-color: $primary; - opacity: .2; -} -.ui-dialog { - &.ui-widget-content { - border: none; - border-radius: $btn-border-radius; - @extend .pb-2; - } - .ui-widget-header { - background: none; - border: none; - @extend .px-3; - @extend .mt-2; - .ui-dialog-title { - @extend .h4; - text-transform: uppercase; - line-height: 1.4; - } - .ui-dialog-titlebar-close { - @include font-icon-before("\E806", 2rem, $gray-400); - padding: 0; - border: none; - background: no-repeat; - position: static; - float: right; - margin: 0; - } - } - .ui-dialog-content { - overflow-y: scroll; - max-height: 70vh !important; - .views-field-name { - @extend .mb-1; - a { - color: $brand; - } - } - } - @include media-breakpoint-up(md) { - min-width: 740px; - .view-topic-parent-list { - .view-content { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin: 0 -15px; - .views-row { - flex: 1 0 33.3%; - padding: 0 15px; - } - } - } - } - @include media-breakpoint-up(lg) { - min-width: 830px; - } - -} \ No newline at end of file diff --git a/web/themes/ventuno/src/scss/components/_explore-block.scss b/web/themes/ventuno/src/scss/components/_explore-block.scss index 4e033ec0e9..e29142a587 100644 --- a/web/themes/ventuno/src/scss/components/_explore-block.scss +++ b/web/themes/ventuno/src/scss/components/_explore-block.scss @@ -8,7 +8,7 @@ body { .block-joinup-front-page-explore-block { position: relative; - @extend .mb-5; + margin-bottom: $spacer * 3; // 48px @include full-width-color-to-top( $gray-200, $white, @@ -20,15 +20,15 @@ body { ); .explore-block-title { text-transform: uppercase; - @extend .h4; - @extend .pb-2; - @extend .mb-4; + font-size: 1.25rem; // 20px + padding-bottom: $spacer * .5; // 8px + margin-bottom: $spacer * 1.5; // 24px @include font-icon-before("\E802", 1.42rem, $warning); border-bottom: 1px solid rgba($primary, .1); } .nav-tabs { border: none; - @extend .mb-3; + margin-bottom: $spacer; // 16px @include media-breakpoint-up(md) { position: absolute; top: $spacer * 3; @@ -38,8 +38,10 @@ body { border: none; background: none; padding: 0 0 $btn-padding-y 0; - @extend .m-2; - @extend .m-lg-4; + margin: $spacer * .5; // 8px + @include media-breakpoint-up(xl) { + margin: $spacer * 1.5; + } color: $gray-500; &.active { color: $black; @@ -63,10 +65,10 @@ body { flex-flow: column; background-color: $white; border-radius: $border-radius; - @extend .p-4; - @extend .me-4; - @extend .shadow; + padding: $spacer * 1.5; // 24px + margin-right: $spacer * 1.5; // 24px height: 100%; + box-shadow: $box-shadow; .layout { flex-grow: 1; .layout__region { @@ -77,7 +79,7 @@ body { } h2 { font-size: $h4-font-size; - @extend .fw-medium; + font-weight: $font-weight-medium; line-height: $line-height-base; a { color: $gray-800; @@ -86,11 +88,11 @@ body { .explore-item__description { flex-grow: 1; color: $gray-600; - @extend .mb-4; + margin-bottom: $spacer * 1.5; // 24px } .date { color: $gray-500; - @extend .fs-xs; + font-size: $font-size-xs; .field--name-created, .field--name-published-at { padding-top: $btn-padding-y; } @@ -103,10 +105,7 @@ body { margin-top: -1.8rem; } .read-more { - display: inline-block; float: right; - @extend .btn; - @extend .btn-secondary; } } } diff --git a/web/themes/ventuno/src/scss/components/_footer.scss b/web/themes/ventuno/src/scss/components/_footer.scss index 1908243e14..f76e7bd5dc 100644 --- a/web/themes/ventuno/src/scss/components/_footer.scss +++ b/web/themes/ventuno/src/scss/components/_footer.scss @@ -22,7 +22,8 @@ a { font-size: $font-size-xs; color: $gray-300; - @extend .py-1; + padding-top: $spacer * .25; // 4px + padding-bottom: $spacer * .25; // 4px &.linkedin { @include icon-only(); @include font-icon-before("\F0E1", 1.8em); diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 2582f77ad9..32a61b7a3b 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -1,8 +1,8 @@ .block-joinup-search-global-search { - @extend .pt-5; - @extend .pb-2; - @extend .me-3; - @extend .col-lg; + @extend .pt-5 !optional; + @extend .pb-2 !optional; + @extend .me-3 !optional; + @extend .col-lg !optional; .search-bar { .search-bar__input { border-style: none; diff --git a/web/themes/ventuno/src/scss/components/_highlighted-event-block.scss b/web/themes/ventuno/src/scss/components/_highlighted-event-block.scss index a649281b2f..2bf26301e8 100644 --- a/web/themes/ventuno/src/scss/components/_highlighted-event-block.scss +++ b/web/themes/ventuno/src/scss/components/_highlighted-event-block.scss @@ -1,7 +1,7 @@ // Highlighted Event .block-entityqueue--highlighted-event { position: relative; - @extend .mb-5; + margin-bottom: $spacer * 3; // 48px height: 100%; > h2 { @include font-icon-before("\F133", 1.2rem, $warning); @@ -18,29 +18,31 @@ article { background: $gray-300 url(../images/highlighted-event.jpg) no-repeat center center; background-size: cover; - @extend .rounded-3; + border-radius: $border-radius-lg; // 0.3rem display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; - @extend .p-4; - @extend .p-lg-5; + padding: $spacer * 1.5; // 24px + @include media-breakpoint-up(lg) { + padding: $spacer * 3; // 48px + } color: $white; header { - @extend .mb-5; - @extend .pb-5; + margin-bottom: $spacer * 3; // 48px + padding-bottom: $spacer * 3; // 48px h3 { text-transform: uppercase; color: $white; - @extend .h4; + font-size: 1.25rem; font-weight: normal; border-bottom: 4px solid $white; } } > h2 { line-height: $line-height-sm; - @extend .mb-1; + margin-bottom: $spacer * .25; // 4px color: $white; } .field--name-field-event-date { @@ -48,12 +50,8 @@ font-weight: normal; } footer { - @extend .mt-5; - @extend .pt-5; - a { - @extend .btn; - @extend .btn-secondary; - } + margin-top: $spacer * 3; // 48px + padding-top: $spacer * 3; // 48px } } -} \ No newline at end of file +} diff --git a/web/themes/ventuno/src/scss/components/_highlighted-solution-block.scss b/web/themes/ventuno/src/scss/components/_highlighted-solution-block.scss index ae10fd3edb..73fb2bf3c2 100644 --- a/web/themes/ventuno/src/scss/components/_highlighted-solution-block.scss +++ b/web/themes/ventuno/src/scss/components/_highlighted-solution-block.scss @@ -1,6 +1,6 @@ // Highlighted Solution .block-entityqueue--highlighted-solution { - @extend .pb-5; + padding-bottom: $spacer * 3; // 48px border-bottom: 1px solid rgba($primary, .1); position: relative; height: 100%; @@ -18,15 +18,15 @@ } article { .field--name-field-is-logo { - @extend .mb-4; + margin-bottom: $spacer * 1.5; // 24px } .field--name-field-is-description { color: $gray-700; } .field--name-field-is-solution-type { color: $gray-500; - @extend .mt-2; - @extend .fs-xs; + margin-top: $spacer * .5; // 8px + font-size: $font-size-xs; } .field--name-field-topic { a { @@ -36,4 +36,4 @@ } } } -} \ No newline at end of file +} diff --git a/web/themes/ventuno/src/scss/components/_homepage.scss b/web/themes/ventuno/src/scss/components/_homepage.scss index 4c41c34a14..13f687f8c1 100644 --- a/web/themes/ventuno/src/scss/components/_homepage.scss +++ b/web/themes/ventuno/src/scss/components/_homepage.scss @@ -3,17 +3,28 @@ .block { & > h2 { text-transform: uppercase; - @extend .h4; + font-size: 1.25rem; // 20px } } .field--name-field-topic { - @extend .mb-3; + margin-bottom: $spacer; // 16px .field__item { display: inline-block; } a { - @extend .badge; - @extend .bg-secondary; + // Badge classes + display: inline-block; + padding: 0.35em 0.65em; + font-size: 0.75em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; + // End badge classes + background-color: $secondary; font-size: $font-size-sm; color: $link-color; font-weight: normal; @@ -24,9 +35,9 @@ .block-entityqueue--highlighted-solution, .view-latest-news { .views-row { - @extend .mb-4; + margin-bottom: $spacer * 1.5; // 24px &:last-child { - @extend .mb-0; + margin-bottom: 0; } } .field--name-body { @@ -35,14 +46,14 @@ article { h2 { font-size: $font-size-base; - @extend .fw-medium; + font-weight: $font-weight-medium; line-height: $line-height-base; a { color: $gray-900; } } img { - @extend .rounded; + border-radius: $border-radius; // .5rem; } } } diff --git a/web/themes/ventuno/src/scss/components/_in-the-spotlight-block.scss b/web/themes/ventuno/src/scss/components/_in-the-spotlight-block.scss index 4eb0e1c6e8..a4d42e8da1 100644 --- a/web/themes/ventuno/src/scss/components/_in-the-spotlight-block.scss +++ b/web/themes/ventuno/src/scss/components/_in-the-spotlight-block.scss @@ -1,6 +1,6 @@ // In the Spotlight .block-views-blockin-the-spotlight-block { - @extend .pb-5; + padding-bottom: $spacer * 3; // 48px height: 100%; border-bottom: 1px solid rgba($primary, .1); > h2 { @@ -38,8 +38,8 @@ } .metadata { color: $gray-500; - @extend .mt-2; - @extend .fs-xs; + margin-top: $spacer * .5; // 8px + font-size: $font-size-xs; } &:before { counter-increment: spotlight-counter; @@ -48,8 +48,8 @@ font-size: $h3-font-size; font-weight: 700; color: rgba($primary, .3); - @extend .pe-3; - @extend .mb-2; + padding-right: $spacer; // 16px + margin-bottom: $spacer * .5; // 8px line-height: 1; } } diff --git a/web/themes/ventuno/src/scss/components/_latest-news-block.scss b/web/themes/ventuno/src/scss/components/_latest-news-block.scss index 0e91690701..3239473fa8 100644 --- a/web/themes/ventuno/src/scss/components/_latest-news-block.scss +++ b/web/themes/ventuno/src/scss/components/_latest-news-block.scss @@ -1,7 +1,7 @@ // Latest News .block-views-blocklatest-news-block { position: relative; - @extend .mb-5; + margin-bottom: $spacer * 3; // 48px > h2 { @include font-icon-before("\E804", 1.2rem, $warning); } @@ -23,7 +23,7 @@ text-align: center; display: flex; flex-flow: column; - @extend .pe-3; + padding-right: $spacer; // 16px line-height: 1; text-transform: uppercase; font-weight: 700; @@ -38,7 +38,7 @@ .dated-listing--content { h2 { font-size: $font-size-base; - @extend .fw-medium; + font-weight: $font-weight-medium; line-height: $line-height-base; a { color: $gray-900; @@ -54,4 +54,4 @@ padding-left: $spacer; // 16px } } -} \ No newline at end of file +} diff --git a/web/themes/ventuno/src/scss/components/_site-alerts-messages.scss b/web/themes/ventuno/src/scss/components/_site-alerts-messages.scss index dc348af34b..384c0e4d00 100644 --- a/web/themes/ventuno/src/scss/components/_site-alerts-messages.scss +++ b/web/themes/ventuno/src/scss/components/_site-alerts-messages.scss @@ -1,6 +1,6 @@ // Site alerts .site-alert { - @extend .container; + @extend .container !optional; & > div { padding: $spacer*1.5 $spacer; border-radius: $border-radius; diff --git a/web/themes/ventuno/src/scss/homepage.scss b/web/themes/ventuno/src/scss/homepage.scss index 0791e76be8..39b3b862fd 100644 --- a/web/themes/ventuno/src/scss/homepage.scss +++ b/web/themes/ventuno/src/scss/homepage.scss @@ -1,16 +1,30 @@ // Homepage CSS // Only styles specific to the Homepage -// Joinup variables -@import "@openeuropa/bcl-theme-joinup/src/scss/oe-bcl-joinup.scss"; +// Bootstrap functions +@import "@openeuropa/bcl-bootstrap/scss/functions"; -// Custom Joinup mixins +// Bootstrap default variables +@import "@openeuropa/bcl-bootstrap/scss/variables"; + +// Override with Joinup variables +@import "@openeuropa/bcl-theme-joinup/src/scss/base/variables"; + +// Bootstrap utilities +@import "@openeuropa/bcl-bootstrap/scss/utilities"; + +// Override with Joinup utilities +@import "@openeuropa/bcl-theme-joinup/src/scss/base/utilities"; + +// Bootstrap mixins +@import "@openeuropa/bcl-bootstrap/scss/mixins"; + +// Override with Joinup mixins @import "mixins/joinup-icons"; @import "mixins/full-width-background-colors"; // Components @import "components/about-block"; -@import "components/discover-topics-block"; @import "components/homepage"; @import "components/in-the-spotlight-block"; @import "components/latest-news-block"; @@ -19,5 +33,3 @@ @import "components/highlighted-event-block"; @import "components/global-search-block"; @import "components/explore-block"; -@import "components/footer"; -@import "components/site-alerts-messages"; diff --git a/web/themes/ventuno/src/scss/main.scss b/web/themes/ventuno/src/scss/main.scss index 27d44f21ad..260d7fffd6 100644 --- a/web/themes/ventuno/src/scss/main.scss +++ b/web/themes/ventuno/src/scss/main.scss @@ -10,4 +10,5 @@ // Components @import "components/navbar"; +@import "components/site-alerts-messages"; @import "components/footer";