bullet_train-themes-light 1.0.8 → 1.0.11

data/app/assets/stylesheets/light/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/light/tailwind/components.css

@@ -0,0 +1,136 @@
+@layer components {
+  a {
+    @apply text-blue hover:text-blue-dark hover:underline;
+  }
+
+  b, strong {
+    @apply font-medium;
+  }
+
+  .buttons {
+    @apply space-x;
+  }
+
+  .button {
+    @apply shadow-sm text-white hover:text-white bg-blue hover:bg-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-dark hover:no-underline;
+  }
+
+  .button-secondary {
+    @apply text-blue hover:text-blue-dark 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;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/light/tailwind/dark-mode.css

@@ -0,0 +1,205 @@
+@layer utilities {
+  @media (prefers-color-scheme: dark) {
+    /**
+     * Color overrides
+     **/
+    .bg-blue-darker {
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+
+    @variants dark {
+      .bg-dark-blue-gradient {
+        &:before {
+          background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
+        }
+        background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
+      }
+    }
+
+    /**
+     * General
+     **/
+    .button {
+      @apply ring-offset-sealBlue-400;
+    }
+
+    .table {
+      th {
+        @apply text-sealBlue-700;
+      }
+
+      tbody {
+        @apply border-gray-500;
+
+        tr {
+          border-top: 1px solid theme('colors.sealBlue.600');
+        }
+
+        td {
+          @apply text-gray-400;
+
+          a,
+          input[type="submit"] {
+            @apply text-sealBlue-800;
+          }
+        }
+      }
+    }
+
+    /**
+     * Form components
+     **/
+    .button-secondary {
+      @apply text-sealBlue-800;
+    }
+
+    .button-alternative {
+      @apply bg-black-400 border-black-400 text-white;
+
+      &:hover {
+        @apply bg-black-300 border-black-200 text-white;
+      }
+    }
+
+    /**
+     * Custom components
+     **/
+    /* Color picker */
+    .pcr-app {
+      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
+
+      .pcr-interaction .pcr-result {
+        @apply text-sealBlue-900 border border-solid border-sealBlue-100 bg-sealBlue-300;
+
+        &:focus {
+          box-shadow: 0 0 0 1px theme('colors.blue.500'), 0 0 0 3px theme('colors.blue.500');
+        }
+      }
+    }
+
+    /* Date range picker */
+    .daterangepicker {
+      @apply bg-sealBlue-300 border-sealBlue-100;
+
+      &::before {
+        border-bottom-color: theme('colors.sealBlue.100');
+      }
+
+      &::after {
+        border-bottom-color: theme('colors.sealBlue.300');
+      }
+
+      .calendar-table {
+        @apply bg-sealBlue-300 text-sealBlue-900;
+
+        /* navigation arrows */
+        .available {
+          span {
+            @apply border-blue-500;
+          }
+        }
+      }
+
+      /* Clear and Apply buttons wrapper */
+      .drp-buttons {
+        border-top-color: theme('colors.sealBlue.100');
+        @apply text-sealBlue-900;
+      }
+
+      th {
+        &.available:hover {
+          @apply bg-sealBlue-500;
+        }
+      }
+
+      td {
+        &.off {
+          @apply bg-sealBlue-300 text-white;
+        }
+
+        &.available:hover {
+          @apply bg-sealBlue-500;
+        }
+      }
+
+      .hourselect, .minuteselect, .ampmselect {
+        @apply text-sealBlue-900 border-sealBlue-100 bg-sealBlue-300 !important;
+      }
+    }
+
+    /* Phone field */
+    .iti__country-list {
+      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
+    }
+
+    /* Select2 */
+    .select2-container {
+      .select2-selection__rendered {
+        @apply text-sealBlue-900 !important;
+      }
+
+      .select2-dropdown {
+        @apply bg-sealBlue-400;
+      }
+
+      .select2-search__field {
+        @apply bg-sealBlue-300 border-sealBlue-100 !important;
+      }
+
+      .select2-selection--multiple, .select2-selection--single {
+        @apply bg-sealBlue-300 focus:ring-blue border-sealBlue-100 !important;
+        @apply text-sealBlue-900;
+      }
+
+      /* For the selected options in the multiple select2 component */
+      .select2-selection__choice {
+        @apply bg-blue-500 border-blue-500 !important;
+        @apply text-white;
+
+        .select2-selection__choice__remove {
+          @apply text-white;
+
+          &:hover {
+            @apply text-white;
+          }
+        }
+      }
+
+      .select2-results__option {
+        @apply text-sealBlue-900;
+      }
+    }
+
+    /* Trix Editor */
+    trix-editor {
+      @apply bg-sealBlue-300 border-sealBlue-100 !important;
+
+      &:focus, &:active {
+        @apply border-blue !important;
+      }
+    }
+
+    trix-toolbar {
+      .trix-button-group, .trix-button {
+        @apply border-sealBlue-100 !important;
+      }
+    }
+
+    /* CKEditor */
+    .ck {
+      --ck-color-base-background: theme('colors.sealBlue.300');
+      --ck-color-base-border: theme('colors.sealBlue.100');
+      --ck-color-toolbar-background: theme('colors.sealBlue.200');
+      --ck-color-toolbar-border: theme('colors.sealBlue.100');
+      --ck-color-text: theme('colors.sealBlue.900');
+
+      .ck-editor__editable:not(.ck-editor__nested-editable) {
+        @apply shadow-none;
+
+        &.ck-focused {
+          @apply shadow-none;
+        }
+      }
+    }
+  }
+}