sneat_rails 0.1.0

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

@@ -0,0 +1,39 @@
+@import '_components/include';
+
+// * Bootstrap colors (Uncomment required colors)
+// *******************************************************************************
+
+$bootstrap-colors: () !default;
+
+@each $color-name, $color-value in $bootstrap-colors {
+  @include bg-variant('.bg-#{$color-name}', $color-value);
+  @include bg-label-variant('.bg-label-#{$color-name}', $color-value);
+
+  @include border-label-variant('.border-label-#{$color-name}', $color-value);
+  @include border-light-variant('.border-light-#{$color-name}', $color-value);
+
+  .border-#{$color-name} {
+    border-color: $color-value !important;
+  }
+
+  @include template-button-variant('.btn-#{$color-name}', $color-value);
+  @include template-button-outline-variant('.btn-outline-#{$color-name}', $color-value);
+}
+
+// * Navbar
+// *******************************************************************************
+
+@each $color, $value in $theme-colors {
+  @if $color !=primary and $color !=light {
+    @include template-navbar-style('.navbar.bg-#{$color}', $value);
+  }
+}
+
+@include template-navbar-style('.navbar.bg-white', #fff, $color: $text-muted, $active-color: $body-color);
+@include template-navbar-style('.navbar.bg-light', $gray-100, $color: $text-muted, $active-color: $body-color);
+
+// * Footer
+// *******************************************************************************
+
+@include template-footer-style('.footer.bg-white', #fff, $color: $text-muted, $active-color: $body-color);
+@include template-footer-style('.footer.bg-light', $gray-100, $color: $text-muted, $active-color: $body-color);

data/app/assets/stylesheets/sneat_rails/_components/_app-brand.scss

@@ -0,0 +1,64 @@
+// App Brand
+// *******************************************************************************
+
+@import 'mixins/app-brand';
+
+.app-brand {
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  line-height: 1;
+  min-height: 1px;
+  align-items: center;
+}
+
+.app-brand-link {
+  display: flex;
+  align-items: center;
+}
+.app-brand-logo {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  min-height: 1px;
+
+  img,
+  svg {
+    display: block;
+  }
+}
+
+.app-brand-text {
+  flex-shrink: 0;
+  opacity: 1;
+  transition: opacity $menu-animation-duration * 0.5 ease-in-out;
+}
+
+.app-brand-img-collapsed {
+  display: none;
+}
+
+// App brand with vertical menu
+.menu-vertical .app-brand {
+  padding-right: $menu-vertical-link-padding-x + $menu-vertical-link-margin-x;
+  padding-left: $menu-vertical-link-padding-x + $menu-vertical-link-margin-x;
+}
+
+// App brand with vertical menu
+.menu-horizontal .app-brand,
+.menu-horizontal .app-brand + .menu-divider {
+  display: none !important;
+}
+
+:not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) {
+  @include template-app-brand-collapsed();
+}
+
+@include media-breakpoint-up($menu-collapsed-layout-breakpoint) {
+  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
+    .layout-menu {
+    @include template-app-brand-collapsed();
+  }
+}

data/app/assets/stylesheets/sneat_rails/_components/_avatar.scss

@@ -0,0 +1,126 @@
+// Avatar
+// *******************************************************************************
+
+// Avatar Styles
+.avatar {
+  position: relative;
+  width: $avatar-size;
+  height: $avatar-size;
+  cursor: pointer;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  // Avatar Initials if no images added
+  .avatar-initial {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $white;
+    background-color: $secondary;
+    font-weight: $font-weight-medium;
+  }
+  // Avatar Status indication
+  &.avatar-online,
+  &.avatar-offline,
+  &.avatar-away,
+  &.avatar-busy {
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      box-shadow: 0 0 0 2px $white;
+    }
+  }
+  &.avatar-online:after {
+    background-color: $success;
+  }
+  &.avatar-offline:after {
+    background-color: $secondary;
+  }
+  &.avatar-away:after {
+    background-color: $warning;
+  }
+  &.avatar-busy:after {
+    background-color: $danger;
+  }
+}
+
+// Pull up avatar style
+.pull-up {
+  transition: all 0.25s ease;
+  &:hover {
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: $box-shadow;
+    z-index: 30;
+    border-radius: 50%;
+  }
+}
+
+// Avatar Sizes
+.avatar-xs {
+  @include template-avatar-style($avatar-size-xs, $avatar-size-xs, $avatar-initial-xs, 1px);
+}
+.avatar-sm {
+  @include template-avatar-style($avatar-size-sm, $avatar-size-sm, $avatar-initial-sm, 2px);
+}
+.avatar-md {
+  @include template-avatar-style($avatar-size-md, $avatar-size-md, $avatar-initial-md, 4px);
+}
+.avatar-lg {
+  @include template-avatar-style($avatar-size-lg, $avatar-size-lg, $avatar-initial-lg, 5px);
+}
+.avatar-xl {
+  @include template-avatar-style($avatar-size-xl, $avatar-size-xl, $avatar-initial-xl, 6px);
+}
+
+// Avatar Group SCSS
+.avatar-group {
+  .avatar {
+    transition: all 0.25s ease;
+    img,
+    .avatar-initial {
+      border: 2px solid $avatar-group-border;
+      // box-shadow: 0 0 0 2px $avatar-group-border, inset 0 0 0 1px rgba($black, 0.07); //0 2px 10px 0 rgba($secondary,.3);
+    }
+    .avatar-initial {
+      background-color: tint-color($secondary, 20%);
+    }
+    &:hover {
+      z-index: 30;
+      transition: all 0.25s ease;
+    }
+  }
+  // Avatar Group Sizings
+  .avatar {
+    margin-left: -0.8rem;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  .avatar-xs {
+    margin-left: -0.65rem;
+  }
+  .avatar-sm {
+    margin-left: -0.75rem;
+  }
+  .avatar-md {
+    margin-left: -0.9rem;
+  }
+  .avatar-lg {
+    margin-left: -1.5rem;
+  }
+  .avatar-xl {
+    margin-left: -1.75rem;
+  }
+}

data/app/assets/stylesheets/sneat_rails/_components/_base.scss

@@ -0,0 +1,159 @@
+// Base
+// *******************************************************************************
+
+body {
+  text-rendering: optimizeLegibility;
+  font-smoothing: antialiased;
+  -moz-font-feature-settings: 'liga' on;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@include media-breakpoint-up(md) {
+  button.list-group-item {
+    outline: none;
+  }
+}
+
+// * App Overlay
+// *******************************************************************************
+
+.app-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba($black, 0.5);
+  visibility: hidden;
+  z-index: 3;
+  transition: all 0.25s ease;
+  &.show {
+    visibility: visible;
+  }
+}
+
+// * Containers
+// *******************************************************************************
+
+.container,
+.container-fluid,
+.container-xxl {
+  padding-right: $container-padding-x-sm;
+  padding-left: $container-padding-x-sm;
+
+  @include media-breakpoint-up(lg) {
+    padding-right: $container-padding-x;
+    padding-left: $container-padding-x;
+  }
+}
+
+// * Thumbnails
+// *******************************************************************************
+
+.img-thumbnail {
+  position: relative;
+  display: block;
+  img {
+    z-index: 1;
+  }
+}
+.img-thumbnail-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  display: block;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  transform: translate(-50%, -50%);
+
+  .img-thumbnail:hover &,
+  .img-thumbnail:focus & {
+    opacity: 1;
+  }
+}
+
+// Overlay effect
+.img-thumbnail-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  transition: all 0.2s ease-in-out;
+
+  .img-thumbnail:not(:hover):not(:focus) & {
+    opacity: 0 !important;
+  }
+}
+
+.img-thumbnail-shadow {
+  transition: box-shadow 0.2s;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 5px 20px rgba($black, 0.4);
+  }
+}
+
+// Zoom-in effect
+.img-thumbnail-zoom-in {
+  overflow: hidden;
+
+  img {
+    transition: all 0.3s ease-in-out;
+    transform: translate3d(0);
+  }
+
+  .img-thumbnail-content {
+    transform: translate(-50%, -50%) scale(0.6);
+  }
+
+  &:hover,
+  &:focus {
+    img {
+      transform: scale(1.1);
+    }
+
+    .img-thumbnail-content {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+}
+
+// * IE Fixes
+// *******************************************************************************
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  // Fix IE parent container height bug when containing image with fluid width
+  .card,
+  .card-body,
+  .media,
+  .flex-column,
+  .tab-content {
+    min-height: 1px;
+  }
+
+  img {
+    min-height: 1px;
+    height: auto;
+  }
+}
+
+// * Buy now section
+// *******************************************************************************
+.buy-now {
+  .btn-buy-now {
+    position: fixed;
+    bottom: 3rem;
+    right: $container-padding-x;
+    z-index: $zindex-menu-fixed;
+    box-shadow: 0 1px 20px 1px $danger;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_components/_common.scss

@@ -0,0 +1,232 @@
+// * Common
+// *******************************************************************************
+
+@use '../_bootstrap-extended/include' as light;
+
+.ui-square,
+.ui-rect,
+.ui-rect-30,
+.ui-rect-60,
+.ui-rect-67,
+.ui-rect-75 {
+  position: relative !important;
+  display: block !important;
+  padding-top: 100% !important;
+  width: 100% !important;
+}
+
+.ui-square {
+  padding-top: 100% !important;
+}
+
+.ui-rect {
+  padding-top: 50% !important;
+}
+
+.ui-rect-30 {
+  padding-top: 30% !important;
+}
+
+.ui-rect-60 {
+  padding-top: 60% !important;
+}
+
+.ui-rect-67 {
+  padding-top: 67% !important;
+}
+
+.ui-rect-75 {
+  padding-top: 75% !important;
+}
+
+.ui-square-content,
+.ui-rect-content {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+}
+
+.text-strike-through {
+  text-decoration: line-through;
+}
+
+// * Line Clamp with ellipsis
+// *******************************************************************************
+
+$clamp-numbers: (
+  '1': 1,
+  '2': 2,
+  '3': 3
+) !default;
+
+@each $clamp-class, $clamp-value in $clamp-numbers {
+  .line-clamp-#{$clamp-class} {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: $clamp-value;
+    -webkit-box-orient: vertical;
+  }
+}
+
+// * Stars
+// *******************************************************************************
+
+.ui-stars,
+.ui-star,
+.ui-star > * {
+  height: $ui-star-size;
+
+  // Disable dragging
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  user-drag: none;
+}
+
+.ui-stars {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ui-star {
+  position: relative;
+  display: block;
+  float: left;
+  width: $ui-star-size;
+  height: $ui-star-size;
+  text-decoration: none !important;
+  font-size: $ui-star-size;
+  line-height: 1;
+  user-select: none;
+
+  & + & {
+    margin-left: $ui-stars-spacer;
+  }
+
+  > *,
+  > *::before,
+  > *::after {
+    position: absolute;
+    left: $ui-star-size * 0.5;
+    height: 100%;
+    font-size: 1em;
+    line-height: 1;
+    transform: translateX(-50%);
+  }
+
+  > * {
+    top: 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  > *:first-child {
+    z-index: 10;
+    display: none;
+    overflow: hidden;
+    color: $ui-star-filled-color;
+  }
+
+  // Default icon
+  > *:last-child {
+    z-index: 5;
+    display: block;
+  }
+
+  &.half-filled > *:first-child {
+    width: 50%;
+    transform: translateX(-100%);
+  }
+
+  &.filled > *:first-child,
+  &.half-filled > *:first-child {
+    display: block;
+  }
+
+  &.filled > *:last-child {
+    display: none;
+  }
+}
+
+// Hoverable
+
+.ui-stars.hoverable .ui-star > *:first-child {
+  display: block;
+}
+
+// Empty stars if first star is not filled
+.ui-stars.hoverable .ui-star:first-child:not(.filled),
+.ui-stars.hoverable .ui-star:first-child:not(.half-filled) {
+  > *:first-child,
+  ~ .ui-star > *:first-child {
+    display: none;
+  }
+}
+
+.ui-stars.hoverable .ui-star.filled > *:first-child,
+.ui-stars.hoverable .ui-star.half-filled > *:first-child {
+  display: block !important;
+}
+
+.ui-stars.hoverable:hover .ui-star > *:first-child {
+  display: block !important;
+  width: 100% !important;
+  transform: translateX(-50%) !important;
+}
+
+.ui-stars.hoverable .ui-star:hover ~ .ui-star {
+  > *:first-child {
+    display: none !important;
+  }
+
+  > *:last-child {
+    display: block !important;
+  }
+}
+
+// * Background
+// *******************************************************************************
+
+.ui-bg-cover {
+  background-color: rgba(0, 0, 0, 0);
+  background-position: center center;
+  background-size: cover;
+}
+
+.ui-bg-overlay-container,
+.ui-bg-video-container {
+  position: relative;
+
+  > * {
+    position: relative;
+  }
+}
+
+.ui-bg-overlay-container .ui-bg-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+}
+
+// * Styles
+// *******************************************************************************
+@if not $dark-style {
+  .light-style {
+    $ui-star-empty-color: light.$gray-200;
+
+    .ui-bordered {
+      border: 1px solid light.$border-color;
+    }
+
+    .ui-star > *:last-child {
+      color: $ui-star-empty-color;
+    }
+  }
+}

data/app/assets/stylesheets/sneat_rails/_components/_footer.scss

@@ -0,0 +1,39 @@
+// Footer
+// *******************************************************************************
+
+.footer-link {
+  display: inline-block;
+}
+
+// Light footer
+.footer-light {
+  color: $navbar-light-color;
+
+  .footer-text {
+    color: $navbar-light-active-color;
+  }
+
+  .footer-link {
+    color: $navbar-light-color;
+
+    &:hover,
+    &:focus {
+      color: $navbar-light-hover-color;
+    }
+
+    &.disabled {
+      color: $navbar-light-disabled-color !important;
+    }
+  }
+
+  .show > .footer-link,
+  .active > .footer-link,
+  .footer-link.show,
+  .footer-link.active {
+    color: $navbar-light-active-color;
+  }
+
+  hr {
+    border-color: $menu-light-border-color;
+  }
+}

data/app/assets/stylesheets/sneat_rails/_components/_include.scss

@@ -0,0 +1,11 @@
+// Include
+// *******************************************************************************
+
+@import '../_bootstrap-extended/include';
+
+//Mixins
+@import './_mixins'; // Components mixins
+
+//Components variables
+@import '../_custom-variables/components'; // Components variable (for customization purpose)
+@import 'variables'; // Components variable