banner-menu-symbol {
// Don't display the checkbox display: none; // When selected, display the menu bar and bottom separator &:checked ~ { @include narrow-layout { .banner-area .menubar { @if $menubar-enabled-narrow { display: flex; } @else { display: none; } } .banner-area .menubar-bottom-separator, .banner-area .add-to-banner-area-height { @if $menubar-bottom-separator-enabled-narrow { display: block; } @else { display: none; } } } @include medium-layout { @if $banner-menu-symbol-enabled-medium { .banner-area .menubar { display: none; } .banner-area .menubar-bottom-separator, .banner-area .add-to-banner-area-height { display: none } } @else { .banner-area .menubar { @if $menubar-enabled-medium { display: flex; } @else { display: none; } } .banner-area .menubar-bottom-separator, .banner-area .add-to-banner-area-height { @if $menubar-bottom-separator-enabled-medium { display: block; } @else { display: none; } } } } @include widest-layout { @if $banner-menu-symbol-enabled-widest { .banner-area .menubar { display: none; } .banner-area .menubar-bottom-separator, .banner-area .add-to-banner-area-height { display: none } } @else { .banner-area .menubar { @if $menubar-enabled-widest { display: flex; } @else { display: none; } } .banner-area .menubar-bottom-separator, .banner-area .add-to-banner-area-height { @if $menubar-bottom-separator-enabled-widest { display: block; } @else { display: none; } } } } }
}
.banner-area {
// Layout width: 100%; .banner { // Sizing: The container occupies the entire width and height as specified width: 100%; @include narrow-layout { @if $banner-enabled-narrow { height: $banner-height-narrow; } } @include medium-layout { @if $banner-enabled-medium { height: $banner-height-medium; } } @include widest-layout { @if $banner-enabled-widest { height: $banner-height-widest; } } // background @include narrow-layout { background: $banner-background-narrow; } @include medium-layout { background: $banner-background-medium; } @include widest-layout { background: $banner-background-widest; } z-index: 1; } .icon-container { // Sizing: This is an overlay container over the entire banner @extend .overlay; @include narrow-layout { height: $banner-height-narrow; } @include medium-layout { height: $banner-height-medium; } @include widest-layout { height: $banner-height-widest; } // Display or not @include narrow-layout { @if ($banner-enabled-narrow and $banner-icon-enabled-narrow) { display: flex; } @else { display: none; } } @include medium-layout { @if ($banner-enabled-medium and $banner-icon-enabled-medium) { display: flex; } @else { display: none; } } @include widest-layout { @if ($banner-enabled-widest and $banner-icon-enabled-widest) { display: flex; } @else { display: none; } } // Position the icon @include narrow-layout { justify-content: $banner-icon-justify-content-narrow; align-items: $banner-icon-align-items-narrow; } @include medium-layout { justify-content: $banner-icon-justify-content-medium; align-items: $banner-icon-align-items-medium; } @include widest-layout { justify-content: $banner-icon-justify-content-widest; align-items: $banner-icon-align-items-widest; } // Ordering @include narrow-layout { z-index: $banner-icon-z-index-narrow; } @include medium-layout { z-index: $banner-icon-z-index-medium; } @include widest-layout { z-index: $banner-icon-z-index-widest; } .banner-icon { // Position tweaks @include narrow-layout { padding: $banner-icon-padding-narrow; } @include medium-layout { padding: $banner-icon-padding-medium; } @include widest-layout { padding: $banner-icon-padding-widest; } // Sizing @include narrow-layout { width: $banner-icon-width-narrow; } @include medium-layout { width: $banner-icon-width-medium; } @include widest-layout { width: $banner-icon-width-widest; } @include narrow-layout { height: $banner-icon-height-narrow; } @include medium-layout { height: $banner-icon-height-medium; } @include widest-layout { height: $banner-icon-height-widest; } // Background @include narrow-layout { background: $banner-icon-background-narrow; } @include medium-layout { background: $banner-icon-background-medium; } @include widest-layout { background: $banner-icon-background-widest; } } // Content (icon image) // Note: Firefox needs the 'after' attribute to display the icon. Other browsers seem fine without it. // Issue no 19. .banner-icon::after { @include narrow-layout { content: $banner-icon-url-narrow; } @include medium-layout { content: $banner-icon-url-medium; } @include widest-layout { content: $banner-icon-url-widest; } } } .title-area-container { // Sizing: This is an overlay container over the entire banner @extend .overlay; @include narrow-layout { height: $banner-height-narrow; } @include medium-layout { height: $banner-height-medium; } @include widest-layout { height: $banner-height-widest; } // Display or not @include narrow-layout { @if ($banner-enabled-narrow and ($banner-title-enabled-narrow or $banner-subtitle-enabled-narrow)) { display: flex; } @else { display: none; } } @include medium-layout { @if ($banner-enabled-medium and ($banner-title-enabled-medium or $banner-subtitle-enabled-medium)) { display: flex; } @else { display: none; } } @include widest-layout { @if ($banner-enabled-widest and ($banner-title-enabled-widest or $banner-subtitle-enabled-widest)) { display: flex; } @else { display: none; } } // Ordering @include narrow-layout { z-index: $banner-title-area-z-index-narrow; } @include medium-layout { z-index: $banner-title-area-z-index-medium; } @include widest-layout { z-index: $banner-title-area-z-index-widest; } // Position the title area @include narrow-layout { justify-content: $banner-title-area-justify-content-narrow; align-items: $banner-title-area-align-items-narrow; } @include medium-layout { justify-content: $banner-title-area-justify-content-medium; align-items: $banner-title-area-align-items-medium; } @include widest-layout { justify-content: $banner-title-area-justify-content-widest; align-items: $banner-title-area-align-items-widest; } .title-area { // Sizing @include narrow-layout { width: $banner-title-area-width-narrow; height: $banner-title-area-height-narrow; } @include medium-layout { width: $banner-title-area-width-medium; height: $banner-title-area-height-medium; } @include widest-layout { width: $banner-title-area-width-widest; height: $banner-title-area-height-widest; } // Positioning of title and subtitle display: flex; @include narrow-layout { flex-direction: $banner-title-subtitle-flex-direction-narrow; justify-content: $banner-title-subtitle-justify-content-narrow; align-items: $banner-title-subtitle-align-items-narrow; } @include medium-layout { flex-direction: $banner-title-subtitle-flex-direction-medium; justify-content: $banner-title-subtitle-justify-content-medium; align-items: $banner-title-subtitle-align-items-medium; } @include widest-layout { flex-direction: $banner-title-subtitle-flex-direction-widest; justify-content: $banner-title-subtitle-justify-content-widest; align-items: $banner-title-subtitle-align-items-widest; } // background @include narrow-layout { background: $banner-title-area-background-narrow; } @include medium-layout { background: $banner-title-area-background-medium; } @include widest-layout { background: $banner-title-area-background-widest; } // Title appearance @include narrow-layout { @if ($banner-title-enabled-narrow) { .title p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-title-padding-narrow; // Appearance of the title font: $banner-title-font-narrow; color: $banner-title-color-narrow; } } @else { .title { display: none; } } } @include medium-layout { @if ($banner-title-enabled-medium) { .title p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-title-padding-medium; // Appearance of the title font: $banner-title-font-medium; color: $banner-title-color-medium; } } @else { .title { display: none; } } } @include widest-layout { @if ($banner-title-enabled-widest) { .title p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-title-padding-widest; // Appearance of the title font: $banner-title-font-widest; color: $banner-title-color-widest; } } @else { .title { display: none; } } } // Subtitle appearance @include narrow-layout { @if ($banner-subtitle-enabled-narrow) { .subtitle p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-subtitle-padding-narrow; // Appearance of the title font: $banner-subtitle-font-narrow; color: $banner-subtitle-color-narrow; } } @else { .subtitle { display: none; } } } @include medium-layout { @if ($banner-subtitle-enabled-medium) { .subtitle p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-subtitle-padding-medium; // Appearance of the title font: $banner-subtitle-font-medium; color: $banner-subtitle-color-medium; } } @else { .subtitle { display: none; } } } @include widest-layout { @if ($banner-subtitle-enabled-widest) { .subtitle p { // Set the margins to zero to avoid shifts in placing. margin: 0; // Position fine tuning uses padding padding: $banner-subtitle-padding-widest; // Appearance of the title font: $banner-subtitle-font-widest; color: $banner-subtitle-color-widest; } } @else { .subtitle { display: none; } } } } } .label-container { // The container occupies the entire banner area @extend .overlay; @include narrow-layout { height: $banner-height-narrow; } @include medium-layout { height: $banner-height-medium; } @include widest-layout { height: $banner-height-widest; } // Display or not @include narrow-layout { @if ($banner-enabled-narrow and $banner-menu-symbol-enabled-narrow) { display: flex; } @else { display: none; } } @include medium-layout { @if ($banner-enabled-medium and $banner-menu-symbol-enabled-medium) { display: flex; } @else { display: none; } } @include widest-layout { @if ($banner-enabled-widest and $banner-menu-symbol-enabled-widest) { display: flex; } @else { display: none; } } // Position the label (tap area) display: flex; @include narrow-layout { justify-content: $banner-menu-symbol-justify-content-narrow; align-items: $banner-menu-symbol-align-items-narrow; } @include medium-layout { justify-content: $banner-menu-symbol-justify-content-medium; align-items: $banner-menu-symbol-align-items-medium; } @include widest-layout { justify-content: $banner-menu-symbol-justify-content-widest; align-items: $banner-menu-symbol-align-items-widest; } // Ordering @include narrow-layout { z-index: $banner-menu-symbol-z-index-narrow; } @include medium-layout { z-index: $banner-menu-symbol-z-index-medium; } @include widest-layout { z-index: $banner-menu-symbol-z-index-widest; } label { // Position the menu symbol display:flex; justify-content: center; align-items: center; // Insert the menu symbol @include narrow-layout { p:after { content: $banner-menu-symbol-code-narrow; } } @include medium-layout { p:after { content: $banner-menu-symbol-code-medium; } } @include widest-layout { p:after { content: $banner-menu-symbol-code-widest; } } // Size the tap area @include narrow-layout { width: $banner-menu-symbol-tap-area-width-narrow; } @include medium-layout { width: $banner-menu-symbol-tap-area-width-medium; } @include widest-layout { width: $banner-menu-symbol-tap-area-width-widest; } @include narrow-layout { height: $banner-menu-symbol-tap-area-height-narrow; } @include medium-layout { height: $banner-menu-symbol-tap-area-height-medium; } @include widest-layout { height: $banner-menu-symbol-tap-area-height-widest; } // The background @include narrow-layout { background: $banner-menu-symbol-tap-area-background-narrow; } @include medium-layout { background: $banner-menu-symbol-tap-area-background-medium; } @include widest-layout { background: $banner-menu-symbol-tap-area-background-widest; } // The border @include narrow-layout { border: $banner-menu-symbol-tap-area-border-narrow; } @include medium-layout { border: $banner-menu-symbol-tap-area-border-medium; } @include widest-layout { border: $banner-menu-symbol-tap-area-border-widest; } // The label is used as checkbox-label, it should show a pointer when the mouse is above it. cursor: pointer; p { // Fine tune the position of the menu symbol in the tap area @include narrow-layout { padding: $banner-menu-symbol-padding-narrow; } @include medium-layout { padding: $banner-menu-symbol-padding-medium; } @include widest-layout { padding: $banner-menu-symbol-padding-widest; } // The font @include narrow-layout { font: $banner-menu-symbol-font-narrow; } @include medium-layout { font: $banner-menu-symbol-font-medium; } @include widest-layout { font: $banner-menu-symbol-font-widest; } // The color @include narrow-layout { color: $banner-menu-symbol-color-narrow; } @include medium-layout { color: $banner-menu-symbol-color-medium; } @include widest-layout { color: $banner-menu-symbol-color-widest; } } } } .menubar-top-separator { // Use the entire width to force vertical appearance width: 100%; // Sizing @include narrow-layout { height: $menubar-top-separator-height-narrow; } @include medium-layout { height: $menubar-top-separator-height-medium; } @include widest-layout { height: $menubar-top-separator-height-widest; } // Appearance @include narrow-layout { background: $menubar-top-separator-background-narrow; } @include medium-layout { background: $menubar-top-separator-background-medium; } @include widest-layout { background: $menubar-top-separator-background-widest; } // Enable or disable display @include narrow-layout { @if $menubar-top-separator-enabled-narrow { display: block; } @else { display: none; } } @include medium-layout { @if $menubar-top-separator-enabled-medium { display: block; } @else { display: none; } } @include widest-layout { @if $menubar-top-separator-enabled-widest { display: block; } @else { display: none; } } } .menubar-bottom-separator { // Use the entire width to force vertical appearance width: 100%; // Sizing @include narrow-layout { height: $menubar-bottom-separator-height-narrow; } @include medium-layout { height: $menubar-bottom-separator-height-medium; } @include widest-layout { height: $menubar-bottom-separator-height-widest; } // Appearance @include narrow-layout { background: $menubar-bottom-separator-background-narrow; } @include medium-layout { background: $menubar-bottom-separator-background-medium; } @include widest-layout { background: $menubar-bottom-separator-background-widest; } // Enable or disable display @include narrow-layout { @if $menubar-bottom-separator-enabled-narrow { display: none; } @else { display: none; } } @include medium-layout { @if $menubar-bottom-separator-enabled-medium { display: block; } @else { display: none; } } @include widest-layout { @if $menubar-bottom-separator-enabled-widest { display: block; } @else { display: none; } } } .add-to-banner-area-height { width: 100%; @include narrow-layout { height: $add-to-banner-area-height-narrow; } @include medium-layout { height: $add-to-banner-area-height-medium; } @include widest-layout { height: $add-to-banner-area-height-widest; } }
}
// This bit is needed to fix the banner and menubar in place at the top of the screen. // .banner-area-outside-dom {
// Fix the banner to the top of the screen position: fixed; top: 0;
}
// The banner area is placed inside the DOM // .banner-area-in-dom {
position: relative;
}
// Added to the banner-area that is used as a placeholder to keep the column-panel from appearing below the // banner-area. It does not seem to be necessary though. Still,it could prevent future problems, hence // .invisible {
width: 100%; opacity: 0; z-index: -1; position: relative;
}
// For anchor links when using top-fixed banner positioning // .anchor::before {
display: block; content: " "; @include narrow-layout { margin-top: -$anchor-top-fixed-offset-narrow; } @include narrow-layout { height: $anchor-top-fixed-offset-narrow; } @include medium-layout { margin-top: -$anchor-top-fixed-offset-medium; } @include medium-layout { height: $anchor-top-fixed-offset-medium; } @include widest-layout { margin-top: -$anchor-top-fixed-offset-widest; } @include widest-layout { height: $anchor-top-fixed-offset-widest; } visibility: hidden; pointer-events: none;
}