// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
- padding-right: ($close-font-size + $alert-padding-x * 2);
+ padding-right: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
}
.card-subtitle {
- margin-top: -($card-spacer-y / 2);
+ margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
//
.card-header-tabs {
- margin-right: -($card-spacer-x / 2);
+ margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
- margin-left: -($card-spacer-x / 2);
+ margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}
.card-header-pills {
- margin-right: -($card-spacer-x / 2);
- margin-left: -($card-spacer-x / 2);
+ margin-right: -$card-spacer-x / 2;
+ margin-left: -$card-spacer-x / 2;
}
// Card image
.carousel-caption {
position: absolute;
- right: ((100% - $carousel-caption-width) / 2);
+ right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
- left: ((100% - $carousel-caption-width) / 2);
+ left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
.custom-control {
position: relative;
display: block;
- min-height: ($font-size-base * $line-height-base);
- padding-left: ($custom-control-gutter + $custom-control-indicator-size);
+ min-height: $font-size-base * $line-height-base;
+ padding-left: $custom-control-gutter + $custom-control-indicator-size;
}
.custom-control-inline {
// Background-color and (when enabled) gradient
&::before {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
// Foreground (icon)
&::after {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
- margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+ margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
- border-width: ($custom-range-thumb-height * .5);
+ border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}
}
.figure-img {
- margin-bottom: ($spacer / 2);
+ margin-bottom: $spacer / 2;
line-height: 1;
}
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
- padding-right: ($custom-select-padding-x + $custom-select-indicator-padding);
+ padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: ($popover-arrow-width / -2);
+ margin-left: -$popover-arrow-width / 2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
thead {
th,
td {
- border-bottom-width: (2 * $table-border-width);
+ border-bottom-width: 2 * $table-border-width;
}
}
}
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
-$headings-margin-bottom: ($spacer / 2) !default;
+$headings-margin-bottom: $spacer / 2 !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: ($spacer / 2) !default;
+$nav-divider-margin-y: $spacer / 2 !default;
// Navbar
-$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$card-img-overlay-padding: 1.25rem !default;
-$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
%grid-column {
position: relative;
width: 100%;
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
}
@each $breakpoint in map-keys($breakpoints) {
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;
}
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
- margin-right: ($gutter / -2);
- margin-left: ($gutter / -2);
+ margin-right: -$gutter / 2;
+ margin-left: -$gutter / 2;
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
}
@mixin make-col($size, $columns: $grid-columns) {