integral 1.0.0

data/app/assets/stylesheets/integral/backend/dashboard-layout.scss

@@ -0,0 +1,491 @@
+.app-dashboard {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-dashboard-body {
+  flex: 1 1 auto;
+  display: flex;
+}
+
+#content-area {
+  margin: .5rem 0;
+  @include breakpoint(small down) {
+    margin-bottom: 75px; // Used for fixed footer
+  }
+}
+.off-canvas-content.has-transition-push {
+  @include breakpoint(small down) {
+    transform: none; // Keeps bottom footer sticky within offcanvas when menu opens
+  }
+}
+
+
+.app-dashboard-sidebar {
+  background-color: $white;
+  height: 100%;
+  overflow-x: visible;
+  overflow-y: visible;
+  z-index: 1;
+  &.reveal-for-medium {
+    transition: width $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+
+  .app-dashboard-sidebar-title-area {
+    button:hover {
+      cursor: pointer;
+    }
+    img {
+      max-height: 30px;
+    }
+    background-color: $primary-color;
+    .app-dashboard-open-sidebar .fa {
+      font-size: 1.25em;
+    }
+    .fa {
+      color: $white;
+      vertical-align: super;
+      line-height: 30px;
+      font-size: 1.5em
+    }
+  }
+
+  .app-dashboard-open-sidebar, .app-dashboard-close-sidebar{
+    align-items: baseline;
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem 1rem;
+  }
+
+  .app-dashboard-sidebar-close-button {
+    font-size: 14px;
+  }
+
+  .app-dashboard-sidebar-inner {
+    padding-top: 1em;
+    background-color: $secondary-color;
+    height: 100%;
+
+    .dropdown.menu.vertical:first-of-type {
+      > li {
+        > a {
+          span {
+            opacity: 1;
+            transition: opacity .5s ease-in-out;
+          }
+        }
+      }
+    }
+
+    .menu > li > a {
+      align-items: center;
+      color: $white;
+      padding: 1em;
+      &.is-active {
+        background-color: scale-color($secondary-color, $lightness: 10%);
+      }
+      &:hover {
+        background-color: scale-color($secondary-color, $lightness: 5%);
+      }
+
+    }
+    .accordion-menu {
+      .is-accordion-submenu-parent {
+        background-color: scale-color($secondary-color, $lightness: 5%);
+        &:not(.has-submenu-toggle) > a::after {
+          border: inset 6px;
+          border-style: solid;
+          border-width: 0.1em 0.1em 0 0;
+          height: 0.45em;
+          width: 0.45em;
+          right: 2em;
+          transform: rotate(135deg);
+        }
+        > a {
+          background-color: $secondary-color;
+        }
+        li {
+          list-style: none;
+          list-style-position: inside;
+          &:first-of-type {
+            display: none;
+          }
+          a {
+            list-style-type: disc;
+            display: list-item;
+            color: $white;
+            font-size: 0.75em;
+          }
+        }
+      }
+      .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
+        transform: rotate(315deg);
+        transform-origin: 50% 50%;
+      }
+    }
+    .dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
+      background-color: $secondary-color;
+      border-radius: 5px;
+      padding: 1em;
+      margin-left: 0.65em;
+      li {
+        margin-left: 1em;
+        color: $white;
+        margin-bottom: 0.5em;
+        &:first-of-type {
+          display: none;
+          list-style: none;
+          padding: 0;
+          margin: 0 0 0.5em;
+        }
+        a {
+          font-size: 0.85em;
+          text-align: left;
+          color: $white;
+          padding: 0;
+          opacity: 0.7;
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+      &:before {
+        content: ' ';
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 0 0 0.5em 0;
+        transform: rotate(45deg);
+        background: linear-gradient(-45deg, #17212b 50%, transparent 50%);
+        transform: rotate(135deg) skewX(5deg) skewY(5deg);
+        position: absolute;
+        margin: 0;
+        left: -4px;
+      }
+    }
+    .dropdown.menu.vertical > li.opens-right > a::after {
+      border: inset 6px;
+      content: '';
+      border-right-width: 0;
+      border-left-style: solid;
+      border-style: solid;
+      border-width: 0.1em 0.1em 0 0;
+      display: inline-block;
+      height: 0.45em;
+      transform: rotate(-45deg);
+      vertical-align: top;
+      width: 0.45em;
+      transform: rotate(45deg);
+      right: 2em;
+    }
+    .fa {
+      width: 1.25em;
+      text-align: center;
+      margin-right: 0.25em;
+    }
+  }
+}
+
+.reveal-for-medium {
+  .app-dashboard-open-sidebar {
+    display: none;
+  }
+}
+
+.app-dashboard-open-sidebar {
+  text-align: center;
+}
+
+.app-dashboard-body-content {
+  transition: all $offcanvas-transition-length $offcanvas-transition-timing;
+  overflow-y: auto;
+  flex: 1 1 0;
+  background-color: #f7f7f7;
+  //  TODO: Remove this when sticky issue is fixed - https://github.com/zurb/foundation-sites/pull/10408 (Just left here for reference)
+  // &.has-transition-push {
+  //   transform: none;
+  // }
+  #top-bar .top-bar-left, #top-bar .top-bar-right {
+    flex: 0 0 auto;
+  }
+  .top-bar {
+    .create-dropdown {
+      padding: 1em 0;
+      width: 10em;
+      background-color: $white;
+      &:after {
+        content: ' ';
+        position: absolute;
+        right: 0;
+        top: -2.2em;
+        height: 2.2em;
+        width: 70%;
+      }
+      &:before {
+        content: ' ';
+        width: 2.5em;
+        height: 1.5em;
+        border-radius: 0 0 0.5em 0;
+        background: linear-gradient(-45deg, #ffffff 50%, transparent 50%);
+        position: absolute;
+        margin: 0;
+        right: 0.5em;
+        transform: rotate(225deg) skewX(8deg) skewY(8deg);
+        top: -0.1em;
+      }
+      i {
+        width: 30px;
+        text-align: center;
+      }
+      a {
+        color: $secondary-color;
+        &:hover {
+          background-color: scale-color($primary-color, $lightness: 95%);
+        }
+      }
+    }
+  }
+
+  #bottom-bar.top-bar {
+    @include top-bar-unstack;
+    display: none;
+    background-color: scale-color($primary-color, $lightness: 95%);
+    padding: .75rem 1rem;
+    @include breakpoint(small only) {
+      display: flex;
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      z-index: 1;
+    }
+    .button {
+      padding: 0.8em 1.5em;
+      &.clear {
+        padding-left: 0.5em
+      }
+    }
+    .create-dropdown {
+      &:before {
+        right: 1.5em;
+        transform: rotate(45deg) skewX(8deg) skewY(8deg);
+        bottom: 0px;
+        top: unset;
+      }
+    }
+  }
+  #top-bar.top-bar {
+    z-index: 1;
+    height: 80px;
+    box-shadow: 0 0 12px 0 rgba(35, 52, 69, 0.12);
+    background-color: $white;
+    @include breakpoint(small down) {
+      height: auto;
+      background-color: $secondary-color;
+    }
+
+    .top-bar-left {
+      img {
+        display: none;
+        height: 25px;
+        @include breakpoint(small only) {
+          display: block;
+        }
+      }
+      h1 {
+        margin-bottom: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 15em;
+
+        @include breakpoint(small only) {
+          display: none;
+        }
+        @include breakpoint(medium only) {
+          max-width: 5em;
+        }
+      }
+    }
+    .top-bar-right {
+      > .menu {
+        display: flex;
+        align-items: center;
+        li {
+          margin: 0 0.5em;
+          @include breakpoint(small only) {
+            margin: 0 0.75em;
+          }
+        }
+      }
+      .view-site {
+        a {
+          padding: 0;
+        }
+        @include breakpoint(small only) {
+          display: none;
+        }
+      }
+      .create {
+        .button {
+          padding: 0.7em 1.5em;
+        }
+        @include breakpoint(small only) {
+          display: none;
+        }
+      }
+      .toggle-menu {
+        display: none;
+        button {
+          color: white;
+          font-size: 1.6em;
+        }
+        @include breakpoint(small only) {
+          display: block;
+        }
+      }
+      button.avatar {
+        padding: 0;
+        img {
+          width: 35px;
+          height: 35px;
+        }
+      }
+      #profile-dropdown {
+        padding: 0;
+        &:before {
+          content: ' ';
+          width: 2.5em;
+          height: 1.5em;
+          border-radius: 0 0 0.5em 0;
+          background: linear-gradient(-45deg, #1b8ecf 50%, transparent 50%);
+          position: absolute;
+          margin: 0;
+          right: 0.5em;
+          transform: rotate(225deg) skewX(8deg) skewY(8deg);
+        }
+        &:after {
+          content: ' ';
+          position: absolute;
+          right: 0;
+          top: -2.2em;
+          height: 2.2em;
+          width: 70%;
+        }
+        .section {
+          padding: 1.5em 1.2em;
+          &:first-of-type {
+            border-radius: 5px 5px 0 0;
+            background-color: $primary-color;
+            color: $white;
+            .avatar {
+              float: left;
+              margin-right: 1em;
+              width: 60px;
+              height: 60px;
+            }
+            .name {
+              font-size: 1.3em
+            }
+            .email {
+              font-size: 0.85em
+            }
+          }
+          &:last-of-type {
+            .menu a {
+              padding-left: 0;
+              color: $secondary-color;
+              &:hover {
+                color: $primary-color;
+              }
+              i {
+                width: 30px;
+                text-align: center;
+              }
+            }
+            .button {
+              display: inline-block;
+              padding: 0.8em 2em;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin shrunk-sidebar() {
+  .app-dashboard-close-sidebar {
+    display: none;
+  }
+
+  .app-dashboard-open-sidebar {
+    display: block;
+  }
+
+  .app-dashboard-sidebar {
+    width: 60px;
+    .menu a {
+      text-align: center;
+    }
+
+    .app-dashboard-sidebar-inner {
+      .dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu li:first-of-type {
+        display: block;
+      }
+      .dropdown.menu.vertical:first-of-type {
+        > li {
+          &::after {
+            display: none;
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+          }
+
+          > a {
+            svg {
+              margin: 0;
+            }
+            span {
+              opacity: 0;
+              position: absolute;
+              transition: opacity .5s ease-in-out;
+            }
+          }
+        }
+      }
+
+
+      .dropdown.menu.vertical > li.opens-right > a::after {
+        content: none;
+      }
+      .fa {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .off-canvas-content {
+    margin-left: 60px;
+    width: calc(100% - 60px);
+  }
+
+  .navigation {
+    margin-top: 2rem;
+    text-align: center;
+
+  }
+  // .menu.vertical > li > a {
+  //   justify-content: center;
+  // }
+}
+
+// mini sidebar on medium/tablet size
+@include breakpoint(medium only) {
+  .app-dashboard.shrink-medium {
+    @include shrunk-sidebar()
+  }
+}
+@include breakpoint(large) {
+  .app-dashboard.shrink-large {
+    @include shrunk-sidebar()
+  }
+}