margin-bottom: $spacer-y;
list-style: none;
background-color: $breadcrumb-bg;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
> li {
display: inline-block;
border-radius: 0;
}
&:first-child:not(:last-child) {
- border-top-right-radius: $btn-border-radius-base;
+ border-top-right-radius: $btn-border-radius;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
- border-bottom-left-radius: $btn-border-radius-base;
+ border-bottom-left-radius: $btn-border-radius;
@include border-top-radius(0);
}
}
cursor: pointer;
user-select: none;
border: $border-width solid transparent;
- @include button-size($padding-base-y, $padding-base-x, $font-size-base, $line-height-base, $btn-border-radius-base);
+ @include button-size($padding-base-y, $padding-base-x, $font-size-base, $line-height-base, $btn-border-radius);
transition: all .2s ease-in-out;
&,
font-size: 90%;
color: $code-color;
background-color: $code-bg;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
}
// User input typically entered via keyboard
margin-left: .25rem;
vertical-align: middle;
content: "";
- border-top: $caret-width-base solid;
- border-right: $caret-width-base solid transparent;
- border-left: $caret-width-base solid transparent;
+ border-top: $caret-width solid;
+ border-right: $caret-width solid transparent;
+ border-left: $caret-width solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
background-color: $dropdown-bg;
background-clip: padding-box;
border: 1px solid $dropdown-border;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
// Dividers (basically an hr) within the dropdown
.caret {
content: "";
border-top: 0;
- border-bottom: $caret-width-base solid;
+ border-bottom: $caret-width solid;
}
// Different positioning for bottom up menu
display: block;
width: 100%;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- // height: $input-height-base;
+ // height: $input-height;
padding: $padding-base-y $padding-base-x;
font-size: $font-size-base;
line-height: $line-height-base;
// &:not(textarea),
// &:not(select[size]),
// &:not(select[multiple]) {
- // height: $input-height-base;
+ // height: $input-height;
// }
// Unstyle the caret on `<select>`s in IE10+.
input[type="datetime-local"],
input[type="month"] {
&.form-control {
- line-height: $input-height-base;
+ line-height: $input-height;
}
&.input-sm,
// horizontal form layout.
.form-control-static {
- min-height: $input-height-base;
+ min-height: $input-height;
// Size it appropriately next to real form controls
padding-top: ($padding-base-y + $border-width);
padding-bottom: ($padding-base-y + $border-width);
// Ensure icons don't overlap text
.form-control {
- padding-right: ($input-height-base * 1.25);
+ padding-right: ($input-height * 1.25);
}
}
// Feedback icon
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
- width: $input-height-base;
- height: $input-height-base;
- line-height: $input-height-base;
+ width: $input-height;
+ height: $input-height;
+ line-height: $input-height;
text-align: center;
pointer-events: none;
}
text-align: center;
background-color: $input-group-addon-bg;
border: 1px solid $input-group-addon-border-color;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
// Sizing
&.form-control-sm {
//
// Used in conjunction with global variables to enable certain theme features.
-@mixin border-radius($radius: $border-radius-base) {
+@mixin border-radius($radius: $border-radius) {
@if $enable-rounded {
border-radius: $radius;
}
.nav-link {
display: block;
border: 1px solid transparent;
- @include border-radius($border-radius-base $border-radius-base 0 0);
+ @include border-radius($border-radius $border-radius 0 0);
@include hover-focus {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
> a,
> span {
margin-left: 0;
- @include border-left-radius($border-radius-base);
+ @include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
- @include border-right-radius($border-radius-base);
+ @include border-right-radius($border-radius);
}
}
}
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-webkit-progress-value::before {
}
.progress[value]::-webkit-progress-value {
background-color: #0074d9;
- border-top-left-radius: $border-radius-base;
- border-bottom-left-radius: $border-radius-base;
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
}
.progress[value="100"]::-webkit-progress-value {
- border-top-right-radius: $border-radius-base;
- border-bottom-right-radius: $border-radius-base;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
}
// Firefox styles must be entirely separate or it busts Webkit styles.
// $-moz-document url-prefix() {
// .progress[value] {
// background-color: #eee;
-// .border-radius($border-radius-base);
+// .border-radius($border-radius);
// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
// }
// .progress[value]::-moz-progress-bar {
// background-color: #0074d9;
-// border-top-left-radius: $border-radius-base;
-// border-bottom-left-radius: $border-radius-base;
+// border-top-left-radius: $border-radius;
+// border-bottom-left-radius: $border-radius;
// }
// .progress[value="0"]::-moz-progress-bar {
// color: $gray-light;
// background-image: none;
// }
// .progress[value="100"]::-moz-progress-bar {
-// border-top-right-radius: $border-radius-base;
-// border-bottom-right-radius: $border-radius-base;
+// border-top-right-radius: $border-radius;
+// border-bottom-right-radius: $border-radius;
// }
// }
@media screen and (min-width:0\0) {
.progress {
background-color: #eee;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress-bar {
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: #0074d9;
- border-top-left-radius: $border-radius-base;
- border-bottom-left-radius: $border-radius-base;
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
}
.progress[width^="0"] {
min-width: 2rem;
background-image: none;
}
.progress[width="100%"] {
- border-top-right-radius: $border-radius-base;
- border-bottom-right-radius: $border-radius-base;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
}
}
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;
- @include border-radius($border-radius-base);
+ @include border-radius($border-radius);
}
// Arrows
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
-$line-height-base: 1.5 !default;
+$line-height: 1.5 !default;
// TODO: nuke this
$line-height-computed: 1 !default;
$line-height-lg: (4/3) !default;
$line-height-sm: 1.5 !default;
-$border-radius-base: .25rem !default;
+$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
-$caret-width-base: .3em !default;
-$caret-width-lg: $caret-width-base !default;
+$caret-width: .3em !default;
+$caret-width-lg: $caret-width !default;
// Tables
$btn-link-disabled-color: $gray-light !default;
// Allows for customizing button radius independently from global border radius
-$btn-border-radius-base: $border-radius-base;
+$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
$input-color: $gray !default;
$input-border: #ccc !default;
-// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
-$input-border-radius: $border-radius-base !default;
+$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-color-placeholder: #999 !default;
-$input-height-base: (($font-size-base * $line-height-base) + ($padding-base-y * 2) + ($border-width * 2)) !default;
+$input-height: (($font-size-base * $line-height-base) + ($padding-base-y * 2) + ($border-width * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-y * 2) + ($border-width * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-y * 2) + ($border-width * 2)) !default;
// Basics of a navbar
// $navbar-height: 50px !default;
$navbar-margin-bottom: $line-height-computed !default;
-$navbar-border-radius: $border-radius-base !default;
+$navbar-border-radius: $border-radius !default;
$navbar-padding-horizontal: $spacer !default;
$navbar-padding-vertical: ($spacer / 2) !default;
$navbar-collapse-max-height: 340px !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
-$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
// Define alert colors, border radius, and padding.
$alert-padding: 15px !default;
-$alert-border-radius: $border-radius-base !default;
+$alert-border-radius: $border-radius !default;
$alert-link-font-weight: bold !default;
$alert-success-bg: $state-success-bg !default;
$progress-bg: #f5f5f5 !default;
$progress-bar-color: #fff !default;
-$progress-border-radius: $border-radius-base !default;
+$progress-border-radius: $border-radius !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default;
$list-group-bg: #fff !default;
$list-group-border: #ddd !default;
-$list-group-border-radius: $border-radius-base !default;
+$list-group-border-radius: $border-radius !default;
$list-group-hover-bg: #f5f5f5 !default;
$list-group-active-color: $component-active-color !default;
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border: #ddd !default;
-$thumbnail-border-radius: $border-radius-base !default;
+$thumbnail-border-radius: $border-radius !default;
// Badges