sneat_rails 0.1.0

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/forms/_floating-labels.scss

@@ -0,0 +1,12 @@
+// Floating Labels
+// *******************************************************************************
+
+// Display placeholder on focus
+.form-floating {
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown) {
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/forms/_form-control.scss

@@ -0,0 +1,15 @@
+// Form control
+// *******************************************************************************
+// form input placeholder animation
+.form-control {
+  &::placeholder,
+  &:focus::placeholder {
+    transition: $input-placeholder-transition;
+  }
+  // border color on hover state
+  &:hover {
+    &:not([disabled]):not([focus]) {
+      border-color: $input-border-hover-color;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/forms/_form-range.scss

@@ -0,0 +1,52 @@
+// Range select
+// *******************************************************************************
+
+.form-range {
+  // Chrome specific
+  &::-webkit-slider-thumb {
+    box-shadow: $form-range-thumb-box-shadow;
+    transition: transform 0.2s;
+    transform-origin: center;
+
+    &:focus {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+    }
+
+    &:active {
+      transform: scale(1.4, 1.4);
+    }
+  }
+
+  // Mozilla specific
+  &::-moz-range-thumb {
+    box-shadow: $form-range-thumb-box-shadow;
+    transition: transform 0.2s;
+    transform-origin: center;
+
+    &:focus {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+    }
+
+    &:active {
+      transform: scale(1.4, 1.4);
+    }
+  }
+
+  &:disabled {
+    &::-webkit-slider-runnable-track {
+      background-color: $form-range-track-disabled-bg;
+    }
+
+    &::-moz-range-track {
+      background-color: $form-range-track-disabled-bg;
+      box-shadow: none;
+    }
+
+    &::-webkit-slider-thumb {
+      box-shadow: none;
+    }
+    &::-moz-range-thumb {
+      box-shadow: none;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/forms/_form-select.scss

@@ -0,0 +1,11 @@
+// Select
+// *******************************************************************************
+
+.form-select {
+  background-clip: padding-box;
+  &:hover {
+    &:not([disabled]):not([focus]) {
+      border-color: $input-border-hover-color;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/forms/_input-group.scss

@@ -0,0 +1,77 @@
+// Input groups
+// *******************************************************************************
+
+// Using :focus-within to apply focus/validation border and shadow to default and merged input-group
+.input-group {
+  &:hover {
+    .input-group-text,
+    .form-control {
+      border-color: $input-border-hover-color;
+    }
+  }
+  &:focus-within {
+    box-shadow: $input-focus-box-shadow;
+    .form-control,
+    .input-group-text {
+      box-shadow: none;
+    }
+  }
+  // For disabled input group
+  &.disabled {
+    .input-group-text {
+      background-color: $input-disabled-bg;
+    }
+  }
+}
+
+// input-group-text icon size
+.input-group-text {
+  background-clip: padding-box;
+  i {
+    @include font-size($input-font-size);
+  }
+}
+.input-group-lg > .input-group-text {
+  i {
+    @include font-size($input-font-size-lg);
+  }
+}
+.input-group-sm > .input-group-text {
+  i {
+    @include font-size($input-font-size-sm);
+  }
+}
+
+// Merge input
+
+// Input group merge .form-control border & padding
+@include ltr-only {
+  .input-group-merge {
+    .input-group-text {
+      &:first-child {
+        border-right: 0;
+      }
+      &:last-child {
+        border-left: 0;
+      }
+    }
+    .form-control {
+      &:not(:first-child) {
+        padding-left: 0;
+        border-left: 0;
+      }
+      &:not(:last-child) {
+        padding-right: 0;
+        border-right: 0;
+      }
+      &:is(textarea):not(:last-child) {
+        padding-right: $input-btn-padding-x;
+      }
+    }
+  }
+}
+
+// Adding transition (On focus border color change)
+.input-group-text {
+  @include transition($input-transition);
+}

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

@@ -0,0 +1,17 @@
+// Labels
+// *******************************************************************************
+
+.form-label,
+.col-form-label {
+  font-size: $form-label-font-size;
+  text-transform: $form-label-text-transform;
+  letter-spacing: $form-label-letter-spacing;
+}
+// Default (vertical ) form label size
+.form-label-lg {
+  @include font-size($input-font-size-lg);
+}
+
+.form-label-sm {
+  @include font-size($input-font-size-sm);
+}

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

@@ -0,0 +1,58 @@
+// Validation states
+// *******************************************************************************
+
+@each $state, $data in $form-validation-states {
+  @include template-form-validation-state($state, $data...);
+}
+
+// Currently supported for formvalidation and jq-validation
+form {
+  .error:not(li):not(input) {
+    color: $form-feedback-invalid-color;
+    font-size: 85%;
+    margin-top: 0.25rem;
+  }
+
+  .invalid,
+  .is-invalid .invalid:before,
+  .is-invalid::before {
+    border-color: $form-feedback-invalid-color !important;
+  }
+
+  .form-label {
+    &.invalid,
+    &.is-invalid {
+      border-color: $form-feedback-invalid-color;
+      box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, 0.4) !important;
+    }
+  }
+
+  select {
+    &.invalid {
+      & ~ .select2 {
+        .select2-selection {
+          border-color: $form-feedback-invalid-color;
+        }
+      }
+    }
+
+    // FormValidation
+
+    //Select2
+    &.is-invalid {
+      & ~ .select2 {
+        .select2-selection {
+          border-color: $form-feedback-invalid-color !important;
+        }
+      }
+    }
+    // Bootstrap select
+    &.selectpicker {
+      &.is-invalid {
+        ~ .btn {
+          border-color: $form-feedback-invalid-color !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+// Alerts
+// *******************************************************************************
+
+@mixin alert-variant($background: null, $border: null, $color: null) {
+}
+
+// Basic Alerts
+@mixin template-alert-variant($parent, $background) {
+  $border: if(
+    $dark-style,
+    shift-color($background, -$alert-border-scale, $card-bg),
+    shift-color($background, $alert-border-scale, $card-bg)
+  );
+  $color: if($dark-style, shift-color($background, -$alert-color-scale), shift-color($background, $alert-color-scale));
+  $background: if(
+    $dark-style,
+    shift-color($background, -$alert-bg-scale, $card-bg),
+    shift-color($background, $alert-bg-scale, $card-bg)
+  );
+
+  #{$parent} {
+    @include gradient-bg($background);
+    border-color: $border;
+    color: $color;
+    .btn-close {
+      background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $color), '#', '%23');
+    }
+
+    .alert-link {
+      color: $color;
+    }
+  }
+
+  #{$parent} {
+    hr {
+      background-color: $color !important;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+// Badges
+// *******************************************************************************
+
+// Size
+@mixin badge-size($badge-height, $badge-width, $badge-font-size) {
+  height: $badge-height;
+  width: $badge-width;
+  @include font-size($badge-font-size);
+}

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

@@ -0,0 +1,190 @@
+// Buttons
+// *******************************************************************************
+
+// Basic
+@mixin button-variant(
+  $background: null,
+  $border: null,
+  $hover-background: null,
+  $hover-border: null,
+  $active-background: null,
+  $active-border: null
+) {
+}
+@mixin template-button-variant($parent, $background, $color: null, $border: null) {
+  $background: $background;
+  $border: $background;
+  $color: if($color, $color, color-contrast($background));
+  $hover-background: if(
+    $color == $color-contrast-light,
+    shade-color($background, $btn-hover-bg-shade-amount),
+    tint-color($background, $btn-hover-bg-tint-amount)
+  );
+  $hover-border: if(
+    $color == $color-contrast-light,
+    shade-color($border, $btn-hover-border-shade-amount),
+    tint-color($border, $btn-hover-border-tint-amount)
+  );
+  $hover-color: color-contrast($hover-background);
+
+  $active-background: if(
+    $color == $color-contrast-light,
+    shade-color($background, $btn-active-bg-shade-amount),
+    tint-color($background, $btn-active-bg-tint-amount)
+  );
+  $active-border: if(
+    $color == $color-contrast-light,
+    shade-color($border, $btn-active-border-shade-amount),
+    tint-color($border, $btn-active-border-tint-amount)
+  );
+  $active-color: color-contrast($active-background);
+  $disabled-background: $background;
+  $disabled-border: $border;
+  $disabled-color: color-contrast($disabled-background);
+
+  #{$parent} {
+    color: $color;
+    @include gradient-bg($background);
+    border-color: $border;
+    @include box-shadow($btn-box-shadow);
+    box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);
+
+    &:hover {
+      color: $hover-color !important;
+      @include gradient-bg($hover-background !important);
+      border-color: $hover-border !important;
+      transform: $btn-hover-transform !important;
+    }
+
+    .btn-check:focus + &,
+    &:focus,
+    &.focus {
+      color: $hover-color;
+      @include gradient-bg($hover-background);
+      border-color: $hover-border;
+      transform: $btn-focus-transform;
+      box-shadow: none;
+    }
+
+    .btn-check:checked + &,
+    .btn-check:active + &,
+    &:active,
+    &.active,
+    &.show.dropdown-toggle,
+    .show > &.dropdown-toggle {
+      color: $active-color !important;
+      background-color: $active-background !important;
+      // Remove CSS gradients if they're enabled
+      background-image: if($enable-gradients, none !important, null);
+      border-color: $active-border !important;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $disabled-color !important;
+      background-color: $disabled-background !important;
+      // Remove CSS gradients if they're enabled
+      background-image: if($enable-gradients, none !important, null);
+      border-color: $disabled-border !important;
+      box-shadow: none !important;
+    }
+  }
+
+  // Button groups
+  // .btn-group #{$parent},
+  // .input-group #{$parent} {
+  //   border-right: $input-btn-border-width solid $active-background;
+  //   border-left: $input-btn-border-width solid $active-background;
+  // }
+  // .btn-group-vertical #{$parent} {
+  //   border-top-color: $active-background;
+  //   border-bottom-color: $active-background;
+  // }
+}
+
+// Outline
+@mixin button-outline-variant($color: null, $color-hover: null, $hover-color: null) {
+}
+// ? $hover-color <-> $color-hover used by bootstrap
+@mixin template-button-outline-variant($parent, $color, $hover-color: null) {
+  $color: $color;
+  $background: $color;
+  $color-hover: color-contrast($color);
+
+  $focus-background: $color;
+
+  $hover-background: if(
+    $color-hover == $color-contrast-light,
+    shade-color($background, $btn-hover-bg-shade-amount),
+    tint-color($background, $btn-hover-bg-tint-amount)
+  );
+
+  $active-background: if(
+    $color-hover == $color-contrast-light,
+    shade-color($background, $btn-active-bg-shade-amount),
+    tint-color($background, $btn-active-bg-tint-amount)
+  );
+
+  #{$parent} {
+    color: $color;
+    border-color: $color;
+    background: transparent;
+
+    &:hover {
+      color: $color-hover !important;
+      background-color: $hover-background !important;
+      border-color: $hover-background !important;
+      box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4) !important;
+      transform: $btn-hover-transform !important;
+    }
+
+    .btn-check:focus + &,
+    &:focus {
+      color: $color-hover;
+      background-color: $hover-background;
+      border-color: $hover-background;
+      box-shadow: none;
+      transform: $btn-focus-transform;
+    }
+
+    .btn-check:checked + &,
+    .btn-check:active + &,
+    &:active,
+    &.active,
+    &.dropdown-toggle.show {
+      color: $color-hover !important;
+      background-color: $active-background !important;
+      border-color: $active-background !important;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      box-shadow: none !important;
+      color: $color !important;
+      background-color: transparent !important;
+    }
+  }
+
+  #{$parent} .badge {
+    background: $color;
+    border-color: $color;
+    color: color-contrast($color);
+  }
+
+  #{$parent}:hover .badge,
+  #{$parent}:focus:hover .badge,
+  #{$parent}:active .badge,
+  #{$parent}.active .badge,
+  .show > #{$parent}.dropdown-toggle .badge {
+    background: $color-hover;
+    border-color: $color-hover;
+    color: if(alpha($color) ==1, $color, color-contrast($color-hover));
+  }
+}

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

@@ -0,0 +1,42 @@
+// * Carets
+// *******************************************************************************
+
+@mixin caret-up($caret-width) {
+  margin-top: -0;
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-bottom: 0;
+  border-left: 0;
+  transform: rotate(-45deg);
+}
+
+@mixin caret-down($caret-width) {
+  margin-top: -1 * divide($caret-width, 1.5);
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg);
+}
+
+@mixin caret-left($caret-width) {
+  margin-top: -1 * divide($caret-width, 2.5);
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-top: 0;
+  border-right: 0;
+  transform: rotate(45deg);
+}
+
+@mixin caret-right($caret-width) {
+  margin-top: -1 * divide($caret-width, 2.5);
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(-45deg);
+}

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

@@ -0,0 +1,26 @@
+// * Dropdowns
+// *******************************************************************************
+
+@mixin template-dropdown-variant($parent, $background, $color: null) {
+  #{$parent} .dropdown-item:not(.disabled).active,
+  #{$parent} .dropdown-item:not(.disabled):active {
+    background-color: $background;
+    color: if($color, $color, color-contrast($background)) !important;
+  }
+
+  #{$parent}.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
+  #{$parent}.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
+    background-color: $background;
+    color: if($color, $color, color-contrast($background)) !important;
+  }
+  // DataTables collection dropdown item active
+  .dt-button-collection {
+    .dropdown-item:not(.disabled):active {
+      background-color: $background;
+    }
+  }
+}
+
+@mixin template-dropdown-theme($background, $color: null) {
+  @include template-dropdown-variant('', $background, $color);
+}