bootstrap-email 0.3.0 → 1.0.0.alpha1

data/core/scss/_selectors_for_utils.scss

@@ -0,0 +1,100 @@
+//
+// Background color
+//
+@mixin background-color-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Color
+//
+@mixin color-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td,
+    &.btn td a {
+      @content
+    }
+  }
+}
+
+//
+// Border radius
+//
+@mixin border-radius-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td,
+    &.btn td,
+    &.btn td a {
+      @content
+    }
+  }
+}
+
+//
+// Border color
+//
+@mixin border-color-util($class) {
+  #{$class} {
+    &,
+    &.btn td a,
+    &.hr td {
+      @content
+    }
+  }
+}
+
+//
+// Sizing (width & height)
+//
+@mixin sizing-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Padding
+//
+@mixin padding-util($class) {
+  #{$class} {
+    &:not(table),
+    &:not(.btn) > tbody > tr > td,
+    &.btn td a {
+      @content
+    }
+  }
+}
+
+//
+// Spacer
+//
+@mixin spacer-util($class) {
+  #{$class} {
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Font weight
+//
+@mixin font-weight-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td,
+    &.btn td a  {
+      @content
+    }
+  }
+}

data/core/scss/_utilities.scss

@@ -0,0 +1,125 @@
+$breakpoints: ('', 'lg-');
+
+$headings: (
+  1: 2.25 * $font-size-base,
+  2: 2 * $font-size-base,
+  3: 1.75 * $font-size-base,
+  4: 1.5 * $font-size-base,
+  5: 1.25 * $font-size-base,
+  6: 1 * $font-size-base
+) !default;
+
+$font-size: (
+  'xs': 0.75 * $font-size-base,
+  'sm': 0.875 * $font-size-base,
+  'base': 1 * $font-size-base,
+  'lg': 1.125 * $font-size-base,
+  'xl': 1.25 * $font-size-base,
+  '2xl': 1.5 * $font-size-base,
+  '3xl': 1.875 * $font-size-base,
+  '4xl': 2.25 * $font-size-base,
+  '5xl': 3 * $font-size-base,
+  '6xl': 4 * $font-size-base,
+  '7xl': 5 * $font-size-base
+) !default;
+
+$line-height: (
+  1: 1,
+  'sm': 1.25,
+  'base': 1.5,
+  'lg': 2
+) !default;
+
+$size-scale: 4px;
+$spacers: (
+  0: 0,
+  1: 1 * $size-scale,
+  2: 2 * $size-scale,
+  3: 3 * $size-scale,
+  4: 4 * $size-scale,
+  5: 5 * $size-scale,
+  6: 6 * $size-scale,
+  7: 7 * $size-scale,
+  8: 8 * $size-scale,
+  9: 9 * $size-scale,
+  10: 10 * $size-scale,
+  12: 12 * $size-scale,
+  16: 16 * $size-scale,
+  20: 20 * $size-scale,
+  24: 24 * $size-scale,
+  32: 32 * $size-scale,
+  40: 40 * $size-scale
+) !default;
+
+$sizing: (
+  0: 0,
+  1: 1 * $size-scale,
+  2: 2 * $size-scale,
+  3: 3 * $size-scale,
+  4: 4 * $size-scale,
+  5: 5 * $size-scale,
+  6: 6 * $size-scale,
+  7: 7 * $size-scale,
+  8: 8 * $size-scale,
+  9: 9 * $size-scale,
+  10: 10 * $size-scale,
+  12: 12 * $size-scale,
+  16: 16 * $size-scale,
+  20: 20 * $size-scale,
+  24: 24 * $size-scale,
+  32: 32 * $size-scale,
+  40: 40 * $size-scale,
+  48: 48 * $size-scale,
+  56: 56 * $size-scale,
+  64: 64 * $size-scale,
+  80: 80 * $size-scale,
+  96: 96 * $size-scale,
+  112: 112 * $size-scale,
+  128: 128 * $size-scale,
+  144: 144 * $size-scale,
+  150: 150 * $size-scale
+) !default;
+$sizing-types: (
+  'w': 'width',
+  'h': 'height'
+);
+
+$grid-cols: (
+  1: 8.333333%,
+  2: 16.666667%,
+  3: 25%,
+  4: 33.333333%,
+  5: 41.666667%,
+  6: 50%,
+  7: 58.333333%,
+  8: 66.666667%,
+  9: 75%,
+  10: 83.333333%,
+  11: 91.666667%,
+  12: 100%
+);
+
+$display-type: (
+  inline,
+  inline-block,
+  block,
+  table,
+  none
+) !default;
+
+$border-widths: (
+  '': 1px,
+  '-2': 2px,
+  '-3': 3px,
+  '-4': 4px,
+  '-5': 5px,
+  '-0': 0px
+) !default;
+
+$border-radiuses: (
+  '-sm': 3px,
+  '': 6px,
+  '-lg': 9px,
+  '-xl': 12px,
+  '-0': 0px
+) !default;

data/core/scss/_variables.scss

@@ -0,0 +1,52 @@
+$font-size-base: 16px !default;
+$font-weight-base: normal !default;
+$font-family-sans-serif: Helvetica, Arial, sans-serif !default;
+$font-family-base: $font-family-sans-serif !default;
+$border-width: 1px !default;
+$line-height-base: 1.5 !default;
+$headings-line-height: 1.2 !default;
+$headings-margin-top:         0 !default;
+$headings-margin-bottom:      0 !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        500 !default;
+$headings-color:              null !default;
+
+$border-color: $gray-300 !default;
+
+$border-radius-sm: 3px !default;
+$border-radius: 6px !default;
+$border-radius-lg: 9px !default;
+$border-radius-xl: 12px !default;
+$border-radius-pill: 9999px !default;
+
+$table-accent-bg: #f2f2f2 !default;
+$table-background-color: null !default;
+$table-border-color: $border-color !default;
+$table-border-width: $border-width !default;
+
+$body-color: $black !default;
+$body-bg: $white !default;
+
+$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-line-height:             1.25 * $btn-font-size !default;
+
+$btn-padding-y-sm:            0.25 * $btn-font-size !default;
+$btn-padding-x-sm:            0.5 * $btn-font-size !default;
+$btn-font-size-sm:            0.875 * $btn-font-size !default;
+$btn-line-height-sm:          $btn-line-height * 0.875 !default;
+
+$btn-padding-y-lg:            0.5 * $btn-font-size !default;
+$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;
+
+$link-color:                  $primary !default;

data/core/{sass → scss/components}/_alert.scss

@@ -1,7 +1,6 @@
 .alert {
   border-collapse: separate !important;
   border: 0;
-  // margin-bottom: $font-size-base;
   width: 100%;
   & > tbody > tr > td {
     padding: 0.75 * $font-size-base 1.25 * $font-size-base;

data/core/{sass → scss/components}/_badge.scss

@@ -14,43 +14,36 @@
 .badge-pill > tbody > tr > td {
   padding-right: .6 * $font-size-base;
   padding-left: .6 * $font-size-base;
-  border-radius: 10 * $font-size-base;
+  border-radius: $border-radius-pill;
 }
 
-// Colors
-@each $color, $value in $theme-colors {
-  .badge-#{$color} > tbody > tr > td{
-    @include color-yiq($value);
-    background-color: $value;
-  }
-}
-
-h1{
+// Make badge text 75% smaller when in a header
+h1 {
   .badge > tbody > tr > td {
     font-size: .75 * 2.25 * $font-size-base;
   }
 }
-h2{
+h2 {
   .badge > tbody > tr > td {
     font-size: .75 * 2 * $font-size-base;
   }
 }
-h3{
+h3 {
   .badge > tbody > tr > td {
     font-size: .75 * 1.75 * $font-size-base;
   }
 }
-h4{
+h4 {
   .badge > tbody > tr > td {
     font-size: .75 * 1.5 * $font-size-base;
   }
 }
-h5{
+h5 {
   .badge > tbody > tr > td {
     font-size: .75 * 1.25 * $font-size-base;
   }
 }
-h6{
+h6 {
   .badge > tbody > tr > td {
     font-size: .75 * $font-size-base;
   }

data/core/{sass → scss/components}/_button.scss

@@ -21,26 +21,30 @@
   white-space: nowrap;
 }
 
-@each $color, $value in $theme-colors {
-  .btn-#{$color} td {
-    background-color: $value;
-  }
-  .btn-#{$color} td a {
-    background-color: $value;
-    @include color-yiq($value);
-    border-color: $value;
+@each $name, $color in $all-colors {
+  @if $name != "transparent" {
+    .btn-#{$name} td {
+      background-color: $color;
+    }
+    .btn-#{$name} td a {
+      background-color: $color;
+      @include color-contrast($color);
+      border-color: $color;
+    }
   }
 }
 
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} td {
-    background-color: transparent;
-    border-color: $value;
-  }
-  .btn-outline-#{$color} td a {
-    background-color: transparent;
-    border-color: $value;
-    color: $value;
+@each $name, $color in $all-colors {
+  @if $name != "transparent" {
+    .btn-outline-#{$name} td {
+      background-color: transparent;
+      border-color: $color;
+    }
+    .btn-outline-#{$name} td a {
+      background-color: transparent;
+      border-color: $color;
+      color: $color;
+    }
   }
 }
 

data/core/{sass → scss/components}/_card.scss

@@ -1,11 +1,12 @@
 .card {
   background-color: $white;
-  border-radius: $font-size-base * .25;
-  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  border: 1px solid $border-color;
   border-collapse: separate !important;
   width: 100%;
   overflow: hidden;
   & > tbody > tr > td {
+    background-color: $white;
     width: 100%;
   }
   .card-body {

data/core/scss/components/_grid.scss

@@ -0,0 +1,35 @@
+table.row {
+  table-layout: fixed;
+  width: 100%;
+  & > tbody > tr > td {
+    min-height: 1px;
+    font-weight: normal;
+    padding-right: 30px;
+  }
+}
+
+@each $key, $value in $grid-cols {
+  td.col-#{$key},
+  td.col-lg-#{$key} {
+    width: $value;
+  }
+}
+
+@each $space, $value in $spacers {
+  table.row.g-#{$space},
+  table.row.gx-#{$space},
+  table.row.g-lg-#{$space},
+  table.row.gx-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-right: $value;
+    }
+  }
+  table.row.g-#{$space},
+  table.row.gy-#{$space},
+  table.row.g-lg-#{$space},
+  table.row.gy-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-bottom: $value;
+    }
+  }
+}

data/core/scss/components/_hr.scss

@@ -0,0 +1,8 @@
+table.hr {
+  width: 100%;
+  & > tbody > tr > td {
+    border-top: 1px solid $border-color;
+    height: 1px;
+    width: 100%;
+  }
+}