From 96891d5c32032cdb8aa8f0ee6f351577c64cb269 Mon Sep 17 00:00:00 2001 From: Mac Shu Date: Wed, 27 Sep 2023 16:14:46 +0800 Subject: [PATCH 1/2] fix: add calc() --- .../sephora_style_guide/mixins/_grid.scss | 24 +++++++++---------- .../sephora_style_guide/variables/_card.scss | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss b/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss index c45f15fe..1263805d 100644 --- a/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss +++ b/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss @@ -9,8 +9,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: calc($gutter / 2); + padding-left: calc($gutter / 2); } } } @@ -29,8 +29,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: calc($gutter / 2); + padding-left: calc($gutter / 2); } } } @@ -42,8 +42,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - margin-right: ($gutter / -2); - margin-left: ($gutter / -2); + margin-right: calc($gutter / -2); + margin-left: calc($gutter / -2); } } } @@ -59,26 +59,26 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: calc($gutter / 2); + padding-left: calc($gutter / 2); } } } @mixin make-col($size, $columns: $grid-columns) { - width: percentage($size / $columns); + width: percentage(calc($size / $columns)); } @mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); + margin-left: percentage(calc($size / $columns)); } @mixin make-col-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); + left: if($size > 0, percentage(calc($size / $columns)), auto); } @mixin make-col-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); + right: if($size > 0, percentage(calc($size / $columns)), auto); } @mixin make-col-modifier($type, $size, $columns) { diff --git a/app/assets/stylesheets/sephora_style_guide/variables/_card.scss b/app/assets/stylesheets/sephora_style_guide/variables/_card.scss index 39359b3a..408cb577 100644 --- a/app/assets/stylesheets/sephora_style_guide/variables/_card.scss +++ b/app/assets/stylesheets/sephora_style_guide/variables/_card.scss @@ -14,7 +14,7 @@ $card-disabled-color: $grey-mid; $card-img-overlay-padding: 16.25px !default; -$card-deck-margin: (map-get($grid-gutter-widths, sm) / 2) !default; +$card-deck-margin: calc(map-get($grid-gutter-widths, sm) / 2) !default; $card-columns-count: 3 !default; $card-columns-gap: 16.25px !default; From 9eb868a80b1ac39283ef15a09ae6626b76a76d2b Mon Sep 17 00:00:00 2001 From: Mac Shu Date: Wed, 27 Sep 2023 17:21:19 +0800 Subject: [PATCH 2/2] fix: brush up --- .../sephora_style_guide/mixins/_grid.scss | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss b/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss index 1263805d..c61fd178 100644 --- a/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss +++ b/app/assets/stylesheets/sephora_style_guide/mixins/_grid.scss @@ -9,8 +9,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: calc($gutter / 2); - padding-left: calc($gutter / 2); + padding-right: calc(#{$gutter} / 2); + padding-left: calc(#{$gutter} / 2); } } } @@ -29,8 +29,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: calc($gutter / 2); - padding-left: calc($gutter / 2); + padding-right: calc(#{$gutter} / 2); + padding-left: calc(#{$gutter} / 2); } } } @@ -42,8 +42,8 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - margin-right: calc($gutter / -2); - margin-left: calc($gutter / -2); + margin-right: calc(#{$gutter} / -2); + margin-left: calc(#{$gutter} / -2); } } } @@ -59,26 +59,26 @@ @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { $gutter: map-get($gutters, $breakpoint); - padding-right: calc($gutter / 2); - padding-left: calc($gutter / 2); + padding-right: calc(#{$gutter} / 2); + padding-left: calc(#{$gutter} / 2); } } } -@mixin make-col($size, $columns: $grid-columns) { - width: percentage(calc($size / $columns)); +@mixin make-col($size, $columns: $grid-columns) { + width: calc(#{$size}/#{$columns} * 100%); } @mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage(calc($size / $columns)); + margin-left: calc(#{$size}/#{$columns} * 100%); } @mixin make-col-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage(calc($size / $columns)), auto); + left: if($size > 0, calc(#{$size}/#{$columns} * 100%), auto); } @mixin make-col-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage(calc($size / $columns)), auto); + right: if($size > 0, calc(#{$size}/#{$columns} * 100%), auto); } @mixin make-col-modifier($type, $size, $columns) {