Use calc for math using SCSS vars

Context: https://github.com/sass/sass/issues/2981#issuecomment-751815258
This commit is contained in:
kez 2023-02-23 13:30:09 -08:00
parent ae5dbd069e
commit 008f474139
7 changed files with 22 additions and 22 deletions

View File

@ -98,8 +98,8 @@
//
.btn + .dropdown-toggle-split {
padding-right: $input-btn-padding-x * .75;
padding-left: $input-btn-padding-x * .75;
padding-right: calc(#{$input-btn-padding-x} * .75);
padding-left: calc(#{$input-btn-padding-x} * .75);
&::after {
margin-left: 0;
@ -107,13 +107,13 @@
}
.btn-sm + .dropdown-toggle-split {
padding-right: $input-btn-padding-x-sm * .75;
padding-left: $input-btn-padding-x-sm * .75;
padding-right: calc(#{$input-btn-padding-x-sm} * .75);
padding-left: calc(#{$input-btn-padding-x-sm} * .75);
}
.btn-lg + .dropdown-toggle-split {
padding-right: $input-btn-padding-x-lg * .75;
padding-left: $input-btn-padding-x-lg * .75;
padding-right: calc(#{$input-btn-padding-x-lg} * .75);
padding-left: calc(#{$input-btn-padding-x-lg} * .75);
}

View File

@ -43,7 +43,7 @@
}
.card-subtitle {
margin-top: -($card-spacer-y * 0.5);
margin-top: calc(#{$card-spacer-y} * -0.5);
margin-bottom: 0;
}
@ -98,15 +98,15 @@
//
.card-header-tabs {
margin-right: -($card-spacer-x * 0.5);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x * 0.5);
margin-right: calc(#{$card-spacer-x} * -0.5);
margin-bottom: calc(-#{$card-spacer-y});
margin-left: calc(#{$card-spacer-x} * -0.5);
border-bottom: 0;
}
.card-header-pills {
margin-right: -($card-spacer-x * 0.5);
margin-left: -($card-spacer-x * 0.5);
margin-right: calc(#{$card-spacer-x} * -0.5);
margin-left: calc(#{$card-spacer-x} * -0.5);
}
// Card image

View File

@ -117,7 +117,7 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem (-$grid-gutter-width * 0.5);
margin: 1rem calc(-#{$grid-gutter-width} * 0.5);
overflow: auto;
border: solid #f7f7f9;
border-width: .2rem 0 0;
@ -414,8 +414,8 @@
}
.bd-content .highlight {
margin-right: (-$grid-gutter-width * 0.5);
margin-left: (-$grid-gutter-width * 0.5);
margin-right: calc(-#{$grid-gutter-width} * 0.5);
margin-left: calc(-#{$grid-gutter-width} * 0.5);
@include media-breakpoint-up(sm) {
margin-right: 0;

View File

@ -33,7 +33,7 @@
}
.figure-img {
margin-bottom: ($spacer * 0.5);
margin-bottom: calc(#{$spacer} * 0.5);
line-height: 1;
}

View File

@ -1,11 +1,11 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding * 0.5);
padding: $jumbotron-padding calc(#{$jumbotron-padding} * 0.5);
margin-bottom: $jumbotron-padding;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
@include media-breakpoint-up(sm) {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
padding: calc(#{$jumbotron-padding} * 2) $jumbotron-padding;
}
}

View File

@ -17,11 +17,11 @@
thead th {
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
border-bottom: (calc(2 * #{$table-border-width})) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
border-top: (calc(2 * #{$table-border-width})) solid $table-border-color;
}
.table {
@ -57,7 +57,7 @@
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
border-bottom-width: (calc(2 * #{$table-border-width}));
}
}
}

View File

@ -115,7 +115,7 @@ main{
position: relative;
overflow: hidden;
width: 100vw;
left: -($grid-gutter-width*0.5);
left: calc(#{$grid-gutter-width} * -0.5);
}