lshcomment 1.0.0

package/src/assets/css/core/_sidebar.scss

@@ -0,0 +1,426 @@
+// scss-lint:disable NestingDepth, SelectorDepth
+.sidebar {
+  padding: $sidebar-padding;
+  overflow: hidden;
+  color: $sidebar-color;
+  background: $sidebar-bg;
+  @include borders($sidebar-borders);
+
+  .sidebar-close {
+    position: absolute;
+    right: 0;
+    display: none;
+    padding: 0 $spacer;
+    font-size: 24px;
+    font-weight: 800;
+    line-height: $navbar-height;
+    color: $sidebar-color;
+    background: 0;
+    border: 0;
+    opacity: .8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .sidebar-nav {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    @include sidebar-width($sidebar-borders, $sidebar-width);
+
+    &::-webkit-scrollbar {
+
+      position: absolute;
+      width: 10px;
+      margin-left: -10px;
+      -webkit-appearance: none;
+    }
+
+    // &::-webkit-scrollbar-button {    }
+
+    &::-webkit-scrollbar-track {
+      background-color: lighten($sidebar-bg, 5%);
+      border-right: 1px solid darken($sidebar-bg, 5%);
+      border-left: 1px solid darken($sidebar-bg, 5%);
+    }
+
+    // &::-webkit-scrollbar-track-piece {    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 50px;
+      background-color: darken($sidebar-bg, 10%);
+      background-clip: content-box;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 1px 2px;
+    }
+
+    // &::-webkit-scrollbar-corner {    }
+
+    // &::-webkit-resizer {    }
+  }
+
+  .nav {
+    @include sidebar-width($sidebar-borders, $sidebar-width);
+    flex-direction: column !important;
+
+    .nav-title {
+      padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
+      font-size: 11px;
+      font-weight: 600;
+      color: $sidebar-nav-title-color;
+      text-transform: uppercase;
+    }
+
+    .divider {
+      height: 10px;
+    }
+
+    .nav-item {
+      position: relative;
+      margin: 0;
+      transition: background .3s ease-in-out;
+
+      ul {
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+        overflow-y: hidden;
+        transition: max-height .3s ease-in-out;
+
+        li {
+          padding: 0;
+          list-style: none;
+        }
+      }
+
+      .nav-link {
+        display: block;
+        padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
+        color: $sidebar-nav-link-color;
+        text-decoration: none;
+        background: $sidebar-nav-link-bg;
+        @include borders($sidebar-nav-link-borders);
+        @if $enable-sidebar-nav-rounded {
+          border-radius: $border-radius;
+        }
+
+        &:hover {
+          color: $sidebar-nav-link-hover-color !important;
+          background: $sidebar-nav-link-hover-bg !important;
+          @include borders($sidebar-nav-link-hover-borders);
+
+          i {
+            color: $sidebar-nav-link-hover-icon-color;
+          }
+        }
+
+        &.active {
+          color: $sidebar-nav-link-active-color;
+          background: $sidebar-nav-link-active-bg;
+          @include borders($sidebar-nav-link-active-borders);
+
+          i {
+            color: $sidebar-nav-link-active-icon-color;
+          }
+        }
+
+        [class^="icon-"], [class*=" icon-"] {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        i {
+          width: 16px;
+          margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
+          font-size: 14px;
+          color: $sidebar-nav-link-icon-color;
+          text-align: center;
+        }
+
+        .badge {
+          float: right;
+          margin-top: 2px;
+          // margin-left: 10px;
+        }
+
+        &.nav-dropdown-toggle {
+
+          &::before {
+            position: absolute;
+            top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
+            right: $sidebar-nav-link-padding-x;
+            display: block;
+            width: ($font-size-base);
+            height: ($font-size-base);
+            padding: 0;
+            font-size: $font-size-base;
+            line-height: ($font-size-base * 3 / 4);
+            text-align: center;
+            content: "\2039";
+            transition: .3s;
+          }
+        }
+      }
+
+      &.nav-dropdown {
+        &.open {
+          background: $sidebar-nav-dropdown-bg;
+          @include borders($sidebar-nav-dropdown-borders);
+          @if $enable-sidebar-nav-rounded {
+            border-radius: $border-radius;
+          }
+          > ul, > ol {
+            // display: inline;
+            max-height: 2000px;
+          }
+
+          .nav-link {
+            color: $sidebar-nav-dropdown-color;
+            border-left: 0 !important;
+          }
+
+          > .nav-link.nav-dropdown-toggle::before {
+            transform: rotate(-90deg);
+          }
+
+          .nav-dropdown.open {
+            border-left: 0;
+          }
+        }
+        &.nt {
+          transition: 0s !important;
+          > ul, > ol {
+            transition: 0s !important;
+          }
+          .nav-link {
+            &.nav-dropdown-toggle {
+
+              &::before {
+                transition: 0s !important;
+              }
+            }
+          }
+        }
+      }
+
+      .nav-label {
+        display: block;
+        padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
+        color: $sidebar-nav-title-color;
+
+        &:hover {
+          color: $sidebar-color;
+          text-decoration: none;
+        }
+
+        i {
+          width: 20px;
+          margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
+          font-size: 10px;
+          color: $sidebar-nav-link-icon-color;
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+
+      @if (lightness( $sidebar-bg ) < 40) {
+        .progress {
+          background-color: lighten($sidebar-bg, 15%) !important;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .sidebar-compact {
+    .sidebar {
+      .sidebar-nav {
+        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
+      }
+
+      .nav {
+        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
+
+        .nav-title {
+          text-align: center;
+        }
+
+        .nav-item {
+          width: $sidebar-compact-width;
+          border-left: 0 !important;
+
+          .nav-link {
+            text-align: center;
+
+            i {
+              display: block;
+              width: 100%;
+              margin: $spacer / 4 0;
+              font-size: 24px;
+            }
+
+            .badge {
+              position: absolute;
+              top: 18px;
+              right: 10px;
+            }
+
+            &.nav-dropdown-toggle {
+
+              &::before {
+                top: 30px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-minimized {
+    .hidden-cn {
+      display: none;
+    }
+    .sidebar {
+      z-index: $zindex-sticky - 1;
+
+      &:hover {
+        overflow: visible;
+      }
+
+      .sidebar-nav {
+        overflow: visible;
+        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
+      }
+
+      .nav {
+        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
+
+        .nav-title, .divider {
+          display: none;
+        }
+
+        .nav-item {
+          width: $sidebar-minimized-width;
+          overflow: hidden;
+          border-left: 0 !important;
+
+          ul {
+            background: $sidebar-bg;
+          }
+
+          .nav-link {
+            position: relative;
+            padding-left: 0;
+            margin: 0;
+            white-space: nowrap;
+            border-left: 0 !important;
+
+            &.nav-dropdown-toggle {
+
+              &::before {
+                display: none;
+              }
+            }
+
+            i {
+              display: block;
+              float: left;
+              width: $sidebar-minimized-height;
+              padding: 0;
+              margin: 0 !important;
+              font-size: 18px;
+            }
+
+            .badge {
+              position: absolute;
+              // top: 14px;
+              right: 15px;
+              display: none;
+            }
+
+            &:hover {
+              width: $sidebar-width;
+
+              .badge {
+                display: inline;
+              }
+            }
+          }
+
+          ul {
+            position: absolute;
+            left: $sidebar-minimized-width;
+            overflow: visible;
+            li {
+              position: relative;
+              padding: 0;
+
+              .nav-link {
+                width: $sidebar-width - $sidebar-minimized-width;
+              }
+
+              ul, ol {
+                position: absolute;
+                top: 0;
+                left: $sidebar-width;
+                z-index: $zindex-sticky + 1000;
+                list-style: none;
+              }
+            }
+          }
+
+          &.nav-dropdown {
+            &.open {
+              background: $sidebar-nav-link-active-bg;
+              > .nav-link i {
+                color: $sidebar-nav-link-active-icon-color;
+              }
+              > ul, > ol {
+                display: none;
+              }
+            }
+          }
+
+          &:hover {
+            width: $sidebar-width + $sidebar-minimized-width;
+            overflow: visible;
+            background: $sidebar-nav-link-hover-bg;
+            transition: 0s;
+
+            > .nav-link {
+              width: $sidebar-width + $sidebar-minimized-width;
+            }
+
+            > ul, > ol {
+              display: inline;
+              max-height: 10000px;
+              transition: 0s;
+
+              li {
+                width: $sidebar-width;
+
+                .nav-link {
+                  width: $sidebar-width;
+                }
+              }
+            }
+
+            &.nav-dropdown {
+              &.open {
+                > ul, > ol {
+                  display: inline;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/css/core/_switches.scss

@@ -0,0 +1,301 @@
+@mixin switch-size($width, $height, $font-size, $handle-margin) {
+  width: $width;
+  height: $height;
+
+  .switch-label {
+    font-size: $font-size;
+  }
+
+  .switch-handle {
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+}
+
+@mixin switch($type, $width, $height, $font-size, $handle-margin) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: $width;
+  height: $height;
+  background-color: transparent;
+  cursor: pointer;
+
+  .switch-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  .switch-label {
+    position: relative;
+    display: block;
+    height: inherit;
+    @if $type == icon {
+      font-family: FontAwesome;
+    }
+    font-size: $font-size;
+    font-weight: 600;
+    text-transform: uppercase;
+    @if $type == ddd {
+      background-color: $gray-100;
+    } @else {
+      background-color: #fff;
+    }
+    border: 1px solid $border-color;
+    border-radius: 2px;
+    transition: opacity background .15s ease-out;
+  }
+  @if $type == text or $type == icon {
+    .switch-label::before,
+    .switch-label::after {
+      position: absolute;
+      top: 50%;
+      width: 50%;
+      margin-top: -.5em;
+      line-height: 1;
+      text-align: center;
+      transition: inherit;
+    }
+    .switch-label::before {
+      right: 1px;
+      color: $gray-200;
+      content: attr(data-off);
+    }
+    .switch-label::after {
+      left: 1px;
+      color: #fff;
+      content: attr(data-on);
+      opacity: 0;
+    }
+  }
+  .switch-input:checked ~ .switch-label {
+    //background: $gray-lightest;
+  }
+  .switch-input:checked ~ .switch-label::before {
+    opacity: 0;
+  }
+  .switch-input:checked ~ .switch-label::after {
+    opacity: 1;
+  }
+
+  .switch-handle {
+    position: absolute;
+    top: $handle-margin;
+    left: $handle-margin;
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+    background: #fff;
+    border: 1px solid $border-color;
+    border-radius: 1px;
+    transition: left .15s ease-out;
+    @if $type == ddd {
+      border: 0;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
+    }
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+
+
+  @if $type == ddd {
+    @extend .switch-pill;
+  }
+
+  //size variations
+  @if $type == default {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == text {
+
+    &.switch-lg {
+      @include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == icon {
+
+    &.switch-lg {
+      @include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == ddd {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
+    }
+  }
+}
+
+@mixin switch-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: $color !important;
+    border-color: darken($color,10%);
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: darken($color,10%);
+  }
+}
+
+@mixin switch-outline-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff !important;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: $color;
+  }
+}
+
+@mixin switch-outline-alt-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff !important;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    background: $color !important;
+    border-color: $color;
+  }
+}
+
+$switch-lg-width: 48px;
+$switch-lg-height: 28px;
+$switch-lg-font-size: 12px;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$switch-font-size: 10px;
+
+$handle-margin: 2px;
+
+$switch-sm-width: 32px;
+$switch-sm-height: 20px;
+$switch-sm-font-size: 8px;
+
+$switch-xs-width: 24px;
+$switch-xs-height: 16px;
+$switch-xs-font-size: 7px;
+
+
+$switch-text-lg-width: 56px;
+$switch-text-lg-height: 28px;
+$switch-text-lg-font-size: 12px;
+
+$switch-text-width: 48px;
+$switch-text-height: 24px;
+$switch-text-font-size: 10px;
+
+$switch-text-sm-width: 40px;
+$switch-text-sm-height: 20px;
+$switch-text-sm-font-size: 8px;
+
+$switch-text-xs-width: 32px;
+$switch-text-xs-height: 16px;
+$switch-text-xs-font-size: 7px;
+
+
+$switch-icon-lg-width: 56px;
+$switch-icon-lg-height: 28px;
+$switch-icon-lg-font-size: 12px;
+
+$switch-icon-width: 48px;
+$switch-icon-height: 24px;
+$switch-icon-font-size: 10px;
+
+$switch-icon-sm-width: 40px;
+$switch-icon-sm-height: 20px;
+$switch-icon-sm-font-size: 8px;
+
+$switch-icon-xs-width: 32px;
+$switch-icon-xs-height: 16px;
+$switch-icon-xs-font-size: 7px;
+
+.switch.switch-default {
+  @include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
+}
+
+.switch.switch-text {
+  @include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
+}
+
+.switch.switch-icon {
+  @include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
+}
+
+.switch.switch-3d {
+  @include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
+}
+
+//pills style
+.switch-pill {
+  .switch-label,
+  .switch-handle {
+    border-radius: 50em !important;
+  }
+
+  .switch-label::before {
+    right: 2px !important;
+  }
+  .switch-label::after {
+    left: 2px !important;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  //normal style
+  .switch-#{$color} {
+    @include switch-variant($value);
+  }
+  //outline style
+  .switch-#{$color}-outline {
+    @include switch-outline-variant($value);
+  }
+  //outline alternative style
+  .switch-#{$color}-outline-alt {
+    @include switch-outline-alt-variant($value);
+  }
+}