From 398038c798f065c3e42a7d296daeb59921424644 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 23 Jul 2013 23:18:53 -0700 Subject: [PATCH] Update dropdown vars * Update `.nav-divider` mixin to simplify to a 1px line (one value instead of two in parametric mixin) * Rename and consolidate dropdown caret vars * Add vars to Customizer --- customize.html | 9 +++++---- less/dropdowns.less | 6 +++--- less/mixins.less | 7 +++---- less/variables.less | 7 ++----- 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/customize.html b/customize.html index afdef028b7..4c401b2cd3 100644 --- a/customize.html +++ b/customize.html @@ -817,6 +817,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge

Hovered dropdown menu entry background color

+

Dropdown caret

+ + +

Indicator arrow for showing an element has a dropdown

Colors

@@ -834,12 +838,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge

Dividers

- +

Dropdown divider top border color

- - -

Dropdown divider bottom border color

diff --git a/less/dropdowns.less b/less/dropdowns.less index 1430435e4e..00a84a6cbe 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -11,7 +11,7 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: 4px solid @caret-border-top-color; + border-top: 4px solid @dropdown-caret-color; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; @@ -45,7 +45,7 @@ // Dividers (basically an hr) within the dropdown .divider { - .nav-divider(@dropdown-divider-top, @dropdown-divider-bottom); + .nav-divider(@dropdown-divider-bg); } // Links within the dropdown menu @@ -159,7 +159,7 @@ // Reverse the caret .caret { border-top: 0; - border-bottom: 4px solid @dropup-caret-border-color; + border-bottom: 4px solid @dropdown-caret-color; content: ""; } // Different positioning for bottom up menu diff --git a/less/mixins.less b/less/mixins.less index 4dbfa83ef5..a280ca9fdc 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -332,12 +332,11 @@ // Horizontal dividers // ------------------------- // Dividers (basically an hr) within dropdowns and nav lists -.nav-divider(@top: #e5e5e5, @bottom: #fff) { - height: 2px; // 1px for background, one for border +.nav-divider(@color: #e5e5e5) { + height: 1px; margin: ((@line-height-computed / 2) - 1) 0; overflow: hidden; - background-color: @top; - border-bottom: 1px solid @bottom; + background-color: @color; } // Alerts diff --git a/less/variables.less b/less/variables.less index 2627a8bd7d..38ca8a4748 100644 --- a/less/variables.less +++ b/less/variables.less @@ -147,8 +147,7 @@ @dropdown-bg: #fff; @dropdown-border: rgba(0,0,0,.15); @dropdown-fallback-border: #ccc; -@dropdown-divider-top: #e5e5e5; -@dropdown-divider-bottom: #fff; +@dropdown-divider-bg: #e5e5e5; @dropdown-link-active-color: #fff; @dropdown-link-active-bg: @component-active-bg; @@ -157,9 +156,7 @@ @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; -@caret-border-top-color: #000; - -@dropup-caret-border-color: #000; +@dropdown-caret-color: #000; // COMPONENT VARIABLES