/** * Licensed Materials - Property of IBM * * IBM Cognos Products: BI Glass * * (C) Copyright IBM Corp. 2015, 2021 * * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ @import '@carbon/themes/scss/themes'; @import '@carbon/colors/scss/colors'; .navbar { border-radius: 0px; margin-bottom: 0px; font-family: $font-family; z-index: 3001; } /* Remove the border around .navbar, but leave it there in highcontrast mode */ body:not(.highcontrast) .navbar { border: none; } .navbar.toolpane.toolpaneLeft.collapsed { border-right: 0px!important; } // Allow carbon tooltips to show... .glass .paneContent .navbar.toolpane { overflow-x: visible; overflow-y: visible; flex-wrap: nowrap; } .navbar { button { border: none; min-height: 43px; font-size: 0; min-width: 0; width: 48px; color:transparent; background-color: transparent; white-space: nowrap; overflow-wrap: break-word; word-break: normal; text-align: left; transition-property: width, min-width, font-size; &:focus { opacity: $opacity-max; outline: none; } &:hover { opacity: $opacity-max; outline: none; } img, span { height: 24px; margin-right: 10px; display: inline-block; [dir="rtl"] & { margin-right: 0px; margin-left: 10px; } } svg { height: 20px; width: 20px; } } button:active, button.menu.currentlySelected, button.currentlySelected.slideoutOpen { padding-left: 13px; opacity: $opacity-max; outline: none; [dir="rtl"] & { padding-left: 0px; padding-right: 13px; } } .pluginContainer { width: 48px; } .webfont:before { margin: 5px 0px 0px 0px; position: absolute; font-family: $font-family; font-size: $heading-size-s; } } .appbar img { height: 24px; margin-right: 10px; display: inline-block; [dir="rtl"] & { margin-right: 0px; margin-left: 10px; } } .appbar button img { margin: $space-xs 12px; } .navbar .dropdown-menu.webfont:before { font-family: $font-family; margin-left: 0px; [dir="rtl"] & { margin-left: auto; margin-right: 0px; } } .accessibilityMode, .highcontrast { .navbar button:focus, .navbar button:hover { outline: 1px dotted $focus; } } .toolpane.appbar button.pushed { outline: none; } .toolpane.appbar { min-height: 48px; } // Carbon
header.toolpane.appbar { position: static; z-index: auto; } @include carbon--theme($carbon--theme--g100) { .ui-shell-g100 { .toolpane.appbar { border-bottom: 1px solid $ui-03; } } } @include carbon--theme($carbon--theme--g10) { .ui-shell-g10 { .toolpane.appbar { border-bottom: 1px solid $ui-03; } } } // Shows a border under the appbar in FF high-contrast .toolpane.appbar:after { content: " "; position: absolute; left: 0; right: 0; top: 48px; border-top: 1px solid transparent; } .toolpane.appbar .webfont:before { cursor: pointer; font-size: $heading-size-s; margin-left: 12px; margin-top: 4px; font-family: $font-family; [dir="rtl"] & { margin-left: 0px; margin-right: 12px; } } .toolpane.appbar .webfont:hover:before { opacity: $opacity-max; outline: none; } .toolpane.appbar .smallLabel { font-family: $font-family; font-size: $body-size-s; line-height: 50px; } .toolpane.appbar .cognosLogo .svgIcon, .toolpane.appbar .cognosLogo img { margin: 8px 12px 12px 12px; } .toolpane.appbar button.cognosLabel{ font-family: $font-family; font-size: $body-size-s; padding-top: 4px; height:inherit; padding-right: 13px; [dir="rtl"] & { padding-right: 0px; padding-left: 13px; } } .toolpane.appbar button.cognosLabel.currentlySelected, .toolpane.appbar button.cognosLabel:active { outline: none; } .toolpane.appbar button.cognosIcon.currentlySelected, .toolpane.appbar button.cognosIcon:active { outline: none; } .disabled { pointer-events: none; } .disabled .displayToolTip { pointer-events: auto; } .toolpane.disabled, .toolpane div.disabled { button, .svgIcon { opacity: $disabled-opacity; } } .st00{ fill: $white; } .st11{ fill:$secondary1; } /** * Positioned appbar styling */ /*Bottom appbar styling*/ .appbar.toolpane.toolpaneBottom button:focus, .appbar.toolpane.toolpaneBottom button:hover, .appbar.toolpane.toolpaneBottom button:active, .appbar.toolpane.toolpaneBottom button.menu.currentlySelected, .appbar.toolpane.toolpaneBottom button.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneBottom button.pushed, .appbar.toolpane.toolpaneBottom .webfont:hover:before { border-top: 5px solid $focus; border-bottom: none; padding-top: 0px; padding-bottom: 5px; } /*Right appbar styling*/ .appbar.toolpane.toolpaneRight { padding-top: $space-xs !important; padding-bottom: 20px !important; width: auto; } .appbar.toolpane.toolpaneRight button { height: 43px; padding: 2px 5px 5px 5px; margin: 0px; } .appbar.toolpane.toolpaneRight button.cognosLabel { padding-right: $space-s; [dir="rtl"] & { padding-right: 0px; padding-left: $space-s; } } .appbar.toolpane.toolpaneRight button.cognosLabel:focus, .appbar.toolpane.toolpaneRight button.cognosLabel:hover, .appbar.toolpane.toolpaneRight button.cognosLabel:active, .appbar.toolpane.toolpaneRight button.cognosLabel.menu.currentlySelected, .appbar.toolpane.toolpaneRight button.cognosLabel.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneRight button.cognosLabel.pushed { padding-top: 5px; padding-bottom: 5px; padding-right: $space-s; [dir="rtl"] & { padding-right: 0px; padding-left: $space-s; } } .appbar.toolpane.toolpaneRight button.menu.defaultButton { margin: 0px; padding-right: 5px; [dir="rtl"] & { padding-right: 0px; padding-left: 5px; } } .appbar.toolpane.toolpaneRight button.menu.defaultButton .svgIcon { margin: $space-xs 12px; } .appbar.toolpane.toolpaneRight button.menu.comboBox { margin: 0px; padding-left: 5px; padding-right: 5px; } .appbar.toolpane.toolpaneRight button.menu.comboBox:focus, .appbar.toolpane.toolpaneRight button.menu.comboBox:hover, .appbar.toolpane.toolpaneRight button.menu.comboBox:active, .appbar.toolpane.toolpaneRight button.menu.comboBox.menu.currentlySelected, .appbar.toolpane.toolpaneRight button.menu.comboBox.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneRight button.menu.comboBox.pushed { padding-left: 0px; padding-right: 5px; [dir="rtl"] & { padding-right: 0px; padding-left: 5px; } } .appbar.toolpane.toolpaneRight button.switcher { min-width: 0; padding-right: 5px; margin: 0px; width: 100%; text-align: center; [dir="rtl"] & { padding-right: 0px; padding-left: 5px; } } .appbar.toolpane.toolpaneRight button.switcher:focus, .appbar.toolpane.toolpaneRight button.switcher:hover, .appbar.toolpane.toolpaneRight button.switcher:active, .appbar.toolpane.toolpaneRight button.switcher.menu.currentlySelected, .appbar.toolpane.toolpaneRight button.switcher.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneRight button.switcher.pushed { padding-left: 11px; padding-bottom: 5px; padding-top: 2px; [dir="rtl"] & { padding-left: 0px; padding-right: 11px; } } .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage { width: 100%; } .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage .svgIcon { margin: $space-xs 12px; } .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage:focus, .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage:hover, .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage:active, .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage.menu.currentlySelected, .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneRight .trailing .menu.dropDownImage.pushed { padding-right: $space-s; [dir="rtl"] & { padding-right: 0px; padding-left: $space-s; } } /*Left appbar styling*/ .appbar.toolpane.toolpaneLeft { padding-top: $space-xs !important; padding-bottom: 20px !important; width: auto; } .appbar.toolpane.toolpaneLeft button { height: 43px; padding: 2px 5px 5px 5px; margin: 0px; } .appbar.toolpane.toolpaneLeft button.cognosLabel { padding-right: $space-s; [dir="rtl"] & { padding-right: 0px; padding-left: $space-s; } } .appbar.toolpane.toolpaneLeft button.cognosLabel:focus, .appbar.toolpane.toolpaneLeft button.cognosLabel:hover, .appbar.toolpane.toolpaneLeft button.cognosLabel:active, .appbar.toolpane.toolpaneLeft button.cognosLabel.menu.currentlySelected, .appbar.toolpane.toolpaneLeft button.cognosLabel.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneLeft button.cognosLabel.pushed { padding-top: 5px; padding-bottom: 5px; padding-right: 11px; [dir="rtl"] & { padding-right: 0px; padding-left: 11px; } } .appbar.toolpane.toolpaneLeft .pluginContainer { -webkit-flex-flow: row-reverse; flex-flow: row-reverse; } .appbar.toolpane.toolpaneLeft .leading .pluginContainer .inlineFlex { -webkit-flex-flow: row-reverse; flex-flow: row-reverse; } .appbar.toolpane.toolpaneLeft button.menu.defaultButton { margin: 0px; padding-left: 5px; [dir="rtl"] & { padding-left: 0px; padding-right: 5px; } } .appbar.toolpane.toolpaneLeft button.menu.defaultButton .svgIcon { margin: $space-xs 12px; } .appbar.toolpane.toolpaneLeft button.menu.comboBox { margin: 0px; padding-left: 5px; padding-right: 5px; } .appbar.toolpane.toolpaneLeft button.menu.comboBox:focus, .appbar.toolpane.toolpaneLeft button.menu.comboBox:hover, .appbar.toolpane.toolpaneLeft button.menu.comboBox:active, .appbar.toolpane.toolpaneLeft button.menu.comboBox.menu.currentlySelected, .appbar.toolpane.toolpaneLeft button.menu.comboBox.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneLeft button.menu.comboBox.pushed { padding-left: 5px; padding-right: 0px; } .appbar.toolpane.toolpaneLeft button.switcher { min-width: 0; padding-right: 5px; margin: 0px; width: 100%; text-align: center; [dir="rtl"] & { padding-right: 0px; padding-left: 5px; } } .appbar.toolpane.toolpaneLeft button.switcher:focus, .appbar.toolpane.toolpaneLeft button.switcher:hover, .appbar.toolpane.toolpaneLeft button.switcher:active, .appbar.toolpane.toolpaneLeft button.switcher.menu.currentlySelected, .appbar.toolpane.toolpaneLeft button.switcher.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneLeft button.switcher.pushed { padding: 2px 0px 5px $space-s; [dir="rtl"] & { padding: 2px $space-s 5px 0px; } } .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage { width: 100%; } .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage .svgIcon { margin: $space-xs 12px; } .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage:focus, .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage:hover, .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage:active, .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage.menu.currentlySelected, .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage.currentlySelected.slideoutOpen, .appbar.toolpane.toolpaneLeft .trailing .menu.dropDownImage.pushed { padding-right: 11px; [dir="rtl"] & { padding-right: 0px; padding-left: 11px; } } /** * Positioned navbar styling */ /*Top navbar styling*/ .navbar.toolpane.toolpaneTop { padding-top: 0 !important; padding-bottom: 0 !important; max-width: none; border: none; } .navbar.toolpane.toolpaneTop button { text-align: center; min-width: 0; } .navbar.toolpane.toolpaneTop button:focus, .navbar.toolpane.toolpaneTop button:hover, .navbar.toolpane.toolpaneTop button:active, .navbar.toolpane.toolpaneTop button.menu.currentlySelected, .navbar.toolpane.toolpaneTop button.currentlySelected.slideoutOpen, .navbar.toolpane.toolpaneTop button.pushed { border-bottom: 6px solid $gray1; border-left: none; } /*Bottom navbar styling*/ .navbar.toolpane.toolpaneBottom { padding-top: 0 !important; padding-bottom: 0 !important; max-width: none; border: none; } .navbar.toolpane.toolpaneBottom button { text-align: center; min-width: 0; } .navbar.toolpane.toolpaneBottom button:focus, .navbar.toolpane.toolpaneBottom button:hover, .navbar.toolpane.toolpaneBottom button:active, .navbar.toolpane.toolpaneBottom button.menu.currentlySelected, .navbar.toolpane.toolpaneBottom button.currentlySelected.slideoutOpen, .navbar.toolpane.toolpaneBottom button.pushed { border-top: 6px solid $gray1; border-left: none; padding: 4px 20px 10px 50px; } /*Right navbar styling*/ .navbar.toolpane.toolpaneRight { border: none; } .navbar.toolpane.toolpaneTop button:focus, .navbar.toolpane.toolpaneTop button:hover, .navbar.toolpane.toolpaneTop button:active, .navbar.toolpane.toolpaneTop button.menu.currentlySelected, .navbar.toolpane.toolpaneTop button.currentlySelected.slideoutOpen, .navbar.toolpane.toolpaneTop button.pushed { border-right: 6px solid $gray1; border-left: none; padding: $space-xs 22px 2px 42px; [dir="rtl"] & { border-left: 6px solid $gray1; border-right: none; padding: $space-xs 42px 2px 22px; } } .navbar.toolpane.toolpaneBottom button:focus, .navbar.toolpane.toolpaneBottom button:hover, .navbar.toolpane.toolpaneBottom button:active, .navbar.toolpane.toolpaneBottom button.menu.currentlySelected, .navbar.toolpane.toolpaneBottom button.currentlySelected.slideoutOpen, .navbar.toolpane.toolpaneBottom button.pushed { padding: 2px 22px $space-xs 42px; [dir="rtl"] & { padding: 2px 42px $space-xs 22px; } } .navbar.toolpane.toolpaneRight button:focus, .navbar.toolpane.toolpaneRight button:hover, .navbar.toolpane.toolpaneRight button:active, .navbar.toolpane.toolpaneRight button.menu.currentlySelected, .navbar.toolpane.toolpaneRight button.currentlySelected.slideoutOpen, .navbar.toolpane.toolpaneRight button.pushed { padding: $space-xs 14px $space-xs 42px; [dir="rtl"] & { padding: $space-xs 42px $space-xs 14px; } }