.menubar {
// Positioning & size @include narrow-layout { height: auto; } @include medium-layout { height: $menubar-height-medium; } @include widest-layout { height: $menubar-height-widest; } // Never display input elements input { display: none; } @include narrow-layout { // Only displayed when the menu symbol is checked display: none; // Display the menu items vertically. flex-direction: column; // Appearances background: $menubar-background-narrow; // Make sure the separator is empty .item-separator:after { content: none; } // Show it as a line across the whle screen .item-separator { width: 100%; height: $menubar-item-separator-line-width-narrow; background-color: $menubar-item-separator-line-color-narrow; } .item, .item-narrow-only { // Layout display: flex; flex-direction: column; // Format the link (area) a { // Make the link area as big as possible width: 100%; height: 100%; // Remove link underlining text-decoration: none; } // Implement selection changes input:checked ~ { // Show submenu when selected .dropdown, .dropdown-narrow { display: flex; } // When the submenu is open, show the appropriate symbol .title .symbol .code:after { content: $menubar-item-title-symbol-code-open-narrow; } } .title { // Layout display: flex; // Default = row layout // Set the height height: $menubar-item-height-narrow; // Use the item color for all elements background: $menubar-item-background-narrow; &:hover { background: $menubar-item-background-hover-narrow; } // Create the hover effect &:hover { background: $menubar-item-background-hover-narrow; } .symbol { // Layout: Center the disclosure symbol display: flex; justify-content: center; align-items: center; // The width of the tap area with the disclosure symbol in it width: $menubar-item-disclosure-symbol-width-narrow; // Load the disclosure symbol for the closed state .code:after { content: $menubar-item-title-symbol-code-closed-narrow; } // Show a clickable symbol over the disclosure symbol .code { cursor: pointer; } } .text { // Layout: Center vertically and justify-left display: flex; justify-content: start; align-items: center; // Takes up remainder of .title width .text { width: 100%; } // Use the item color for all elements p { color: $menubar-item-color-narrow; } // Hover effect &:hover { p { color: $menubar-item-color-hover-narrow; } } } } .dropdown, .dropdown-narrow { // Disable submenu by default display: none; // Subitems are stacked vertically flex-direction: column; .subitem-separator { display: block; width: 100%; height: $menubar-subitem-separator-line-width-narrow; background-color: $menubar-subitem-separator-line-color-narrow; } .subitem { // If the checkbox is checked input:checked ~ { // Show submenu .sub-dropdown, .sub-dropdown-narrow { display: flex; } // When the submenu is open, show the appropriate symbol .title .symbol .code:after { content: $menubar-subitem-title-symbol-code-open-narrow; } } .title { // Layout (row oriented) display: flex; // Appearance background: $menubar-subitem-background-narrow; &:hover { background: $menubar-subitem-background-hover-narrow; } // Height height: $menubar-subitem-height-narrow; // The disclosure symbol .symbol { width: $menubar-item-disclosure-symbol-width-narrow; } .text a { display: flex; justify-content: start; align-items: center; } p { padding-left: $menubar-subitem-indent-narrow; } } .sub-dropdown, .sub-dropdown-narrow { // Disable by default display: none; // Subitems are stacked vertically flex-direction: column; .subsubitem-separator { display: block; width: 100%; height: $menubar-subsubitem-separator-line-width-narrow; background-color: $menubar-subsubitem-separator-line-color-narrow; } .subsubitem .title { // Layout (row oriented) display: flex; // Appearance background: $menubar-subsubitem-background-narrow; &:hover { background: $menubar-subsubitem-background-hover-narrow; } // Height height: $menubar-subsubitem-height-narrow; .text a { display: flex; justify-content: start; align-items: center; } p { padding-left: $menubar-subsubitem-indent-narrow; } } } } } } .isActiveSelection { background: $menubar-item-background-selected-narrow; .title .text p { color: $menubar-item-color-selected-narrow } } } @include medium-and-widest-layout { // Check if it must be displayed @include medium-layout { @if $menubar-enabled-medium { display: flex; } @else { display: none; } } @include widest-layout { @if $menubar-enabled-widest { display: flex; } @else { display: none; } } // Appearances @include medium-layout { background: $menubar-background-medium; border: $menubar-border-medium; box-shadow: $menubar-box-shadow-medium; } @include widest-layout { background: $menubar-background-widest; border: $menubar-border-widest; box-shadow: $menubar-box-shadow-widest; } // Positioning of items and item-separators. flex-direction: row; @include medium-layout { justify-content: $menubar-justify-content-medium; align-items: $menubar-align-items-medium; } @include widest-layout { justify-content: $menubar-justify-content-widest; align-items: $menubar-align-items-widest; } .menubar-icon { @include medium-layout { width: $menubar-icon-width-medium; height: $menubar-icon-height-medium; padding: $menubar-icon-padding-medium; } @include widest-layout { width: $menubar-icon-width-widest; height: $menubar-icon-height-widest; padding: $menubar-icon-padding-widest; } } // Content (icon image) // Note: Firefox needs the 'after' attribute to display the icon. Other browsers seem fine without it. // Issue no 19. .menubar-icon:after { @include medium-layout { content: $menubar-icon-url-medium; } @include widest-layout { content: $menubar-icon-url-widest; } } .item-separator { @include medium-layout { // Appearance color: $menubar-item-separator-symbol-color-medium; background: $menubar-item-separator-symbol-background-medium; // Set padding padding: $menubar-item-separator-symbol-padding-medium; // Set the separator symbol p:after { content: $menubar-item-separator-symbol-medium; } // The font for the separator p { font: $menubar-item-separator-symbol-font-medium; } } @include widest-layout { // Appearance color: $menubar-item-separator-symbol-color-widest; background: $menubar-item-separator-symbol-background-widest; // Set padding padding: $menubar-item-separator-symbol-padding-widest; // Set the separator symbol p:after { content: $menubar-item-separator-symbol-widest; } // The font for the separator p { font: $menubar-item-separator-symbol-font-widest; } } } // Make all p's as small as possible p { margin: 0; padding: 0; } .item-narrow-only { display: none; } .item { // Vertical layout display: flex; flex-direction: column; // Make this the baseline reverence for the dropdown box position: relative; // Appearances p { // Prevent wrapping of the (sub) menu items white-space: nowrap; // Font color @include medium-layout { color: $menubar-item-color-medium; } @include widest-layout { color: $menubar-item-color-widest; } // Font @include medium-layout { font: $menubar-item-font-medium; } @include widest-layout { font: $menubar-item-font-widest; } } // Set background @include medium-layout { background: $menubar-item-background-medium; } @include widest-layout { background: $menubar-item-background-widest; } // Hover effect &:hover { // Display the submenu if the user hovers the mouse over it .dropdown { display: block; } p { // Change font color @include medium-layout { color: $menubar-item-color-hover-medium; } @include widest-layout { color: $menubar-item-color-hover-widest; } } // Change item background @include medium-layout { background: $menubar-item-background-hover-medium; } @include widest-layout { background: $menubar-item-background-hover-widest; } } a { // Make the entire hightlight block clickable display: block; // Remove the link underlining text-decoration: none; } // Sizing of the items a, .paddingAsLink { @include medium-layout { padding: $menubar-item-padding-medium; } @include widest-layout { padding: $menubar-item-padding-widest; } } .title { @include medium-layout { height: $menubar-item-height-medium; } @include widest-layout { height: $menubar-item-height-widest; } } .dropdown, .dropdown-narrow { // Visibility depends on hovering over the item display: none; // Don't show the separators .subitem-separator { display: none; } // Position the dropdown box below the item. position: absolute; top: 100%; // Make it at least as wide as the parent min-width: 100%; // Appearances @include medium-layout { margin: $menubar-dropdown-margin-medium; } @include widest-layout { margin: $menubar-dropdown-margin-widest; } @include medium-layout { padding: $menubar-dropdown-padding-medium; } @include widest-layout { padding: $menubar-dropdown-padding-widest; } @include medium-layout { background: $menubar-dropdown-background-medium; } @include widest-layout { background: $menubar-dropdown-background-widest; } @include medium-layout { border: $menubar-dropdown-border-medium; } @include widest-layout { border: $menubar-dropdown-border-widest; } @include medium-layout { box-shadow: $menubar-dropdown-box-shadow-medium; } @include widest-layout { box-shadow: $menubar-dropdown-box-shadow-widest; } .subitem { // To anchor the sub-dropdown position: relative; // Appearances p { @include medium-layout { font: $menubar-subitem-font-medium; } @include widest-layout { font: $menubar-subitem-font-widest; } @include medium-layout { color: $menubar-subitem-color-medium; } @include widest-layout { color: $menubar-subitem-color-widest; } } @include medium-layout { background: $menubar-subitem-background-medium; } @include widest-layout { background: $menubar-subitem-background-widest; } // Hover effect &:hover { // Show the sub-dropdown only on hover .sub-dropdown { display: flex; } p { @include medium-layout { color: $menubar-subitem-color-hover-medium; } @include widest-layout { color: $menubar-subitem-color-hover-widest; } } @include medium-layout { background: $menubar-subitem-background-hover-medium; } @include widest-layout { background: $menubar-subitem-background-hover-widest; } } // Sizing of the subitems a, .paddingAsLink { @include medium-layout { padding: $menubar-subitem-padding-medium; } @include widest-layout { padding: $menubar-subitem-padding-widest; } } .sub-dropdown { // Do not display (until hover over the subitem) display: none; // Position it relative to the subitem position: absolute; // Position it adjacent to the subitem top: 0; left: 100%; // Make it at least as wide as the parent min-width: 100%; // Stack the sub-sub item vertically flex-direction: column; // Formatting the appearance @include medium-layout { background: $menubar-sub-dropdown-background-medium; } @include widest-layout { background: $menubar-sub-dropdown-background-widest; } @include medium-layout { border: $menubar-sub-dropdown-border-medium; } @include widest-layout { border: $menubar-sub-dropdown-border-widest; } @include medium-layout { box-shadow: $menubar-sub-dropdown-box-shadow-medium; } @include widest-layout { box-shadow: $menubar-sub-dropdown-box-shadow-widest; } .subsubitem { // Appearance p { @include medium-layout { font: $menubar-subsubitem-font-medium; } @include widest-layout { font: $menubar-subsubitem-font-widest; } @include medium-layout { color: $menubar-subsubitem-color-medium; } @include widest-layout { color: $menubar-subsubitem-color-widest; } } @include medium-layout { background: $menubar-subsubitem-background-medium; } @include widest-layout { background: $menubar-subsubitem-background-widest; } // Hover effect &:hover { p { @include medium-layout { color: $menubar-subsubitem-color-hover-medium; } @include widest-layout { color: $menubar-subsubitem-color-hover-widest; } } @include medium-layout { background: $menubar-subsubitem-background-hover-medium; } @include widest-layout { background: $menubar-subsubitem-background-hover-widest; } } // Sizing of the subitems a, .paddingAsLink { @include medium-layout { padding: $menubar-subsubitem-padding-medium; } @include widest-layout { padding: $menubar-subsubitem-padding-widest; } } } // Show selection for pages that match a menu entry // Note that this setting overrides the setting in .subsubitem and hence be placed after it. .isActiveSelection { @include medium-layout { background: $menubar-subsubitem-background-selected-medium; } @include widest-layout { background: $menubar-subsubitem-background-selected-widest; } p { @include medium-layout { color: $menubar-subsubitem-color-selected-medium; } @include widest-layout { color: $menubar-subsubitem-color-selected-widest; } } } } } // Show selection for pages that match a menu entry // Note that this setting overrides the setting in .subitem and hence be placed after it. .isActiveSelection { @include medium-layout { background: $menubar-subitem-background-selected-medium; } @include widest-layout { background: $menubar-subitem-background-selected-widest; } p { @include medium-layout { color: $menubar-subitem-color-selected-medium; } @include widest-layout { color: $menubar-subitem-color-selected-widest; } } } } } // Show selection for pages that match a menu entry // Note that this setting overrides the setting in .item and hence be placed after it. .isActiveSelection { @include medium-layout { background: $menubar-item-background-selected-medium; } @include widest-layout { background: $menubar-item-background-selected-widest; } p { @include medium-layout { color: $menubar-item-color-selected-medium; } @include widest-layout { color: $menubar-item-color-selected-widest; } } } }
}