anchor_ui-sprockets 5.2.0.1

data/app/assets/stylesheets/coreui/_header.scss

@@ -0,0 +1,135 @@
+.app-header {
+  position: relative;
+  flex-direction: row;
+  height: $navbar-height;
+  padding: 0;
+  margin: 0;
+  background-color: $navbar-bg;
+  @include borders($navbar-border);
+
+  .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $navbar-brand-width;
+    height: $navbar-height;
+    padding: 0;
+    margin-right: 0;
+    background-color: $navbar-brand-bg;
+    @include borders($navbar-brand-border);
+
+    .navbar-brand-minimized {
+      display: none;
+    }
+  }
+
+  .navbar-toggler {
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav-item {
+    position: relative;
+    min-width: 50px;
+    margin: 0;
+    text-align: center;
+
+    button {
+      margin: 0 auto;
+    }
+
+    .nav-link {
+      padding-top: 0;
+      padding-bottom: 0;
+      background: 0;
+      border: 0;
+
+      .badge {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -16px;
+        margin-left: 0;
+      }
+
+      > .img-avatar {
+        height: $navbar-height - 20px;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    padding-bottom: 0;
+    line-height: $line-height-base;
+  }
+
+  .dropdown-item {
+    min-width: 180px;
+  }
+}
+
+// .navbar-brand {
+//   color: $navbar-active-color;
+//
+//   @include hover-focus {
+//     color: $navbar-active-color;
+//   }
+// }
+
+.navbar-nav {
+  .nav-link {
+    color: $navbar-color;
+
+    @include hover-focus {
+      color: $navbar-hover-color;
+    }
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    @include plain-hover-focus {
+      color: $navbar-active-color;
+    }
+  }
+}
+
+.navbar-divider {
+  background-color: rgba(0, 0, 0, .075);
+}
+
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        @include borders($navbar-brand-minimized-border);
+
+        .navbar-brand-full {
+          display: none;
+        }
+
+        .navbar-brand-minimized {
+          display: block;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/coreui/_ie-custom-properties.scss

@@ -0,0 +1,14 @@
+.ie-custom-properties {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $colors {
+    #{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    #{$color}: #{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    breakpoint-#{$bp}: #{$value};
+  }
+}

data/app/assets/stylesheets/coreui/_images.scss

@@ -0,0 +1,6 @@
+.img-avatar,
+.img-circle {
+  max-width: 100%;
+  height: auto;
+  border-radius: 50em;
+}

data/app/assets/stylesheets/coreui/_input-group.scss

@@ -0,0 +1,5 @@
+.input-group-prepend,
+.input-group-append {
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}

data/app/assets/stylesheets/coreui/_layout.scss

@@ -0,0 +1,483 @@
+// IE10&11 Flexbox fix
+@media all and (-ms-high-contrast: none) {
+  html {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// stylelint-disable selector-type-no-unknown, no-duplicate-selectors, selector-no-qualifying-type, selector-max-combinators
+// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
+.app,
+app-dashboard,
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-header {
+  flex: 0 0 $navbar-height;
+}
+
+.app-footer {
+  flex: 0 0 $footer-height;
+}
+
+.app-body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  overflow-x: hidden;
+
+  .main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .sidebar {
+    // $sidebar-width is the width of the columns
+    flex: 0 0 $sidebar-width;
+    // put the nav on the left
+    order: -1;
+  }
+
+  .aside-menu {
+    // $aside-menu-width is the width of the columns
+    flex: 0 0 $aside-menu-width;
+  }
+}
+
+html:not([dir="rtl"]) {
+  .sidebar {
+    margin-left: - $sidebar-width;
+  }
+  .aside-menu {
+    right: 0;
+    margin-right: - $aside-menu-width;
+  }
+}
+html[dir="rtl"] {
+  .sidebar {
+    margin-right: - $sidebar-width;
+  }
+  .aside-menu {
+    left: 0;
+    margin-left: - $aside-menu-width;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  //
+  // Header
+  //
+  .header-fixed {
+    .app-header {
+      position: fixed;
+      z-index: $zindex-sticky;
+      width: 100%;
+    }
+    .app-body {
+      margin-top: $navbar-height;
+    }
+  }
+  //
+  // Sidebar
+  //
+  .sidebar-fixed {
+    .sidebar {
+      position: fixed;
+      z-index: $zindex-sticky - 1;
+      width: $sidebar-width;
+      height: 100vh;
+    }
+  }
+  .sidebar-fixed {
+    .app-header + .app-body .sidebar {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+
+  .sidebar-compact {
+    .sidebar {
+      flex: 0 0 $sidebar-compact-width;
+    }
+
+    &.sidebar-fixed {
+      .sidebar {
+        width: $sidebar-compact-width;
+      }
+    }
+    .sidebar-minimizer {
+      display: none;
+    }
+  }
+
+  .sidebar-minimized {
+    .sidebar {
+      flex: 0 0 $sidebar-minimized-width;
+    }
+
+    &.sidebar-fixed {
+      .sidebar {
+        width: $sidebar-minimized-width;
+      }
+    }
+  }
+
+  .sidebar-off-canvas {
+    .sidebar {
+      position: fixed;
+      z-index: $zindex-sticky - 1;
+      height: 100%;
+    }
+  }
+
+  .sidebar-off-canvas {
+    .app-header + .app-body .sidebar {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+
+  html:not([dir="rtl"]) {
+    .sidebar-compact {
+      .sidebar {
+        margin-left: - $sidebar-compact-width;
+      }
+    }
+    .sidebar-minimized {
+      .sidebar {
+        margin-left: - $sidebar-minimized-width;
+      }
+    }
+  }
+  html[dir="rtl"] {
+    .sidebar-compact {
+      .sidebar {
+        margin-right: - $sidebar-compact-width;
+      }
+    }
+    .sidebar-minimized {
+      .sidebar {
+        margin-right: - $sidebar-minimized-width;
+      }
+    }
+  }
+
+  //
+  // Aside Menu
+  //
+  .aside-menu-fixed {
+    .aside-menu {
+      position: fixed;
+      height: 100%;
+
+      .tab-content {
+        height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+      }
+    }
+  }
+
+  .aside-menu-fixed {
+    .app-header + .app-body .aside-menu {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+
+  .aside-menu-off-canvas {
+    .aside-menu {
+      position: fixed;
+      z-index: $zindex-sticky - 1;
+      height: 100%;
+    }
+  }
+
+  .aside-menu-off-canvas {
+    .app-header + .app-body .aside-menu {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+
+  html:not([dir="rtl"]) {
+    .aside-menu-fixed,
+    .aside-menu-off-canvas {
+      .aside-menu {
+        right: 0;
+      }
+    }
+  }
+  html[dir="rtl"] {
+    .aside-menu-fixed,
+    .aside-menu-off-canvas {
+      .aside-menu {
+        left: 0;
+      }
+    }
+  }
+}
+
+//
+// Breadcrumb
+//
+.breadcrumb-fixed {
+  .main {
+    $breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
+    padding-top: $breadcrumb-height;
+  }
+
+  .breadcrumb {
+    position: fixed;
+    top: $navbar-height;
+    right: 0;
+    left: 0;
+    z-index: $zindex-sticky - 3;
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    html:not([dir="rtl"]) {
+      .sidebar#{$infix}-show,
+      .sidebar-show {
+        .sidebar {
+          margin-left: 0;
+        }
+        @if $breakpoint != "xs" {
+          &.sidebar-fixed {
+            .main,
+            .app-footer {
+              margin-left: $sidebar-width;
+            }
+            &.sidebar-compact {
+              .main,
+              .app-footer {
+                margin-left: $sidebar-compact-width;
+              }
+            }
+            &.sidebar-minimized {
+              .main,
+              .app-footer {
+                margin-left: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);
+              }
+            }
+          }
+          &.breadcrumb-fixed {
+            .breadcrumb {
+              left: $sidebar-width;
+            }
+            &.sidebar-compact {
+              .breadcrumb {
+                left: $sidebar-compact-width;
+              }
+            }
+            &.sidebar-minimized {
+              .breadcrumb {
+                left: $sidebar-minimized-width;
+              }
+            }
+          }
+        }
+      }
+
+      .aside-menu-show,
+      .aside-menu#{$infix}-show {
+        .aside-menu {
+          margin-right: 0;
+        }
+        @if $breakpoint != "xs" {
+          &.aside-menu-fixed {
+            .main,
+            .app-footer {
+              margin-right: $aside-menu-width;
+            }
+          }
+          &.breadcrumb-fixed {
+            .breadcrumb {
+              right: $aside-menu-width;
+            }
+          }
+        }
+      }
+    }
+
+    html[dir="rtl"] {
+      .sidebar#{$infix}-show,
+      .sidebar-show {
+        .sidebar {
+          margin-right: 0;
+        }
+        @if $breakpoint != "xs" {
+          &.sidebar-fixed {
+            .main,
+            .app-footer {
+              margin-right: $sidebar-width;
+            }
+            &.sidebar-compact {
+              .main,
+              .app-footer {
+                margin-right: $sidebar-compact-width;
+              }
+            }
+            &.sidebar-minimized {
+              .main,
+              .app-footer {
+                margin-right: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);
+              }
+            }
+          }
+          &.breadcrumb-fixed {
+            .breadcrumb {
+              right: $sidebar-width;
+            }
+            &.sidebar-compact {
+              .breadcrumb {
+                right: $sidebar-compact-width;
+              }
+            }
+            &.sidebar-minimized {
+              .breadcrumb {
+                right: $sidebar-minimized-width;
+              }
+            }
+          }
+        }
+      }
+
+      .aside-menu-show,
+      .aside-menu#{$infix}-show {
+        .aside-menu {
+          margin-left: 0;
+        }
+        @if $breakpoint != "xs" {
+          &.aside-menu-fixed {
+            .main,
+            .app-footer {
+              margin-left: $aside-menu-width;
+            }
+          }
+          &.breadcrumb-fixed {
+            .breadcrumb {
+              left: $aside-menu-width;
+            }
+          }
+        }
+      }
+    }
+
+    .sidebar#{$infix}-show,
+    .aside-menu#{$infix}-show {
+      @keyframes opacity {
+        0%   { opacity: 0; }
+        100% { opacity: 1; }
+      }
+
+      @if $breakpoint == "xs" {
+        @include media-breakpoint-down(xs) {
+          .main {
+            position: relative;
+            &::before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: $zindex-sticky - 2;
+              width: 100%;
+              height: 100%;
+              content: "";
+              background: rgba(0, 0, 0, .7);
+              animation: opacity $layout-transition-speed;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//
+// Footer
+//
+.footer-fixed {
+  .app-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-sticky;
+    height: $footer-height;
+  }
+
+  .app-body {
+    margin-bottom: $footer-height;
+  }
+}
+
+//
+// Animations
+//
+.app-header,
+.app-footer,
+.sidebar,
+.main,
+.aside-menu {
+  transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
+}
+.sidebar-nav {
+  transition: width $layout-transition-speed;
+}
+.breadcrumb {
+  transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
+}
+
+//
+// Mobile layout
+//
+@include media-breakpoint-down(md) {
+  .app-header {
+    position: fixed;
+    z-index: $zindex-sticky;
+    width: 100%;
+    text-align: center;
+    @if $navbar-brand-bg == transparent {
+      background-color: $navbar-bg;
+    } @else {
+      background-color: $navbar-brand-bg;
+    }
+    @include borders($navbar-brand-border);
+
+    .navbar-toggler {
+      @if (lightness( $navbar-brand-bg ) > 40) {
+        color: $navbar-color;
+      } @else {
+        color: #fff;
+      }
+    }
+
+    .navbar-brand {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: - ($navbar-brand-width / 2);
+    }
+  }
+
+  .app-body {
+    margin-top: $navbar-height;
+  }
+
+  .sidebar {
+    position: fixed;
+    z-index: $zindex-sticky - 1;
+    width: $sidebar-width;
+    height: calc(100vh - #{$navbar-height});
+  }
+
+  .sidebar-minimizer {
+    display: none;
+  }
+
+  .aside-menu {
+    position: fixed;
+    height: 100%;
+  }
+}