trestle 0.8.13 → 0.9.0

data/frontend/css/layout/_sidebar.scss

@@ -0,0 +1,258 @@
+.app-sidebar {
+  background: $sidebar-bg;
+
+  width: $sidebar-width;
+  flex-shrink: 0;
+
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.app-sidebar-header {
+  @extend .theme-bg;
+
+  height: $header-height;
+
+  display: flex;
+  align-items: center;
+
+  .navbar-toggler {
+    outline: none;
+    margin-left: $grid-gutter-width / 2;
+
+    background: $sidebar-mobile-toggle-bg;
+    border: $sidebar-mobile-toggle-border;
+
+    &:hover, &:focus {
+      background: $sidebar-mobile-toggle-active-bg;
+      border: $sidebar-mobile-toggle-active-border;
+    }
+  }
+
+  .navbar-toggler-icon {
+    background-image: $sidebar-mobile-toggle-icon-bg;
+  }
+}
+
+.app-sidebar-title {
+  flex: 1;
+
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+  padding: 10px 15px;
+
+  font-size: 1.4rem;
+  font-weight: 500;
+  text-shadow: rgba(black, 0.5) 0 1px 1px;
+  color: white;
+
+  &:hover, &:focus {
+    color: white;
+    text-decoration: none;
+  }
+
+  img {
+    max-height: 100%;
+
+    & + .title-large {
+      margin-left: 10px;
+    }
+  }
+
+  .title-small {
+    display: none;
+  }
+}
+
+.app-sidebar-inner {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(white, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(black, 0.5);
+  }
+}
+
+.toggle-sidebar {
+  margin-top: auto;
+  align-self: flex-start;
+  flex-shrink: 0;
+
+  background: $sidebar-toggle-bg;
+  color: $sidebar-toggle-color;
+  border: none;
+
+  font-size: 1.4rem;
+  padding: 10px 20px;
+
+  cursor: pointer;
+
+  opacity: 0.75;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    opacity: 1.0;
+  }
+
+  &:after {
+    @include icon-fa($fa-var-angle-double-left);
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  html, body {
+    overflow-x: hidden;
+  }
+
+  .app-wrapper {
+    margin-left: -$sidebar-width;
+    margin-right: 0;
+
+    &.animate {
+      transition: all $sidebar-transition-duration ease-out;
+      transition-property: margin-left, margin-right;
+    }
+  }
+
+  .mobile-nav-expanded {
+    .app-wrapper {
+      margin-left: 0;
+      margin-right: -$sidebar-width;
+    }
+  }
+
+  .app-sidebar {
+    position: static;
+  }
+
+  .app-sidebar-header {
+    position: absolute;
+    top: 0;
+    left: $sidebar-width;
+    right: 0;
+    z-index: 1;
+  }
+
+  .app-sidebar-title {
+    justify-content: center;
+    margin-right: 65px;
+    padding: 10px 5px;
+  }
+
+  .toggle-sidebar {
+    display: none;
+  }
+}
+
+@include media-breakpoint-between(md, lg) {
+  .app-sidebar {
+    width: $sidebar-width-collapsed;
+
+    .app-sidebar-header {
+      text-align: center;
+    }
+
+    .app-sidebar-title {
+      padding: 10px 5px;
+      justify-content: center;
+
+      img {
+        margin: auto;
+      }
+
+      .title-large {
+        display: none;
+      }
+
+      .title-small {
+        display: block;
+      }
+    }
+
+    .toggle-sidebar:after {
+      @include icon-fa($fa-var-angle-double-right);
+    }
+
+    .sidebar-expanded & {
+      width: $sidebar-width;
+
+      .app-sidebar-header {
+        text-align: left;
+      }
+
+      .app-sidebar-title {
+        padding: 10px 15px;
+        justify-content: flex-start;
+
+        img {
+          margin: 0;
+        }
+
+        .title-large {
+          display: block;
+        }
+
+        .title-small {
+          display: none;
+        }
+      }
+
+      .toggle-sidebar:after {
+        @include icon-fa($fa-var-angle-double-left);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .app-sidebar {
+    .sidebar-collapsed & {
+      width: $sidebar-width-collapsed;
+
+      .app-sidebar-header {
+        text-align: center;
+      }
+
+      .app-sidebar-title {
+        padding: 10px 5px;
+        justify-content: center;
+
+        img {
+          margin: auto;
+        }
+
+        .title-large {
+          display: none;
+        }
+
+        .title-small {
+          display: block;
+        }
+      }
+
+      .toggle-sidebar:after {
+        @include icon-fa($fa-var-angle-double-right);
+      }
+    }
+  }
+}

data/frontend/css/support/_sprockets.scss

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+// Mixins & functions
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins";
+@import "trestle/frontend/css/core/mixins";
+
+// Variables
+@import "trestle/frontend/css/variables/bootstrap";
+@import "trestle/frontend/css/variables/trestle";
+@import "bootstrap/scss/variables";
+
+// Icon variables
+@import "@fortawesome/fontawesome-free/scss/variables";

data/frontend/css/support/_webpack.scss

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+// Mixins & functions
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/mixins";
+@import "../core/mixins";
+
+// Variables
+@import "../variables/bootstrap";
+@import "../variables/trestle";
+@import "~bootstrap/scss/variables";
+
+// Icon variables
+@import "~@fortawesome/fontawesome-free/scss/variables";

data/frontend/css/variables/_bootstrap.scss

@@ -0,0 +1,174 @@
+// Color system
+
+$theme-colors: (
+  "primary": #4d6bb2,
+  "success": #7dc67d,
+  "info":    #7ccde5,
+  "warning": #f3bd71,
+  "danger":  #e17572,
+  "light":   #bbbbbb,
+
+  // Backwards compatibility
+  "default": #bbbbbb
+);
+
+
+// Body
+
+$body-bg:    #f3f3f3;
+$body-color: #333333;
+
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 5% !default;
+
+// Increase default color threshold for light vs dark
+$yiq-contrasted-threshold: 200;
+
+// Enable box shadows
+$enable-shadows: true;
+
+// Decrease default grid spacing
+$grid-gutter-width: 10px * 2;
+
+
+// Typography
+
+$headings-font-weight:   400;
+$headings-margin-bottom: 1rem;
+
+$h1-font-size: 2rem;
+$h2-font-size: 1.75rem;
+$h3-font-size: 1.5rem;
+$h4-font-size: 1.25rem;
+$h5-font-size: 1.1rem;
+$h6-font-size: 1rem;
+
+$hr-margin-y: 1.5rem;
+
+
+// Navs
+
+$nav-tabs-border-radius: 0;
+$nav-tabs-border-width:  0;
+
+$nav-tabs-link-bg:    #eeeeee;
+$nav-tabs-link-color: #555555;
+
+$nav-tabs-link-active-bg:  white;
+$nav-tabs-link-active-color: $body-color;
+
+
+// Navbar
+
+$navbar-toggler-padding-x: 0.4rem;
+$navbar-dark-color:        rgba(white, 0.75);
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:     0;
+$breadcrumb-padding-x:     0;
+$breadcrumb-bg:            transparent;
+$breadcrumb-active-color:  #777777;
+$breadcrumb-divider-color: #cccccc;
+
+
+// Tables
+
+$table-cell-padding: 6px 8px;
+$table-accent-bg:    rgba(black, 0.02);
+$table-hover-bg:     rgba(black, 0.04);
+$table-border-color: rgba(black, 0.13);
+
+$table-bg-level:     -11;
+$table-border-level: -7;
+
+
+// Alerts
+
+$alert-padding-y:     1.5rem;
+$alert-border-radius: 0.1rem;
+
+
+// Badges
+
+$badge-padding-y: 0.35em;
+$badge-padding-x: 0.6em;
+
+
+// Buttons
+
+$btn-padding-x-sm: 0.65rem;
+
+
+// Forms
+
+$input-border-color: #cccccc;
+$input-disabled-bg:  #fafafa;
+
+$input-box-shadow: none;
+
+$input-placeholder-color: #999999;
+
+$input-group-addon-bg: #eeeeee;
+
+$form-feedback-invalid-color: darken(theme-color("danger"), 20%);
+
+$form-feedback-margin-top: 0.5rem;
+$form-feedback-font-size:  90%;
+
+$form-text-color: #666666;
+
+$custom-control-indicator-size:         1.15rem;
+$custom-control-indicator-border-width: 1px;
+
+$custom-control-gutter: 0.6rem;
+
+$custom-switch-width: 2.25rem;
+$custom-switch-indicator-size: calc(#{em($custom-control-indicator-size)} - #{$custom-control-indicator-border-width * 4}) !default;
+
+
+// Dropdowns
+
+$dropdown-spacer:            0.5rem;
+$dropdown-box-shadow:        0 3px 6px rgba(black, 0.175);
+$dropdown-arrow-width:       7px;
+$dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
+$dropdown-header-color:      #111111;
+$dropdown-font-size:         0.9rem;
+
+
+// Cards
+
+$card-bg:            rgba(white, 0.5);
+$card-border-radius: 0;
+
+
+// Popovers
+
+$popover-box-shadow:  $dropdown-box-shadow;
+$popover-arrow-width: $dropdown-arrow-width;
+$popover-font-size:   0.9rem;
+
+
+// Modals
+
+$modal-inner-padding:    1.5rem;
+
+$modal-header-padding-x: 1.5rem;
+$modal-header-padding-y: 1.05rem;
+
+$modal-content-border-radius: 0;
+$modal-content-border-width:  0;
+
+$modal-footer-border-width: 1px;
+$modal-footer-border-color: rgba(black, 0.1);
+
+$modal-md: 600px;
+$modal-lg: 900px;
+
+
+// Select2 Bootstrap Theme
+
+$s2bs-btn-default-border: #cccccc;