bullet_train-themes-tester 1.0

data/app/assets/stylesheets/tester/mailer.scss

@@ -0,0 +1,359 @@
+// TODO there is a ton of duplicate here that we can clean up!
+
+*:not(br):not(tr):not(html) {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100% !important;
+  height: 100%;
+  margin: 0;
+  line-height: 1.4;
+  background-color: #F6F7F8;
+  color: #3E4B5B;
+  font-size: 16px;
+  -webkit-text-size-adjust: none;
+}
+
+p,
+ul,
+ol,
+blockquote {
+  line-height: 1.4;
+  text-align: left;
+}
+
+a {
+  color: #047BF8;
+}
+
+a img {
+  border: none;
+}
+/* Layout ------------------------------ */
+
+.email-wrapper {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #F6F7F8;
+}
+
+.email-content {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* Masthead ----------------------- */
+
+.email-masthead {
+  padding: 25px 0;
+  text-align: center;
+}
+
+.email-masthead_logo {
+  width: 94px;
+}
+
+.email-masthead_name {
+  font-size: 16px;
+  /*font-weight: bold;*/
+  color: #bbbfc3;
+  text-decoration: none;
+  /*text-shadow: 0 1px 0 white;*/
+}
+/* Body ------------------------------ */
+
+.email-body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid #EDEFF2;
+  border-bottom: 1px solid #EDEFF2;
+  background-color: #FFFFFF;
+
+}
+
+.email-body_inner {
+  width: 570px;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #FFFFFF;
+}
+
+.email-footer {
+  width: 570px;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+.email-footer p {
+  color: #AAAAAA;
+}
+
+.body-action {
+  width: 100%;
+  margin: 30px auto;
+  padding: 0;
+  text-align: center;
+}
+
+.body-sub {
+  margin-top: 25px;
+  padding-top: 25px;
+  border-top: 1px solid #EDEFF2;
+}
+
+.content-cell {
+  padding: 35px;
+}
+
+.preheader {
+  display: none !important;
+}
+/* Attribute list ------------------------------ */
+
+.attributes {
+  margin: 0 0 21px;
+}
+
+.attributes_content {
+  background-color: #EDEFF2;
+  padding: 16px;
+}
+
+.attributes_item {
+  padding: 0;
+}
+/* Related Items ------------------------------ */
+
+.related {
+  width: 100%;
+  margin: 0;
+  padding: 25px 0 0 0;
+}
+
+.related_item {
+  padding: 10px 0;
+  color: #3E4B5B;
+  font-size: 15px;
+  line-height: 18px;
+}
+
+.related_item-title {
+  display: block;
+  margin: .5em 0 0;
+}
+
+.related_item-thumb {
+  display: block;
+  padding-bottom: 10px;
+}
+
+.related_heading {
+  border-top: 1px solid #EDEFF2;
+  text-align: center;
+  padding: 25px 0 10px;
+}
+/* Discount Code ------------------------------ */
+
+.discount {
+  width: 100%;
+  margin: 0;
+  padding: 24px;
+  background-color: #EDEFF2;
+  border: 2px dashed #9BA2AB;
+}
+
+.discount_heading {
+  text-align: center;
+}
+
+.discount_body {
+  text-align: center;
+  font-size: 15px;
+}
+/* Social Icons ------------------------------ */
+
+.social {
+  width: auto;
+}
+
+.social td {
+  padding: 0;
+  width: auto;
+}
+
+.social_icon {
+  height: 20px;
+  margin: 0 8px 10px 8px;
+  padding: 0;
+}
+/* Data table ------------------------------ */
+
+.purchase {
+  width: 100%;
+  margin: 0;
+  padding: 35px 0;
+}
+
+.purchase_content {
+  width: 100%;
+  margin: 0;
+  padding: 25px 0 0 0;
+}
+
+.purchase_item {
+  padding: 10px 0;
+  color: #3E4B5B;
+  font-size: 15px;
+  line-height: 18px;
+}
+
+.purchase_heading {
+  padding-bottom: 8px;
+  border-bottom: 1px solid #EDEFF2;
+}
+
+.purchase_heading p {
+  margin: 0;
+  color: #9BA2AB;
+  font-size: 12px;
+}
+
+.purchase_footer {
+  padding-top: 15px;
+  border-top: 1px solid #EDEFF2;
+}
+
+.purchase_total {
+  margin: 0;
+  text-align: right;
+  /*font-weight: bold;*/
+  color: #3E4B5B;
+}
+
+.purchase_total--label {
+  padding: 0 15px 0 0;
+}
+/* Utilities ------------------------------ */
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+/*Media Queries ------------------------------ */
+
+@media only screen and (max-width: 600px) {
+  .email-body_inner,
+  .email-footer {
+    width: 100% !important;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .button {
+    width: 100% !important;
+  }
+}
+/* Buttons ------------------------------ */
+
+.button {
+  background-color: #047BF8;
+  border-top: 10px solid #047BF8;
+  border-right: 18px solid #047BF8;
+  border-bottom: 10px solid #047BF8;
+  border-left: 18px solid #047BF8;
+  display: inline-block;
+  color: #FFF;
+  text-decoration: none;
+  border-radius: 3px;
+  -webkit-text-size-adjust: none;
+  line-height: 22px;
+  font-size: 16px;
+  color: #FFF;
+}
+
+.button--link {
+  background-color: transparent;
+  border-top: 10px solid transparent;
+  border-right: 18px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 18px solid transparent;
+  display: inline-block;
+  color: #047BF8;
+  text-decoration: underline;
+  border-radius: 3px;
+  /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);*/
+  -webkit-text-size-adjust: none;
+}
+
+.button--green {
+  background-color: #22BC66;
+  border-top: 10px solid #22BC66;
+  border-right: 18px solid #22BC66;
+  border-bottom: 10px solid #22BC66;
+  border-left: 18px solid #22BC66;
+}
+
+.button--red {
+  background-color: #FF6136;
+  border-top: 10px solid #FF6136;
+  border-right: 18px solid #FF6136;
+  border-bottom: 10px solid #FF6136;
+  border-left: 18px solid #FF6136;
+}
+/* Type ------------------------------ */
+
+h1 {
+  margin-top: 0;
+  color: #3E4B5B;
+  font-size: 19px;
+  font-weight: bold;
+  text-align: left;
+}
+
+h2 {
+  margin-top: 0;
+  color: #3E4B5B;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: left;
+}
+
+h3 {
+  margin-top: 0;
+  color: #3E4B5B;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: left;
+}
+
+p {
+  margin-top: 0;
+  color: #3E4B5B;
+  font-size: 16px;
+  line-height: 1.5em;
+  text-align: left;
+}
+
+p.sub {
+  font-size: 12px;
+}
+
+p.center {
+  text-align: center;
+}
+
+.body-action.less-footer {
+  margin-bottom: 10px;
+}

data/app/assets/stylesheets/tester/tailwind/colors.css

@@ -0,0 +1,100 @@
+:root, .theme-blue {
+  --primary-300: #95acff;
+  --primary-400: #448eef;
+  --primary-500: #047bf8;
+  --primary-600: #0362c6;
+  --primary-700: #1c4cc3;
+  --primary-800: #0e369a;
+  --primary-900: #00369D;
+
+  --dark-primary-300: #ccd9e8;
+  --dark-primary-400: #9facc7;
+  --dark-primary-500: #777E94;
+  --dark-primary-600: #4D566F;
+  --dark-primary-700: #323c58;
+  --dark-primary-800: #2b344e;
+  --dark-primary-900: #232942;
+
+  --dark-accent-200: #b3bcde;
+
+  --light-gradient-from: #D7BBEA;
+  --light-gradient-to: #65A8F1;
+  --dark-gradient-from: #633d7d;
+  --dark-gradient-to: #2867ab;
+}
+
+.theme-purple {
+  --primary-300: #ac95ff;
+  --primary-400: #8e44ef;
+  --primary-500: #7b04f8;
+  --primary-600: #6203c6;
+  --primary-700: #4c1cc3;
+  --primary-800: #360e9a;
+  --primary-900: #36009D;
+
+  --dark-primary-300: #d9cce8;
+  --dark-primary-400: #ac9fc7;
+  --dark-primary-500: #7E7794;
+  --dark-primary-600: #564D6F;
+  --dark-primary-700: #3c3258;
+  --dark-primary-800: #342b4e;
+  --dark-primary-900: #292342;
+
+  --dark-accent-200: #bcb3de;
+
+  --light-gradient-from: #EABBD7;
+  --light-gradient-to: #A865F1;
+  --dark-gradient-from: #7d3d63;
+  --dark-gradient-to: #6728ab;
+}
+
+.theme-orange {
+  --primary-300: #ffac95;
+  --primary-400: #ef8e44;
+  --primary-500: #f87b04;
+  --primary-600: #c66203;
+  --primary-700: #c34c1c;
+  --primary-800: #9a360e;
+  --primary-900: #9D3600;
+
+  /* TOOD Kind of yuck? */
+  --dark-primary-300: #e8d9cc;
+  --dark-primary-400: #c7ac9f;
+  --dark-primary-500: #947E77;
+  --dark-primary-600: #6F564D;
+  --dark-primary-700: #583c32;
+  --dark-primary-800: #4e342b;
+  --dark-primary-900: #422923;
+
+  --dark-accent-200: #debcb3;
+
+  --light-gradient-from: #EABBD7;
+  --light-gradient-to: #F1A865;
+  --dark-gradient-from: #7d3d63;
+  --dark-gradient-to: #ab6728;
+}
+
+.theme-pink {
+  --primary-300: #ff95ac;
+  --primary-400: #ef448e;
+  --primary-500: #f8047b;
+  --primary-600: #c60362;
+  --primary-700: #c31c4c;
+  --primary-800: #9a0e36;
+  --primary-900: #9D0036;
+
+  --dark-primary-300: #d9cce8;
+  --dark-primary-400: #ac9fc7;
+  --dark-primary-500: #7E7794;
+  --dark-primary-600: #564D6F;
+  --dark-primary-700: #3c3258;
+  --dark-primary-800: #342b4e;
+  --dark-primary-900: #292342;
+
+  --dark-accent-200: #bcb3de;
+
+  --light-gradient-from: #D7BBEA;
+  --light-gradient-to: #F165A8;
+  --dark-gradient-from: #6728ab;
+  --dark-gradient-to: #633d7d;
+}

data/app/assets/stylesheets/tester/tailwind/components.css

@@ -0,0 +1,151 @@
+@layer components {
+  a {
+    @apply text-primary-500 hover:text-primary-600 hover:underline;
+  }
+
+  b, strong {
+    @apply font-medium;
+  }
+
+  .buttons {
+    @apply space-x;
+  }
+
+  .button {
+    @apply shadow-sm text-white hover:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 hover:no-underline;
+  }
+
+  .button-secondary {
+    @apply text-primary-500 hover:text-primary-600 hover:underline;
+  }
+
+  .button, .button-secondary, .button-alternative {
+    @apply py-2 px-4 border border-transparent rounded-md;
+    @apply inline-flex items-center whitespace-nowrap;
+    &.button-smaller {
+      @apply py-1 px-3 text-xs;
+    }
+  }
+
+  .button-alternative {
+    @apply border-gray-300 rounded-md shadow-sm bg-white text-gray-500 hover:bg-gray-50 no-underline hover:no-underline;
+  }
+
+  .button-color {
+    @extend .button;
+    @apply rounded-full;
+  }
+
+  .btn-toggle {
+    input[type=checkbox], input[type=radio] {
+      display: none;
+      &:checked {
+        & + button {
+          @extend .button;
+        }
+      }
+    }
+
+    &.btn-color-picker {
+      input[type=checkbox], input[type=radio] {
+        &:checked {
+          & + button {
+            @apply ring ring-offset-2 rounded-full;
+          }
+        }
+      }
+    }
+  }
+
+  .full {
+    @apply w-full flex justify-center;
+  }
+
+  form.form {
+    @apply space-y-5;
+
+    /*
+    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
+    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
+    no extra element is injected into the form.
+    */
+    &[method="post" i], &[method="patch" i] {
+      @apply -mt-5;
+    }
+
+    .buttons {
+      @apply pt-1 space-x;
+    }
+  }
+
+  .table {
+    @apply w-full divide-y divide-gray-900 divide-opacity-5 text-left;
+
+    & th {
+      @apply px-3 py-3 text-2xs font-semibold font-normal;
+
+      &:first-child {
+        @apply pl-5;
+      }
+
+      &:last-child {
+        @apply pr-5;
+      }
+    }
+
+    & tbody {
+      @apply divide-y divide-gray-900 divide-opacity-5;
+    }
+
+    & td {
+      @apply px-3 py-3.5;
+
+      &:first-child {
+        @apply pl-5;
+      }
+
+      &:last-child {
+        @apply pr-5;
+      }
+
+      &.buttons {
+        @apply pr-3;
+        @apply text-right space-x-2;
+
+        /* just having a cell with buttons shouldn't expand the height of a table row. */
+        & > * {
+          @apply -mt-5 -mb-5;
+        }
+      }
+    }
+  }
+
+  .box-table {
+    .table {
+      & th, & td {
+        &:first-child {
+          @apply pl-8;
+        }
+
+        &:last-child {
+          @apply pr-8;
+        }
+      }
+    }
+  }
+
+  .pagy-nav .page a,
+  .pagy-nav .page.active {
+    @apply button-alternative;
+  }
+
+  .pagy-nav .page.prev.disabled,
+  .pagy-nav .page.next.disabled {
+    @apply hidden;
+  }
+
+  .pagy-nav .page.active,
+  .pagy-nav-js .page.active {
+    @apply button;
+  }
+}