sneat_rails 0.1.0

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

@@ -0,0 +1,346 @@
+// Menu
+// *******************************************************************************
+
+.menu {
+  display: flex;
+
+  .app-brand {
+    width: 100%;
+  }
+
+  //PS Scrollbar
+  .ps__thumb-y,
+  .ps__rail-y {
+    width: 0.125rem !important;
+  }
+
+  .ps__rail-y {
+    right: 0.25rem !important;
+    left: auto !important;
+    background: none !important;
+  }
+
+  .ps__rail-y:hover,
+  .ps__rail-y:focus,
+  .ps__rail-y.ps--clicking,
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y,
+  .ps__rail-y.ps--clicking > .ps__thumb-y {
+    width: 0.375rem !important;
+  }
+}
+
+.menu-inner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+.menu-inner-shadow {
+  display: none;
+  position: absolute;
+  top: $navbar-height + 0.35rem;
+  height: 3rem;
+  width: 100%;
+  pointer-events: none;
+  z-index: 2;
+  // Hide menu inner shadow in static layout
+  html:not(.layout-menu-fixed) & {
+    display: none !important;
+  }
+}
+
+// Menu item
+
+.menu-item {
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &.menu-item-animating {
+    transition: height $menu-animation-duration ease-in-out;
+  }
+}
+
+.menu-item,
+.menu-header,
+.menu-divider,
+.menu-block {
+  flex: 0 0 auto;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.menu-header {
+  opacity: 1;
+  transition: opacity $menu-animation-duration ease-in-out;
+}
+
+// Menu Icon
+.menu-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: $menu-icon-expanded-spacer;
+  font-size: $menu-icon-expanded-font-size;
+  .menu:not(.menu-no-animation) & {
+    transition: margin-right $menu-animation-duration ease;
+  }
+}
+
+// Menu link
+.menu-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  margin: 0;
+
+  .menu-item.disabled & {
+    cursor: not-allowed !important;
+  }
+  // link hover animation
+  .menu:not(.menu-no-animation) & {
+    transition-duration: $menu-animation-duration;
+    transition-property: color, background-color, left;
+  }
+
+  > :not(.menu-icon) {
+    flex: 0 1 auto;
+    opacity: 1;
+    .menu:not(.menu-no-animation) & {
+      transition: opacity $menu-animation-duration ease-in-out;
+    }
+  }
+}
+
+// Sub menu
+.menu-sub {
+  display: none;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  .menu:not(.menu-no-animation) & {
+    transition: background-color $menu-animation-duration;
+  }
+
+  .menu-item.open > & {
+    display: flex;
+  }
+}
+
+// Menu toggle open/close arrow
+.menu-toggle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-bottom: 0;
+  border-left: 0;
+  transform: translateY(-50%) rotate(45deg);
+
+  .menu-item.open:not(.menu-item-closing) > & {
+    transform: translateY(-50%) rotate(135deg);
+  }
+
+  .menu:not(.menu-no-animation) & {
+    transition-duration: $menu-animation-duration;
+    transition-property: -webkit-transform, transform;
+  }
+}
+
+// Menu divider
+.menu-divider {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid;
+}
+
+// Vertical Menu
+// *******************************************************************************
+
+.menu-vertical {
+  // overflow: hidden;
+  flex-direction: column;
+
+  // menu expand collapse animation
+  &:not(.menu-no-animation) {
+    transition: width $menu-animation-duration;
+  }
+
+  &,
+  .menu-block,
+  .menu-inner > .menu-item,
+  .menu-inner > .menu-header {
+    width: $menu-width;
+  }
+
+  .menu-inner {
+    flex-direction: column;
+    flex: 1 1 auto;
+
+    > .menu-item {
+      margin: $menu-item-spacer 0;
+      // Sneat menu-link spacing
+      .menu-link {
+        margin: $menu-vertical-link-margin-y $menu-vertical-link-margin-x;
+      }
+    }
+  }
+
+  .menu-item .menu-link,
+  .menu-block {
+    padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x;
+  }
+  // Sneat menu-header spacing
+  .menu-header {
+    margin: $menu-vertical-header-margin-y 0 $menu-vertical-header-margin-y * 0.5 0;
+    padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x * 2 $menu-vertical-link-padding-y
+      $menu-vertical-link-padding-x * 2;
+  }
+  .menu-item .menu-link {
+    font-size: $menu-font-size;
+  }
+
+  .menu-item.active:not(.open) > {
+    .menu-link {
+      font-weight: $font-weight-medium;
+    }
+  }
+  .menu-item .menu-toggle {
+    padding-right: calc(#{$menu-vertical-link-padding-x} + #{$caret-width * 3});
+
+    &::after {
+      right: $menu-vertical-link-padding-x;
+    }
+  }
+
+  .menu-divider {
+    margin-top: $menu-vertical-link-padding-y;
+    margin-bottom: $menu-vertical-link-padding-y;
+    padding: 0;
+  }
+
+  .menu-sub {
+    padding-top: $menu-vertical-menu-link-padding-y * 0.5;
+    padding-bottom: $menu-vertical-menu-link-padding-y * 0.5;
+
+    .menu-link {
+      padding-top: $menu-vertical-menu-link-padding-y;
+      padding-bottom: $menu-vertical-menu-link-padding-y;
+    }
+  }
+
+  .menu-icon {
+    width: $menu-icon-expanded-width;
+  }
+
+  .menu-sub .menu-icon {
+    margin-right: 0;
+
+    @include media-breakpoint-down(xl) {
+      display: none;
+    }
+  }
+
+  .menu-horizontal-wrapper {
+    flex: none;
+  }
+
+  // Levels
+  //
+
+  $menu-first-level-spacer: $menu-vertical-link-padding-x + $menu-icon-expanded-width + $menu-icon-expanded-spacer;
+
+  .menu-sub .menu-link {
+    padding-left: $menu-first-level-spacer;
+  }
+  // Menu levels loop for padding left/right
+  @for $i from 2 through $menu-max-levels {
+    $selector: '';
+
+    @for $l from 1 through $i {
+      $selector: '#{$selector} .menu-sub';
+    }
+
+    #{$selector} .menu-link {
+      padding-left: $menu-first-level-spacer + ($menu-vertical-menu-level-spacer * ($i - 1));
+    }
+  }
+}
+
+// Vertical Menu Collapsed
+// *******************************************************************************
+// ! Updated menu collapsed styles for sneat in this mixin
+@mixin layout-menu-collapsed() {
+  width: $menu-collapsed-width;
+
+  .menu-inner > .menu-item {
+    width: $menu-collapsed-width;
+  }
+  .menu-inner > .menu-item > .menu-link {
+    padding-left: $menu-vertical-link-margin-x;
+  }
+
+  .menu-inner > .menu-header,
+  .menu-block {
+    position: relative;
+    margin-left: $menu-vertical-header-margin-y;
+    padding-right: ($menu-vertical-link-padding-x * 2) - $menu-icon-expanded-spacer;
+    padding-left: $menu-icon-expanded-spacer;
+    width: $menu-width;
+    text-indent: -9999px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    .menu-header-text {
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: ($menu-collapsed-width * 0.5) - $menu-vertical-header-margin-y - 0.5;
+      display: block;
+      width: 1rem;
+      text-align: center;
+      top: 1.1875rem;
+    }
+  }
+  // Custom for sneat only
+  .menu-block {
+    &::before {
+      bottom: 0.75rem;
+    }
+  }
+  .menu-inner > .menu-item div:not(.menu-block) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0;
+  }
+  .menu-inner > .menu-item > .menu-sub,
+  .menu-inner > .menu-item.open > .menu-sub {
+    display: none;
+  }
+  .menu-inner > .menu-item > .menu-toggle::after {
+    display: none;
+  }
+
+  .menu-inner > .menu-item > .menu-link .menu-icon {
+    margin-left: -($menu-vertical-link-margin-x * 2);
+    width: $menu-collapsed-width;
+    text-align: center;
+    margin-right: 0;
+  }
+}
+
+// Only for menu example
+.menu-collapsed:not(:hover) {
+  @include layout-menu-collapsed();
+}

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

@@ -0,0 +1,6 @@
+@import 'mixins/navbar';
+@import 'mixins/footer';
+@import 'mixins/menu';
+@import 'mixins/avatar';
+@import 'mixins/text-divider';
+@import 'mixins/misc';

data/app/assets/stylesheets/sneat_rails/_components/_text-divider.scss

@@ -0,0 +1,89 @@
+// Divider
+// *******************************************************************************
+
+// @import '../../scss/_custom-variables/libs';
+
+.divider {
+  display: block;
+  text-align: center;
+  margin: $divider-margin-y $divider-margin-x;
+  overflow: hidden;
+  white-space: nowrap;
+
+  .divider-text {
+    position: relative;
+    display: inline-block;
+    font-size: $divider-font-size;
+    padding: $divider-text-padding-y $divider-text-padding-x;
+
+    i {
+      font-size: $divider-icon-size;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 100vw;
+      border-top: 1px solid $divider-color;
+    }
+
+    &:before {
+      right: 100%;
+    }
+
+    &:after {
+      left: 100%;
+    }
+  }
+  &.text-start {
+    .divider-text {
+      padding-left: 0;
+    }
+  }
+  &.text-end {
+    .divider-text {
+      padding-right: 0;
+    }
+  }
+  &.text-start-center {
+    .divider-text {
+      left: -25%;
+    }
+  }
+  &.text-end-center {
+    .divider-text {
+      right: -25%;
+    }
+  }
+  // Dotted Bordered Divider
+  &.divider-dotted {
+    .divider-text {
+      &:before,
+      &:after {
+        border-style: dotted;
+        border-width: 0 1px 1px;
+        border-color: $divider-color;
+      }
+    }
+  }
+  // Dashed Bordered Divider
+  &.divider-dashed {
+    .divider-text {
+      &:before,
+      &:after {
+        border-style: dashed;
+        border-width: 0 1px 1px;
+        border-color: $divider-color;
+      }
+    }
+  }
+}
+
+// For Contextual Colors
+@each $color, $value in $theme-colors {
+  @if $color !=primary and $color !=light {
+    @include template-text-divider-variant('.divider.divider-#{$color}', $value);
+  }
+}

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

@@ -0,0 +1,93 @@
+// Common
+// *******************************************************************************
+
+$ui-star-size: 1.1em !default;
+$ui-stars-spacer: -0.1em !default;
+$ui-star-filled-color: $yellow !default;
+
+// Navbar (custom navbar)
+// *******************************************************************************
+$navbar-height: 3.875rem !default;
+$navbar-suggestion-width: 96% !default;
+$navbar-suggestion-height: 28rem !default;
+$navbar-suggestion-border-radius: 0.5rem !default;
+$navbar-dropdown-width: 22rem !default;
+$navbar-dropdown-content-height: 30rem !default;
+$navbar-notifications-dropdown-item-padding: 1rem !default;
+
+// Menu
+// *******************************************************************************
+
+$menu-width: 16.25rem !default;
+$menu-collapsed-width: 5.25rem !default;
+$menu-collapsed-layout-breakpoint: xl !default;
+$menu-font-size: $font-size-base !default;
+
+$menu-item-spacer: 0.0625rem !default;
+
+$menu-vertical-link-margin-y: 0rem !default;
+$menu-vertical-link-margin-x: 1rem !default;
+
+$menu-vertical-header-margin-y: 1rem !default;
+$menu-vertical-header-margin-x: 0 !default;
+
+$menu-vertical-link-padding-y: 0.625rem !default;
+$menu-vertical-link-padding-x: 1rem !default;
+
+$menu-vertical-menu-link-padding-y: 0.625rem !default;
+$menu-vertical-menu-level-spacer: 0.65rem !default;
+
+$menu-horizontal-item-spacer: 0.325rem !default;
+$menu-horizontal-link-padding-y: 0.565rem !default;
+$menu-horizontal-link-padding-x: 1rem !default;
+$menu-horizontal-menu-link-padding-y: 0.625rem !default;
+$menu-horizontal-menu-level-spacer: 2.35rem !default;
+$menu-horizontal-menu-box-shadow: $dropdown-box-shadow !default;
+
+$menu-sub-width: 14.5rem !default;
+$menu-control-width: 2.25rem !default;
+$menu-control-arrow-size: 0.5rem !default;
+
+$menu-icon-expanded-width: 1.5rem !default;
+$menu-icon-expanded-font-size: 1.25rem !default;
+$menu-icon-expanded-spacer: 0.5rem !default;
+
+$menu-animation-duration: 0.3s !default;
+
+$menu-max-levels: 5 !default;
+
+$menu-dark-border-color: rgba(255, 255, 255, 0.2) !default;
+$menu-dark-menu-bg: rgba(0, 0, 0, 0.06) !default;
+$menu-light-border-color: rgba(0, 0, 0, 0.06) !default;
+$menu-light-menu-bg: rgba(0, 0, 0, 0.05) !default;
+
+// Avatars
+// *******************************************************************************
+
+$avatar-size-xl: 4.5rem !default;
+$avatar-size-lg: 4rem !default;
+$avatar-size-md: 3rem !default;
+$avatar-size: 2.375rem !default; // Default
+$avatar-size-sm: 2rem !default;
+$avatar-size-xs: 1.625rem !default;
+
+$avatar-initial-xl: 1.875rem !default;
+$avatar-initial-lg: 1.5rem !default;
+$avatar-initial-md: 1.125rem !default;
+$avatar-initial-sm: 0.75rem !default;
+$avatar-initial-xs: 0.625rem !default;
+
+$avatar-group-border: $white !default;
+
+// Text Divider
+// *******************************************************************************
+$divider-color: $gray-200 !default;
+
+$divider-margin-y: 1rem !default;
+$divider-margin-x: 0 !default;
+
+$divider-text-padding-y: 0rem !default;
+$divider-text-padding-x: 1rem !default;
+
+$divider-font-size: 0.8rem !default;
+$divider-icon-size: 1rem !default;

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

@@ -0,0 +1,33 @@
+// Within menu
+@mixin template-app-brand-collapsed() {
+  .app-brand {
+    width: $menu-collapsed-width;
+  }
+
+  .app-brand-logo,
+  .app-brand-link,
+  .app-brand-text {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .app-brand-logo ~ .app-brand-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0;
+  }
+  .app-brand .layout-menu-toggle {
+    // display: none !important;
+    opacity: 0;
+    left: calc(#{$menu-collapsed-width} - 1.5rem);
+  }
+
+  .app-brand-img {
+    display: none;
+  }
+
+  .app-brand-img-collapsed {
+    display: block;
+  }
+}

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

@@ -0,0 +1,22 @@
+// Avatar
+// *******************************************************************************
+
+@mixin template-avatar-style($height, $width, $font-size, $status-indicator-position: 2px) {
+  width: $width;
+  height: $height;
+
+  .avatar-initial {
+    font-size: $font-size;
+  }
+
+  &.avatar-online,
+  &.avatar-offline,
+  &.avatar-away,
+  &.avatar-busy {
+    &:after {
+      width: $width * 0.2;
+      height: $height * 0.2;
+      right: $status-indicator-position;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+// Footer
+// *******************************************************************************
+
+@mixin template-footer-style($parent, $bg, $color: null, $active-color: null, $border: null) {
+  $colors: get-navbar-prop($bg, $active-color, $color, $border);
+
+  #{$parent} {
+    background-color: map-get($colors, bg) !important;
+    color: map-get($colors, color);
+
+    .footer-link {
+      color: map-get($colors, color);
+
+      &:hover,
+      &:focus {
+        color: map-get($colors, active-color);
+      }
+
+      &.disabled {
+        color: map-get($colors, disabled-color) !important;
+      }
+    }
+
+    .footer-text {
+      color: map-get($colors, active-color);
+    }
+
+    .show > .footer-link,
+    .active > .footer-link,
+    .footer-link.show,
+    .footer-link.active {
+      color: map-get($colors, active-color);
+    }
+
+    hr {
+      border-color: map-get($colors, border);
+    }
+  }
+}