trestle 0.8.13 → 0.9.0

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

@@ -1,11 +1,11 @@
 .pagination-container {
   margin-left: auto;
-  text-align: right;
+
+  display: inline-flex;
+  align-items: center;
 
   p {
-    font-size: 12px;
-    display: inline-block;
-    vertical-align: middle;
+    font-size: 0.85rem;
     margin: 0 10px 0 0;
   }
 
@@ -14,7 +14,7 @@
   }
 
   .pagination {
-    vertical-align: middle;
+    display: inline-flex;
     margin: 0;
 
     a {
@@ -23,7 +23,7 @@
   }
 }
 
-@include mobile {
+@include media-breakpoint-down(sm) {
   .pagination-container {
     margin-right: auto;
 

data/frontend/css/components/_popover.scss

@@ -0,0 +1,4 @@
+.popover-header {
+  font-weight: 500;
+  font-size: 0.85rem;
+}

data/frontend/css/components/_scopes.scss

@@ -0,0 +1,55 @@
+.scopes {
+  list-style: none;
+
+  margin-top: -0.25rem;
+  margin-bottom: 0;
+
+  padding: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  li {
+    margin-top: 0.25rem;
+    margin-right: 0.35rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  a {
+    background-color: $scope-bg;
+
+    font-size: 0.8rem;
+    font-weight: normal;
+    white-space: nowrap;
+
+    border-radius: 50rem;
+    padding: $scope-padding;
+
+    &, &:hover, &:focus {
+      color: $scope-color;
+    }
+
+    &:hover, &:focus {
+      background-color: $scope-hover-bg;
+      text-decoration: none;
+    }
+  }
+
+  li.active a {
+    &, &:hover, &:focus, strong {
+      color: $scope-active-color;
+    }
+
+    &, &:hover, &:focus {
+      background-color: $scope-active-bg;
+    }
+  }
+
+  strong {
+    font-weight: 500;
+    color: $scope-label-color;
+  }
+}

data/frontend/css/components/_select.scss

@@ -0,0 +1,66 @@
+.select2-container--bootstrap {
+  // This is required to ensure the select field is rendered at full width
+  // within Bootstrap tabs that are hidden when the page is first loaded.
+  // See: https://github.com/select2/select2/issues/4220
+  width: 100% !important;
+}
+
+.tag-select {
+  &.select2-selection--multiple {
+    .select2-selection__choice {
+      display: flex;
+      align-items: center;
+
+      padding: 2px 6px;
+
+      font-size: 0.9rem;
+
+      border: 0;
+      border-left: 4px solid $tag-border;
+      border-radius: 4px;
+
+      background: $tag-bg;
+      color: $tag-color;
+    }
+
+    .select2-selection__choice__remove {
+      order: 99;
+
+      color: $tag-color;
+
+      margin-right: 0;
+      margin-left: 4px;
+      line-height: 1.2;
+    }
+
+    .select2-search--inline {
+      position: relative;
+      left: -4px;
+    }
+  }
+
+  // Hide the results dropdown
+
+  &.select2-dropdown {
+    display: none;
+  }
+
+  .select2-container--open &.select2-selection {
+    border-radius: $s2bs-border-radius-base !important;
+    border-color: $s2bs-input-border-focus !important;
+  }
+}
+
+.date-select,
+.datetime-select,
+.time-select {
+  select {
+    display: inline-block;
+    width: auto;
+  }
+
+  .select2-container--bootstrap {
+    display: inline-block;
+    width: auto !important;
+  }
+}

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

@@ -1,12 +1,11 @@
 .sort {
   &, &:hover, &:focus {
-    color: $text-color;
+    color: $body-color;
     text-decoration: none;
   }
 
   &:after {
-    @extend .ion;
-    content: $ionicon-var-navicon-round;
+    @include icon-fa($fa-var-bars);
 
     font-size: 75%;
     margin-left: 5px;
@@ -22,10 +21,10 @@
   }
 
   &.sort-asc:after {
-    content: $ionicon-var-chevron-up;
+    @include icon-fa($fa-var-chevron-up);
   }
 
   &.sort-desc:after {
-    content: $ionicon-var-chevron-down;
+    @include icon-fa($fa-var-chevron-down);
   }
 }

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

@@ -22,7 +22,7 @@
   @include table-container-background(white);
 
   .main-content-sidebar & {
-    @include table-container-background($content-sidebar-background);
+    @include table-container-background($content-sidebar-bg);
   }
 }
 
@@ -33,9 +33,15 @@
 
   margin-bottom: 0;
 
-  > thead, > tbody, > tfoot {
-    > tr > td, > tr > td {
-      vertical-align: middle;
+  td, tr {
+    vertical-align: middle;
+  }
+
+  thead {
+    tr:first-child {
+      td, th {
+        border-top: 0;
+      }
     }
   }
 
@@ -66,13 +72,14 @@
 
     .btn {
       @extend .btn-sm;
-      padding: 5px 7px;
+
+      padding: 0.5rem;
       line-height: 1;
 
       i {
-        font-size: 14px;
+        font-size: 0.85rem;
 
-        width: (18em / 14);
+        width: 1.25rem;
         text-align: center;
       }
 
@@ -102,6 +109,10 @@
     vertical-align: middle;
   }
 
+  .badge {
+    vertical-align: middle;
+  }
+
   ul, ol {
     margin-bottom: 0;
     padding-left: 0;

data/frontend/css/components/_tabs.scss

@@ -0,0 +1,74 @@
+.nav-tabs {
+  border-bottom: none;
+
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $nav-tabs-link-bg;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(black, 0.1);
+  }
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+
+  .nav-link {
+    margin-right: 4px;
+    padding: 10px 20px;
+
+    background-color: $nav-tabs-link-bg;
+    color: $nav-tabs-link-color;
+
+    font-weight: 500;
+  }
+
+  .align-right {
+    margin-left: auto;
+
+    .nav-link {
+      margin-right: 0;
+      margin-left: 4px;
+    }
+
+    & + .align-right {
+      margin-left: 0;
+    }
+  }
+
+  .badge {
+    font-size: 0.65em;
+    margin-left: 0.35rem;
+    vertical-align: 1px;
+
+    // Default badge color when no badge- classes specified
+    &:not([class*="badge-"]) {
+      background: $gray-600;
+      color: color-yiq($gray-600);
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .nav-tabs {
+    .nav-link {
+      font-size: 0.95rem;
+      padding: 10px;
+      margin-right: 2px;
+    }
+
+    .align-right {
+      .nav-link {
+        margin-left: 2px;
+      }
+    }
+  }
+}

data/frontend/css/components/_tags.scss

@@ -0,0 +1,25 @@
+.tag {
+  display: inline-block;
+  padding: 3px 6px 3px 4px;
+  margin: 1px 4px 1px 0;
+
+  font-size: 0.8rem;
+  line-height: 1.1;
+
+  white-space: nowrap;
+
+  border-left: 4px solid $tag-border;
+  border-radius: 4px;
+
+  color: $tag-color;
+  background-color: $tag-bg;
+}
+
+a.tag {
+  &:hover, &:focus {
+    text-decoration: none;
+    color: $tag-hover-color;
+    background-color: $tag-hover-bg;
+    border-color: $tag-hover-border;
+  }
+}

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

@@ -8,7 +8,7 @@
   }
 
   &.timestamp-inline,
-  &.inline, {
+  &.inline {
     small {
       display: inline;
     }

data/frontend/css/components/_toolbars.scss

@@ -0,0 +1,54 @@
+.btn-toolbar {
+  .btn,
+  .btn-group,
+  .input-group {
+    + .btn,
+    + .btn-group,
+    + .input-group {
+      margin-left: 5px;
+    }
+  }
+
+  .btn-group {
+    .btn,
+    .btn-group {
+      + .btn,
+      + .btn-group {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.primary-toolbar {
+  .btn {
+    @extend .btn-lg;
+
+    font-size: 1.35rem;
+    padding: 0.5rem 1.25rem;
+
+    @include media-breakpoint-down(sm) {
+      font-size: 1.25rem;
+      padding: 0.35rem 0.75rem;
+    }
+  }
+}
+
+.secondary-toolbar {
+  .btn {
+    @extend .btn-sm;
+
+    > i {
+      font-size: 80%;
+
+      + .btn-label {
+        margin-left: 3px;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      font-size: 0.75rem;
+      padding: 0.2rem 0.5rem;
+    }
+  }
+}

data/frontend/css/components/_turbolinks.scss

@@ -0,0 +1,3 @@
+.turbolinks-progress-bar {
+  background-color: theme-color("primary");
+}

data/frontend/css/core/_dependencies.scss

@@ -0,0 +1,5 @@
+@import "~bootstrap/scss/bootstrap";
+@import "~magnific-popup/dist/magnific-popup";
+@import "~flatpickr/dist/flatpickr";
+@import "~select2/src/scss/core";
+@import "~select2-theme-bootstrap4/src/select2-bootstrap";

data/{app/assets/stylesheets/trestle → frontend/css}/core/_mixins.scss

@@ -22,6 +22,18 @@
   bottom: 0;
   left: 0;
   right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%fa {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+
+@mixin icon-fa($content) {
+  @extend %fa;
+  content: fa-content($content);
 }
 
 @mixin sr-only {
@@ -35,20 +47,10 @@
   border: 0;
 }
 
-@mixin mobile {
-  @media (max-width: $screen-xs-max) {
-    @content;
-  }
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
 }
 
-@mixin tablet {
-  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media (min-width: $screen-lg-min) {
-    @content;
-  }
+@function em($rem) {
+  @return strip-units($rem) * 1em;
 }