sneat_rails 0.1.0

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_forms.scss

@@ -0,0 +1,281 @@
+// * Form controls
+// *******************************************************************************
+
+// Form control
+@mixin template-form-control-theme($color) {
+  .form-control:focus,
+  .form-select:focus {
+    border-color: $color !important;
+  }
+
+  // Using :focus-within to apply focus border color to default and merged input-group
+  .input-group {
+    &:focus-within {
+      .form-control,
+      .input-group-text {
+        border-color: $color !important;
+      }
+    }
+  }
+}
+
+// Float labels
+@mixin template-float-label-theme($color) {
+  .form-floating {
+    > .form-control:focus,
+    > .form-control:not(:placeholder-shown),
+    > .form-select {
+      ~ label {
+        color: $color;
+      }
+    }
+
+    > .form-control:-webkit-autofill {
+      ~ label {
+        color: $color;
+      }
+    }
+  }
+}
+
+// Form Switch
+@mixin template-form-switch-theme($background) {
+  $focus-color: $background;
+  $focus-bg-image: str-replace(
+    str-replace($form-switch-focus-bg-image, '#{$form-switch-focus-color}', $focus-color),
+    '#',
+    '%23'
+  );
+
+  $checked-color: $component-active-color;
+  $checked-bg-image: str-replace(
+    str-replace($form-switch-checked-bg-image, '#{$form-switch-checked-color}', $checked-color),
+    '#',
+    '%23'
+  );
+
+  .form-switch {
+    .form-check-input {
+      &:focus {
+        background-image: escape-svg($focus-bg-image);
+      }
+
+      &:checked {
+        @if $enable-gradients {
+          background-image: escape-svg($checked-bg-image), var(--#{$variable-prefix}gradient);
+        } @else {
+          background-image: escape-svg($checked-bg-image);
+        }
+      }
+    }
+  }
+}
+
+// File Input
+@mixin template-file-input-theme($color) {
+  .form-control:focus ~ .form-label {
+    border-color: $color;
+
+    &::after {
+      border-color: inherit;
+    }
+  }
+}
+
+// Form Check
+@mixin template-form-check-variant($parent, $background, $color: null) {
+  $color: if($color, $color, color-contrast($background));
+  $focus-border: $background;
+
+  #{$parent} .form-check-input {
+    &:focus {
+      border-color: $focus-border;
+      box-shadow: 0 2px 4px 0 rgba($background, 0.4);
+    }
+
+    &:disabled {
+      background-color: $form-check-input-disabled-bg;
+    }
+
+    &:checked,
+    &[type='checkbox']:indeterminate {
+      background-color: $background;
+      border-color: $background;
+      box-shadow: 0 2px 4px 0 rgba($background, 0.4);
+    }
+  }
+
+  // Custom options
+  #{$parent}.custom-option {
+    &.checked {
+      border: 1px solid $background;
+    }
+  }
+}
+
+@mixin template-form-check-theme($background, $color: null) {
+  @include template-form-check-variant('', $background, $color);
+}
+
+// Form Validation
+
+@mixin form-validation-state(
+  $state: null,
+  $color: null,
+  $icon: null,
+  $tooltip-color: null,
+  $tooltip-bg-color: null,
+  $focus-box-shadow: null,
+  $border-color: null
+) {
+}
+
+@mixin template-form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
+) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    @include font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: 0.1rem;
+    @include font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
+    @include border-radius($form-feedback-tooltip-border-radius);
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color !important;
+
+      .dark-style & {
+        border-color: $color !important;
+      }
+
+      @if $enable-validation-icons {
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-size: $input-height-inner-half $input-height-inner-half;
+
+        @include ltr-style {
+          padding-right: $input-height-inner;
+          background-position: right $input-height-inner-quarter center;
+        }
+      }
+
+      &:focus {
+        border-color: $color !important;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        @include ltr-style {
+          padding-right: $input-height-inner;
+          background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        }
+      }
+    }
+  }
+
+  .form-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color !important;
+      @if $enable-validation-icons {
+        background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+        @include ltr-style {
+          background-image: escape-svg($form-select-indicator), escape-svg($icon);
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+        }
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      &:checked {
+        background-color: $color;
+        border-color: $color;
+      }
+
+      &:focus {
+        box-shadow: $focus-box-shadow;
+        border-color: $color;
+      }
+
+      ~ .form-check-label {
+        color: $color;
+      }
+    }
+  }
+  .form-check-inline .form-check-input {
+    ~ .#{$state}-feedback {
+      @include ltr-style {
+        margin-left: 0.5em;
+      }
+    }
+  }
+  // On validation .input-group & .input-group-merged, setup proper border color & box-shadow
+  .input-group {
+    .form-control {
+      @include form-validation-state-selector($state) {
+        ~ .input-group-text {
+          border-color: $color !important;
+        }
+        &:focus {
+          border-color: $color !important;
+          box-shadow: none;
+          // ? .input-group has .input-group-text last/sibling
+          ~ .input-group-text {
+            border-color: $color;
+          }
+        }
+      }
+    }
+  }
+
+  .input-group .form-control,
+  .input-group .form-select {
+    @include form-validation-state-selector($state) {
+      z-index: 3;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_list-group.scss

@@ -0,0 +1,66 @@
+// List groups
+// *******************************************************************************
+
+@mixin list-group-item-variant($state: null, $background: null, $color: null) {
+}
+
+// Basic List groups
+@mixin template-list-group-item-variant($parent, $background, $color: null) {
+  $background-color: if(
+    $dark-style,
+    shift-color($background, -$list-group-item-bg-scale, $card-bg),
+    shift-color($background, $list-group-item-bg-scale, $card-bg)
+  );
+  $border-color: if(
+    $dark-style,
+    if(
+      $parent == '.list-group-item-dark',
+      color-contrast($background),
+      shift-color($background, -$list-group-item-color-scale, $card-bg)
+    ),
+    shift-color($background, $list-group-item-color-scale, $card-bg)
+  );
+  $color: if(
+    $parent == '.list-group-item-dark' and $dark-style,
+    color-contrast($background),
+    shift-color($background, $list-group-item-color-scale)
+  );
+  $hover-background: shade-color($background-color, $list-group-item-bg-hover-scale);
+  #{$parent} {
+    border-color: $border-color;
+    background-color: $background-color;
+    color: $color !important;
+  }
+
+  a#{$parent},
+  button#{$parent} {
+    color: $color;
+    &:hover,
+    &:focus {
+      border-color: $border-color;
+      background-color: $hover-background;
+      color: $color;
+    }
+
+    &.active {
+      border-color: $border-color !important;
+      background-color: $background !important;
+      // color: if($color, $color, color-contrast($background));
+      color: color-contrast($background) !important;
+    }
+  }
+}
+
+@mixin template-list-group-theme($background, $color: null) {
+  @include template-list-group-item-variant('.list-group-item-primary', $background);
+
+  .list-group-item.active {
+    &,
+    &:hover,
+    &:focus {
+      border-color: $background;
+      background-color: $background;
+      color: color-contrast($background);
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_misc.scss

@@ -0,0 +1,120 @@
+// * Light/Dark layout
+// *******************************************************************************
+@mixin light-layout-only() {
+  @if $dark-style {
+    html:not(.dark-style) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// * RTL/LTR
+// *******************************************************************************
+
+@mixin ltr-only() {
+  @if $rtl-support {
+    html:not([dir='rtl']) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin ltr-style() {
+  @if $rtl-support {
+    html:not([dir='rtl']) & {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// * Keyframes
+// *******************************************************************************
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+// * Colors
+// *******************************************************************************
+
+@mixin bg-color-variant($parent, $color, $rth-color: #000) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+
+  a#{$parent} {
+    &:hover,
+    &:focus {
+      background-color: rgba-to-hex(rgba($color, 0.95), $background: $rth-color) !important;
+    }
+  }
+
+  //! Fix: Dropdown notification read badge bg color
+  .dropdown-notifications-item:not(.mark-as-read) {
+    .dropdown-notifications-read span {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin bg-variant($parent, $color, $rth-color: #000) {
+  @include bg-color-variant($parent, $color);
+}
+
+// BG Label
+@mixin bg-label-variant($parent, $background, $color: $background) {
+  $label-background: if(
+    $dark-style,
+    shade-color($background, $btn-label-bg-shade-amount, $card-bg),
+    tint-color($background, $btn-label-bg-tint-amount, $card-bg)
+  );
+  #{$parent} {
+    background-color: $label-background !important;
+    color: if($color, $color, color-contrast($bg)) !important;
+  }
+}
+
+// Border Label
+@mixin border-label-variant($parent, $background) {
+  $label-background: if(
+    $dark-style,
+    shade-color($background, $border-shade-amount),
+    tint-color($background, $border-tint-amount)
+  );
+  #{$parent} {
+    border: 3px solid $label-background !important;
+  }
+}
+
+// Border Light
+@mixin border-light-variant($parent, $background) {
+  #{$parent} {
+    border: 3px solid rgba($background, 0.08);
+  }
+}
+
+@mixin text-variant($parent, $color) {
+  #{$parent} {
+    color: $color !important;
+  }
+  //! Fix: text-body hover color
+  .text-body[href]:hover {
+    color: shift-color($color, $link-shade-percentage) !important;
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_navs.scss

@@ -0,0 +1,37 @@
+// Navs
+// *******************************************************************************
+
+@mixin template-nav-size($padding-y, $padding-x, $font-size, $line-height) {
+  > .nav .nav-link,
+  &.nav .nav-link {
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height;
+  }
+}
+
+@mixin template-nav-variant($parent, $background, $color: null) {
+  // .nav-link class hover theme color for basic nav
+  .nav .nav-link {
+    &:hover,
+    &:focus {
+      color: shift-color($background, $link-shade-percentage);
+    }
+  }
+
+  $pills-selector: if($parent== '', '.nav-pills', '#{$parent}.nav-pills, #{$parent} > .nav-pills');
+
+  #{$pills-selector} .nav-link.active {
+    &,
+    &:hover,
+    &:focus {
+      background-color: $background;
+      color: if($color, $color, color-contrast($background));
+      box-shadow: 0 2px 4px 0 rgba($background, 0.4);
+    }
+  }
+}
+
+@mixin template-nav-theme($background, $color: null) {
+  @include template-nav-variant('', $background, $color);
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_pagination.scss

@@ -0,0 +1,21 @@
+// Pagination
+// *******************************************************************************
+
+// Basic Pagination
+@mixin template-pagination-variant($parent, $background, $color: null) {
+  #{$parent} .page-item.active .page-link,
+  #{$parent}.pagination li.active > a:not(.page-link) {
+    &,
+    &:hover,
+    &:focus {
+      border-color: $background;
+      background-color: $background;
+      color: if($color, $color, color-contrast($background));
+      box-shadow: 0 0.125rem 0.25rem rgba(rgba-to-hex($background, $rgba-to-hex-bg), 0.4);
+    }
+  }
+}
+
+@mixin template-pagination-theme($background, $color: null) {
+  @include template-pagination-variant('', $background, $color);
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_progress.scss

@@ -0,0 +1,19 @@
+// Progress bars
+// *******************************************************************************
+
+@mixin template-progress-bar-theme($background, $color: null) {
+  .progress-bar {
+    background-color: $background;
+    color: if($color, $color, color-contrast($background));
+    box-shadow: 0 2px 4px 0 rgba($background, 0.4);
+  }
+}
+
+@mixin template-progress-bar-shadow-variant($parent, $background-shadow) {
+  $background-shadow: $background-shadow;
+  .progress-bar {
+    &#{$parent} {
+      box-shadow: 0 2px 4px 0 rgba($background-shadow, 0.4);
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_table-variants.scss

@@ -0,0 +1,31 @@
+// Tables
+// *******************************************************************************
+
+@mixin template-table-variant($parent, $background, $layout-color: $white) {
+  .table-#{$parent} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $dark-border-color: if($parent == 'dark', mix($color, $background, percentage($table-border-factor)), inherit);
+
+    --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
+    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$variable-prefix}table-active-bg: #{$active-bg};
+    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
+    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+    // Highlight border color between thead, tbody and tfoot.
+    th {
+      border-bottom-color: $dark-border-color !important;
+    }
+
+    .btn-icon {
+      color: $color;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/mixins/_toasts.scss

@@ -0,0 +1,33 @@
+// * Toast
+// *******************************************************************************
+
+@mixin template-toast-variant($parent, $background, $color: null) {
+  $label-color: if($color, $color, $background);
+  $color: if($color, $color, color-contrast($background));
+
+  #{$parent} {
+    &.toast,
+    &.bs-toast {
+      color: $white;
+      background-color: rgba($background, $toast-bg-factor) !important;
+      box-shadow: 0 0.25rem 1rem rgba($background, 0.4);
+
+      .toast-header {
+        color: $white;
+        .btn-close {
+          background-color: $background !important;
+          background-image: str-replace(
+            str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $white), '#', '%23'),
+            "fill-opacity='0.5'",
+            "fill-opacity='1'"
+          );
+          box-shadow: 0 0.1875rem 0.375rem 0 rgba($background, 0.4) !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin template-toast-theme($parent, $background, $color: null) {
+  @include template-toast-variant($parent, $background, $color);
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended.scss

@@ -0,0 +1,39 @@
+@import '_bootstrap-extended/include';
+
+// Import bootstrap extended scss
+@import '_bootstrap-extended/root';
+@import '_bootstrap-extended/reboot';
+@import '_bootstrap-extended/type';
+@import '_bootstrap-extended/utilities';
+@import '_bootstrap-extended/tables';
+@import '_bootstrap-extended/buttons';
+@import '_bootstrap-extended/button-group';
+@import '_bootstrap-extended/badge';
+@import '_bootstrap-extended/dropdown';
+@import '_bootstrap-extended/nav';
+@import '_bootstrap-extended/pagination';
+@import '_bootstrap-extended/alert';
+@import '_bootstrap-extended/tooltip';
+@import '_bootstrap-extended/popover';
+@import '_bootstrap-extended/forms';
+@import '_bootstrap-extended/modal';
+@import '_bootstrap-extended/progress';
+@import '_bootstrap-extended/breadcrumb';
+@import '_bootstrap-extended/list-group';
+@import '_bootstrap-extended/navbar';
+@import '_bootstrap-extended/card';
+@import '_bootstrap-extended/accordion';
+@import '_bootstrap-extended/close';
+@import '_bootstrap-extended/toasts';
+@import '_bootstrap-extended/carousel';
+@import '_bootstrap-extended/spinners';
+@import '_bootstrap-extended/offcanvas';
+
+// Common Utilities
+@import 'bootstrap/scss/utilities/api';
+
+// LTR Utilities
+@include ltr-only {
+  @import '_bootstrap-extended/utilities-ltr';
+  @import 'bootstrap/scss/utilities/api';
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap.scss

@@ -0,0 +1,44 @@
+// @import 'bootstrap/scss/mixins/banner';
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner('');
+
+@import '_bootstrap-extended/include';
+
+// Import bootstrap core scss from node_module
+// ! Utilities are customized and added in bootstrap-extended
+
+// Layout & components
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/accordion';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/toasts';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
+
+// Helpers
+@import 'bootstrap/scss/helpers';