From 27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 Mon Sep 17 00:00:00 2001 From: Wicklow Date: Thu, 16 Feb 2023 12:30:30 +0100 Subject: Refactoring class helpers + add bootstrap mixins --- client/src/sass/include/_bootstrap-mixins.scss | 5 +++++ client/src/sass/include/_mixins.scss | 29 +++++++++++++------------- 2 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 client/src/sass/include/_bootstrap-mixins.scss (limited to 'client/src/sass/include') diff --git a/client/src/sass/include/_bootstrap-mixins.scss b/client/src/sass/include/_bootstrap-mixins.scss new file mode 100644 index 000000000..2be16ebad --- /dev/null +++ b/client/src/sass/include/_bootstrap-mixins.scss @@ -0,0 +1,5 @@ +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/maps'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/utilities'; \ No newline at end of file diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 34af9e8c1..bd467a0ed 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,6 +1,9 @@ @use 'sass:math'; @use '_variables' as *; +@import '_bootstrap-mixins'; + + @mixin disable-default-a-behaviour { &:hover, &:focus, @@ -919,55 +922,53 @@ @mixin margin ($block-start, $inline-end, $block-end, $inline-start) { @include margin-left($inline-start); @include margin-right($inline-end); - - margin-top: $block-start; - margin-bottom: $block-end; + @include margin-top($block-start); + @include margin-bottom($block-end); } @mixin padding ($block-start, $inline-end, $block-end, $inline-start) { @include padding-left($inline-start); @include padding-right($inline-end); - - padding-top: $block-start; - padding-bottom: $block-end; + @include padding-top($block-start); + @include padding-bottom($block-end); } @mixin margin-left ($value) { @supports (margin-inline-start: $value) { - margin-inline-start: $value; + @include rfs($value, margin-inline-start); } @supports not (margin-inline-start: $value) { - margin-left: $value; + @include rfs($value, margin-left); } } @mixin margin-right ($value) { @supports (margin-inline-end: $value) { - margin-inline-end: $value; + @include rfs($value, margin-inline-end); } @supports not (margin-inline-end: $value) { - margin-right: $value; + @include rfs($value, margin-right); } } @mixin padding-left ($value) { @supports (padding-inline-start: $value) { - padding-inline-start: $value; + @include rfs($value, padding-inline-start); } @supports not (padding-inline-start: $value) { - padding-left: $value; + @include rfs($value, padding-left); } } @mixin padding-right ($value) { @supports (padding-inline-end: $value) { - padding-inline-end: $value; + @include rfs($value, padding-inline-end); } @supports not (padding-inline-end: $value) { - padding-right: $value; + @include rfs($value, padding-right); } } -- cgit v1.2.3