lshcomment 1.0.0

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

@@ -0,0 +1,64 @@
+.aside-menu {
+  z-index: $zindex-sticky - 1;
+  width: $aside-menu-width;
+  color: $aside-menu-color;
+  background: $aside-menu-bg;
+  @include borders($aside-menu-borders);
+
+  .nav-tabs {
+    border-color: $border-color;
+    .nav-link {
+      padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
+      color: $body-color;
+      border-top: 0;
+      &.active {
+        color: theme-color("primary");
+        border-right-color: $border-color;
+        border-left-color: $border-color;
+      }
+    }
+    .nav-item:first-child {
+      .nav-link {
+        border-left: 0;
+      }
+    }
+  }
+
+  .tab-content {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 0;
+    border-top: 1px solid $border-color;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      margin-left: -10px;
+      -webkit-appearance: none;
+    }
+
+    // &::-webkit-scrollbar-button {    }
+
+    &::-webkit-scrollbar-track {
+      background-color: lighten($aside-menu-bg, 5%);
+      border-right: 1px solid darken($aside-menu-bg, 5%);
+      border-left: 1px solid darken($aside-menu-bg, 5%);
+    }
+
+    // &::-webkit-scrollbar-track-piece {    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 50px;
+      background-color: darken($aside-menu-bg, 10%);
+      background-clip: content-box;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 1px 2px;
+    }
+
+    .tab-pane {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+.img-avatar {
+  border-radius: 50em;
+}
+
+.avatar {
+  $width: 36px;
+  $status-width: 10px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-xs {
+  $width: 20px;
+  $status-width: 8px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-sm {
+  $width: 24px;
+  $status-width: 8px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-lg {
+  $width: 72px;
+  $status-width: 12px;
+  @include avatar($width,$status-width);
+}
+
+.avatars-stack {
+  .avatar.avatar-xs {
+    margin-right: -10px;
+  }
+
+  // .avatar.avatar-sm {
+  //
+  // }
+
+  .avatar {
+    margin-right: -15px;
+    transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
+
+    &:hover {
+      margin-right: 0 !important;
+    }
+  }
+
+  // .avatar.avatar-lg {
+  //
+  // }
+
+}

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

@@ -0,0 +1,3 @@
+.badge-pill {
+  border-radius: $badge-pill-border-radius;
+}

package/src/assets/css/core/_breadcrumb-menu.scss

@@ -0,0 +1,35 @@
+.breadcrumb-menu {
+  position: absolute;
+  top: 0;
+  right: $breadcrumb-padding-x;
+
+  &::before {
+    display: none;
+  }
+
+  .btn {
+    padding-top: $breadcrumb-padding-y;
+    padding-bottom: $breadcrumb-padding-y;
+  }
+
+  .btn {
+    color: $text-muted;
+
+    &:hover, &.active {
+      color: $body-color;
+      background: transparent;
+    }
+  }
+
+  .open {
+    .btn {
+      color: $body-color;
+      background: transparent;
+    }
+  }
+
+  .dropdown-menu {
+    min-width: 180px;
+    line-height: $line-height-base;
+  }
+}

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

@@ -0,0 +1,6 @@
+.breadcrumb {
+  position: relative;
+  margin-bottom: 1.5 * $spacer;
+
+  @include borders($breadcrumb-borders);
+}

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

@@ -0,0 +1,575 @@
+button {
+  cursor: pointer;
+}
+
+.btn {
+  .badge {
+    position: absolute;
+    top: 2px;
+    right: 6px;
+    font-size: 9px;
+  }
+}
+
+.btn-transparent {
+  color: #fff;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.btn {
+  [class^="icon-"], [class*=" icon-"] {
+    display: inline-block;
+    margin-top: -2px;
+    vertical-align: middle;
+  }
+}
+
+.btn-facebook,
+.btn-twitter,
+.btn-linkedin,
+.btn-flickr,
+.btn-tumblr,
+.btn-xing,
+.btn-github,
+.btn-html5,
+.btn-openid,
+.btn-stack-overflow,
+.btn-youtube,
+.btn-css3,
+.btn-dribbble,
+.btn-google-plus,
+.btn-instagram,
+.btn-pinterest,
+.btn-vk,
+.btn-yahoo,
+.btn-behance,
+.btn-dropbox,
+.btn-reddit,
+.btn-spotify,
+.btn-vine,
+.btn-foursquare,
+.btn-vimeo {
+  position: relative;
+  overflow: hidden;
+  color: #fff !important;
+  text-align: center;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &.icon {
+
+    span {
+      display: none;
+    }
+  }
+
+  &.text {
+    &::before {
+      display: none;
+    }
+
+    span {
+      margin-left: 0 !important;
+    }
+  }
+  @include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
+
+  &.btn-lg {
+    @include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  }
+
+  &.btn-sm {
+    @include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  }
+
+}
+
+.btn-facebook {
+  $color: $facebook;
+
+  background: $color;
+  &::before {
+    content: "\f09a";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-twitter {
+  $color: $twitter;
+
+  background: $color;
+  &::before {
+    content: "\f099";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-linkedin {
+  $color: $linkedin;
+
+  background: $color;
+  &::before {
+    content: "\f0e1";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-flickr {
+  $color: $flickr;
+
+  background: $color;
+  &::before {
+    content: "\f16e";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-tumblr {
+  $color: $tumblr;
+
+  background: $color;
+  &::before {
+    content: "\f173";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-xing {
+  $color: $xing;
+
+  background: $color;
+  &::before {
+    content: "\f168";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-github {
+  $color: $github;
+
+  background: $color;
+  &::before {
+    content: "\f09b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-html5 {
+  $color: $html5;
+
+  background: $color;
+  &::before {
+    content: "\f13b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-openid {
+  $color: $openid;
+
+  background: $color;
+  &::before {
+    content: "\f19b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-stack-overflow {
+  $color: $stack-overflow;
+
+  background: $color;
+  &::before {
+    content: "\f16c";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-css3 {
+  $color: $css3;
+
+  background: $color;
+  &::before {
+    content: "\f13c";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-youtube {
+  $color: $youtube;
+
+  background: $color;
+  &::before {
+    content: "\f167";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-dribbble {
+  $color: $dribbble;
+
+  background: $color;
+  &::before {
+    content: "\f17d";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-google-plus {
+  $color: $google-plus;
+
+  background: $color;
+  &::before {
+    content: "\f0d5";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-instagram {
+  $color: $instagram;
+
+  background: $color;
+  &::before {
+    content: "\f16d";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-pinterest {
+  $color: $pinterest;
+
+  background: $color;
+  &::before {
+    content: "\f0d2";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vk {
+  $color: $vk;
+
+  background: $color;
+  &::before {
+    content: "\f189";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-yahoo {
+  $color: $yahoo;
+
+  background: $color;
+  &::before {
+    content: "\f19e";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-behance {
+  $color: $behance;
+
+  background: $color;
+  &::before {
+    content: "\f1b4";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-dropbox {
+  $color: $dropbox;
+
+  background: $color;
+  &::before {
+    content: "\f16b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-reddit {
+  $color: $reddit;
+
+  background: $color;
+  &::before {
+    content: "\f1a1";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-spotify {
+  $color: $spotify;
+
+  background: $color;
+  &::before {
+    content: "\f1bc";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vine {
+  $color: $vine;
+
+  background: $color;
+  &::before {
+    content: "\f1ca";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-foursquare {
+  $color: $foursquare;
+
+  background: $color;
+  &::before {
+    content: "\f180";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vimeo {
+  $color: $vimeo;
+
+  background: $color;
+  &::before {
+    content: "\f194";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}