From b2ebd5c46ca538142c5cd4164328c56053b5c79d Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
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%);
--
GitLab