From b2ebd5c46ca538142c5cd4164328c56053b5c79d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 12:52:44 -0700 Subject: [PATCH] update button styles to use updated 14px base font size, align carets to others with no opacity changes --- docs/assets/css/bootstrap.css | 42 ++++++++++++++--------------------- less/button-groups.less | 29 ++++++++++-------------- less/buttons.less | 8 +++---- less/variables.less | 2 +- 4 files changed, 34 insertions(+), 47 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f407a5db31..fa58f2ef34 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2893,7 +2893,7 @@ button.close { padding: 4px 14px; margin-bottom: 0; *margin-left: .3em; - font-size: 13px; + font-size: 14px; line-height: 20px; *line-height: 20px; color: #333333; @@ -2909,11 +2909,11 @@ button.close { background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; - border: 1px solid #cccccc; + border: 1px solid #bbbbbb; *border: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-bottom-color: #b3b3b3; + border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -3012,7 +3012,7 @@ button.close { .btn-mini { padding: 2px 6px; - font-size: 12px; + font-size: 11px; line-height: 16px; } @@ -3324,10 +3324,13 @@ input[type="submit"].btn.btn-mini { .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: 13px; + font-size: 14px; +} + +.btn-group > .btn-mini { + font-size: 11px; } -.btn-group > .btn-mini, .btn-group > .btn-small { font-size: 12px; } @@ -3388,7 +3391,7 @@ input[type="submit"].btn.btn-mini { outline: 0; } -.btn-group > .dropdown-toggle { +.btn-group > .btn + .dropdown-toggle { *padding-top: 4px; padding-right: 8px; *padding-bottom: 4px; @@ -3398,17 +3401,17 @@ input[type="submit"].btn.btn-mini { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn-group > .btn-mini.dropdown-toggle { +.btn-group > .btn-mini + .dropdown-toggle { padding-right: 5px; padding-left: 5px; } -.btn-group > .btn-small.dropdown-toggle { +.btn-group > .btn-small + .dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group > .btn-large.dropdown-toggle { +.btn-group > .btn-large + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } @@ -3449,26 +3452,17 @@ input[type="submit"].btn.btn-mini { } .btn .caret { - margin-top: 7px; + margin-top: 8px; margin-left: 0; } -.btn:hover .caret, -.open.btn-group .caret { - opacity: 1; - filter: alpha(opacity=100); -} - -.btn-mini .caret { - margin-top: 5px; -} - -.btn-small .caret { +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { margin-top: 6px; } .btn-large .caret { - margin-top: 6px; border-top-width: 5px; border-right-width: 5px; border-left-width: 5px; @@ -3487,8 +3481,6 @@ input[type="submit"].btn.btn-mini { .btn-inverse .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; - opacity: 0.75; - filter: alpha(opacity=75); } .btn-group-vertical { diff --git a/less/button-groups.less b/less/button-groups.less index 05235b93bb..cbb237a611 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -34,11 +34,13 @@ } .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: 13px; // redeclare as part 2 of font-size inline-block hack + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes -.btn-group > .btn-mini, +.btn-group > .btn-mini { + font-size: 11px; +} .btn-group > .btn-small { font-size: 12px; } @@ -106,22 +108,22 @@ // ---------------------- // Give the line between buttons some depth -.btn-group > .dropdown-toggle { +.btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 4px; *padding-bottom: 4px; } -.btn-group > .btn-mini.dropdown-toggle { +.btn-group > .btn-mini + .dropdown-toggle { padding-left: 5px; padding-right: 5px; } -.btn-group > .btn-small.dropdown-toggle { +.btn-group > .btn-small + .dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group > .btn-large.dropdown-toggle { +.btn-group > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; } @@ -162,22 +164,16 @@ // Reposition the caret .btn .caret { - margin-top: 7px; + margin-top: 8px; margin-left: 0; } -.btn:hover .caret, -.open.btn-group .caret { - .opacity(100); -} // Carets in other button sizes -.btn-mini .caret { - margin-top: 5px; -} -.btn-small .caret { +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { margin-top: 6px; } .btn-large .caret { - margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; @@ -200,7 +196,6 @@ .caret { border-top-color: @white; border-bottom-color: @white; - .opacity(75); } } diff --git a/less/buttons.less b/less/buttons.less index 7184811b5c..eb0290d8e7 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -12,9 +12,9 @@ .ie7-inline-block(); padding: 4px 14px; margin-bottom: 0; // For input.btn - font-size: 13px; - line-height: 20px; - *line-height: 20px; + font-size: @baseFontSize; + line-height: @baseLineHeight; + *line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; @@ -95,7 +95,7 @@ // Mini .btn-mini { padding: 2px 6px; - font-size: @baseFontSize - 2px; + font-size: @baseFontSize - 3px; line-height: @baseLineHeight - 4px; } diff --git a/less/variables.less b/less/variables.less index 7d627f9ee3..93cd1d639e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -70,7 +70,7 @@ // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #ccc; +@btnBorder: #bbb; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);