diff --git a/public/sass/custom/blocks/mainMenu.scss b/public/sass/custom/blocks/mainMenu.scss index 405ec87..9af93dc 100644 --- a/public/sass/custom/blocks/mainMenu.scss +++ b/public/sass/custom/blocks/mainMenu.scss @@ -1,160 +1,162 @@ // sass-lint:disable no-mergeable-selectors -#mainMenu { - display: none; - &.sticky-menu { - position: sticky; - align-self: start; - top: 0; - } +@layer kth-style.old { + #mainMenu { + display: none; + &.sticky-menu { + position: sticky; + align-self: start; + top: 0; + } - @media (min-width: 992px) { - display: block; - width: 296px; - max-width: 296px; - &.col { - &.navbar { - &.navbar-expand-lg { - &.navbar-light { - #navbarNav { - &.collapse { - &.navbar-collapse { - display: block !important; // Need !important to override bootstrap default. - position: relative; - top: 0; - z-index: 0; + @media (min-width: 992px) { + display: block; + width: 296px; + max-width: 296px; + &.col { + &.navbar { + &.navbar-expand-lg { + &.navbar-light { + #navbarNav { + &.collapse { + &.navbar-collapse { + display: block !important; // Need !important to override bootstrap default. + position: relative; + top: 0; + z-index: 0; - ul { - &.nav { - box-shadow: none; - position: relative; - width: 250px; - z-index: 1; - width: auto; + ul { + &.nav { + box-shadow: none; + position: relative; + width: 250px; + z-index: 1; + width: auto; - .nav-item { - &.ancestor { - display: block; - padding: 8px $gutter 8px 0; - font-weight: 600; - line-height: 1.375; - margin-top: 0; - margin-bottom: 0; - @media (min-width: 768px) { - font-size: 1.25rem; + .nav-item { + &.ancestor { + display: block; + padding: 8px $gutter 8px 0; + font-weight: 600; + line-height: 1.375; + margin-top: 0; + margin-bottom: 0; + @media (min-width: 768px) { + font-size: 1.25rem; + } } - } - &.leaf { - width: 250px; - } + &.leaf { + width: 250px; + } - &.selected { - width: 250px; + &.selected { + width: 250px; + } } - } - li { - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - margin-top: 0; - margin-bottom: 0; + li { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin-top: 0; + margin-bottom: 0; - &.nav-item { - &.ancestor { - a { - &.nav-link { - padding: 7px $gutter 7px 0; + &.nav-item { + &.ancestor { + a { + &.nav-link { + padding: 7px $gutter 7px 0; + } } } - } - &.leaf { - a { - &.nav-link { - padding: 7px $gutter 7px 0; + &.leaf { + a { + &.nav-link { + padding: 7px $gutter 7px 0; - &[href]:hover { - text-decoration: underline; + &[href]:hover { + text-decoration: underline; + } } } } - } - &.selected { - a, - span { - &.nav-link { - padding: 7px $gutter 7px 0; - color: $black; + &.selected { + a, + span { + &.nav-link { + padding: 7px $gutter 7px 0; + color: $black; + } } } - } - &.node { - a { - &.nav-link { - color: $black; - padding: 7px $gutter 7px 0; + &.node { + a { + &.nav-link { + color: $black; + padding: 7px $gutter 7px 0; - &[href]:hover { - text-decoration: underline; + &[href]:hover { + text-decoration: underline; + } } } } } - } - span { - &.nav-item { - &.ancestor { - display: block; + span { + &.nav-item { + &.ancestor { + display: block; + } } } - } - &.parentLink { - padding: 0; - background: $data-arrow-back-blue-svg no-repeat left; - background-size: 0.875rem 0.875rem; - background-position-y: 5px; - margin-bottom: 10px; + &.parentLink { + padding: 0; + background: $data-arrow-back-blue-svg no-repeat left; + background-size: 0.875rem 0.875rem; + background-position-y: 5px; + margin-bottom: 10px; - a { - padding-left: 1.313rem; - font-size: 1rem; - display: block; + a { + padding-left: 1.313rem; + font-size: 1rem; + display: block; + } } } } } - } - // Styling for expandable left menu - ul { - &.nav { - &.nav-list { - &.expandable { - li { - &.nav-item { - &.node { - &.expanded { - background: none; - } + // Styling for expandable left menu + ul { + &.nav { + &.nav-list { + &.expandable { + li { + &.nav-item { + &.node { + &.expanded { + background: none; + } - ul.nav-list { - border-top: 1px solid $borderGrey; - padding: 7px 0 0 20px; - margin-top: 7px; + ul.nav-list { + border-top: 1px solid $borderGrey; + padding: 7px 0 0 20px; + margin-top: 7px; + } } - } - &.leaf { - a, - span { - &.nav-link { - padding: 7px 0; - color: $black; + &.leaf { + a, + span { + &.nav-link { + padding: 7px 0; + color: $black; + } } } } @@ -170,85 +172,85 @@ } } } - } - ul { - &.nav { - li { - &.nav-item { - width: 250px; + ul { + &.nav { + li { + &.nav-item { + width: 250px; - &.ancestor { - a { - &.nav-link { - font-weight: 600; - line-height: 1.375; - margin-top: 0; - margin-bottom: 0; - padding: 0 0 11px 4px; + &.ancestor { + a { + &.nav-link { + font-weight: 600; + line-height: 1.375; + margin-top: 0; + margin-bottom: 0; + padding: 0 0 11px 4px; - @media (min-width: 768px) { - font-size: 1.25rem; + @media (min-width: 768px) { + font-size: 1.25rem; + } } } } - } - &.selected { - font-weight: 600 !important; + &.selected { + font-weight: 600 !important; - a, - span { - &.nav-link { - padding: 6px 0; + a, + span { + &.nav-link { + padding: 6px 0; + } } } - } - &.leaf { - a { - &.nav-link { - padding: 6px 0; - color: $black; + &.leaf { + a { + &.nav-link { + padding: 6px 0; + color: $black; + } } } - } - &.node { - background: $data-arrow-next-black-svg no-repeat right; - background-size: 14px 14px; - background-position: 100% 14px; - - &.expandable { - background: $data-arrow-expand-black-svg no-repeat right; - background-size: 9px 14px; + &.node { + background: $data-arrow-next-black-svg no-repeat right; + background-size: 14px 14px; background-position: 100% 14px; + + &.expandable { + background: $data-arrow-expand-black-svg no-repeat right; + background-size: 9px 14px; + background-position: 100% 14px; + } } } } } } - } - &.col { - max-width: 300px; + &.col { + max-width: 300px; + } } } -} -.container { - &.start, - &.department.standard { - &.withMainMenu { - #mainMenu { - &.col { - &.navbar { - &.navbar-expand-lg { - &.navbar-light { - padding: 0 $gutter $gutter 0; + .container { + &.start, + &.department.standard { + &.withMainMenu { + #mainMenu { + &.col { + &.navbar { + &.navbar-expand-lg { + &.navbar-light { + padding: 0 $gutter $gutter 0; - @media (min-width: 992px) { - padding: 0 20px $gutter 0; + @media (min-width: 992px) { + padding: 0 20px $gutter 0; + } } } } diff --git a/public/sass/custom/blocks/megaMenu.scss b/public/sass/custom/blocks/megaMenu.scss index 071f534..6f651f0 100644 --- a/public/sass/custom/blocks/megaMenu.scss +++ b/public/sass/custom/blocks/megaMenu.scss @@ -1,178 +1,179 @@ // sass-lint:disable no-mergeable-selectors +@layer kth-style.old { + .block { + &.megaMenu { + &.navbar { + &.navbar-light { + display: none; -.block { - &.megaMenu { - &.navbar { - &.navbar-light { - display: none; - - @media (min-width: 992px) { - display: block; - padding: 0; - flex-grow: 10; - min-height: 53px; - } - - #megaMenuContent { @media (min-width: 992px) { - height: auto !important; + display: block; + padding: 0; + flex-grow: 10; + min-height: 53px; } - &.navbar-collapse { - &.collapse, - &.collapsing { - z-index: 3; - position: relative; - top: -7px; + #megaMenuContent { + @media (min-width: 992px) { + height: auto !important; + } - @media (min-width: 992px) { - top: 15px; + &.navbar-collapse { + &.collapse, + &.collapsing { + z-index: 3; + position: relative; + top: -7px; + + @media (min-width: 992px) { + top: 15px; + } } } } - } - ul { - &.menu { - &.navbar-nav { - &#megaMenu { - @media (min-width: 992px) { - padding: 0; - margin: 0; - float: left; - width: 100%; - list-style: none; - clear: both; - } + ul { + &.menu { + &.navbar-nav { + &#megaMenu { + @media (min-width: 992px) { + padding: 0; + margin: 0; + float: left; + width: 100%; + list-style: none; + clear: both; + } - li { - &.item { - &.nav-item { - &.homeItem { - .headerItem { - margin-right: 1.25rem; + li { + &.item { + &.nav-item { + &.homeItem { + .headerItem { + margin-right: 1.25rem; + + &.active { + a { + &.nav-link { + border-bottom: 0; + padding: 0 4px; + + @media (min-width: 992px) { + padding: 0 1.25rem 0 0; + } + } + } + } - &.active { a { &.nav-link { - border-bottom: 0; - padding: 0 4px; + margin-top: 8px; + margin-bottom: 8px; + padding: 0 28px 0 5px; @media (min-width: 992px) { + border-right: 1px solid $borderGrey; padding: 0 1.25rem 0 0; } } } } + } - a { - &.nav-link { - margin-top: 8px; - margin-bottom: 8px; - padding: 0 28px 0 5px; + @media (min-width: 992px) { + padding: 0; + margin: 0; + float: left; + position: relative; + } - @media (min-width: 992px) { - border-right: 1px solid $borderGrey; - padding: 0 1.25rem 0 0; + .headerItem { + padding: 0; + margin: 0 1.5rem 0 0; + color: $black; + line-height: 2; + font-weight: normal; + + &.active { + a { + &.nav-link { + @media (min-width: 992px) { + border-bottom: $halfSpacing solid $blue; + padding: 8px 3px 3px; + } } } } - } - } - @media (min-width: 992px) { - padding: 0; - margin: 0; - float: left; - position: relative; - } - - .headerItem { - padding: 0; - margin: 0 1.5rem 0 0; - color: $black; - line-height: 2; - font-weight: normal; + @media (min-width: 992px) { + text-align: center; + } - &.active { a { &.nav-link { + color: $black; + font-size: 1.25rem; + line-height: 1.375; + padding: 8px 3px; + border-color: transparent; + @media (min-width: 992px) { - border-bottom: $halfSpacing solid $blue; - padding: 8px 3px 3px; + font-size: 1.25rem; } } } } - @media (min-width: 992px) { - text-align: center; - } + .menuItemContent { + display: none !important; - a { - &.nav-link { - color: $black; - font-size: 1.25rem; - line-height: 1.375; - padding: 8px 3px; - border-color: transparent; - - @media (min-width: 992px) { - font-size: 1.25rem; - } + @media (min-width: 992px) { + padding: 0; + margin: 0; + z-index: 79; + position: absolute; + padding-top: 0; + margin: 0; + display: block !important; } - } - } - - .menuItemContent { - display: none !important; - - @media (min-width: 992px) { - padding: 0; - margin: 0; - z-index: 79; - position: absolute; - padding-top: 0; - margin: 0; - display: block !important; - } - &.active { - .megaMenuBody { - z-index: 79; - display: block; + &.active { + .megaMenuBody { + z-index: 79; + display: block; + } } - } - .megaMenuBody { - padding: 3 * $gutter 2 * $gutter; - margin: 0; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26); - overflow: hidden; - background-color: $lightGrey; - border: 0; - border-bottom: $halfSpacing solid $blue; - display: none; // Should be none, use block to show when styling - - button { - &.closeButton { - color: $lightGrey; - position: absolute; - right: $gutter; - top: $gutter; - background: $data-close-black-svg no-repeat transparent; - border: 0; - background-size: contain; - height: 15px; - width: 15px; - background-position: center; - - &:hover { - cursor: pointer; - } + .megaMenuBody { + padding: 3 * $gutter 2 * $gutter; + margin: 0; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26); + overflow: hidden; + background-color: $lightGrey; + border: 0; + border-bottom: $halfSpacing solid $blue; + display: none; // Should be none, use block to show when styling + + button { + &.closeButton { + color: $lightGrey; + position: absolute; + right: $gutter; + top: $gutter; + background: $data-close-black-svg no-repeat transparent; + border: 0; + background-size: contain; + height: 15px; + width: 15px; + background-position: center; + + &:hover { + cursor: pointer; + } - &:focus { - outline: none; + &:focus { + outline: none; + } } } } @@ -188,29 +189,29 @@ } } } -} -// * * * * * * * * * * * Mega menu column splitter style * * * * * * * * * * * - -.block { - &.megaMenu { - &.navbar { - &.navbar-light { - ul { - &.menu { - &.navbar-nav { - &#megaMenu { - .menuItemContent { - .megaMenuBody { - .megaMenuBodyInner { - .block { - &.columnSplitter { - &.row { - .col { - border-right: 1px solid $borderGrey; - - &:last-child { - border-right: 0; + // * * * * * * * * * * * Mega menu column splitter style * * * * * * * * * * * + + .block { + &.megaMenu { + &.navbar { + &.navbar-light { + ul { + &.menu { + &.navbar-nav { + &#megaMenu { + .menuItemContent { + .megaMenuBody { + .megaMenuBodyInner { + .block { + &.columnSplitter { + &.row { + .col { + border-right: 1px solid $borderGrey; + + &:last-child { + border-right: 0; + } } } } @@ -226,57 +227,57 @@ } } } -} -// * * * * * * * * * * * Mega menu list style * * * * * * * * * * * - -.block { - &.megaMenu { - &.navbar { - &.navbar-light { - ul { - &.menu { - &.navbar-nav { - &#megaMenu { - .menuItemContent { - .megaMenuBody { - .megaMenuBodyInner { - .block { - &.list { - &.links { - h2 { - font-weight: 600; - color: $black; - line-height: 1.375; - margin-top: 16px; - margin-bottom: 14px; + // * * * * * * * * * * * Mega menu list style * * * * * * * * * * * + + .block { + &.megaMenu { + &.navbar { + &.navbar-light { + ul { + &.menu { + &.navbar-nav { + &#megaMenu { + .menuItemContent { + .megaMenuBody { + .megaMenuBodyInner { + .block { + &.list { + &.links { + h2 { + font-weight: 600; + color: $black; + line-height: 1.375; + margin-top: 16px; + margin-bottom: 14px; - @media (min-width: 768px) { - font-size: 1.25rem; + @media (min-width: 768px) { + font-size: 1.25rem; + } } - } - ul { - list-style: none; - padding: 0; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - margin-top: 0; - margin-bottom: 14px; - - li { + ul { + list-style: none; + padding: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; margin-top: 0; margin-bottom: 14px; - a { + li { font-size: 1rem; font-weight: 400; line-height: 1.5; margin-top: 0; margin-bottom: 14px; + + a { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin-top: 0; + margin-bottom: 14px; + } } } } @@ -293,136 +294,136 @@ } } } -} -// * * * * * * * * * * * Mega menu teaser style * * * * * * * * * * * - -.block { - &.megaMenu { - .block { - &.columnSplitter { - &.using4Columns { - .col { - .block { - &.teaser { - &.top { - .block { - &.figure { - margin: 0; + // * * * * * * * * * * * Mega menu teaser style * * * * * * * * * * * + + .block { + &.megaMenu { + .block { + &.columnSplitter { + &.using4Columns { + .col { + .block { + &.teaser { + &.top { + .block { + &.figure { + margin: 0; - a { - img { - margin: 0; + a { + img { + margin: 0; + } } } } } - } - - .teaserBody { - padding: 20px; - - .teaserHeading { - font-weight: 600; - color: $black; - line-height: 1.375; - margin-top: 0; - margin-bottom: 14px; - @media (min-width: 768px) { - font-size: 1.25rem; - } - } - - .lead { - margin: 0; + .teaserBody { + padding: 20px; - h2, - h3 { + .teaserHeading { font-weight: 600; color: $black; line-height: 1.375; margin-top: 0; - margin-bottom: 10px; + margin-bottom: 14px; @media (min-width: 768px) { font-size: 1.25rem; } } - p { - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - margin-top: 0; - margin-bottom: 14px; - max-width: 100%; - margin: 0 0 14px; + .lead { + margin: 0; - &:last-child { - margin: 0; - } - } + h2, + h3 { + font-weight: 600; + color: $black; + line-height: 1.375; + margin-top: 0; + margin-bottom: 10px; - ul, - ol { - max-width: none; + @media (min-width: 768px) { + font-size: 1.25rem; + } + } - li { + p { font-size: 1rem; font-weight: 400; line-height: 1.5; margin-top: 0; margin-bottom: 14px; + max-width: 100%; + margin: 0 0 14px; + + &:last-child { + margin: 0; + } } - } - .block:last-child { - margin-bottom: 0; - } - } + ul, + ol { + max-width: none; - ul { - &.teaserLinks { - list-style: none; - margin: 0; - padding: 0; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - margin-top: 0; - margin-bottom: 14px; + li { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin-top: 0; + margin-bottom: 14px; + } + } + + .block:last-child { + margin-bottom: 0; + } + } - li { + ul { + &.teaserLinks { + list-style: none; + margin: 0; + padding: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; margin-top: 0; margin-bottom: 14px; + + li { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin-top: 0; + margin-bottom: 14px; + } } } - } - ul { - &.teaserLinks { - &.hasLead { - margin-top: 14px; + ul { + &.teaserLinks { + &.hasLead { + margin-top: 14px; + } } } } - } - &.white { - .teaserBody { - padding: 0; - } - } - - &.top { &.white { .teaserBody { - &.hasFigure { - padding: 20px 0 0; + padding: 0; + } + } + + &.top { + &.white { + .teaserBody { + &.hasFigure { + padding: 20px 0 0; + } } } } diff --git a/public/sass/custom/blocks/siteName.scss b/public/sass/custom/blocks/siteName.scss index b7c8892..115abe0 100644 --- a/public/sass/custom/blocks/siteName.scss +++ b/public/sass/custom/blocks/siteName.scss @@ -1,34 +1,36 @@ -.block { - &.siteName { - font-weight: 600; - color: #000; - line-height: 1.375; - margin-top: 0; - margin-bottom: 0; - position: initial; - height: auto; - max-width: calc(100% - 136px); - position: relative; - top: -5px; +@layer kth-style.old { + .block { + &.siteName { + font-weight: 600; + color: #000; + line-height: 1.375; + margin-top: 0; + margin-bottom: 0; + position: initial; + height: auto; + max-width: calc(100% - 136px); + position: relative; + top: -5px; - a { - color: $black; - - &:hover { + a { color: $black; - cursor: pointer; - } - &:active { - color: $black; - } + &:hover { + color: $black; + cursor: pointer; + } - &:visited { - color: $black; + &:active { + color: $black; + } + + &:visited { + color: $black; + } + } + @media print { + display: none; } - } - @media print { - display: none; } } } diff --git a/public/sass/custom/slots/footer.scss b/public/sass/custom/slots/footer.scss index ab32a04..4338455 100644 --- a/public/sass/custom/slots/footer.scss +++ b/public/sass/custom/slots/footer.scss @@ -1,83 +1,85 @@ -footer { - &.container { - background-color: $grey; - max-width: 100%; - margin: 0; - padding: $gutter; - - .container { +@layer kth-style.old { + footer { + &.container { background-color: $grey; - } + max-width: 100%; + margin: 0; + padding: $gutter; - .block { - &.columnSplitter { - padding: 0; - - &.row { - .col { - flex-basis: 100%; - - & a { - &.block { - &.link { - color: $white; - line-height: 1.4375; - font-weight: 400; - font-size: 1rem; - margin-bottom: 14px; - } - } - } + .container { + background-color: $grey; + } - .block { - &.list { - &.links { - h2 { + .block { + &.columnSplitter { + padding: 0; + + &.row { + .col { + flex-basis: 100%; + + & a { + &.block { + &.link { color: $white; - font-weight: 600; - font-size: 1.25rem; - margin-top: 0; + line-height: 1.4375; + font-weight: 400; + font-size: 1rem; + margin-bottom: 14px; } + } + } - ul { - list-style: none; - padding-left: 0; - margin: 0; - line-height: 1.4375; + .block { + &.list { + &.links { + h2 { + color: $white; + font-weight: 600; + font-size: 1.25rem; + margin-top: 0; + } - li { - margin-bottom: 14px; + ul { + list-style: none; + padding-left: 0; + margin: 0; line-height: 1.4375; - a { - color: $white; - line-height: 1.4375; - font-weight: 400; - font-size: 1rem; + li { margin-bottom: 14px; + line-height: 1.4375; + + a { + color: $white; + line-height: 1.4375; + font-weight: 400; + font-size: 1rem; + margin-bottom: 14px; + } } } } } - } - &.teaser { - .teaserBody { - h2 { - color: $white; - font-weight: 600; - font-size: 1.25rem; - margin-top: 0; - } - - .lead { - color: $white; - font-weight: 400; - font-size: 1rem; + &.teaser { + .teaserBody { + h2 { + color: $white; + font-weight: 600; + font-size: 1.25rem; + margin-top: 0; + } - p { + .lead { color: $white; font-weight: 400; + font-size: 1rem; + + p { + color: $white; + font-weight: 400; + } } } } @@ -87,64 +89,64 @@ footer { } } } - } - @media (min-width: 768px) { - &.container { - max-width: calc(100% - 2 * #{$gutter}); - padding: 2 * $gutter 0; - margin: 0 $gutter; + @media (min-width: 768px) { + &.container { + max-width: calc(100% - 2 * #{$gutter}); + padding: 2 * $gutter 0; + margin: 0 $gutter; - .block { - &.columnSplitter { - padding: 0 $gutter; + .block { + &.columnSplitter { + padding: 0 $gutter; - &.row { - &.using4Columns { - .col { - flex-basis: 50%; + &.row { + &.using4Columns { + .col { + flex-basis: 50%; + } } } } } } } - } - @media (min-width: 992px) { - &.container { - .block { - &.columnSplitter { - padding: 0 2 * $gutter; + @media (min-width: 992px) { + &.container { + .block { + &.columnSplitter { + padding: 0 2 * $gutter; + } } } } - } - @media (min-width: 1200px) { - &.container { - .block { - &.columnSplitter { - &.row { - &.using4Columns { - .col { - flex-basis: 25%; + @media (min-width: 1200px) { + &.container { + .block { + &.columnSplitter { + &.row { + &.using4Columns { + .col { + flex-basis: 25%; + } } } } } } } - } - @media (min-width: 1258px) { - &.container { - max-width: $widePageWidth; - margin: auto; + @media (min-width: 1258px) { + &.container { + max-width: $widePageWidth; + margin: auto; + } } - } - @media print { - display: none; + @media print { + display: none; + } } } diff --git a/public/sass/custom/slots/header.scss b/public/sass/custom/slots/header.scss index aa32595..6ba42e6 100644 --- a/public/sass/custom/slots/header.scss +++ b/public/sass/custom/slots/header.scss @@ -1,154 +1,155 @@ +@layer kth-style.old { + header { + .container-fluid { + @media print { + padding: 0; + } -header { - .container-fluid { - @media print { - padding: 0; - } + .container { + margin: 0 auto; + max-width: $widePageWidth; + padding: $gutter 0 20px; - .container { - margin: 0 auto; - max-width: $widePageWidth; - padding: $gutter 0 20px; + @media (min-width: 992px) { + padding: 20px 2 * $gutter 10px; + } - @media (min-width: 992px) { - padding: 20px 2 * $gutter 10px; - } + @media print { + margin: 0; + } - @media print { - margin: 0; - } + .header-container { + &__top { + display: flex; + margin-top: 8px; - .header-container { - &__top { - display: flex; - margin-top: 8px; + #mobileMenuWrapper { + @media print { + display: none; + } + } + } + + &__bottom { + display: flex; - #mobileMenuWrapper { @media print { display: none; } } } - &__bottom { - display: flex; - - @media print { - display: none; - } - } - } - - .block { - &.figure { - &.mainLogo { - margin: 0; - width: auto; - margin: 0 $gutter 0 0; + .block { + &.figure { + &.mainLogo { + margin: 0; + width: auto; + margin: 0 $gutter 0 0; - @media (min-width: 992px) { - margin: 0 2 * $gutter 0 0; - } + @media (min-width: 992px) { + margin: 0 2 * $gutter 0 0; + } - img { - &.figure-img { - margin-bottom: 0; - height: 50px; - max-width: 275px; - width: auto; + img { + &.figure-img { + margin-bottom: 0; + height: 50px; + max-width: 275px; + width: auto; - @media (min-width: 576px) and (max-width: 991.98px) { - height: 64px; - } + @media (min-width: 576px) and (max-width: 991.98px) { + height: 64px; + } - @media (min-width: 992px) { - height: 75px; + @media (min-width: 992px) { + height: 75px; + } } } - } - @media print { - margin: 0 0 0 $gutter; + @media print { + margin: 0 0 0 $gutter; + } } } } - } - .block { - &.search { - width: 100%; - margin-top: $gutter; - - @media (min-width: 992px) { - padding: 0; - width: 270px; - z-index: 2; - margin: 0; - margin-left: auto; - top: -24px; - position: relative; - height: 53px; - } + .block { + &.search { + width: 100%; + margin-top: $gutter; - @media print { - display: none; - } - } - } - - .block { - &.list { - &.links { - &.secondaryMenu { - display: none; + @media (min-width: 992px) { + padding: 0; + width: 270px; + z-index: 2; margin: 0; + margin-left: auto; + top: -24px; position: relative; - top: 2px; + height: 53px; + } - @media (min-width: 992px) { - flex-grow: 1; - display: flex; - justify-content: flex-end; - } + @media print { + display: none; + } + } + } - ul { - list-style-type: none; + .block { + &.list { + &.links { + &.secondaryMenu { + display: none; + margin: 0; position: relative; - top: -7px; // To align secondary menu with top of the mainLogo + top: 2px; - li { - float: left; - margin-bottom: 0; + @media (min-width: 992px) { + flex-grow: 1; + display: flex; + justify-content: flex-end; + } - &:not(:last-child) { - padding-right: $gutter; - } + ul { + list-style-type: none; + position: relative; + top: -7px; // To align secondary menu with top of the mainLogo - &:nth-last-child(2) { - a { - border-right: 1px solid $borderGrey; + li { + float: left; + margin-bottom: 0; + + &:not(:last-child) { padding-right: $gutter; } - } - a { - color: $black; - font-size: 1rem; - } + &:nth-last-child(2) { + a { + border-right: 1px solid $borderGrey; + padding-right: $gutter; + } + } - a[hreflang] { - &:after { - content: ''; - padding-right: 16px; - padding-left: 10px; - background: $data-language-black-svg no-repeat right; - background-size: 16px; + a { + color: $black; + font-size: 1rem; + } + + a[hreflang] { + &:after { + content: ''; + padding-right: 16px; + padding-left: 10px; + background: $data-language-black-svg no-repeat right; + background-size: 16px; + } } } } - } - @media print { - display: none; + @media print { + display: none; + } } } } @@ -156,18 +157,17 @@ header { } } } -} -#gradientBorder { - height: 3px; - background-image: linear-gradient(to left, #005ea4, #5c98c4); + #gradientBorder { + height: 3px; + background-image: linear-gradient(to left, #005ea4, #5c98c4); - @media (min-width: 992px) { - height: 6px; - } + @media (min-width: 992px) { + height: 6px; + } - @media print { - display: none; + @media print { + display: none; + } } } - diff --git a/public/sass/custom/slots/mobileMenu.scss b/public/sass/custom/slots/mobileMenu.scss index 3f66af3..9c643c2 100644 --- a/public/sass/custom/slots/mobileMenu.scss +++ b/public/sass/custom/slots/mobileMenu.scss @@ -1,119 +1,120 @@ // sass-lint:disable no-mergeable-selectors +@layer kth-style.old { + #nav-icon { + z-index: 25; + position: fixed; + margin-top: calc(var(--kpm-bar-height, 2em) + 1px); + top: $gutter; + right: $gutter; + background: $data-menu-black-svg no-repeat right; + margin-right: 4px; + height: 32px; + width: 32px; + + &.open { + height: 14px; + width: 14px; + padding: 16px; + background: $data-close-black-svg no-repeat center; + background-size: 17px; + background-color: $white; + } -#nav-icon { - z-index: 25; - position: fixed; - margin-top: calc(var(--kpm-bar-height, 2em) + 1px); - top: $gutter; - right: $gutter; - background: $data-menu-black-svg no-repeat right; - margin-right: 4px; - height: 32px; - width: 32px; - - &.open { - height: 14px; - width: 14px; - padding: 16px; - background: $data-close-black-svg no-repeat center; - background-size: 17px; - background-color: $white; - } - - @media (min-width: 992px) { - display: none; + @media (min-width: 992px) { + display: none; + } } -} -#mobileMenu { - &.navbar { - &.navbar-light { - position: initial; - display: block; + #mobileMenu { + &.navbar { + &.navbar-light { + position: initial; + display: block; - @media (min-width: 992px) { - display: none; - } + @media (min-width: 992px) { + display: none; + } - #mobileMenuContent { - height: 100vh !important; - overflow-y: scroll; - - &.navbar-collapse { - &.collapse, - &.collapsing { - background-color: white; - display: block !important; // Bootstrap override - position: fixed; - margin-top: calc(var(--kpm-bar-height, 2em) + 1px); - z-index: 20; - top: 0; - right: 0; - left: 0; - bottom: 0; - padding: 0; - opacity: 0; - visibility: hidden; - transition: opacity 0.5s ease-out, visibility 0.5s; - } + #mobileMenuContent { + height: 100vh !important; + overflow-y: scroll; + + &.navbar-collapse { + &.collapse, + &.collapsing { + background-color: white; + display: block !important; // Bootstrap override + position: fixed; + margin-top: calc(var(--kpm-bar-height, 2em) + 1px); + z-index: 20; + top: 0; + right: 0; + left: 0; + bottom: 0; + padding: 0; + opacity: 0; + visibility: hidden; + transition: opacity 0.5s ease-out, visibility 0.5s; + } - &.show { - opacity: 1; - visibility: visible; + &.show { + opacity: 1; + visibility: visible; - // * * We have to compensate for the margins and breakpoints that are set for body in Social - personal menu * * * - .use-personal-menu & { - top: -4.4em; - padding-top: 4.4em; + // * * We have to compensate for the margins and breakpoints that are set for body in Social - personal menu * * * + .use-personal-menu & { + top: -4.4em; + padding-top: 4.4em; - @media (min-width: 39em) { - top: -2.2em; - padding-top: 2.2em; + @media (min-width: 39em) { + top: -2.2em; + padding-top: 2.2em; + } } } } } - } - - ul { - &.menu { - &.navbar-nav { - &#mobileMenuList { - display: block; - padding: $gutter 0 0; - height: 100%; - &.expandable { - li { - &.nav-item { - a, - span { - &.nav-link { - padding-left: 0; - padding-right: 20px; - margin-left: 3px; - } - } + ul { + &.menu { + &.navbar-nav { + &#mobileMenuList { + display: block; + padding: $gutter 0 0; + height: 100%; - &.node { - &.expanded { - background: none; + &.expandable { + li { + &.nav-item { + a, + span { + &.nav-link { + padding-left: 0; + padding-right: 20px; + margin-left: 3px; + } } - ul { - &.nav-list { - border-top: 1px solid $borderGrey; - padding: 0; - padding-left: 20px; - margin-top: 7px; - padding-top: 7px; - margin-left: 3px; - list-style: none; + &.node { + &.expanded { + background: none; + } - li { - &.nav-item { - padding: 0; - margin: 0; + ul { + &.nav-list { + border-top: 1px solid $borderGrey; + padding: 0; + padding-left: 20px; + margin-top: 7px; + padding-top: 7px; + margin-left: 3px; + list-style: none; + + li { + &.nav-item { + padding: 0; + margin: 0; + } } } } @@ -121,163 +122,163 @@ } } } - } - li { - &.parentLink { - padding: 0; - margin-left: 10px; - margin-right: 45px; - background: $data-arrow-back-blue-svg no-repeat left; - background-size: auto 12px; - background-position-y: 6px; - - a, - span { - padding-left: $gutter; - font-size: 1rem; - display: block; + li { + &.parentLink { + padding: 0; + margin-left: 10px; + margin-right: 45px; + background: $data-arrow-back-blue-svg no-repeat left; + background-size: auto 12px; + background-position-y: 6px; + + a, + span { + padding-left: $gutter; + font-size: 1rem; + display: block; + } } } - } - li { - &.nav-item { - padding: 0 10px; - margin: 0 20px 0 0; - color: $black; - line-height: 2; - font-weight: normal; - - &.mainMenuLink { + li { + &.nav-item { + padding: 0 10px; + margin: 0 20px 0 0; color: $black; - font-size: 1.125rem; - line-height: 1.375; - padding: 8px 3px; - } + line-height: 2; + font-weight: normal; - a, - span { - &.nav-link { + &.mainMenuLink { color: $black; - font-size: 1rem; - line-height: 1.5; - padding: 7px 3px; + font-size: 1.125rem; + line-height: 1.375; + padding: 8px 3px; } - } - &.selected { - > a, + a, span { &.nav-link { - font-weight: 600; + color: $black; + font-size: 1rem; + line-height: 1.5; + padding: 7px 3px; } } - } - &.mainMenuItem { &.selected { - a, + > a, span { - font-weight: 600; + &.nav-link { + font-weight: 600; + } } } - } - &.homeItem { - margin-right: 1.25rem; + &.mainMenuItem { + &.selected { + a, + span { + font-weight: 600; + } + } + } + + &.homeItem { + margin-right: 1.25rem; + + &.active { + a, + span { + &.nav-link { + border-bottom: 0; + padding: 0 4px; + } + } + } - &.active { a, span { &.nav-link { - border-bottom: 0; - padding: 0 4px; + margin-top: 8px; + margin-bottom: 8px; + padding: 0 28px 0 5px; } } } - a, - span { - &.nav-link { - margin-top: 8px; - margin-bottom: 8px; - padding: 0 28px 0 5px; - } - } - } - - &.node { - background: $data-arrow-next-black-svg no-repeat right; - background-size: 14px 14px; - background-position: 100% 14px; - &.expandable { - background: $data-arrow-expand-black-svg no-repeat right; - background-size: 9px 14px; + &.node { + background: $data-arrow-next-black-svg no-repeat right; + background-size: 14px 14px; background-position: 100% 14px; + &.expandable { + background: $data-arrow-expand-black-svg no-repeat right; + background-size: 9px 14px; + background-position: 100% 14px; + } } } } - } - li { - .ancestor { - display: block; - padding: 15px 3px 7px; - font-size: 1.25rem; - font-weight: 600; - line-height: 1.5; + li { + .ancestor { + display: block; + padding: 15px 3px 7px; + font-size: 1.25rem; + font-weight: 600; + line-height: 1.5; + } } - } - - .secondaryMenuWrap { - height: 100%; - .secondaryMenuContainer { - background-color: $grey; + .secondaryMenuWrap { height: 100%; - margin-top: $gutter; - padding-top: 10px; - padding-bottom: 20px; - list-style: none; - padding-left: 0; - li { - &.nav-item { - &.secondaryItem { - padding-top: 6px; + .secondaryMenuContainer { + background-color: $grey; + height: 100%; + margin-top: $gutter; + padding-top: 10px; + padding-bottom: 20px; + list-style: none; + padding-left: 0; + + li { + &.nav-item { + &.secondaryItem { + padding-top: 6px; + + a, + span { + font-size: 1rem; + padding: 0; + margin: 0 2.5rem 0 0; + color: $white; + line-height: 2; + font-weight: normal; - a, - span { - font-size: 1rem; - padding: 0; - margin: 0 2.5rem 0 0; - color: $white; - line-height: 2; - font-weight: normal; - - &.secondaryMenu { - padding: 8px 4px; - margin: 0; + &.secondaryMenu { + padding: 8px 4px; + margin: 0; + } } - } - a[hreflang='en-UK'], - a[hreflang='en-GB'], - a[hreflang='sv-SE'] { - &.secondaryMenu { - color: $white; - padding-right: 22px; - padding-top: 6px; - &:after { - content: ''; - padding-right: 16px; - padding-left: 10px; - background: $data-language-white-svg no-repeat right; - background-size: 16px; - } - &:first-child { - border-top: 0; + a[hreflang='en-UK'], + a[hreflang='en-GB'], + a[hreflang='sv-SE'] { + &.secondaryMenu { + color: $white; + padding-right: 22px; + padding-top: 6px; + &:after { + content: ''; + padding-right: 16px; + padding-left: 10px; + background: $data-language-white-svg no-repeat right; + background-size: 16px; + } + &:first-child { + border-top: 0; + } } } }