rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

Convert v4-dev calc() left overs to add/subtract functions

Browse Source
This commit is contained in:
Martijn Cuppens 2019-11-01 10:32:21 +01:00 committed by XhmikosR
parent 90d4b72e06
commit b0b8d3c982
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_custom-forms.scss
View File

@ -183,8 +183,8 @@
} }
&::after { &::after {
top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size; width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size; height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color; background-color: $custom-control-indicator-border-color;
@ -378,7 +378,7 @@
.custom-range { .custom-range {
width: 100%; width: 100%;
height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding padding: 0; // Need to reset padding
background-color: transparent; background-color: transparent;
appearance: none; appearance: none;

12
scss/_forms.scss
View File

@ -86,23 +86,23 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label (or legend) // For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls. // text to align with the form controls.
.col-form-label { .col-form-label {
padding-top: calc(#{$input-padding-y} + #{$input-border-width}); padding-top: add($input-padding-y, $input-border-width);
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default @include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height; line-height: $input-line-height;
} }
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg); @include font-size($input-font-size-lg);
line-height: $input-line-height-lg; line-height: $input-line-height-lg;
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm); @include font-size($input-font-size-sm);
line-height: $input-line-height-sm; line-height: $input-line-height-sm;
} }

4
scss/_variables.scss
View File

@ -567,7 +567,7 @@ $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xml
$custom-switch-width: $custom-control-indicator-size * 1.75 !default; $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
$custom-select-padding-y: $input-padding-y !default; $custom-select-padding-y: $input-padding-y !default;
$custom-select-padding-x: $input-padding-x !default; $custom-select-padding-x: $input-padding-x !default;
@ -586,7 +586,7 @@ $custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default; $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) $custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default; $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;

6
site/docs/4.3/assets/scss/_sidebar.scss
View File

@ -8,7 +8,7 @@
@supports (position: sticky) { @supports (position: sticky) {
position: sticky; position: sticky;
top: 4rem; top: 4rem;
height: calc(100vh - 4rem); height: subtract(100vh, 4rem);
overflow-y: auto; overflow-y: auto;
} }
order: 2; order: 2;
@ -55,7 +55,7 @@
position: sticky; position: sticky;
top: 4rem; top: 4rem;
z-index: 1000; z-index: 1000;
height: calc(100vh - 4rem); height: subtract(100vh, 4rem);
} }
border-right: 1px solid rgba(0, 0, 0, .1); border-right: 1px solid rgba(0, 0, 0, .1);
} }
@ -73,7 +73,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@supports (position: sticky) { @supports (position: sticky) {
max-height: calc(100vh - 9rem); max-height: subtract(100vh, 9rem);
overflow-y: auto; overflow-y: auto;
} }
} }