/gist:a6fd7fd6fda2cab56e41
Created Jul 27, 2014
Sass for Bootstrap 3 Dropdown Menu
| // | |
| // Bootstrap 3 Variables | |
| // This is an incomplete list of bootstrap variables, lists only what pertains to the dropdown menu and various possible options. | |
| // | |
| //== Colors | |
| // | |
| //## Gray and brand colors for use across Bootstrap. | |
| $gray-darker: lighten(#000, 13.5%) !default; // #222 | |
| $gray-dark: lighten(#000, 20%) !default; // #333 | |
| $gray: lighten(#000, 33.5%) !default; // #555 | |
| $gray-light: lighten(#000, 60%) !default; // #999 | |
| $gray-lighter: lighten(#000, 93.5%) !default; // #eee | |
| $brand-primary: #428bca !default; | |
| $brand-success: #5cb85c !default; | |
| $brand-info: #5bc0de !default; | |
| $brand-warning: #f0ad4e !default; | |
| $brand-danger: #d9534f !default; | |
| //== Scaffolding | |
| // | |
| //## Settings for some of the most global styles. | |
| //** Background color for `<body>`. | |
| $body-bg: #fff !default; | |
| //** Global text color on `<body>`. | |
| $text-color: $gray-dark !default; | |
| //** Global textual link color. | |
| $link-color: $brand-primary !default; | |
| //** Link hover color set via `darken()` function. | |
| $link-hover-color: darken($link-color, 15%) !default; | |
| //== Typography | |
| // | |
| //## Font, line-height, and color for body text, headings, and more. | |
| $font-size-base: 16px !default; | |
| $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px | |
| $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px | |
| //** Unit-less `line-height` for use in components like buttons. | |
| $line-height-base: 1.428571429 !default; // 20/14 | |
| //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. | |
| $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px | |
| //== Components | |
| // | |
| //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). | |
| $padding-base-vertical: 6px !default; | |
| $padding-base-horizontal: 12px !default; | |
| $padding-large-vertical: 10px !default; | |
| $padding-large-horizontal: 16px !default; | |
| $padding-small-vertical: 5px !default; | |
| $padding-small-horizontal: 10px !default; | |
| $padding-xs-vertical: 1px !default; | |
| $padding-xs-horizontal: 5px !default; | |
| $line-height-large: 1.33 !default; | |
| $line-height-small: 1.5 !default; | |
| $border-radius-base: 4px !default; | |
| $border-radius-large: 6px !default; | |
| $border-radius-small: 3px !default; | |
| //** Global color for active items (e.g., navs or dropdowns). | |
| $component-active-color: #fff !default; | |
| //** Global background color for active items (e.g., navs or dropdowns). | |
| $component-active-bg: $brand-primary !default; | |
| //** Width of the `border` for generating carets that indicator dropdowns. | |
| $caret-width-base: 5px !default; | |
| //** Carets increase slightly in size for larger components. | |
| $caret-width-large: 6px !default; | |
| //== Tables | |
| // | |
| //## Customizes the `.table` component with basic values, each used across all table variations. | |
| //** Padding for `<th>`s and `<td>`s. | |
| $table-cell-padding: 8px !default; | |
| //** Padding for cells in `.table-condensed`. | |
| $table-condensed-cell-padding: 5px !default; | |
| //** Default background color used for all tables. | |
| $table-bg: transparent !default; | |
| //** Background color used for `.table-striped`. | |
| $table-bg-accent: #f9f9f9 !default; | |
| //** Background color used for `.table-hover`. | |
| $table-bg-hover: #f5f5f5 !default; | |
| $table-bg-active: $table-bg-hover !default; | |
| //** Border color for table and cell borders. | |
| $table-border-color: #ddd !default; | |
| //== Buttons | |
| // | |
| //## For each of Bootstrap's buttons, define text, background and border color. | |
| $btn-font-weight: normal !default; | |
| $btn-default-color: #333 !default; | |
| $btn-default-bg: #fff !default; | |
| $btn-default-border: #ccc !default; | |
| $btn-primary-color: #fff !default; | |
| $btn-primary-bg: $brand-primary !default; | |
| $btn-primary-border: darken($btn-primary-bg, 5%) !default; | |
| $btn-success-color: #fff !default; | |
| $btn-success-bg: $brand-success !default; | |
| $btn-success-border: darken($btn-success-bg, 5%) !default; | |
| $btn-info-color: #fff !default; | |
| $btn-info-bg: $brand-info !default; | |
| $btn-info-border: darken($btn-info-bg, 5%) !default; | |
| $btn-warning-color: #fff !default; | |
| $btn-warning-bg: $brand-warning !default; | |
| $btn-warning-border: darken($btn-warning-bg, 5%) !default; | |
| $btn-danger-color: #fff !default; | |
| $btn-danger-bg: $brand-danger !default; | |
| $btn-danger-border: darken($btn-danger-bg, 5%) !default; | |
| $btn-link-disabled-color: $gray-light !default; | |
| //== Forms | |
| // | |
| //## | |
| //** `<input>` background color | |
| $input-bg: #fff !default; | |
| //** `<input disabled>` background color | |
| $input-bg-disabled: $gray-lighter !default; | |
| //** Text color for `<input>`s | |
| $input-color: $gray !default; | |
| //** `<input>` border color | |
| $input-border: #ccc !default; | |
| //** `<input>` border radius | |
| $input-border-radius: $border-radius-base !default; | |
| //** Border color for inputs on focus | |
| $input-border-focus: #66afe9 !default; | |
| //** Placeholder text color | |
| $input-color-placeholder: $gray-light !default; | |
| //** Default `.form-control` height | |
| $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; | |
| //** Large `.form-control` height | |
| $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; | |
| //** Small `.form-control` height | |
| $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; | |
| $legend-color: $gray-dark !default; | |
| $legend-border-color: #e5e5e5 !default; | |
| //** Background color for textual input addons | |
| $input-group-addon-bg: $gray-lighter !default; | |
| //** Border color for textual input addons | |
| $input-group-addon-border-color: $input-border !default; | |
| //== Dropdowns | |
| // | |
| //## Dropdown menu container and contents. | |
| //** Background for the dropdown menu. | |
| $dropdown-bg: #fff !default; | |
| //** Dropdown menu `border-color`. | |
| $dropdown-border: rgba(0,0,0,.15) !default; | |
| //** Dropdown menu `border-color` **for IE8**. | |
| $dropdown-fallback-border: #ccc !default; | |
| //** Divider color for between dropdown items. | |
| $dropdown-divider-bg: #e5e5e5 !default; | |
| //** Dropdown link text color. | |
| $dropdown-link-color: $gray-dark !default; | |
| //** Hover color for dropdown links. | |
| $dropdown-link-hover-color: darken($gray-dark, 5%) !default; | |
| //** Hover background for dropdown links. | |
| $dropdown-link-hover-bg: #f5f5f5 !default; | |
| //** Active dropdown menu item text color. | |
| $dropdown-link-active-color: $component-active-color !default; | |
| //** Active dropdown menu item background color. | |
| $dropdown-link-active-bg: $component-active-bg !default; | |
| //** Disabled dropdown menu item background color. | |
| $dropdown-link-disabled-color: $gray-light !default; | |
| //** Text color for headers within dropdown menus. | |
| $dropdown-header-color: $gray-light !default; | |
| //** Deprecated `$dropdown-caret-color` as of v3.1.0 | |
| $dropdown-caret-color: #000 !default; | |
| //-- Z-index master list | |
| // | |
| // Warning: Avoid customizing these values. They're used for a bird's eye view | |
| // of components dependent on the z-axis and are designed to all work together. | |
| // | |
| // Note: These variables are not generated into the Customizer. | |
| $zindex-navbar: 1000 !default; | |
| $zindex-dropdown: 1000 !default; | |
| $zindex-popover: 1060 !default; | |
| $zindex-tooltip: 1070 !default; | |
| $zindex-navbar-fixed: 1030 !default; | |
| $zindex-modal-background: 1040 !default; | |
| $zindex-modal: 1050 !default; | |
| //== Media queries breakpoints | |
| // | |
| //## Define the breakpoints at which your layout will change, adapting to different screen sizes. | |
| // Extra small screen / phone | |
| //** Deprecated `$screen-xs` as of v3.0.1 | |
| $screen-xs: 480px !default; | |
| //** Deprecated `$screen-xs-min` as of v3.2.0 | |
| $screen-xs-min: $screen-xs !default; | |
| //** Deprecated `$screen-phone` as of v3.0.1 | |
| $screen-phone: $screen-xs-min !default; | |
| // Small screen / tablet | |
| //** Deprecated `$screen-sm` as of v3.0.1 | |
| $screen-sm: 768px !default; | |
| $screen-sm-min: $screen-sm !default; | |
| //** Deprecated `$screen-tablet` as of v3.0.1 | |
| $screen-tablet: $screen-sm-min !default; | |
| // Medium screen / desktop | |
| //** Deprecated `$screen-md` as of v3.0.1 | |
| $screen-md: 992px !default; | |
| $screen-md-min: $screen-md !default; | |
| //** Deprecated `$screen-desktop` as of v3.0.1 | |
| $screen-desktop: $screen-md-min !default; | |
| // Large screen / wide desktop | |
| //** Deprecated `$screen-lg` as of v3.0.1 | |
| $screen-lg: 1200px !default; | |
| $screen-lg-min: $screen-lg !default; | |
| //** Deprecated `$screen-lg-desktop` as of v3.0.1 | |
| $screen-lg-desktop: $screen-lg-min !default; | |
| // So media queries don't overlap when required, provide a maximum | |
| $screen-xs-max: ($screen-sm-min - 1) !default; | |
| $screen-sm-max: ($screen-md-min - 1) !default; | |
| $screen-md-max: ($screen-lg-min - 1) !default; | |
| //== Grid system | |
| // | |
| //## Define your custom responsive grid. | |
| //** Number of columns in the grid. | |
| $grid-columns: 12 !default; | |
| //** Padding between columns. Gets divided in half for the left and right. | |
| $grid-gutter-width: 30px !default; | |
| // Navbar collapse | |
| //** Point at which the navbar becomes uncollapsed. | |
| $grid-float-breakpoint: $screen-sm-min !default; | |
| //** Point at which the navbar begins collapsing. | |
| $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; | |
| //== Container sizes | |
| // | |
| //## Define the maximum width of `.container` for different screen sizes. | |
| // Small screen / tablet | |
| $container-tablet: ((720px + $grid-gutter-width)) !default; | |
| //** For `$screen-sm-min` and up. | |
| $container-sm: $container-tablet !default; | |
| // Medium screen / desktop | |
| $container-desktop: ((940px + $grid-gutter-width)) !default; | |
| //** For `$screen-md-min` and up. | |
| $container-md: $container-desktop !default; | |
| // Large screen / wide desktop | |
| $container-large-desktop: ((1140px + $grid-gutter-width)) !default; | |
| //** For `$screen-lg-min` and up. | |
| $container-lg: $container-large-desktop !default; | |
| //== Navbar | |
| // | |
| //## | |
| // Basics of a navbar | |
| $navbar-height: 50px !default; | |
| $navbar-margin-bottom: $line-height-computed !default; | |
| $navbar-border-radius: $border-radius-base !default; | |
| $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; | |
| $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; | |
| $navbar-collapse-max-height: 340px !default; | |
| $navbar-default-color: #777 !default; | |
| $navbar-default-bg: #f8f8f8 !default; | |
| $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; | |
| // Navbar links | |
| $navbar-default-link-color: #777 !default; | |
| $navbar-default-link-hover-color: #333 !default; | |
| $navbar-default-link-hover-bg: transparent !default; | |
| $navbar-default-link-active-color: #555 !default; | |
| $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; | |
| $navbar-default-link-disabled-color: #ccc !default; | |
| $navbar-default-link-disabled-bg: transparent !default; | |
| // Navbar brand label | |
| $navbar-default-brand-color: $navbar-default-link-color !default; | |
| $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; | |
| $navbar-default-brand-hover-bg: transparent !default; | |
| // Navbar toggle | |
| $navbar-default-toggle-hover-bg: #ddd !default; | |
| $navbar-default-toggle-icon-bar-bg: #888 !default; | |
| $navbar-default-toggle-border-color: #ddd !default; | |
| // Inverted navbar | |
| // Reset inverted navbar basics | |
| $navbar-inverse-color: $gray-light !default; | |
| $navbar-inverse-bg: #222 !default; | |
| $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; | |
| // Inverted navbar links | |
| $navbar-inverse-link-color: $gray-light !default; | |
| $navbar-inverse-link-hover-color: #fff !default; | |
| $navbar-inverse-link-hover-bg: transparent !default; | |
| $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; | |
| $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; | |
| $navbar-inverse-link-disabled-color: #444 !default; | |
| $navbar-inverse-link-disabled-bg: transparent !default; | |
| // Inverted navbar brand label | |
| $navbar-inverse-brand-color: $navbar-inverse-link-color !default; | |
| $navbar-inverse-brand-hover-color: #fff !default; | |
| $navbar-inverse-brand-hover-bg: transparent !default; | |
| // Inverted navbar toggle | |
| $navbar-inverse-toggle-hover-bg: #333 !default; | |
| $navbar-inverse-toggle-icon-bar-bg: #fff !default; | |
| $navbar-inverse-toggle-border-color: #333 !default; | |
| //== Navs | |
| // | |
| //## | |
| //=== Shared nav styles | |
| $nav-link-padding: 10px 15px !default; | |
| $nav-link-hover-bg: $gray-lighter !default; | |
| $nav-disabled-link-color: $gray-light !default; | |
| $nav-disabled-link-hover-color: $gray-light !default; | |
| $nav-open-link-hover-color: #fff !default; | |
| //== Tabs | |
| $nav-tabs-border-color: #ddd !default; | |
| $nav-tabs-link-hover-border-color: $gray-lighter !default; | |
| $nav-tabs-active-link-hover-bg: $body-bg !default; | |
| $nav-tabs-active-link-hover-color: $gray !default; | |
| $nav-tabs-active-link-hover-border-color: #ddd !default; | |
| $nav-tabs-justified-link-border-color: #ddd !default; | |
| $nav-tabs-justified-active-link-border-color: $body-bg !default; | |
| //== Pills | |
| $nav-pills-border-radius: $border-radius-base !default; | |
| $nav-pills-active-link-hover-bg: $component-active-bg !default; | |
| $nav-pills-active-link-hover-color: $component-active-color !default; | |
| //== List group | |
| // | |
| //## | |
| //** Background color on `.list-group-item` | |
| $list-group-bg: #fff !default; | |
| //** `.list-group-item` border color | |
| $list-group-border: #ddd !default; | |
| //** List group border radius | |
| $list-group-border-radius: $border-radius-base !default; | |
| //** Background color of single list items on hover | |
| $list-group-hover-bg: #f5f5f5 !default; | |
| //** Text color of active list items | |
| $list-group-active-color: $component-active-color !default; | |
| //** Background color of active list items | |
| $list-group-active-bg: $component-active-bg !default; | |
| //** Border color of active list elements | |
| $list-group-active-border: $list-group-active-bg !default; | |
| //** Text color for content within active list items | |
| $list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; | |
| //** Text color of disabled list items | |
| $list-group-disabled-color: $gray-light !default; | |
| //** Background color of disabled list items | |
| $list-group-disabled-bg: $gray-lighter !default; | |
| //** Text color for content within disabled list items | |
| $list-group-disabled-text-color: $list-group-disabled-color !default; | |
| $list-group-link-color: #555 !default; | |
| $list-group-link-hover-color: $list-group-link-color !default; | |
| $list-group-link-heading-color: #333 !default; | |
| //== Badges | |
| // | |
| //## | |
| $badge-color: #fff !default; | |
| //** Linked badge text color on hover | |
| $badge-link-hover-color: #fff !default; | |
| $badge-bg: $gray-light !default; | |
| //** Badge text color in active nav link | |
| $badge-active-color: $link-color !default; | |
| //** Badge background color in active nav link | |
| $badge-active-bg: #fff !default; | |
| $badge-font-weight: bold !default; | |
| $badge-line-height: 1 !default; | |
| $badge-border-radius: 10px !default; | |
| // | |
| // Bootstrap 3 Mixins | |
| // This is an incomplete list of bootstrap mixins, lists only what pertains to the dropdown menu and various possible options. | |
| // | |
| // Navbar vertical align | |
| // | |
| // Vertically center elements in the navbar. | |
| // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. | |
| @mixin navbar-vertical-align($element-height) { | |
| margin-top: (($navbar-height - $element-height) / 2); | |
| margin-bottom: (($navbar-height - $element-height) / 2); | |
| } | |
| // Single side border-radius | |
| // | |
| @mixin border-top-radius($radius) { | |
| border-top-right-radius: $radius; | |
| border-top-left-radius: $radius; | |
| } | |
| @mixin border-right-radius($radius) { | |
| border-bottom-right-radius: $radius; | |
| border-top-right-radius: $radius; | |
| } | |
| @mixin border-bottom-radius($radius) { | |
| border-bottom-right-radius: $radius; | |
| border-bottom-left-radius: $radius; | |
| } | |
| @mixin border-left-radius($radius) { | |
| border-bottom-left-radius: $radius; | |
| border-top-left-radius: $radius; | |
| } | |
| // Horizontal dividers | |
| // | |
| // Dividers (basically an hr) within dropdowns and nav lists | |
| @mixin nav-divider($color: #e5e5e5) { | |
| height: 1px; | |
| margin: (($line-height-computed / 2) - 1) 0; | |
| overflow: hidden; | |
| background-color: $color; | |
| } | |
| // | |
| // Bootstrap 3 Styling | |
| // This is an incomplete list of bootstrap styles, lists only what pertains to the dropdown menu and various possible options. | |
| // | |
| // Base class | |
| // -------------------------------------------------- | |
| .nav { | |
| margin-bottom: 0; | |
| padding-left: 0; // Override default ul/ol | |
| list-style: none; | |
| @extend %clearfix; | |
| > li { | |
| position: relative; | |
| display: block; | |
| > a { | |
| position: relative; | |
| display: block; | |
| padding: $nav-link-padding; | |
| &:hover, | |
| &:focus { | |
| text-decoration: none; | |
| background-color: $nav-link-hover-bg; | |
| } | |
| } | |
| // Disabled state sets text to gray and nukes hover/tab effects | |
| &.disabled > a { | |
| color: $nav-disabled-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $nav-disabled-link-hover-color; | |
| text-decoration: none; | |
| background-color: transparent; | |
| cursor: not-allowed; | |
| } | |
| } | |
| } | |
| // Open dropdowns | |
| .open > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| background-color: $nav-link-hover-bg; | |
| border-color: $link-color; | |
| } | |
| } | |
| } | |
| // | |
| // Navbars | |
| // -------------------------------------------------- | |
| // Wrapper and base class | |
| // | |
| // Provide a static navbar from which we expand to create full-width, fixed, and | |
| // other navbar variations. | |
| .navbar { | |
| position: relative; | |
| min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) | |
| margin-bottom: $navbar-margin-bottom; | |
| border: 1px solid transparent; | |
| // Prevent floats from breaking the navbar | |
| @extend %clearfix; | |
| @media (min-width: $grid-float-breakpoint) { | |
| border-radius: $navbar-border-radius; | |
| } | |
| } | |
| // Navbar heading | |
| // | |
| // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy | |
| // styling of responsive aspects. | |
| .navbar-header { | |
| @extend %clearfix; | |
| @media (min-width: $grid-float-breakpoint) { | |
| float: left; | |
| } | |
| } | |
| // Navbar collapse (body) | |
| // | |
| // Group your navbar content into this for easy collapsing and expanding across | |
| // various device sizes. By default, this content is collapsed when <768px, but | |
| // will expand past that for a horizontal display. | |
| // | |
| // To start (on mobile devices) the navbar links, forms, and buttons are stacked | |
| // vertically and include a `max-height` to overflow in case you have too much | |
| // content for the user's viewport. | |
| .navbar-collapse { | |
| overflow-x: visible; | |
| padding-right: $navbar-padding-horizontal; | |
| padding-left: $navbar-padding-horizontal; | |
| border-top: 1px solid transparent; | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.1); | |
| @extend %clearfix; | |
| -webkit-overflow-scrolling: touch; | |
| &.in { | |
| overflow-y: auto; | |
| } | |
| @media (min-width: $grid-float-breakpoint) { | |
| width: auto; | |
| border-top: 0; | |
| box-shadow: none; | |
| &.collapse { | |
| display: block !important; | |
| height: auto !important; | |
| padding-bottom: 0; // Override default setting | |
| overflow: visible !important; | |
| } | |
| &.in { | |
| overflow-y: visible; | |
| } | |
| // Undo the collapse side padding for navbars with containers to ensure | |
| // alignment of right-aligned contents. | |
| .navbar-fixed-top &, | |
| .navbar-static-top &, | |
| .navbar-fixed-bottom & { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| } | |
| } | |
| .navbar-fixed-top, | |
| .navbar-fixed-bottom { | |
| .navbar-collapse { | |
| max-height: $navbar-collapse-max-height; | |
| @media (max-width: $screen-xs-min) and (orientation: landscape) { | |
| max-height: 200px; | |
| } | |
| } | |
| } | |
| // Both navbar header and collapse | |
| // | |
| // When a container is present, change the behavior of the header and collapse. | |
| .container, | |
| .container-fluid { | |
| > .navbar-header, | |
| > .navbar-collapse { | |
| margin-right: -$navbar-padding-horizontal; | |
| margin-left: -$navbar-padding-horizontal; | |
| @media (min-width: $grid-float-breakpoint) { | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| } | |
| } | |
| // | |
| // Navbar alignment options | |
| // | |
| // Display the navbar across the entirety of the page or fixed it to the top or | |
| // bottom of the page. | |
| // Static top (unfixed, but 100% wide) navbar | |
| .navbar-static-top { | |
| z-index: $zindex-navbar; | |
| border-width: 0 0 1px; | |
| @media (min-width: $grid-float-breakpoint) { | |
| border-radius: 0; | |
| } | |
| } | |
| // Fix the top/bottom navbars when screen real estate supports it | |
| .navbar-fixed-top, | |
| .navbar-fixed-bottom { | |
| position: fixed; | |
| right: 0; | |
| left: 0; | |
| z-index: $zindex-navbar-fixed; | |
| // Undo the rounded corners | |
| @media (min-width: $grid-float-breakpoint) { | |
| border-radius: 0; | |
| } | |
| } | |
| .navbar-fixed-top { | |
| top: 0; | |
| border-width: 0 0 1px; | |
| } | |
| .navbar-fixed-bottom { | |
| bottom: 0; | |
| margin-bottom: 0; // override .navbar defaults | |
| border-width: 1px 0 0; | |
| } | |
| // Brand/project name | |
| .navbar-brand { | |
| float: left; | |
| padding: $navbar-padding-vertical $navbar-padding-horizontal; | |
| font-size: $font-size-large; | |
| line-height: $line-height-computed; | |
| height: $navbar-height; | |
| &:hover, | |
| &:focus { | |
| text-decoration: none; | |
| } | |
| @media (min-width: $grid-float-breakpoint) { | |
| display: none; | |
| .navbar > .container &, | |
| .navbar > .container-fluid & { | |
| margin-left: -$navbar-padding-horizontal; | |
| } | |
| } | |
| } | |
| // Navbar toggle | |
| // | |
| // Custom button for toggling the `.navbar-collapse`, powered by the collapse | |
| // JavaScript plugin. | |
| .navbar-toggle { | |
| position: relative; | |
| float: right; | |
| margin-right: $navbar-padding-horizontal; | |
| padding: 9px 10px; | |
| @include navbar-vertical-align(34px); | |
| background-color: transparent; | |
| background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | |
| border: 1px solid transparent; | |
| border-radius: $border-radius-base; | |
| // We remove the `outline` here, but later compensate by attaching `:hover` | |
| // styles to `:focus`. | |
| &:focus { | |
| outline: 0; | |
| } | |
| // Bars | |
| .icon-bar { | |
| display: block; | |
| width: 22px; | |
| height: 2px; | |
| border-radius: 1px; | |
| } | |
| .icon-bar + .icon-bar { | |
| margin-top: 4px; | |
| } | |
| @media (min-width: $grid-float-breakpoint) { | |
| display: none; | |
| } | |
| } | |
| .sr-only { | |
| @extend %visuallyhidden; | |
| } | |
| .collapse { | |
| display: none; | |
| &.in { | |
| display: block; | |
| } | |
| } | |
| .collapsing { | |
| position: relative; | |
| height: 0; | |
| overflow: hidden; | |
| transition: height .35s ease; | |
| } | |
| // Navbar nav links | |
| // | |
| // Builds on top of the `.nav` components with its own modifier class to make | |
| // the nav the full height of the horizontal nav (above 768px). | |
| .navbar-nav { | |
| margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); | |
| list-style: none; | |
| > li > a { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| line-height: $line-height-computed; | |
| } | |
| @media (max-width: $grid-float-breakpoint-max) { | |
| // Dropdowns get custom display when collapsed | |
| .open .dropdown-menu { | |
| position: static; | |
| float: none; | |
| width: auto; | |
| margin-top: 0; | |
| background-color: transparent; | |
| border: 0; | |
| box-shadow: none; | |
| > li > a, | |
| .dropdown-header { | |
| padding: 5px 15px 5px 25px; | |
| } | |
| > li > a { | |
| line-height: $line-height-computed; | |
| &:hover, | |
| &:focus { | |
| background-image: none; | |
| } | |
| } | |
| } | |
| } | |
| // Uncollapse the nav | |
| @media (min-width: $grid-float-breakpoint) { | |
| float: left; | |
| margin: 0; | |
| > li { | |
| float: left; | |
| > a { | |
| padding-top: $navbar-padding-vertical; | |
| padding-bottom: $navbar-padding-vertical; | |
| } | |
| } | |
| &.navbar-right:last-child { | |
| margin-right: -$navbar-padding-horizontal; | |
| } | |
| } | |
| } | |
| // Component alignment | |
| // | |
| // Repurpose the pull utilities as their own navbar utilities to avoid specificity | |
| // issues with parents and chaining. Only do this when the navbar is uncollapsed | |
| // though so that navbar contents properly stack and align in mobile. | |
| @media (min-width: $grid-float-breakpoint) { | |
| .navbar-left { | |
| float: left !important; | |
| } | |
| .navbar-right { | |
| float: right !important; | |
| } | |
| } | |
| // Navbar form | |
| // | |
| // Extension of the `.form-inline` with some extra flavor for optimum display in | |
| // our navbars. | |
| .navbar-form { | |
| margin-left: -$navbar-padding-horizontal; | |
| margin-right: -$navbar-padding-horizontal; | |
| padding: 10px $navbar-padding-horizontal; | |
| border-top: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); | |
| box-shadow: $shadow; | |
| // Mixin behavior for optimum display | |
| // this is currently disabled because it requires a pretty healthy chunk of Sass to be added from the Bootstrap _forms.scss file. | |
| // @extend .form-inline; | |
| .form-group { | |
| @media (max-width: $grid-float-breakpoint-max) { | |
| margin-bottom: 5px; | |
| } | |
| } | |
| // Vertically center in expanded, horizontal navbar | |
| @include navbar-vertical-align($input-height-base); | |
| // Undo 100% width for pull classes | |
| @media (min-width: $grid-float-breakpoint) { | |
| width: auto; | |
| border: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| box-shadow: none; | |
| // Outdent the form if last child to line up with content down the page | |
| &.navbar-right:last-child { | |
| margin-right: -$navbar-padding-horizontal; | |
| } | |
| } | |
| } | |
| // Dropdown menus | |
| // Menu position and menu carets | |
| .navbar-nav > li > .dropdown-menu { | |
| margin-top: 0; | |
| @include border-top-radius(0); | |
| } | |
| // Menu position and menu caret support for dropups via extra dropup class | |
| .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | |
| @include border-bottom-radius(0); | |
| } | |
| // Buttons in navbars | |
| // | |
| // Vertically center a button within a navbar (when *not* in a form). | |
| .navbar-btn { | |
| @include navbar-vertical-align($input-height-base); | |
| &.btn-sm { | |
| @include navbar-vertical-align($input-height-small); | |
| } | |
| &.btn-xs { | |
| @include navbar-vertical-align(22); | |
| } | |
| } | |
| // Text in navbars | |
| // | |
| // Add a class to make any element properly align itself vertically within the navbars. | |
| .navbar-text { | |
| @include navbar-vertical-align($line-height-computed); | |
| @media (min-width: $grid-float-breakpoint) { | |
| float: left; | |
| margin-left: $navbar-padding-horizontal; | |
| margin-right: $navbar-padding-horizontal; | |
| // Outdent the form if last child to line up with content down the page | |
| &.navbar-right:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| // Alternate navbars | |
| // -------------------------------------------------- | |
| // Default navbar | |
| .navbar-default { | |
| background-color: $navbar-default-bg; | |
| border-color: $navbar-default-border; | |
| .navbar-brand { | |
| color: $navbar-default-brand-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-brand-hover-color; | |
| background-color: $navbar-default-brand-hover-bg; | |
| } | |
| } | |
| .navbar-text { | |
| color: $navbar-default-color; | |
| } | |
| .navbar-nav { | |
| > li > a { | |
| color: $navbar-default-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-hover-color; | |
| background-color: $navbar-default-link-hover-bg; | |
| } | |
| } | |
| > .active > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-active-color; | |
| background-color: $navbar-default-link-active-bg; | |
| } | |
| } | |
| > .disabled > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-disabled-color; | |
| background-color: $navbar-default-link-disabled-bg; | |
| } | |
| } | |
| } | |
| .navbar-toggle { | |
| border-color: $navbar-default-toggle-border-color; | |
| &:hover, | |
| &:focus { | |
| background-color: $navbar-default-toggle-hover-bg; | |
| } | |
| .icon-bar { | |
| background-color: $navbar-default-toggle-icon-bar-bg; | |
| } | |
| } | |
| .navbar-collapse, | |
| .navbar-form { | |
| border-color: $navbar-default-border; | |
| } | |
| // Dropdown menu items | |
| .navbar-nav { | |
| // Remove background color from open dropdown | |
| > .open > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| background-color: $navbar-default-link-active-bg; | |
| color: $navbar-default-link-active-color; | |
| } | |
| } | |
| @media (max-width: $grid-float-breakpoint-max) { | |
| // Dropdowns get custom display when collapsed | |
| .open .dropdown-menu { | |
| > li > a { | |
| color: $navbar-default-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-hover-color; | |
| background-color: $navbar-default-link-hover-bg; | |
| } | |
| } | |
| > .active > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-active-color; | |
| background-color: $navbar-default-link-active-bg; | |
| } | |
| } | |
| > .disabled > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-disabled-color; | |
| background-color: $navbar-default-link-disabled-bg; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Links in navbars | |
| // | |
| // Add a class to ensure links outside the navbar nav are colored correctly. | |
| .navbar-link { | |
| color: $navbar-default-link-color; | |
| &:hover { | |
| color: $navbar-default-link-hover-color; | |
| } | |
| } | |
| .btn-link { | |
| color: $navbar-default-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-hover-color; | |
| } | |
| &[disabled], | |
| fieldset[disabled] & { | |
| &:hover, | |
| &:focus { | |
| color: $navbar-default-link-disabled-color; | |
| } | |
| } | |
| } | |
| } | |
| // Inverse navbar | |
| .navbar-inverse { | |
| background-color: $navbar-inverse-bg; | |
| border-color: $navbar-inverse-border; | |
| .navbar-brand { | |
| color: $navbar-inverse-brand-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-brand-hover-color; | |
| background-color: $navbar-inverse-brand-hover-bg; | |
| } | |
| } | |
| .navbar-text { | |
| color: $navbar-inverse-color; | |
| } | |
| .navbar-nav { | |
| > li > a { | |
| color: $navbar-inverse-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-hover-color; | |
| background-color: $navbar-inverse-link-hover-bg; | |
| } | |
| } | |
| > .active > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-active-color; | |
| background-color: $navbar-inverse-link-active-bg; | |
| } | |
| } | |
| > .disabled > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-disabled-color; | |
| background-color: $navbar-inverse-link-disabled-bg; | |
| } | |
| } | |
| } | |
| // Darken the responsive nav toggle | |
| .navbar-toggle { | |
| border-color: $navbar-inverse-toggle-border-color; | |
| &:hover, | |
| &:focus { | |
| background-color: $navbar-inverse-toggle-hover-bg; | |
| } | |
| .icon-bar { | |
| background-color: $navbar-inverse-toggle-icon-bar-bg; | |
| } | |
| } | |
| .navbar-collapse, | |
| .navbar-form { | |
| border-color: darken($navbar-inverse-bg, 7%); | |
| } | |
| // Dropdowns | |
| .navbar-nav { | |
| > .open > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| background-color: $navbar-inverse-link-active-bg; | |
| color: $navbar-inverse-link-active-color; | |
| } | |
| } | |
| @media (max-width: $grid-float-breakpoint-max) { | |
| // Dropdowns get custom display | |
| .open .dropdown-menu { | |
| > .dropdown-header { | |
| border-color: $navbar-inverse-border; | |
| } | |
| .divider { | |
| background-color: $navbar-inverse-border; | |
| } | |
| > li > a { | |
| color: $navbar-inverse-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-hover-color; | |
| background-color: $navbar-inverse-link-hover-bg; | |
| } | |
| } | |
| > .active > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-active-color; | |
| background-color: $navbar-inverse-link-active-bg; | |
| } | |
| } | |
| > .disabled > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-disabled-color; | |
| background-color: $navbar-inverse-link-disabled-bg; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .navbar-link { | |
| color: $navbar-inverse-link-color; | |
| &:hover { | |
| color: $navbar-inverse-link-hover-color; | |
| } | |
| } | |
| .btn-link { | |
| color: $navbar-inverse-link-color; | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-hover-color; | |
| } | |
| &[disabled], | |
| fieldset[disabled] & { | |
| &:hover, | |
| &:focus { | |
| color: $navbar-inverse-link-disabled-color; | |
| } | |
| } | |
| } | |
| } | |
| // | |
| // Dropdown menus | |
| // -------------------------------------------------- | |
| // Dropdown arrow/caret | |
| .caret { | |
| display: inline-block; | |
| width: 0; | |
| height: 0; | |
| margin-left: 2px; | |
| vertical-align: middle; | |
| border-top: $caret-width-base solid; | |
| border-right: $caret-width-base solid transparent; | |
| border-left: $caret-width-base solid transparent; | |
| } | |
| // The dropdown wrapper (div) | |
| .dropdown { | |
| position: relative; | |
| } | |
| // Prevent the focus on the dropdown toggle when closing dropdowns | |
| .dropdown-toggle:focus { | |
| outline: 0; | |
| } | |
| // The dropdown menu (ul) | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| z-index: $zindex-dropdown; | |
| display: none; // none by default, but block on "open" of the menu | |
| float: left; | |
| min-width: 160px; | |
| padding: 5px 0; | |
| margin: 2px 0 0; // override default ul | |
| list-style: none; | |
| font-size: $font-size-base; | |
| text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | |
| background-color: $dropdown-bg; | |
| border: 1px solid $dropdown-fallback-border; // IE8 fallback | |
| border: 1px solid $dropdown-border; | |
| border-radius: $border-radius-base; | |
| box-shadow: 0 6px 12px rgba(0,0,0,.175); | |
| background-clip: padding-box; | |
| // Aligns the dropdown menu to right | |
| // | |
| // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` | |
| &.pull-right { | |
| right: 0; | |
| left: auto; | |
| } | |
| // Dividers (basically an hr) within the dropdown | |
| .divider { | |
| @include nav-divider($dropdown-divider-bg); | |
| } | |
| // Links within the dropdown menu | |
| > li > a { | |
| display: block; | |
| padding: 3px 20px; | |
| clear: both; | |
| font-weight: normal; | |
| line-height: $line-height-base; | |
| color: $dropdown-link-color; | |
| white-space: nowrap; // prevent links from randomly breaking onto new lines | |
| } | |
| } | |
| // Hover/Focus state | |
| .dropdown-menu > li > a { | |
| &:hover, | |
| &:focus { | |
| text-decoration: none; | |
| color: $dropdown-link-hover-color; | |
| background-color: $dropdown-link-hover-bg; | |
| } | |
| } | |
| // Active state | |
| .dropdown-menu > .active > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $dropdown-link-active-color; | |
| text-decoration: none; | |
| outline: 0; | |
| background-color: $dropdown-link-active-bg; | |
| } | |
| } | |
| // Disabled state | |
| // | |
| // Gray out text and ensure the hover/focus state remains gray | |
| .dropdown-menu > .disabled > a { | |
| &, | |
| &:hover, | |
| &:focus { | |
| color: $dropdown-link-disabled-color; | |
| } | |
| } | |
| // Nuke hover/focus effects | |
| .dropdown-menu > .disabled > a { | |
| &:hover, | |
| &:focus { | |
| text-decoration: none; | |
| background-color: transparent; | |
| background-image: none; // Remove CSS gradient | |
| cursor: not-allowed; | |
| } | |
| } | |
| // Open state for the dropdown | |
| .open { | |
| // Show the menu | |
| > .dropdown-menu { | |
| display: block; | |
| } | |
| // Remove the outline when :focus is triggered | |
| > a { | |
| outline: 0; | |
| } | |
| } | |
| // Menu positioning | |
| // | |
| // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | |
| // menu with the parent. | |
| .dropdown-menu-right { | |
| left: auto; // Reset the default from `.dropdown-menu` | |
| right: 0; | |
| } | |
| // With v3, we enabled auto-flipping if you have a dropdown within a right | |
| // aligned nav component. To enable the undoing of that, we provide an override | |
| // to restore the default dropdown menu alignment. | |
| // | |
| // This is only for left-aligning a dropdown menu within a `.navbar-right` or | |
| // `.pull-right` nav component. | |
| .dropdown-menu-left { | |
| left: 0; | |
| right: auto; | |
| } | |
| // Dropdown section headers | |
| .dropdown-header { | |
| display: block; | |
| padding: 3px 20px; | |
| font-size: $font-size-small; | |
| line-height: $line-height-base; | |
| color: $dropdown-header-color; | |
| white-space: nowrap; // as with > li > a | |
| } | |
| // Backdrop to catch body clicks on mobile, etc. | |
| .dropdown-backdrop { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: 0; | |
| z-index: ($zindex-dropdown - 10); | |
| } | |
| // Right aligned dropdowns | |
| .pull-right > .dropdown-menu { | |
| right: 0; | |
| left: auto; | |
| } | |
| // Allow for dropdowns to go bottom up (aka, dropup-menu) | |
| // | |
| // Just add .dropup after the standard .dropdown class and you're set, bro. | |
| // TODO: abstract this so that the navbar fixed styles are not placed here? | |
| .dropup, | |
| .navbar-fixed-bottom .dropdown { | |
| // Reverse the caret | |
| .caret { | |
| border-top: 0; | |
| border-bottom: $caret-width-base solid; | |
| content: ""; | |
| } | |
| // Different positioning for bottom up menu | |
| .dropdown-menu { | |
| top: auto; | |
| bottom: 100%; | |
| margin-bottom: 1px; | |
| } | |
| } | |
| // Component alignment | |
| // | |
| // Reiterate per navbar.less and the modified component alignment there. | |
| @media (min-width: $grid-float-breakpoint) { | |
| .navbar-right { | |
| .dropdown-menu { | |
| right: 0; left: auto; | |
| } | |
| // Necessary for overrides of the default right aligned menu. | |
| // Will remove come v4 in all likelihood. | |
| .dropdown-menu-left { | |
| left: 0; right: auto; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment