@yafnet/theme-kit 0.0.0-stage → 4.0.11

package/email/bootstrap-email/scss/_reboot_head.scss

@@ -0,0 +1,59 @@
+// Force base font in Outlook
+body, table, td {
+  font-family: $font-family-base !important;
+}
+
+// Forces Outlook.com to display emails at full width
+.ExternalClass {
+  width: 100%;
+}
+
+// Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+  line-height: 150%;
+}
+
+// Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
+a {
+  text-decoration: none;
+}
+
+// Inherit text color so color can be set on the body and inherited by children
+* {
+  color: inherit;
+}
+
+// Fix link colors set on automatic detection such as email addresses and phone numbers
+a[x-apple-data-detectors],
+u + #body a,
+#MessageViewBody a {
+  color: inherit;
+  text-decoration: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+// Use a better rendering method when resizing images in Outlook IE.
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+// Prevent Outlook from adding extra spacing to tables.
+table:not([class^=s-]) {
+  font-family: $font-family-base;
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
+  td {
+    border-spacing: 0px;
+    border-collapse: collapse;
+  }
+}

package/email/bootstrap-email/scss/_variables.scss

@@ -0,0 +1,7 @@
+@import 'variables/colors';
+@import 'variables/body';
+@import 'variables/typography';
+@import 'variables/borders';
+@import 'variables/tables';
+@import 'variables/buttons';
+@import 'variables/utilities';

package/email/bootstrap-email/scss/components/_alert.scss

@@ -0,0 +1,21 @@
+.alert {
+  border-collapse: separate !important;
+  border: 0;
+  width: 100%;
+  & > tbody > tr > td {
+    padding: 0.75 * $font-size-base 1.25 * $font-size-base;
+    border: 1px solid transparent;
+    border-radius: 0.25 * $font-size-base;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} td {
+    background-color: lighten($value, 40%);
+    border-color: lighten($value, 35%);
+    color: darken($value, 30%);
+    .hr > table > tbody > tr > td {
+      border-top: 1px solid lighten($value, 35%);
+    }
+  }
+}

package/email/bootstrap-email/scss/components/_badge.scss

@@ -0,0 +1,61 @@
+.badge > tbody > tr > td {
+  display: inline-block;
+  padding: .25 * $font-size-base .4 * $font-size-base;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 4px;
+}
+
+@each $name, $theme in $btn-themes {
+  .badge-#{$name} td {
+    background-color: map-get($theme, "background-color");
+  }
+  .badge-#{$name} td span {
+    background-color: map-get($theme, "background-color");
+    color: map-get($theme, "color");
+    border-color: map-get($theme, "border-color");
+  }
+}
+
+// Pill badges
+.badge-pill > tbody > tr > td {
+  padding-right: .6 * $font-size-base;
+  padding-left: .6 * $font-size-base;
+  border-radius: $border-radius-pill;
+}
+
+// Make badge text 75% smaller when in a header
+h1 {
+  .badge > tbody > tr > td {
+    font-size: .75 * 2.25 * $font-size-base;
+  }
+}
+h2 {
+  .badge > tbody > tr > td {
+    font-size: .75 * 2 * $font-size-base;
+  }
+}
+h3 {
+  .badge > tbody > tr > td {
+    font-size: .75 * 1.75 * $font-size-base;
+  }
+}
+h4 {
+  .badge > tbody > tr > td {
+    font-size: .75 * 1.5 * $font-size-base;
+  }
+}
+h5 {
+  .badge > tbody > tr > td {
+    font-size: .75 * 1.25 * $font-size-base;
+  }
+}
+h6 {
+  .badge > tbody > tr > td {
+    font-size: .75 * $font-size-base;
+  }
+}

package/email/bootstrap-email/scss/components/_button.scss

@@ -0,0 +1,47 @@
+.btn {
+  border-radius: $btn-border-radius;
+  border-collapse: separate !important;
+}
+
+.btn td {
+  border-radius: $btn-border-radius;
+  text-align: center;
+}
+
+.btn td a {
+  font-size: $btn-font-size;
+  font-family: $btn-font-family;
+  text-decoration: none;
+  border-radius: $btn-border-radius;
+  padding: $btn-padding-y $btn-padding-x;
+  line-height: $btn-line-height;
+  border: $btn-border-width solid transparent;
+  display: block;
+  font-weight: $btn-font-weight;
+  white-space: nowrap;
+}
+
+@each $name, $theme in $btn-themes {
+  .btn-#{$name} td {
+    background-color: map-get($theme, "background-color");
+  }
+  .btn-#{$name} td a {
+    background-color: map-get($theme, "background-color");
+    color: map-get($theme, "color");
+    border-color: map-get($theme, "border-color");
+  }
+}
+
+.btn-sm td a {
+  font-size: $btn-font-size-sm;
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
+  line-height: $btn-line-height-sm;
+  border-radius: $btn-border-radius-sm;
+}
+
+.btn-lg td a {
+  font-size: $btn-font-size-lg;
+  padding: $btn-padding-y-lg $btn-padding-x-lg;
+  line-height: $btn-line-height-lg;
+  border-radius: $btn-border-radius-lg;
+}

package/email/bootstrap-email/scss/components/_card.scss

@@ -0,0 +1,19 @@
+.card {
+  background-color: $white;
+  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 {
+    width: 100%;
+    & > tbody > tr > td {
+      padding: $font-size-base * 1.25;
+      width: 100%;
+    }
+  }
+}

package/email/bootstrap-email/scss/components/_container.scss

@@ -0,0 +1,18 @@
+.container {
+  width: 100%;
+  & > tbody > tr > td {
+    padding: 0 $font-size-base;
+    & > table {
+      width: 100%;
+      max-width: 600px;
+    }
+  }
+}
+
+.container-fluid {
+  width: 100%;
+  & > tbody > tr > td {
+    padding: 0 $font-size-base;
+    width: 100%;
+  }
+}

package/email/bootstrap-email/scss/components/_grid.scss

@@ -0,0 +1,43 @@
+.row {
+  margin-right: -24px;
+  & > table {
+    table-layout: fixed;
+    -premailer-width: 100%;
+    width: 100%;
+    & > tbody > tr > td {
+      min-height: 1px;
+      font-weight: normal;
+      padding-right: 24px;
+      vertical-align: top;
+      text-align: left;
+    }
+  }
+}
+
+@each $key, $value in $grid-cols {
+  td.col-#{$key},
+  td.col-lg-#{$key} {
+    width: $value;
+  }
+}
+
+@each $space, $value in $spacers {
+  .row.gap-#{$space},
+  .row.gap-x-#{$space},
+  .row.gap-lg-#{$space},
+  .row.gap-x-lg-#{$space} {
+    margin-right: -1 * $value;
+    & > table > tbody > tr > td {
+      padding-right: $value;
+    }
+  }
+  .row.gap-#{$space},
+  .row.gap-y-#{$space},
+  .row.gap-lg-#{$space},
+  .row.gap-y-lg-#{$space} {
+    margin-bottom: -1 * $value;
+    & > table > tbody > tr > td {
+      padding-bottom: $value;
+    }
+  }
+}

package/email/bootstrap-email/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%;
+  }
+}

package/email/bootstrap-email/scss/components/_image.scss

@@ -0,0 +1,6 @@
+.img-fluid {
+  height: auto;
+  max-width: 100%;
+  -premailer-width: 100%;
+  width: 100%;
+}

package/email/bootstrap-email/scss/components/_preview.scss

@@ -0,0 +1,5 @@
+.preview {
+  display: none;
+  max-height: 0px;
+  overflow: hidden;
+}

package/email/bootstrap-email/scss/components/_stack.scss

@@ -0,0 +1,39 @@
+@each $space, $value in $spacers {
+  table.stack-row.gap-#{$space},
+  table.stack-row.gap-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-right: $value;
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+  table.stack-col.gap-#{$space},
+  table.stack-col.gap-lg-#{$space} {
+    & > tbody > tr {
+      & > td {
+        padding-bottom: $value;
+      }
+      &:last-child > td {
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+.stack-cell {
+  vertical-align: top;
+  text-align: left;
+}
+
+@each $align in $vertical-align {
+  table.stack-ay-#{$align} > tbody > tr > td {
+    vertical-align: $align;
+  }
+}
+
+@each $align in $text-align {
+  table.stack-ax-#{$align} > tbody > tr > td {
+    text-align: $align;
+  }
+}

package/email/bootstrap-email/scss/components/_table.scss

@@ -0,0 +1,137 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+    width: 100%;
+    max-width: 100%;
+    background-color: $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;
+    }
+
+    & > thead > tr > th,
+    & > tbody > tr > td,
+    & > tfoot > tr > td {
+        padding: 0.75 * $font-size-base;
+        vertical-align: top;
+        border-top: $table-border-width solid $table-border-color;
+    }
+}
+
+.table-unstyled {
+  width: 100%;
+  max-width: 100%;
+  background-color: transparent;
+  td, th{
+    border-top: 0;
+    border-bottom: 0;
+    text-align: left;
+  }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  & > tfoot > tr > td {
+    padding: 0.3 * $font-size-base;
+  }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+  border: $table-border-width solid $table-border-color;
+
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  & > tfoot > tr > td {
+    border: $table-border-width solid $table-border-color;
+  }
+
+  & > thead {
+    & > tr > th,
+    & > tr > td {
+      border-bottom-width: (2 * $table-border-width);
+    }
+  }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  & > tbody > tr:nth-of-type(odd) {
+    background-color: $table-accent-bg;
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+@each $color, $value in $theme-colors {
+  .table-#{$color} {
+    &,
+    > th,
+    > td {
+      background-color: lighten($value, 40%);
+    }
+  }
+}
+
+
+
+// Dark styles
+//
+// Same table markup, but inverted color scheme: dark background and light text.
+
+.thead-dark {
+  th {
+    color: $white;
+    background-color: $gray-900;
+  }
+}
+
+.thead-light {
+  th {
+    color: $gray-700;
+    background-color: $gray-200;
+  }
+}
+
+.table-dark {
+  color: $white;
+  background-color: $gray-900;
+
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  & > tfoot > tr > td {
+    border-color: #32383e;
+  }
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  &.table-striped {
+    & > tbody > tr:nth-of-type(odd) {
+      background-color: #2c3034;
+    }
+  }
+}

package/email/bootstrap-email/scss/helpers/_functions.scss

@@ -0,0 +1,29 @@
+@function color-contrast($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    @return #111111;
+  } @else {
+    @return $white;
+  }
+}
+
+@function tint-color($color, $level) {
+  @return mix(white, $color, $level);
+}
+
+@function shade-color($color, $level) {
+  @return mix(black, $color, $level);
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}

package/email/bootstrap-email/scss/helpers/_mixins.scss

@@ -0,0 +1,21 @@
+@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;
+  }
+}

package/email/bootstrap-email/scss/helpers/_selectors_for_utils.scss

@@ -0,0 +1,124 @@
+//
+// 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
+    }
+  }
+}
+
+//
+// Text align
+//
+@mixin text-align-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Vertical align
+//
+@mixin valign-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}

package/email/bootstrap-email/scss/utilities/_background.scss

@@ -0,0 +1,5 @@
+@each $name, $color in $all-colors {
+  @include background-color-util('.bg-#{$name}') {
+    background-color: $color;
+  }
+}

package/email/bootstrap-email/scss/utilities/_border-radius.scss

@@ -0,0 +1,21 @@
+@each $name, $radius in $border-radiuses {
+  @include border-radius-util('.rounded#{$name}') {
+    border-radius: $radius;
+  }
+  @include border-radius-util('.rounded-top#{$name}') {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+  @include border-radius-util('.rounded-right#{$name}') {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  @include border-radius-util('.rounded-bottom#{$name}') {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+  @include border-radius-util('.rounded-left#{$name}') {
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+}

package/email/bootstrap-email/scss/utilities/_border.scss

@@ -0,0 +1,13 @@
+@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; }
+}
+
+@each $name, $color in $all-colors {
+  @include border-color-util('.border-#{$name}') {
+    border-color: $color !important;
+  }
+}