trestle 0.8.13 → 0.9.0

data/frontend/css/core/_typography.scss

@@ -0,0 +1,55 @@
+html {
+  font-size: 14px;
+}
+
+body {
+  @include font-smoothing;
+}
+
+a {
+  font-weight: bold;
+}
+
+img {
+  max-width: 100%;
+}
+
+.empty, .blank {
+  font-style: italic;
+  opacity: 0.5;
+}
+
+.external-link {
+  &:after {
+    @include icon-fa($fa-var-external-link-alt);
+    font-size: 85%;
+    margin-left: 0.5rem;
+  }
+}
+
+.main-content-sidebar {
+  font-size: 1rem * $sidebar-font-size-scale;
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    border-bottom: 1px solid $hr-border-color;
+    padding-bottom: 0.325rem;
+
+    &:not(:first-child) {
+      margin-top: 1.75rem;
+    }
+  }
+
+  h1, .h1 { font-size: $h1-font-size * $sidebar-font-size-scale; }
+  h2, .h2 { font-size: $h2-font-size * $sidebar-font-size-scale; }
+  h3, .h3 { font-size: $h3-font-size * $sidebar-font-size-scale; }
+  h4, .h4 { font-size: $h4-font-size * $sidebar-font-size-scale; }
+  h5, .h5 { font-size: $h5-font-size * $sidebar-font-size-scale; }
+  h6, .h6 { font-size: $h6-font-size * $sidebar-font-size-scale; }
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: ($card-spacer-y * 0.75) ($card-spacer-x * 0.75);
+  }
+}

data/frontend/css/icons/_fontawesome.scss

@@ -0,0 +1,18 @@
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/v4-shims";
+
+.far {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 400;
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+}

data/frontend/css/index.scss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+// Mixins & functions
+@import "~bootstrap/scss/functions";
+@import "core/mixins";
+
+// Variables
+@import "variables/bootstrap";
+@import "variables/trestle";
+@import "~bootstrap/scss/variables";
+
+// Icons
+@import "icons/fontawesome";
+
+// Core
+@import "core/dependencies";
+@import "core/typography";
+
+// Layout
+@import "layout/base";
+@import "layout/header";
+@import "layout/footer";
+@import "layout/sidebar";
+@import "layout/navigation";
+@import "layout/content";
+
+// Components
+@import "components/color-vars";
+@import "components/alerts";
+@import "components/avatar";
+@import "components/background";
+@import "components/breadcrumbs";
+@import "components/buttons";
+@import "components/custom-forms";
+@import "components/datepicker";
+@import "components/dropdown";
+@import "components/fields";
+@import "components/magnific-popup";
+@import "components/media-grid";
+@import "components/modal";
+@import "components/pagination";
+@import "components/popover";
+@import "components/scopes";
+@import "components/select";
+@import "components/sort";
+@import "components/table";
+@import "components/tabs";
+@import "components/tags";
+@import "components/timestamp";
+@import "components/toolbars";
+@import "components/turbolinks";

data/{app/assets/stylesheets/trestle/core/_layout.scss → frontend/css/layout/_base.scss}

@@ -12,10 +12,6 @@ body {
   overflow: hidden;
 }
 
-img {
-  max-width: 100%;
-}
-
 .app-wrapper {
   flex: 1;
 
@@ -23,9 +19,10 @@ img {
   align-items: stretch;
 
   position: relative;
+  overflow: hidden;
+
   width: 100%;
   min-width: 0;
-  overflow: hidden;
 }
 
 .app-container {
@@ -46,28 +43,7 @@ img {
   flex-direction: column;
 }
 
-.app-footer {
-  flex-shrink: 0;
-
-  background: $footer-bg;
-  color: $footer-text;
-
-  padding: 7px 20px;
-  font-size: 11px;
-
-  .version {
-    float: right;
-  }
-}
-
-.error-iframe {
-  border: 0;
-  flex: 1;
-  width: 100%;
-  min-height: 400px;
-}
-
-@include mobile {
+@include media-breakpoint-down(sm) {
   body {
     height: auto;
   }
@@ -76,9 +52,4 @@ img {
     padding-top: $header-height;
     -webkit-overflow-scrolling: auto;
   }
-
-  .app-footer {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
 }

data/{app/assets/stylesheets/trestle/components → frontend/css/layout}/_content.scss

@@ -2,12 +2,19 @@
   display: flex;
   justify-content: space-between;
 
-  background: $content-header-background;
+  background: $content-header-bg;
   padding: 20px;
 
   h1 {
-    font-weight: 300;
+    font-size: 2.5rem;
+    font-weight: 200;
+
     margin-top: 0;
+    margin-bottom: 0.5rem;
+
+    @include media-breakpoint-down(sm) {
+      font-size: 2.25rem;
+    }
   }
 
   .breadcrumb {
@@ -16,18 +23,22 @@
 
   .content-header-title {
     margin: 5px 0;
+
+    @include media-breakpoint-down(sm) {
+      margin: 2px 0;
+    }
+  }
+
+  .btn {
+    white-space: nowrap;
   }
 
   .btn-toolbar {
-    text-align: right;
+    justify-content: flex-end;
   }
 
   .secondary-toolbar {
     margin-top: 8px;
-
-    @include mobile {
-      margin-top: 6px;
-    }
   }
 }
 
@@ -47,6 +58,7 @@
 }
 
 .main-content {
+  // Allow nesting of tab panes directly within
   @extend .tab-content;
 
   flex: 1;
@@ -62,14 +74,14 @@
 .main-content-header {
   margin: -20px -20px 20px !important;
   padding: $main-content-header-padding;
-  background: $main-content-header-background;
+  background: $main-content-header-bg;
   border-bottom: $main-content-header-border;
 }
 
 .main-content-footer {
   margin: 20px -20px -20px !important;
   padding: $main-content-footer-padding;
-  background: $main-content-footer-background;
+  background: $main-content-footer-bg;
   border-top: $main-content-footer-border;
 }
 
@@ -86,17 +98,37 @@
 }
 
 .main-content-sidebar {
-  background: $content-sidebar-background;
+  background: $content-sidebar-bg;
   flex: 0 0 $content-sidebar-width;
   max-width: $content-sidebar-width;
 }
 
 .utilities {
-  @include clearfix;
+  display: flex;
+  justify-content: space-between;
+
   margin-bottom: 10px;
 }
 
-@include mobile {
+.error-iframe {
+  border: 0;
+  flex: 1;
+  width: 100%;
+  min-height: 400px;
+}
+
+@include media-breakpoint-down(md) {
+  .main-content-container {
+    flex-direction: column;
+  }
+
+  .main-content-sidebar {
+    flex-basis: 0;
+    max-width: none;
+  }
+}
+
+@include media-breakpoint-down(sm) {
   .content-header {
     padding: 10px;
   }
@@ -106,15 +138,9 @@
   }
 
   .main-content-container {
-    flex-direction: column;
     margin-bottom: 10px;
   }
 
-  .main-content-sidebar {
-    flex-basis: 0;
-    max-width: none;
-  }
-
   .main-content,
   .main-content-sidebar {
     padding: 15px;

data/frontend/css/layout/_footer.scss

@@ -0,0 +1,19 @@
+.app-footer {
+  flex-shrink: 0;
+
+  background: $footer-bg;
+  color: $footer-color;
+
+  padding: 0.5rem 1.4rem;
+  font-size: 0.75rem;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+@include media-breakpoint-down(sm) {
+  .app-footer {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

data/frontend/css/layout/_header.scss

@@ -0,0 +1,27 @@
+.app-header {
+  flex: 0 0 $header-height;
+  height: $header-height;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  padding-left: $grid-gutter-width;
+  padding-right: $grid-gutter-width;
+
+  background: $header-bg;
+}
+
+@include media-breakpoint-down(sm) {
+  .app-header {
+    margin-top: -$header-height;
+
+    padding-left: $grid-gutter-width / 2;
+    padding-right: $grid-gutter-width / 2;
+
+    // Hide all elements by default
+    > * {
+      display: none;
+    }
+  }
+}

data/{app/assets/stylesheets/trestle/components → frontend/css/layout}/_navigation.scss

@@ -3,7 +3,7 @@
   padding: 10px 0;
 
   &, a {
-    color: rgba(white, 0.5);
+    color: $sidebar-link-color;
   }
 
   ul {
@@ -16,12 +16,13 @@
     display: block;
 
     font-weight: normal;
-    font-size: 13px;
+    font-size: 0.9rem;
 
     padding: 12px 18px;
 
     &:hover, &:focus {
-      background: rgba(black, 0.25);
+      color: $sidebar-link-color;
+      background: $sidebar-hover-bg;
       text-decoration: none;
 
       .nav-icon {
@@ -40,17 +41,17 @@
 
   .nav-header a {
     position: relative;
-    color: rgba(white, 0.25);
+    color: $sidebar-group-color;
 
     text-transform: uppercase;
     font-weight: bold;
-    font-size: 11px;
+    line-height: 1;
 
-    padding: 5px 20px;
+    font-size: 11px;
+    padding: 8px 20px;
 
     &::after {
-      @extend .ion;
-      content: $ionicon-var-arrow-down-b;
+      @include icon-fa($fa-var-caret-down);
 
       float: right;
       margin-top: 2px;
@@ -68,15 +69,14 @@
   }
 
   .active a {
-    border-left: 4px solid $brand-primary;
-    padding-left: 18px - 4px;
+    border-left: $sidebar-active-border solid theme-color("primary");
+    padding-left: 18px - $sidebar-active-border;
 
-    background: rgba(white, 0.1);
+    background: $sidebar-active-bg;
     color: white;
   }
 
-  .nav-badge {
-    @extend .label;
+  .badge {
     float: right;
     position: relative;
     top: 1px;
@@ -99,7 +99,7 @@
 
 @mixin collapsed-nav-header {
   height: 0;
-  padding: 10px 15px 15px;
+  padding: 13px 15px 14px;
   text-indent: -99999px;
 
   &::after {
@@ -122,18 +122,18 @@
     top: 50%;
     margin-top: -4px;
 
-    border-bottom: 1px solid rgba(white, 0.1);
+    border-bottom: 1px solid $sidebar-active-bg;
     opacity: 0.75;
   }
 }
 
-@include tablet {
+@include media-breakpoint-between(md, lg) {
   .nav-tooltip {
     display: block !important;
   }
 
   .app-nav {
-    .nav-label, .nav-badge {
+    .nav-label, .badge {
       display: none;
     }
 
@@ -152,7 +152,7 @@
     .app-nav {
       .nav-header a {
         height: auto;
-        padding: 5px 20px;
+        padding: 8px 20px;
         text-indent: 0;
 
         &::before {
@@ -167,7 +167,7 @@
       }
 
       .nav-label  { display: inline; }
-      .nav-badge  { display: block; }
+      .badge  { display: block; }
     }
 
     .nav-tooltip {
@@ -176,10 +176,10 @@
   }
 }
 
-@include desktop {
+@include media-breakpoint-up(xl) {
   .sidebar-collapsed {
     .app-nav {
-      .nav-label, .nav-badge {
+      .nav-label, .badge {
         display: none;
       }