UNPKG

pfdemo

Version:

PatternFly components demo

github.com/guillaumevincent/pfdemo

guillaumevincent/pfdemo

22 lines • 54.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{ "version": 3, "file": "pfdemo.css", "sources": [ "../../scss/pfdemo.scss", "../../scss/pf-masthead.scss", "../../masthead/scss/pf-masthead.scss", "../../node_modules/patternfly-sass/assets/stylesheets/patternfly/_variables.scss", "../../node_modules/patternfly-sass/assets/stylesheets/patternfly/_color-variables.scss", "../../scss/pf-vertical-navigation.scss", "../../vertical-navigation/scss/pf-vertical-navigation.scss", "../../scss/pf-holy-grail-layout.scss", "../../holy-grail-layout/scss/pf-holy-grail-layout.scss" ], "sourcesContent": [ "@import \"./pf-masthead\";\n@import \"./pf-vertical-navigation\";\n@import \"./pf-holy-grail-layout\";\n", "@import \"../masthead/scss/pf-masthead\";\n", "@import \"../../node_modules/patternfly-sass/assets/stylesheets/patternfly/variables\";\n\n.pf-masthead {\n background-color: $color-pf-black;\n width: 100%;\n margin: 0;\n display: flex;\n flex-direction: column;\n\n a {\n color: $color-pf-white;\n text-decoration: none;\n }\n}\n\n.pf-masthead__logo {\n height: 60px;\n line-height: 60px;\n font-size: 1.5em;\n padding: 0 1em;\n\n a {\n display: block;\n padding: 0;\n }\n\n img {\n height: calc(60px - 1em);\n display: block;\n margin-top: 0.5em;\n }\n}\n\n.pf-masthead__menu {\n height: 60px;\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n border-top: 1px solid $color-pf-black-900;\n}\n\n.pf-masthead__item {\n flex: 1 1 0;\n}\n\n.pf-masthead__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-left: 1px solid $color-pf-black-900;\n\n &:hover {\n background-color: $color-pf-black-900;\n }\n}\n\n.pf-masthead__item:first-child .pf-masthead__link {\n border-left: none;\n}\n\n.pf-masthead__icon {\n display: block;\n}\n\n.pf-masthead__link-value {\n display: block;\n}\n\n@media (min-width: 768px) {\n .pf-masthead {\n flex-direction: row;\n justify-content: space-between;\n }\n\n .pf-masthead__item {\n flex-basis: auto;\n }\n\n .pf-masthead__link {\n padding: 1em 2em;\n }\n\n .pf-masthead__menu {\n border-top: none;\n }\n\n .pf-masthead__item:first-child .pf-masthead__link {\n border-left: 1px solid $color-pf-black-900;\n }\n}\n", "$patternfly-sass-asset-helper: false !default;\n//\n// Variables\n// --------------------------------------------------\n// Bootstrap overrides and PatternFly-specific variables\n\n// PatternFly-specific\n// -------------------\n@import \"color-variables\";\n\n$bootstrap-switch-handle-default-bg-color: $color-pf-black-100 !default;\n$bootstrap-treeview-highlight-color: $color-pf-blue-300 !default;\n$btn-default-bg-img-start: $color-pf-black-100 !default;\n$btn-default-bg-img-stop: $color-pf-black-200 !default;\n$btn-xs-font-weight: 400 !default;\n$card-pf-accented-border-top-color: $color-pf-blue-300 !default;\n$card-pf-aggregate-status-title-icon-color: $color-pf-black-900 !default;\n$card-pf-bg-color: $color-pf-white !default;\n$card-pf-border-color: $color-pf-black-300 !default;\n$card-pf-border-top-color: transparent !default;\n$card-pf-container-bg-color: $color-pf-black-150 !default;\n$card-pf-footer-bg-color: $color-pf-black-100 !default;\n$card-pf-selected-border-color: $color-pf-blue-300 !default;\n$donut-font-size-big: 30px !default;\n$dropdown-divider-margin: 4px 1px !default;\n$dropdown-link-active-border-color: $color-pf-blue !default;\n$dropdown-link-hover-border-color: $color-pf-blue-100 !default;\n$dropdown-link-focus-color: $color-pf-white !default;\n$flyout-transition-pf: all 200ms cubic-bezier(.35, 0, .25, 1) !default;\n$font-family-monospace: Menlo, Monaco, Consolas, monospace !default;\n$font-path: if($patternfly-sass-asset-helper, \"patternfly\", \"../fonts/patternfly\") !default;\n$footer-pf-bg-color: $color-pf-black !default;\n$footer-pf-padding-left: 25px !default;\n$footer-pf-padding-top: 10px !default;\n$footer-pf-height: 37px !default;\n$gray-light-pf: $color-pf-black-400 !default;\n$gray-pf: $color-pf-black-700 !default;\n$icon-font-name-fa: \"FontAwesome\" !default;\n$icon-font-name-pf: \"PatternFlyIcons-webfont\" !default;\n$icon-prefix: pficon !default;\n$img-bg-login: \"bg-login.jpg\" !default;\n$img-path: if($patternfly-sass-asset-helper, \"patternfly\", \"../images/patternfly\") !default;\n$img-spinner: \"spinner.gif\" !default;\n$img-spinner-inverse: \"spinner-inverse.gif\" !default;\n$img-spinner-inverse-lg: \"spinner-inverse-lg.gif\" !default;\n$img-spinner-inverse-sm: \"spinner-inverse-sm.gif\" !default;\n$img-spinner-inverse-xs: \"spinner-inverse-xs.gif\" !default;\n$img-spinner-lg: \"spinner-lg.gif\" !default;\n$img-spinner-sm: \"spinner-sm.gif\" !default;\n$img-spinner-xs: \"spinner-xs.gif\" !default;\n$input-border-hover: $color-pf-blue-200 !default;\n$input-border-focus: $color-pf-blue-400 !default;\n$list-pf-border-color: $color-pf-black-200 !default;\n$list-pf-active-border-color: $color-pf-black-400 !default;\n$list-pf-header-background-color: $color-pf-black-200 !default;\n$list-pf-hover-background-color: $color-pf-black-100 !default;\n$list-pf-padding: 20px !default;\n$list-view-accented-border: $color-pf-blue-300 !default;\n$list-view-active-bg: $color-pf-blue-50 !default;\n$list-view-divider: $color-pf-black-300 !default;\n$list-view-hover-bg: $color-pf-black-200 !default;\n$list-group-top-border: $color-pf-black-200 !default;\n$login-bg-color: $color-pf-black !default;\n$login-container-bg-color-rgba: rgba($color-pf-white, 0.055) !default;\n$modal-about-pf-bg-img: \"bg-modal-about-pf.png\" !default;\n$modal-title-padding-horizontal: 18px !default;\n$modal-title-padding-vertical: 10px !default;\n$navbar-pf-active-color: $color-pf-black-150 !default;\n$navbar-pf-alt-active-color: $color-pf-white !default;\n$navbar-pf-alt-bg-color: $color-pf-black !default;\n$navbar-pf-alt-bg-img: \"bg-navbar-pf-alt.svg\" !default;\n$navbar-pf-bg-color: $color-pf-black !default;\n$navbar-pf-border-color: $color-pf-blue-300 !default;\n$navbar-pf-color: $color-pf-black-300 !default;\n$navbar-pf-height: 60px !default;\n$navbar-pf-icon-bar-bg-color: $color-pf-white !default;\n$navbar-pf-navbar-navbar-brand-min-width: 270px !default;\n$navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !default;\n$navbar-pf-navbar-navbar-persistent-bg-color: $color-pf-black-150 !default;\n$navbar-pf-navbar-navbar-persistent-border-color: $color-pf-black-300 !default;\n$navbar-pf-vertical-active-color: $color-pf-white !default;\n$navbar-pf-vertical-bg-color: #1d1d1d !default;\n$navbar-pf-vertical-bg-repeat: no-repeat !default;\n$navbar-pf-vertical-bg-size: auto 100% !default;\n$navbar-pf-vertical-border-color: $color-pf-blue-300 !default;\n$navbar-pf-vertical-border-style: solid !default;\n$navbar-pf-vertical-border-width: 2px !default;\n$navbar-pf-vertical-color: $color-pf-black-300 !default;\n$navbar-pf-vertical-height: 60px !default;\n$navbar-pf-vertical-icon-bar-bg-color: $color-pf-white !default;\n$navbar-pf-vertical-navbar-brand-color: $color-pf-white !default;\n$navbar-pf-vertical-navbar-brand-icon-margin: 0 15px 0 0 !default;\n$navbar-pf-vertical-navbar-brand-margin: 0 0 0 25px !default;\n$navbar-pf-vertical-navbar-brand-min-height: 35px !default;\n$navbar-pf-vertical-navbar-brand-name-breakpoint: 480px !default;\n$navbar-pf-vertical-navbar-brand-name-margin: 0 15px 0 0 !default;\n$navbar-pf-vertical-navbar-brand-padding: 11px 0 12px !default;\n$navbar-pf-vertical-navbar-toggle-margin: 13px 15px !default;\n$navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg: $color-pf-white !default;\n$navbar-pf-vertical-nav-item-iconic-padding: 21px 12px !default;\n$nav-pf-container-transition-period: 250ms !default;\n$nav-pf-menu-transition-period: 100ms !default;\n$nav-pf-vertical-active-color: $color-pf-white !default;\n$nav-pf-vertical-active-before-color: $color-pf-blue-300 !default;\n$nav-pf-vertical-active-bg-color: $color-pf-black-800 !default;\n$nav-pf-vertical-active-border-color: $color-pf-black-900 !default;\n$nav-pf-vertical-active-font-weight: 600 !default;\n$nav-pf-vertical-active-icon-color: $color-pf-blue-300 !default;\n$nav-pf-vertical-badge-color: $color-pf-white !default;\n$nav-pf-vertical-badge-bg-color: $color-pf-black-900 !default;\n$nav-pf-vertical-bg-color: $color-pf-black-900 !default;\n$nav-pf-vertical-border-color: $color-pf-black-900 !default;\n$nav-pf-vertical-collapsed-width: 75px !default;\n$nav-pf-vertical-color: $color-pf-black-300 !default;\n$nav-pf-vertical-font-weight: 400 !default;\n$nav-pf-vertical-icon-color: $color-pf-black-600 !default;\n$nav-pf-vertical-icon-width: 24px !default;\n$nav-pf-vertical-item-border-color: $color-pf-black !default;\n$nav-pf-vertical-link-height: 63px !default;\n$nav-pf-vertical-link-padding: 17px 20px 17px 25px !default;\n$nav-pf-vertical-secondary-active-color: $color-pf-white !default;\n$nav-pf-vertical-secondary-active-bg-color: $color-pf-black-700 !default;\n$nav-pf-vertical-secondary-active-icon-color: $color-pf-blue-300 !default;\n$nav-pf-vertical-secondary-badge-color: $color-pf-white !default;\n$nav-pf-vertical-secondary-badge-bg-color: $color-pf-black-900 !default;\n$nav-pf-vertical-secondary-border-color: $color-pf-blue-300 !default;\n$nav-pf-vertical-secondary-color: $color-pf-white !default;\n$nav-pf-vertical-secondary-header-margin: 18px 20px 10px 20px !default;\n$nav-pf-vertical-secondary-indicator-color: $color-pf-black-600 !default;\n$nav-pf-vertical-secondary-indicator-padding: 14px 0 !default;\n$nav-pf-vertical-secondary-item-color: $color-pf-black-300 !default;\n$nav-pf-vertical-secondary-item-padding: 0 0 5px 0 !default;\n$nav-pf-vertical-secondary-link-height: 63px !default;\n$nav-pf-vertical-secondary-link-padding: 4px 0 2px 0 !default;\n$nav-pf-vertical-secondary-list-header-margin: 30px 20px 10px 20px !default;\n$nav-pf-vertical-tertiary-active-color: $color-pf-white !default;\n$nav-pf-vertical-tertiary-active-bg-color: $color-pf-black-800 !default;\n$nav-pf-vertical-tertiary-indicator-padding: 0 !default;\n$nav-pf-vertical-tertiary-bg-color: $color-pf-black-700 !default;\n$nav-pf-vertical-tertiary-color: #fff !default;\n$nav-pf-vertical-tertiary-header-margin: 18px 20px 10px 20px !default;\n$nav-pf-vertical-tertiary-list-header-margin: 30px 20px 10px 20px !default;\n$nav-pf-vertical-tertiary-item-padding: 0 0 5px 0 !default;\n$nav-pf-vertical-tertiary-item-color: $color-pf-black-300 !default;\n$nav-pf-vertical-tertiary-link-margin: 0 20px 0 20px !default;\n$nav-pf-vertical-tertiary-link-padding: 4px 0 2px 0 !default;\n$nav-pf-vertical-tertiary-badge-color: $color-pf-white !default;\n$nav-pf-vertical-tertiary-badge-bg-color: $color-pf-black-900 !default;\n$nav-pf-vertical-width: 200px !default;\n$pagination-padding-small-vertical: 0 !default;\n$panel-default-border-color: $color-pf-black-400 !default;\n$pficon-var-add-circle-o: \"\\e61b\" !default;\n$pficon-var-arrow: \"\\e929\" !default;\n$pficon-var-blueprint: \"\\e915\" !default;\n$pficon-var-build: \"\\e902\" !default;\n$pficon-var-builder-image: \"\\e800\" !default;\n$pficon-var-bundle: \"\\e918\" !default;\n$pficon-var-chat: \"\\e928\" !default;\n$pficon-var-close: \"\\e60b\" !default;\n$pficon-var-cloud-security: \"\\e903\" !default;\n$pficon-var-cloud-tenant: \"\\e904\" !default;\n$pficon-var-cluster: \"\\e620\" !default;\n$pficon-var-container-node: \"\\e621\" !default;\n$pficon-var-cpu: \"\\e927\" !default;\n$pficon-var-degraded: \"\\e91b\" !default;\n$pficon-var-delete: \"\\e611\" !default;\n$pficon-var-domain: \"\\e919\" !default;\n$pficon-var-edit: \"\\e60a\" !default;\n$pficon-var-enterprise: \"\\e906\" !default;\n$pficon-var-equalizer: \"\\e610\" !default;\n$pficon-var-error-circle-o: \"\\e926\" !default;\n$pficon-var-export: \"\\e616\" !default;\n$pficon-var-flag: \"\\e603\" !default;\n$pficon-var-flavor: \"\\e907\" !default;\n$pficon-var-folder-close: \"\\e607\" !default;\n$pficon-var-folder-open: \"\\e606\" !default;\n$pficon-var-help: \"\\e605\" !default;\n$pficon-var-history: \"\\e617\" !default;\n$pficon-var-home: \"\\e618\" !default;\n$pficon-var-image: \"\\e61f\" !default;\n$pficon-var-import: \"\\e615\" !default;\n$pficon-var-info: \"\\e92b\" !default;\n$pficon-var-key: \"\\e924\" !default;\n$pficon-var-kubernetes: \"\\e627\" !default;\n$pficon-var-locked: \"\\e923\" !default;\n$pficon-var-memory: \"\\e908\" !default;\n$pficon-var-messages: \"\\e603\" !default;\n$pficon-var-middleware: \"\\e917\" !default;\n$pficon-var-network: \"\\e909\" !default;\n$pficon-var-ok: \"\\e602\" !default;\n$pficon-var-openshift: \"\\e626\" !default;\n$pficon-var-private: \"\\e914\" !default;\n$pficon-var-print: \"\\e612\" !default;\n$pficon-var-project: \"\\e905\" !default;\n$pficon-var-rebalance: \"\\e91c\" !default;\n$pficon-var-regions: \"\\e90a\" !default;\n$pficon-var-registry: \"\\e623\" !default;\n$pficon-var-remove: \"\\e611\" !default;\n$pficon-var-replicator: \"\\e624\" !default;\n$pficon-var-repository: \"\\e90b\" !default;\n$pficon-var-resource-pool: \"\\e90c\" !default;\n$pficon-var-resources-almost-empty: \"\\e91d\" !default;\n$pficon-var-resources-almost-full: \"\\e912\" !default;\n$pficon-var-resources-full: \"\\e92a\" !default;\n$pficon-var-restart: \"\\e617\" !default;\n$pficon-var-route: \"\\e625\" !default;\n$pficon-var-running: \"\\e614\" !default;\n$pficon-var-save: \"\\e601\" !default;\n$pficon-var-screen: \"\\e600\" !default;\n$pficon-var-search: \"\\e921\" !default;\n$pficon-var-server: \"\\e90d\" !default;\n$pficon-var-server-group: \"\\e91a\" !default;\n$pficon-var-service: \"\\e61e\" !default;\n$pficon-var-settings: \"\\e610\" !default;\n$pficon-var-spinner: \"\\e614\" !default;\n$pficon-var-spinner2: \"\\e613\" !default;\n$pficon-var-storage-domain: \"\\e90e\" !default;\n$pficon-var-tenant: \"\\e916\" !default;\n$pficon-var-thumb-tack-o: \"\\e920\" !default;\n$pficon-var-topology: \"\\e608\" !default;\n$pficon-var-trend-down: \"\\e900\" !default;\n$pficon-var-trend-up: \"\\e901\" !default;\n$pficon-var-unlocked: \"\\e922\" !default;\n$pficon-var-user: \"\\e91e\" !default;\n$pficon-var-users: \"\\e91f\" !default;\n$pficon-var-virtual-machine: \"\\e90f\" !default;\n$pficon-var-volume: \"\\e910\" !default;\n$pficon-var-warning-triangle-o: \"\\e913\" !default;\n$pficon-var-zone: \"\\e911\" !default;\n$progress-description-label-width: 85px !default;\n$sidebar-pf-bg: $color-pf-black-100 !default;\n$sidebar-pf-border-color: $color-pf-black-300 !default;\n$table-border-hover: $color-pf-blue-200 !default;\n$table-cell-padding-bottom: 3px !default;\n$table-cell-padding-top: 2px !default;\n// Reference variables declared in block above\n$bootstrap-switch-bg-color-start: $btn-default-bg-img-start !default;\n$bootstrap-switch-bg-color-stop: $btn-default-bg-img-stop !default;\n$navbar-pf-navbar-header-border-color: lighten($navbar-pf-bg-color, 15%) !default;\n$navbar-pf-navbar-nav-active-active-bg-color: lighten($navbar-pf-bg-color, 8%) !default;\n$navbar-pf-navbar-nav-active-active-open-bg-color: lighten($navbar-pf-bg-color, 11%) !default;\n$navbar-pf-navbar-nav-active-bg-color: lighten($navbar-pf-bg-color, 12.5%) !default;\n$navbar-pf-navbar-primary-bg-color-start: lighten($navbar-pf-bg-color, 10%) !default; // #474C50\n$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default; // #383F43\n$navbar-pf-navbar-utility-border-color: lighten($navbar-pf-bg-color, 15.5%) !default;\n$navbar-pf-navbar-utility-color: $navbar-pf-color !default;\n$navbar-pf-navbar-utility-hover-bg-color: lighten($navbar-pf-bg-color, 12.5%) !default;\n$nav-pf-vertical-secondary-bg-color: $nav-pf-vertical-active-bg-color !default;\n$nav-tabs-color: $gray-pf !default;\n// Reference variables declared in block above\n$navbar-pf-navbar-primary-context-bg-color-start: lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%) !default;\n$navbar-pf-navbar-primary-context-bg-color-stop: lighten($navbar-pf-navbar-primary-bg-color-stop, 11%) !default;\n$navbar-pf-navbar-primary-hover-bg-color-start: lighten($navbar-pf-navbar-primary-bg-color-start, 10%) !default;\n$navbar-pf-navbar-primary-hover-bg-color-stop: lighten($navbar-pf-navbar-primary-bg-color-stop, 10%) !default;\n$navbar-pf-navbar-primary-hover-border-color: lighten($navbar-pf-navbar-header-border-color, 20%) !default;\n$navbar-pf-navbar-primary-context-border-color: lighten($navbar-pf-navbar-header-border-color, 8%) !default;\n$navbar-pf-navbar-primary-context-border-top-color: lighten($navbar-pf-navbar-header-border-color, 7%) !default;\n$navbar-pf-navbar-utility-hover-border-color: lighten($navbar-pf-navbar-utility-border-color, 5%) !default;\n$navbar-pf-navbar-utility-open-bg-color: lighten($navbar-pf-navbar-utility-hover-bg-color, 7.5%) !default;\n$navbar-pf-navbar-utility-open-border-color: lighten($navbar-pf-navbar-utility-hover-border-color, 5%) !default;\n// Reference variables declared in block above\n$navbar-pf-navbar-primary-active-bg-color-start: lighten($navbar-pf-navbar-primary-hover-bg-color-start, 5%) !default;\n$navbar-pf-navbar-primary-active-bg-color-stop: lighten($navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%) !default;\n$navbar-pf-navbar-primary-active-border-color: lighten($navbar-pf-navbar-primary-hover-border-color, 5%) !default;\n$navbar-pf-navbar-primary-context-hover-bg-color-start: lighten($navbar-pf-navbar-primary-context-bg-color-start, 5%) !default;\n$navbar-pf-navbar-primary-context-hover-bg-color-stop: lighten($navbar-pf-navbar-primary-context-bg-color-stop, 7.5%) !default;\n$navbar-pf-navbar-primary-context-hover-border-color: lighten($navbar-pf-navbar-primary-context-border-color, 5%) !default;\n$navbar-pf-navbar-primary-context-hover-border-top-color: lighten($navbar-pf-navbar-primary-context-border-top-color, 6%) !default;\n// Reference variables declared in block above\n$navbar-pf-navbar-primary-context-active-bg-color-start: lighten($navbar-pf-navbar-primary-context-hover-bg-color-start, 5%) !default;\n$navbar-pf-navbar-primary-context-active-bg-color-stop: lighten($navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%) !default;\n$navbar-pf-navbar-primary-context-active-border-color: lighten($navbar-pf-navbar-primary-context-hover-border-color, 5%) !default;\n$navbar-pf-navbar-primary-context-active-border-top-color: lighten($navbar-pf-navbar-primary-context-hover-border-top-color, 6%) !default;\n// References variable declared in block above\n$navbar-pf-navbar-primary-context-active-border-right-color: $navbar-pf-navbar-primary-context-active-border-color !default;\n\n// Alternate navigation layout - Kept for backwards compatibility\n// --------------------------------------------------------------\n$footer-pf-alt-bg-color: $footer-pf-bg-color !default;\n$footer-pf-alt-padding-left: $footer-pf-padding-left !default;\n$footer-pf-alt-padding-top: $footer-pf-padding-top !default;\n$footer-pf-alt-height: $footer-pf-height !default;\n$img-path-alt: $img-path !default;\n$nav-pf-vertical-alt-active-color: $color-pf-blue-300 !default;\n$nav-pf-vertical-alt-bg-color: $color-pf-white !default;\n$nav-pf-vertical-alt-badge-color: $color-pf-white !default;\n$nav-pf-vertical-alt-border-color: $sidebar-pf-border-color !default;\n$nav-pf-vertical-alt-collapsed-width: 75px !default;\n$nav-pf-vertical-alt-link-height: 63px !default;\n$nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px !default;\n$nav-pf-vertical-alt-width: 250px !default;\n$navbar-pf-alt-bg-repeat: $navbar-pf-vertical-bg-repeat !default;\n$navbar-pf-alt-bg-size: $navbar-pf-vertical-bg-size !default;\n$navbar-pf-alt-border-color: $navbar-pf-vertical-border-color !default;\n$navbar-pf-alt-border-style: $navbar-pf-vertical-border-style !default;\n$navbar-pf-alt-border-width: $navbar-pf-vertical-border-width !default;\n$navbar-pf-alt-color: $navbar-pf-vertical-color !default;\n$navbar-pf-alt-height: $navbar-pf-vertical-height !default;\n$navbar-pf-alt-nav-item-iconic-padding: $navbar-pf-vertical-nav-item-iconic-padding !default;\n$navbar-pf-alt-navbar-brand-color: $navbar-pf-vertical-navbar-brand-color !default;\n$navbar-pf-alt-navbar-brand-icon-margin: $navbar-pf-vertical-navbar-brand-icon-margin !default;\n$navbar-pf-alt-navbar-brand-margin: $navbar-pf-vertical-navbar-brand-margin !default;\n$navbar-pf-alt-navbar-brand-min-height: $navbar-pf-vertical-navbar-brand-min-height !default;\n$navbar-pf-alt-navbar-brand-name-breakpoint: $navbar-pf-vertical-navbar-brand-name-breakpoint !default;\n$navbar-pf-alt-navbar-brand-name-margin: $navbar-pf-vertical-navbar-brand-name-margin !default;\n$navbar-pf-alt-navbar-brand-padding: $navbar-pf-vertical-navbar-brand-padding !default;\n$navbar-pf-alt-navbar-toggle-margin: $navbar-pf-vertical-navbar-toggle-margin !default;\n$navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg !default;\n\n// Bootstrap overrides\n// -------------------\n$alert-info-border: $color-pf-black-500 !default;\n$alert-link-font-weight: 500 !default;\n$alert-padding: 11px !default;\n$body-bg: $color-pf-white !default;\n$border-radius-base: 1px !default;\n$brand-danger: $color-pf-red !default;\n$brand-info: $color-pf-blue-500 !default;\n$brand-primary: $color-pf-blue-300 !default;\n$brand-success: $color-pf-green !default;\n$brand-warning: $color-pf-orange !default;\n$breadcrumb-bg: transparent !default;\n$breadcrumb-separator: \"\\f105\" !default;\n$btn-danger-bg: $color-pf-red-200 !default;\n$btn-danger-border: $color-pf-red-300 !default;\n$btn-default-border: $color-pf-black-400 !default;\n$btn-font-weight: 600 !default;\n$btn-primary-bg: $color-pf-blue !default;\n$btn-primary-border: $color-pf-blue-500 !default;\n$caret-width-base: 0 !default;\n$code-bg: $color-pf-blue-50 !default;\n$dropdown-border: $color-pf-black-400 !default;\n$dropdown-divider-bg: $color-pf-black-200 !default;\n$dropdown-link-active-color: $color-pf-white !default;\n$dropdown-link-hover-bg: $color-pf-blue-50 !default;\n$font-family-base: \"Open Sans\", Helvetica, Arial, sans-serif !default;\n$font-size-base: 12px !default;\n$gray-dark: lighten($color-pf-black, 20%) !default; // #333\n$gray-darker: lighten($color-pf-black, 13.5%) !default; // #222\n$gray-light: lighten($color-pf-black, 60%) !default; // #999\n$gray-lighter: lighten($color-pf-black, 93.5%) !default; // #eee\n$grid-gutter-width: 40px !default;\n$input-bg-disabled: $color-pf-black-150 !default;\n$input-border: $color-pf-black-400 !default;\n$line-height-base: 1.66666667 !default; // 20/12\n$link-color: $color-pf-blue !default;\n$list-group-border: $color-pf-black-150 !default;\n$list-group-border-radius: 0 !default;\n$list-group-hover-bg: $color-pf-blue-50 !default;\n$link-hover-color: $color-pf-blue-500 !default;\n$nav-tabs-border-color: $color-pf-black-200 !default;\n$nav-tabs-link-hover-border-color: transparent !default;\n$padding-large-horizontal: 10px !default;\n$padding-base-horizontal: 6px !default;\n$padding-base-vertical: 2px !default;\n$padding-large-vertical: 6px !default;\n$pager-border-radius: 0 !default;\n$pager-disabled-color: $color-pf-black-500 !default;\n$pagination-bg: $color-pf-black-150 !default;\n$pagination-border: $color-pf-black-400 !default;\n$pagination-hover-bg: $color-pf-black-200 !default;\n$panel-inner-border: $color-pf-black-300 !default;\n$popover-arrow-color: $color-pf-white !default;\n$popover-arrow-outer-color: $color-pf-black-400 !default;\n$popover-border-color: $color-pf-black-400 !default;\n$popover-max-width: 220px !default;\n$popover-title-bg: $color-pf-black-150 !default;\n$pre-bg: $color-pf-black-100 !default;\n$progress-bg: $color-pf-black-200 !default;\n$table-bg-accent: $color-pf-black-150 !default;\n$table-bg-hover: $color-pf-blue-50 !default;\n$table-border-color: $color-pf-black-300 !default;\n$table-cell-padding: 10px !default;\n$tooltip-arrow-width: 8px !default;\n$tooltip-bg: $color-pf-black-800 !default;\n$tooltip-max-width: 220px !default;\n// Reference variables declared in block above\n$alert-danger-bg: lighten($color-pf-red-100, 55%) !default;\n$alert-danger-border: $brand-danger !default;\n$alert-danger-text: $gray-dark !default;\n$alert-info-bg: $color-pf-black-150 !default;\n$alert-info-text: $gray-dark !default;\n$alert-success-bg: lighten($color-pf-green-100, 8%) !default;\n$alert-success-border: $brand-success !default;\n$alert-success-text: $gray-dark !default;\n$alert-warning-bg: lighten($color-pf-orange-100, 8%) !default;\n$alert-warning-border: $brand-warning !default;\n$alert-warning-text: $gray-dark !default;\n$badge-border-radius: $border-radius-base !default;\n$border-radius-large: $border-radius-base !default;\n$border-radius-small: $border-radius-base !default;\n$breadcrumb-active-color: $gray-pf !default;\n$breadcrumb-color: $gray-pf !default;\n$btn-default-bg: $gray-lighter !default;\n$btn-default-color: $gray-pf !default;\n$caret-width-large: $caret-width-base !default;\n$code-color: $color-pf-blue-600 !default;\n$dropdown-fallback-border: $dropdown-border !default;\n$dropdown-link-active-bg: $link-color !default;\n$dropdown-link-hover-color: $gray-pf !default;\n$font-size-h1: ceil(($font-size-base * 2)) !default; // ~24px\n$font-size-h2: ceil(($font-size-base * 1.8333)) !default; // ~22px\n$font-size-h3: ceil(($font-size-base * 1.3333)) !default; // ~16px\n$font-size-h5: ceil(($font-size-base * 1.0833)) !default; // ~13px\n$font-size-large: ceil(($font-size-base * 1.1666)) !default; // ~14px\n$font-size-small: ceil(($font-size-base * .9166)) !default; // ~11px\n$input-color: $gray-dark !default;\n$nav-tabs-active-link-hover-color: $link-color !default;\n$nav-tabs-justified-link-border-color: $nav-tabs-border-color !default;\n$nav-pf-vertical-badges-width: ($nav-pf-vertical-width + 50px) !default;\n$padding-small-horizontal: $padding-base-horizontal !default;\n$padding-small-vertical: $padding-base-vertical !default;\n$panel-group-pf-danger-heading-bg: $alert-danger-bg !default;\n$panel-group-pf-primary-heading-bg: lighten($brand-primary, 38%) !default;\n$panel-group-pf-success-heading-bg: $alert-success-bg !default;\n$panel-group-pf-warning-heading-bg: $alert-warning-bg !default;\n$panel-danger-border: $brand-danger !default;\n$panel-danger-heading-bg: $brand-danger !default;\n$panel-info-border: $brand-info !default;\n$panel-info-heading-bg: $brand-info !default;\n$panel-primary-border: $brand-primary !default;\n$panel-primary-text: $body-bg !default;\n$panel-success-border: $brand-success !default;\n$panel-success-heading-bg: $brand-success !default;\n$panel-warning-border: $brand-warning !default;\n$panel-warning-heading-bg: $brand-warning !default;\n$state-warning-text: $brand-warning !default;\n$state-danger-text: $brand-danger !default;\n// Reference variable declared in block above\n$panel-danger-text: $panel-primary-text !default;\n$panel-info-text: $panel-primary-text !default;\n$panel-success-text: $panel-primary-text !default;\n$panel-warning-text: $panel-primary-text !default;\n\n// PatternFly-specific variables based on Bootstrap overides\n// ---------------------------------------------------------\n$bootstrap-switch-bg-color: $btn-default-bg !default;\n$btn-danger-bg-img-start: $brand-danger !default;\n$btn-danger-bg-img-stop: $btn-danger-bg !default;\n$btn-primary-bg-img-start: $brand-primary !default;\n$btn-primary-bg-img-stop: $btn-primary-bg !default;\n$dropdown-link-focus-bg: $link-color !default;\n$line-height-computed: floor(($font-size-base * $line-height-base)) !default;\n$nav-pf-vertical-icon-size: ($font-size-base + 8) !default;\n$notification-badge-color: $brand-danger !default;\n$progress-sm: ($line-height-computed - 6) !default;\n$progress-xs: ($line-height-computed - 14) !default;\n$syntax-1: $btn-danger-bg !default;\n$syntax-2: $gray-dark !default;\n$syntax-3: $brand-success !default;\n$syntax-4: $brand-info !default;\n$tooltip-font-size: $font-size-base !default;\n", "$color-pf-black-100: #fafafa;\n$color-pf-black-150: #f5f5f5;\n$color-pf-black-200: #ededed;\n$color-pf-black-300: #d1d1d1;\n$color-pf-black-400: #bbb;\n$color-pf-black-500: #8b8d8f;\n$color-pf-black-600: #72767b;\n$color-pf-black-700: #4d5258;\n$color-pf-black-800: #393f44;\n$color-pf-black-900: #292e34;\n$color-pf-blue-50: #def3ff;\n$color-pf-blue-100: #bee1f4;\n$color-pf-blue-200: #7dc3e8;\n$color-pf-blue-300: #39a5dc;\n$color-pf-blue-400: #0088ce;\n$color-pf-blue-500: #00659c;\n$color-pf-blue-600: #004368;\n$color-pf-blue-700: #002235;\n$color-pf-cyan-100: #bedee1;\n$color-pf-cyan-200: #7dbdc3;\n$color-pf-cyan-300: #3a9ca6;\n$color-pf-cyan-400: #007a87;\n$color-pf-cyan-500: #005c66;\n$color-pf-cyan-600: #003d44;\n$color-pf-cyan-700: #001f22;\n$color-pf-gold-100: #fbeabc;\n$color-pf-gold-200: #f9d67a;\n$color-pf-gold-300: #f5c12e;\n$color-pf-gold-400: #f0ab00;\n$color-pf-gold-500: #b58100;\n$color-pf-gold-600: #795600;\n$color-pf-gold-700: #3d2c00;\n$color-pf-green-100: #cfe7cd;\n$color-pf-green-200: #9ecf99;\n$color-pf-green-300: #6ec664;\n$color-pf-green-400: #3f9c35;\n$color-pf-green-500: #2d7623;\n$color-pf-green-600: #1e4f18;\n$color-pf-green-700: #0f280d;\n$color-pf-light-blue-100: #beedf9;\n$color-pf-light-blue-200: #7cdbf3;\n$color-pf-light-blue-300: #35caed;\n$color-pf-light-blue-400: #00b9e4;\n$color-pf-light-blue-500: #008bad;\n$color-pf-light-blue-600: #005c73;\n$color-pf-light-blue-700: #002d39;\n$color-pf-light-green-100: #e4f5bc;\n$color-pf-light-green-200: #c8eb79;\n$color-pf-light-green-300: #ace12e;\n$color-pf-light-green-400: #92d400;\n$color-pf-light-green-500: #6ca100;\n$color-pf-light-green-600: #486b00;\n$color-pf-light-green-700: #253600;\n$color-pf-orange-100: #fbdebf;\n$color-pf-orange-200: #f7bd7f;\n$color-pf-orange-300: #f39d3c;\n$color-pf-orange-400: #ec7a08;\n$color-pf-orange-500: #b35c00;\n$color-pf-orange-600: #773d00;\n$color-pf-orange-700: #3b1f00;\n$color-pf-purple-100: #c7bfff;\n$color-pf-purple-200: #a18fff;\n$color-pf-purple-300: #8461f7;\n$color-pf-purple-400: #703fec;\n$color-pf-purple-500: #582fc0;\n$color-pf-purple-600: #40199a;\n$color-pf-purple-700: #1f0066;\n$color-pf-red-100: #cc0000;\n$color-pf-red-200: #a30000;\n$color-pf-red-300: #8b0000;\n$color-pf-red-400: #470000;\n$color-pf-red-500: #2c0000;\n\n$color-pf-black: #030303;\n$color-pf-blue: $color-pf-blue-400;\n$color-pf-cyan: $color-pf-cyan-400;\n$color-pf-gold: $color-pf-gold-400;\n$color-pf-green: $color-pf-green-400;\n$color-pf-light-blue: $color-pf-light-blue-400;\n$color-pf-light-green: $color-pf-light-green-400;\n$color-pf-orange: $color-pf-orange-400;\n$color-pf-purple: $color-pf-purple-400;\n$color-pf-red: $color-pf-red-100;\n$color-pf-white: #fff;", "@import \"../vertical-navigation/scss/pf-vertical-navigation\";\n", "@import \"../../node_modules/patternfly-sass/assets/stylesheets/patternfly/variables\";\n\n.pf-vertical-nav {\n width: 100%;\n background: #292e34;\n display: block;\n color: $color-pf-white;\n padding-bottom: 1em;\n height: 100%;\n}\n\n.pf-vertical-nav a {\n color: $color-pf-white;\n text-decoration: none;\n}\n\n.pf-vertical-nav__menu {\n margin: 0;\n list-style: none;\n padding: 0;\n}\n\n.pf-vertical-nav__category {\n padding: 1.5em 0 0.5em 1em;\n text-transform: uppercase;\n color: $color-pf-black-400;\n}\n\n.pf-vertical-nav__link {\n display: block;\n padding: 0.5em 1em 0.5em 1.5em;\n\n &:hover {\n background-color: $color-pf-black-800;\n }\n}\n\n.pf-vertical-nav__icon {\n margin-right: 0.5em;\n color: $color-pf-black-600;\n}\n\n.pf-vertical-nav__item {\n &.active {\n border-top: 1px solid $color-pf-black;\n border-bottom: 1px solid $color-pf-black;\n\n .pf-vertical-nav__link {\n border-left: 5px solid $color-pf-blue-300;\n padding: 0.5em 1em 0.5em calc(1.5em - 5px);\n\n .pf-vertical-nav__icon {\n color: $color-pf-blue-400;\n }\n }\n }\n}\n\n@media (min-width: 480px