bootstrap-email 1.5.2 → 1.7.0

data/core/scss/components/_table.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../variable";
+@use "../helper";
+
 //
 // Basic Bootstrap table
 //
@@ -5,20 +9,20 @@
 .table {
   width: 100%;
   max-width: 100%;
-  background-color: $table-background-color; // Reset for nesting within parents with `background-color`.
+  background-color: helper.hex(variable.$table-background-color); // Reset for nesting within parents with `background-color`.
 
   & > thead > tr > th {
     text-align: left;
     vertical-align: bottom;
-    border-bottom: (2 * $table-border-width) solid $table-border-color;
+    border-bottom: (2 * variable.$table-border-width) solid variable.$table-border-color;
   }
 
   & > thead > tr > th,
   & > tbody > tr > td,
   & > tfoot > tr > td {
-    padding: 0.75 * $font-size-base;
+    padding: 0.75 * variable.$font-size-base;
     vertical-align: top;
-    border-top: $table-border-width solid $table-border-color;
+    border-top: variable.$table-border-width solid variable.$table-border-color;
   }
 }
 
@@ -42,7 +46,7 @@
   & > thead > tr > th,
   & > tbody > tr > td,
   & > tfoot > tr > td {
-    padding: 0.3 * $font-size-base;;
+    padding: 0.3 * variable.$font-size-base;;
   }
 }
 
@@ -52,18 +56,18 @@
 // Add borders all around the table and between all the columns.
 
 .table-bordered {
-  border: $table-border-width solid $table-border-color;
+  border: variable.$table-border-width solid helper.hex(variable.$table-border-color);
 
   & > thead > tr > th,
   & > tbody > tr > td,
   & > tfoot > tr > td {
-    border: $table-border-width solid $table-border-color;
+    border: variable.$table-border-width solid helper.hex(variable.$table-border-color);
   }
 
   & > thead {
     & > tr > th,
     & > tr > td {
-      border-bottom-width: (2 * $table-border-width);
+      border-bottom-width: (2 * variable.$table-border-width);
     }
   }
 }
@@ -75,7 +79,7 @@
 
 .table-striped {
   & > tbody > tr:nth-of-type(odd) {
-    background-color: $table-accent-bg;
+    background-color: helper.hex(variable.$table-accent-bg);
   }
 }
 
@@ -85,12 +89,12 @@
 // Exact selectors below required to override `.table-striped` and prevent
 // inheritance to nested tables.
 
-@each $color, $value in $theme-colors {
+@each $color, $value in variable.$theme-colors {
   .table-#{$color} {
     &,
     > th,
     > td {
-      background-color: lighten($value, 40%);
+      background-color: helper.hex(helper.tint-color($value, 85%));
     }
   }
 }
@@ -103,21 +107,21 @@
 
 .thead-dark {
   th {
-    color: $white;
-    background-color: $gray-900;
+    color: helper.hex(variable.$white);
+    background-color: helper.hex(variable.$gray-900);
   }
 }
 
 .thead-light {
   th {
-    color: $gray-700;
-    background-color: $gray-200;
+    color: helper.hex(variable.$gray-700);
+    background-color: helper.hex(variable.$gray-200);
   }
 }
 
 .table-dark {
-  color: $white;
-  background-color: $gray-900;
+  color: helper.hex(variable.$white);
+  background-color: helper.hex(variable.$gray-900);
 
   & > thead > tr > th,
   & > tbody > tr > td,

data/core/scss/helpers/_functions.scss

@@ -1,31 +1,45 @@
+@use "sass:color";
 @use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 
+// Calculate the color contrast for a given color and returns white or black based on the YIQ formula
 @function color-contrast($color) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
 
   $yiq: math.div((($r * 299) + ($g * 587) + ($b * 114)), 1000);
 
   @if ($yiq >= 150) {
     @return #111111;
   } @else {
-    @return $white;
+    @return #ffffff;
   }
 }
 
+// Lighten a color by adding white to it
 @function tint-color($color, $level) {
-  @return mix(white, $color, $level);
+  @return color.mix(white, $color, $level);
 }
 
+// Darken a color by adding black to it
 @function shade-color($color, $level) {
-  @return mix(black, $color, $level);
+  @return color.mix(black, $color, $level);
 }
 
+// Convert a color to a hex string, needed so sass doesn't return an rgb string
+@function hex($color) {
+  @if not meta.type-of($color) == 'color' or $color == null or $color == transparent {
+    @return $color;
+  }
+  @return string.unquote('#' + string.slice(color.ie-hex-str($color), 4));
+}
+
+// Strip the unit from a number
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
     @return math.div($number, ($number * 0 + 1));
   }
-
   @return $number;
 }

data/core/scss/helpers/_selectors_for_utils.scss

@@ -66,19 +66,6 @@
   }
 }
 
-//
-// Padding
-//
-@mixin padding-util($class) {
-  #{$class} {
-    &:not(table),
-    &:not(.btn) > tbody > tr > td,
-    &.btn td a {
-      @content
-    }
-  }
-}
-
 //
 // Spacer
 //
@@ -126,3 +113,41 @@
     }
   }
 }
+
+//
+// Padding
+//
+@mixin padding-util($class) {
+  #{$class} {
+    &:not(table),
+    &:not(.btn) > tbody > tr > td,
+    &.btn td a {
+      @content
+    }
+  }
+}
+
+//
+// Padding group
+//
+@mixin padding-group($prefix, $size, $value) {
+  @include padding-util('.p-#{$prefix}#{$size}') {
+    padding: $value;
+  }
+
+  @include padding-util('.pt-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
+    padding-top: $value;
+  }
+
+  @include padding-util('.pr-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
+    padding-right: $value;
+  }
+
+  @include padding-util('.pb-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
+    padding-bottom: $value;
+  }
+
+  @include padding-util('.pl-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
+    padding-left: $value;
+  }
+}

data/core/scss/utilities/_background.scss

@@ -1,5 +1,8 @@
-@each $name, $color in $all-colors {
-  @include background-color-util('.bg-#{$name}') {
-    background-color: $color;
+@use "../helper";
+@use "../variable";
+
+@each $name, $color in variable.$all-colors {
+  @include helper.background-color-util('.bg-#{$name}') {
+    background-color: helper.hex($color);
   }
 }

data/core/scss/utilities/_border-radius.scss

@@ -1,20 +1,23 @@
-@each $name, $radius in $border-radiuses {
-  @include border-radius-util('.rounded#{$name}') {
+@use "../helper";
+@use "../variable";
+
+@each $name, $radius in variable.$border-radiuses {
+  @include helper.border-radius-util('.rounded#{$name}') {
     border-radius: $radius;
   }
-  @include border-radius-util('.rounded-top#{$name}') {
+  @include helper.border-radius-util('.rounded-top#{$name}') {
     border-top-left-radius: $radius;
     border-top-right-radius: $radius;
   }
-  @include border-radius-util('.rounded-right#{$name}') {
+  @include helper.border-radius-util('.rounded-right#{$name}') {
     border-top-right-radius: $radius;
     border-bottom-right-radius: $radius;
   }
-  @include border-radius-util('.rounded-bottom#{$name}') {
+  @include helper.border-radius-util('.rounded-bottom#{$name}') {
     border-bottom-right-radius: $radius;
     border-bottom-left-radius: $radius;
   }
-  @include border-radius-util('.rounded-left#{$name}') {
+  @include helper.border-radius-util('.rounded-left#{$name}') {
     border-top-left-radius: $radius;
     border-bottom-left-radius: $radius;
   }

data/core/scss/utilities/_border.scss

@@ -1,13 +1,16 @@
-@each $name, $width in $border-widths {
-  .border#{$name}         { border: $width solid $border-color !important; }
-  .border-top#{$name}     { border-top: $width solid $border-color !important; }
-  .border-right#{$name}   { border-right: $width solid $border-color !important; }
-  .border-bottom#{$name}  { border-bottom: $width solid $border-color !important; }
-  .border-left#{$name}    { border-left: $width solid $border-color !important; }
+@use "../helper";
+@use "../variable";
+
+@each $name, $width in variable.$border-widths {
+  .border#{$name}         { border: $width solid helper.hex(variable.$border-color) !important; }
+  .border-top#{$name}     { border-top: $width solid helper.hex(variable.$border-color) !important; }
+  .border-right#{$name}   { border-right: $width solid helper.hex(variable.$border-color) !important; }
+  .border-bottom#{$name}  { border-bottom: $width solid helper.hex(variable.$border-color) !important; }
+  .border-left#{$name}    { border-left: $width solid helper.hex(variable.$border-color) !important; }
 }
 
-@each $name, $color in $all-colors {
-  @include border-color-util('.border-#{$name}') {
-    border-color: $color !important;
+@each $name, $color in variable.$all-colors {
+  @include helper.border-color-util('.border-#{$name}') {
+    border-color: helper.hex($color) !important;
   }
 }

data/core/scss/utilities/_color.scss

@@ -1,9 +1,12 @@
-@each $name, $color in $all-colors {
-  @include color-util('.text-#{$name}') {
-    color: $color;
+@use "../helper";
+@use "../variable";
+
+@each $name, $color in variable.$all-colors {
+  @include helper.color-util('.text-#{$name}') {
+    color: helper.hex($color);
   }
 }
 
-@include color-util('.text-muted') {
-  color: $gray-600;
+@include helper.color-util('.text-muted') {
+  color: helper.hex(variable.$gray-600);
 }

data/core/scss/utilities/_display.scss

@@ -1,5 +1,8 @@
-@each $prefix in $breakpoints {
-  @each $display in $display-type {
+@use "../helper";
+@use "../variable";
+
+@each $prefix in variable.$breakpoints {
+  @each $display in variable.$display-type {
     .d-#{$prefix}#{$display} {
       display: $display;
     }

data/core/scss/utilities/_sizing.scss

@@ -1,33 +1,36 @@
-@each $prefix in $breakpoints {
-  @each $name, $property in $sizing-types {
-    @include sizing-util('.max-#{$name}-#{$prefix}full') {
+@use "../helper";
+@use "../variable";
+
+@each $prefix in variable.$breakpoints {
+  @each $name, $property in variable.$sizing-types {
+    @include helper.sizing-util('.max-#{$name}-#{$prefix}full') {
       max-#{$property}: 100%;
       -premailer-#{$property}: 100%;
       #{$property}: 100%;
     }
-    @each $size, $value in $sizing {
-      @include sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
+    @each $size, $value in variable.$sizing {
+      @include helper.sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
         max-#{$property}: $value;
-        -premailer-#{$property}: strip-unit($value);
+        -premailer-#{$property}: helper.strip-unit($value);
         #{$property}: 100%;
       }
     }
   }
 }
 
-@each $prefix in $breakpoints {
-  @each $name, $property in $sizing-types {
-    @include sizing-util('.#{$name}-#{$prefix}full') {
+@each $prefix in variable.$breakpoints {
+  @each $name, $property in variable.$sizing-types {
+    @include helper.sizing-util('.#{$name}-#{$prefix}full') {
       -premailer-#{$property}: 100%;
       #{$property}: 100%;
     }
-    @include sizing-util('.#{$name}-#{$prefix}auto') {
+    @include helper.sizing-util('.#{$name}-#{$prefix}auto') {
       -premailer-#{$property}: auto;
       #{$property}: auto;
     }
-    @each $size, $value in $sizing {
-      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
-        -premailer-#{$property}: strip-unit($value);
+    @each $size, $value in variable.$sizing {
+      @include helper.sizing-util('.#{$name}-#{$prefix}#{$size}') {
+        -premailer-#{$property}: helper.strip-unit($value);
         #{$property}: $value;
       }
     }

data/core/scss/utilities/_spacing.scss

@@ -1,18 +1,21 @@
+@use "../helper";
+@use "../variable";
+
 // Padding Util
-@each $prefix in $breakpoints {
-  @each $size, $value in $spacers {
-    @include padding-group($prefix, $size, $value);
+@each $prefix in variable.$breakpoints {
+  @each $size, $value in variable.$spacers {
+    @include helper.padding-group($prefix, $size, $value);
   }
 }
 
 // Spacing Util
-@each $prefix in $breakpoints {
-  @each $size, $value in $spacers {
-    @include spacer-util('.s-#{$prefix}#{$size}') {
+@each $prefix in variable.$breakpoints {
+  @each $size, $value in variable.$spacers {
+    @include helper.spacer-util('.s-#{$prefix}#{$size}') {
       font-size: $value;
       line-height: $value;
       height: $value;
-      -premailer-height: strip-unit($value);
+      -premailer-height: helper.strip-unit($value);
     }
   }
 }

data/core/scss/utilities/_typography.scss

@@ -1,43 +1,46 @@
+@use "../helper";
+@use "../variable";
+
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 0;
-  padding-top: $headings-margin-top;
-  padding-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  color: $headings-color;
+  padding-top: variable.$headings-margin-top;
+  padding-bottom: variable.$headings-margin-bottom;
+  font-family: variable.$headings-font-family;
+  font-weight: variable.$headings-font-weight;
+  color: helper.hex(variable.$headings-color);
   text-align: left;
   vertical-align: baseline;
 }
 
-@each $name, $size in $headings {
+@each $name, $size in variable.$headings {
   h#{$name}, .h#{$name} {
     font-size: $size;
-    line-height: $size * $headings-line-height;
+    line-height: $size * variable.$headings-line-height;
   }
 }
 
-@each $name, $size in $font-size {
+@each $name, $size in variable.$font-size {
   .text-#{$name} {
     font-size: $size;
-    line-height: $size * $headings-line-height;
+    line-height: $size * variable.$headings-line-height;
   }
 }
 
-@each $name, $size in $line-height {
+@each $name, $size in variable.$line-height {
   .lh-#{$name} {
     line-height: $size;
   }
 }
 
 @for $n from 1 through 9 {
-  @include font-weight-util('.fw-#{$n * 100}') {
+  @include helper.font-weight-util('.fw-#{$n * 100}') {
     font-weight: #{$n * 100} !important;
   }
 }
 
-@each $align in $text-align {
-  @include text-align-util('.text-#{$align}') {
+@each $align in variable.$text-align {
+  @include helper.text-align-util('.text-#{$align}') {
     text-align: $align !important;
   }
 }

data/core/scss/utilities/_valign.scss

@@ -1,5 +1,8 @@
-@each $align in $vertical-align {
-  @include valign-util('.ay-#{$align}') {
+@use "../helper";
+@use "../variable";
+
+@each $align in variable.$vertical-align {
+  @include helper.valign-util('.ay-#{$align}') {
     vertical-align: $align !important;
   }
 }

data/core/scss/variables/_body.scss

@@ -1,2 +1,4 @@
-$body-color: $black !default;
-$body-bg: $white !default;
+@use "colors";
+
+$body-color: colors.$black !default;
+$body-bg: colors.$white !default;

data/core/scss/variables/_borders.scss

@@ -1,4 +1,6 @@
-$border-color:       $gray-300 !default;
+@use "colors";
+
+$border-color:       colors.$gray-300 !default;
 $border-width:       1px !default;
 $border-radius-sm:   3px !default;
 $border-radius:      6px !default;

data/core/scss/variables/_buttons.scss

@@ -1,7 +1,13 @@
+@use "sass:map";
+@use "../helper";
+@use "colors";
+@use "borders";
+@use "typography";
+
 $btn-padding-y:               8px !default;
 $btn-padding-x:               12px !default;
-$btn-font-family:             $font-family-base !default;
-$btn-font-size:               $font-size-base !default;
+$btn-font-family:             typography.$font-family-base !default;
+$btn-font-size:               typography.$font-size-base !default;
 $btn-line-height:             1.25 * $btn-font-size !default;
 
 $btn-padding-y-sm:            0.25 * $btn-font-size !default;
@@ -14,11 +20,11 @@ $btn-padding-x-lg:            $btn-font-size !default;
 $btn-font-size-lg:            1.25 * $btn-font-size !default;
 $btn-line-height-lg:          $btn-line-height * 1.25 !default;
 
-$btn-border-width:            $border-width !default;
-$btn-font-weight:             $font-weight-base !default;
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
+$btn-border-width:            borders.$border-width !default;
+$btn-font-weight:             typography.$font-weight-base !default;
+$btn-border-radius:           borders.$border-radius !default;
+$btn-border-radius-lg:        borders.$border-radius-lg !default;
+$btn-border-radius-sm:        borders.$border-radius-sm !default;
 
 
 /** Button Theme Structure Example
@@ -37,10 +43,10 @@ $btn-border-radius-sm:        $border-radius-sm !default;
  * )
 */
 $tmp-btn-themes: ();
-@each $name, $color in $all-colors {
+@each $name, $color in colors.$all-colors {
   @if $name != "transparent" {
-    $tmp-btn-themes: map-merge($tmp-btn-themes, ($name: ("background-color": $color, "color": color-contrast($color), "border-color": $color)));
-    $tmp-btn-themes: map-merge($tmp-btn-themes, ("outline-#{$name}": ("background-color": transparent, "color": $color, "border-color": $color)));
+    $tmp-btn-themes: map.merge($tmp-btn-themes, ($name: ("background-color": $color, "color": helper.color-contrast($color), "border-color": $color)));
+    $tmp-btn-themes: map.merge($tmp-btn-themes, ("outline-#{$name}": ("background-color": transparent, "color": $color, "border-color": $color)));
   }
 }