Add @btn-border-radius variables (#16271)

twbs · Apr 26, 2015 · 9a451d4 · 9a451d4
1 parent d0926f2
commit 9a451d4
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 11 deletions.
diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map
diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html
@@ -400,6 +400,20 @@ <h2 id="buttons">Buttons</h2>
     <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label>
     <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control"/>
   </div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-base">@btn-border-radius-base</label>
+    <input id="input-@btn-border-radius-base" type="text" aria-describedby="help-block-@btn-border-radius-base" value="@border-radius-base" data-var="@btn-border-radius-base" class="form-control"/>
+    <p id="help-block-@btn-border-radius-base" class="help-block">Allows for customizing button radius independently from global border radius</p>
+  </div>
+  <div class="clearfix"></div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-large">@btn-border-radius-large</label>
+    <input id="input-@btn-border-radius-large" type="text" value="@border-radius-large" data-var="@btn-border-radius-large" class="form-control"/>
+  </div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-small">@btn-border-radius-small</label>
+    <input id="input-@btn-border-radius-small" type="text" value="@border-radius-small" data-var="@btn-border-radius-small" class="form-control"/>
+  </div>
 </div>
 <h2 id="forms">Forms</h2>
 <div class="row">

diff --git a/docs/assets/js/raw-files.min.js b/docs/assets/js/raw-files.min.js
diff --git a/docs/dist/css/bootstrap.css.map b/docs/dist/css/bootstrap.css.map
diff --git a/docs/dist/css/bootstrap.min.css b/docs/dist/css/bootstrap.min.css
diff --git a/less/button-groups.less b/less/button-groups.less
@@ -173,11 +173,11 @@
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
-    border-top-right-radius: @border-radius-base;
+    border-top-right-radius: @btn-border-radius-base;
     .border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
-    border-bottom-left-radius: @border-radius-base;
+    border-bottom-left-radius: @btn-border-radius-base;
     .border-top-radius(0);
   }
 }

diff --git a/less/buttons.less b/less/buttons.less
@@ -17,7 +17,7 @@
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
+  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
   .user-select(none);
 
   &,
@@ -132,14 +132,14 @@
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 .btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 
 

diff --git a/less/variables.less b/less/variables.less
@@ -170,6 +170,11 @@
 
 @btn-link-disabled-color:        @gray-light;
 
+//** Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @border-radius-base;
+@btn-border-radius-large:        @border-radius-large;
+@btn-border-radius-small:        @border-radius-small;
+
 
 //== Forms
 //