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