Content-Length: 8724 | pFad | http://github.com/bootstrap-vue/bootstrap-vue/pull/6834.diff
thub.com diff --git a/src/_variables.scss b/src/_variables.scss index 56e0d8eb153..f1a148d4074 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -30,8 +30,8 @@ $b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default; // Custom switch sizes $b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default; $b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default; -$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg / 2 !default; -$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm / 2 !default; +$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg * 0.5 !default; +$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm * 0.5 !default; $b-custom-switch-indicator-size-lg: calc( #{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4} ) !default; diff --git a/src/components/form-checkbox/_form-checkbox.scss b/src/components/form-checkbox/_form-checkbox.scss index c986ba94e2f..2ac81510db2 100644 --- a/src/components/form-checkbox/_form-checkbox.scss +++ b/src/components/form-checkbox/_form-checkbox.scss @@ -7,7 +7,7 @@ padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg; .custom-control-label::before { - top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2; + top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5; left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg); width: $b-custom-control-indicator-size-lg; height: $b-custom-control-indicator-size-lg; @@ -15,7 +15,7 @@ } .custom-control-label::after { - top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2; + top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5; left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg); width: $b-custom-control-indicator-size-lg; height: $b-custom-control-indicator-size-lg; @@ -30,7 +30,7 @@ padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm; .custom-control-label::before { - top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2; + top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5; left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm); width: $b-custom-control-indicator-size-sm; height: $b-custom-control-indicator-size-sm; @@ -38,7 +38,7 @@ } .custom-control-label::after { - top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2; + top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5; left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm); width: $b-custom-control-indicator-size-sm; height: $b-custom-control-indicator-size-sm; @@ -55,7 +55,7 @@ line-height: $line-height-lg; &::before { - top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2; + top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5; height: $b-custom-control-indicator-size-lg; left: -($b-custom-switch-width-lg + $b-custom-control-gutter-lg); width: $b-custom-switch-width-lg; @@ -64,7 +64,7 @@ &::after { top: calc( - #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2)} + #{$custom-control-indicator-border-width * + #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5)} + #{$custom-control-indicator-border-width * 2} ); left: calc( @@ -94,7 +94,7 @@ line-height: $line-height-sm; &::before { - top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2; + top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5; left: -($b-custom-switch-width-sm + $b-custom-control-gutter-sm); width: $b-custom-switch-width-sm; height: $b-custom-control-indicator-size-sm; @@ -103,7 +103,7 @@ &::after { top: calc( - #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2)} + #{$custom-control-indicator-border-width * + #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5)} + #{$custom-control-indicator-border-width * 2} ); left: calc( diff --git a/src/components/form-input/_form-input.scss b/src/components/form-input/_form-input.scss index b5008125086..ae18b1bbd8e 100644 --- a/src/components/form-input/_form-input.scss +++ b/src/components/form-input/_form-input.scss @@ -17,20 +17,20 @@ input[type="color"].form-control { height: $input-height; // We use the smaller padding to make the color block larger - padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2); + padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5); } input[type="color"].form-control.form-control-sm, .input-group-sm input[type="color"].form-control { height: $input-height-sm; // We use the smaller padding to make the color block larger - padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2); + padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5); } input[type="color"].form-control.form-control-lg, .input-group-lg input[type="color"].form-control { height: $input-height-lg; - padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2); + padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5); } input[type="color"].form-control:disabled { diff --git a/src/components/form-radio/_form-radio.scss b/src/components/form-radio/_form-radio.scss index 3a66c461b9a..4e7a38fda44 100644 --- a/src/components/form-radio/_form-radio.scss +++ b/src/components/form-radio/_form-radio.scss @@ -7,7 +7,7 @@ padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg; .custom-control-label::before { - top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2; + top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5; left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg); width: $b-custom-control-indicator-size-lg; height: $b-custom-control-indicator-size-lg; @@ -15,7 +15,7 @@ } .custom-control-label::after { - top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2; + top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5; left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg); width: $b-custom-control-indicator-size-lg; height: $b-custom-control-indicator-size-lg; @@ -30,7 +30,7 @@ padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm; .custom-control-label::before { - top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2; + top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5; left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm); width: $b-custom-control-indicator-size-sm; height: $b-custom-control-indicator-size-sm; @@ -38,7 +38,7 @@ } .custom-control-label::after { - top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2; + top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5; left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm); width: $b-custom-control-indicator-size-sm; height: $b-custom-control-indicator-size-sm; diff --git a/src/components/skeleton/_skeleton.scss b/src/components/skeleton/_skeleton.scss index deaed34a292..77c84800ab5 100644 --- a/src/components/skeleton/_skeleton.scss +++ b/src/components/skeleton/_skeleton.scss @@ -104,7 +104,7 @@ // Fade animation .b-skeleton-animate-fade { - animation: b-skeleton-animate-fade ($b-skeleton-animation-duration / 2) ease-in-out alternate + animation: b-skeleton-animate-fade ($b-skeleton-animation-duration * 0.5) ease-in-out alternate infinite; @media (prefers-reduced-motion: reduce) { @@ -123,7 +123,7 @@ // Throb animation .b-skeleton-animate-throb { - animation: b-skeleton-animate-throb ($b-skeleton-animation-duration / 2) ease-in alternate + animation: b-skeleton-animate-throb ($b-skeleton-animation-duration * 0.5) ease-in alternate infinite; @media (prefers-reduced-motion: reduce) {Fetched URL: http://github.com/bootstrap-vue/bootstrap-vue/pull/6834.diff
Alternative Proxies: