wallaby 5.1.8 → 6.0.1

data/app/assets/stylesheets/wallaby/base/_layout_desktop.scss

@@ -1,13 +1,7 @@
 @media (min-width: $screen-sm-min) {
   body {
-    padding-top: 131px;
-
-    header .container-fluid {
-      padding: 0 30px;
-    }
-
     main {
-      margin: 0 30px;
+      margin: 130px 30px 0;
 
       section {
         margin-bottom: 30px;

data/app/assets/stylesheets/wallaby/base/_mixins.scss

@@ -51,34 +51,33 @@
   }
 }
 
-@mixin arrow ($icon_font: $fa-var-angle-down, $icon_font_open: $fa-var-angle-up, $light: $light-red-color, $dark: $dark-red-color, $left_or_right: "right", $padding_size: 11px) {
+@mixin arrow ($icon_font: ".fa-chevron-down", $icon_font_open: ".fa-chevron-up", $light: $light-red-color, $dark: $dark-red-color, $left_or_right: "right", $padding_size: 11px) {
   > a {
     @if $left_or_right == "left" { padding-left: $padding_size }
     @if $left_or_right == "right" { padding-right: $padding_size }
     display: inline-block;
     position: relative;
 
-    &:after {
+    &:before {
       @if $left_or_right == "left" { left: 0 }
       @if $left_or_right == "right" { right: 0 }
       @extend .fa;
+      @extend #{$icon_font};
       color: $light;
-      content: $icon_font;
-      font-size: 12px;
-      margin-top: -6px;
+      font-size: 9px;
+      margin-top: -4px;
       position: absolute;
       top: 50%;
     }
 
-    &:hover:after {
+    &:hover:before {
       color: $dark;
     }
   }
 
   &.open > a {
-    &:after {
-      @extend .fa;
-      content: $icon_font_open;
+    &:before {
+      @extend #{$icon_font_open};
     }
   }
 }
@@ -117,3 +116,8 @@
     color: $default-blue-color;
   }
 }
+
+@mixin fa-extend ($name, $included: true) {
+  @if $included { @extend .fa; }
+  @extend .#{map-get($fa-class-map, $name)};
+}

data/app/assets/stylesheets/wallaby/base/_override.scss

@@ -8,3 +8,11 @@
     padding-left: 36px;
   }
 }
+
+.bootstrap-datetimepicker-widget {
+  table {
+    td.day, th {
+      border: none;
+    }
+  }
+}

data/app/assets/stylesheets/wallaby/base/_vars.scss

@@ -13,7 +13,7 @@ $font-family-serif:       Georgia, 'Times New Roman', Times, serif !default;
 $font-family-monospace:   Menlo, Monaco, Consolas, 'Courier New', monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
 
-$font-size-base:          12px !default;
+$font-size-base:          0.75rem !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 

data/app/assets/stylesheets/wallaby/components/_auto_select.scss

@@ -10,6 +10,8 @@
 }
 
 .auto_select {
+  width: 100%;
+
   ul, li {
     list-style: none;
     margin: 0;
@@ -47,12 +49,13 @@
       animation: auto_select_highlight 1s;
     }
 
-    &:after {
+    &:before {
       @extend .fa;
+      @extend .fa-times;
       color: $light-red-color;
-      content: $fa-var-remove;
       display: block;
       height: 16px;
+      font-size: 10px;
       line-height: 16px;
       margin-top: -8px;
       position: absolute;
@@ -63,7 +66,7 @@
 
     &:hover{
       color: $light-blue-color;
-      &:after {
+      &:before {
         color: $default-red-color;
       }
     }

data/app/assets/stylesheets/wallaby/components/_pagination.scss

@@ -1,4 +1,5 @@
 .pagination {
+  display: inline-block;
   margin-left: 6px;
   margin-top: 0;
   margin-bottom: 0;
@@ -34,11 +35,11 @@
   }
 
   &__prev {
-    @include arrow($icon_font: $fa-var-angle-left, $left_or_right: 'left', $padding_size: 9px);
+    @include arrow($icon_font: ".fa-chevron-left", $left_or_right: 'left', $padding_size: 9px);
   }
 
   &__next {
-    @include arrow($icon_font: $fa-var-angle-right, $padding_size: 9px);
+    @include arrow($icon_font: ".fa-chevron-right", $padding_size: 9px);
   }
 
   > span {

data/app/assets/stylesheets/wallaby/components/_query.scss

@@ -23,8 +23,8 @@
 
       &:before {
         @extend .fa;
+        @extend .fa-search;
         color: $default-primary-color;
-        content: $fa-var-search;
         left: 8px;
         margin-top: -7px;
         position: absolute;
@@ -54,13 +54,14 @@
 
   &__actions {
     @include dropdown($left_or_right: "right");
+    color: $white;
     position: absolute;
     right: 0;
 
     .query__clear, .query__create, .query__more {
       border-radius: 2px;
       border: none;
-      color: white;
+      color: $white;
       float: left;
       height: 30px;
       line-height: 30px;
@@ -71,7 +72,8 @@
     }
 
     .query__clear {
-      @extend .fa, .fa-ban;
+      @extend .fa;
+      @extend .fa-ban;
       background-color: $light-grey-color;
 
       &:hover {
@@ -80,7 +82,8 @@
     }
 
     .query__create {
-      @extend .fa, .fa-plus;
+      @extend .fa;
+      @extend .fa-plus;
       background-color: $light-green-color;
 
       &:hover {
@@ -89,7 +92,8 @@
     }
 
     .query__more {
-      @extend .fa, .fa-chevron-down;
+      @extend .fa;
+      @extend .fa-chevron-down;
       background-color: $light-blue-color;
 
       &:hover {

data/app/assets/stylesheets/wallaby/pages/_error.scss

@@ -1,108 +1,5 @@
-.error {
-  padding-top: 100px;
-
-  article {
-    max-width: 767px;
-    position: relative;
-    text-align: center;
-
-    &:before {
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      content: '';
-      display: block;
-      height: 120px;
-      margin: 0 auto;
-      width: 120px;
-    }
-
-    h1 {
-      color: $light-blue-color;
-      margin-top: 40px;
-
-      em {
-        color: $light-red-color;
-        display: block;
-        font-size: 150%;
-        font-style: normal;
-      }
-    }
-  }
-
-  .not_found, .forbidden, .unauthorized {
-    &:before {
-      background-image: asset-url('wallaby/404.png');
-    }
-  }
-
-  .bad_request, .unprocessable_entity {
-    &:before {
-      background-image: asset-url('wallaby/422.png');
-      border: 2px solid white;
-      box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-      height: 170px;
-    }
-  }
-
-  .internal_server_error {
-    &:before {
-      background-image: asset-url('wallaby/500.png');
-      border: 2px solid white;
-      box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-      height: 170px;
-    }
-  }
-}
-
-@media (min-width: $screen-sm-min) {
-  .error {
-    padding-top: 142px;
-
-    article {
-      margin: 0 auto;
-      padding-left: 140px;
-      text-align: left;
-
-      &:before {
-        left: 0;
-        position: absolute;
-      }
-
-      h1 {
-        margin-top: 20px;
-
-        em {
-          display: inline;
-          font-size: 100%;
-        }
-      }
-    }
-
-    .not_found, .forbidden, .unauthorized {
-      &:before {
-        background-image: asset-url('wallaby/404.png');
-      }
-    }
-
-    .bad_request, .unprocessable_entity {
-      &:before {
-        background-image: asset-url('wallaby/422.png');
-        border: 2px solid white;
-        box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-        height: 170px;
-      }
-    }
-
-    .internal_server_error {
-      &:before {
-        background-image: asset-url('wallaby/500.png');
-        border: 2px solid white;
-        box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-        height: 170px;
-      }
-    }
+.not_found, .forbidden, .unauthorized {
+  .card-img {
+    padding: 10px;
   }
 }
-
-

data/app/assets/stylesheets/wallaby/pages/_index.scss

@@ -28,7 +28,7 @@
 
     &__data, &__actions {
       @extend .table;
-      border-collapse: separate;
+      border-collapse: collapse;
       margin-bottom: 0;
 
       tbody td.resource__actions {
@@ -36,7 +36,12 @@
         text-align: right;
 
         a {
-          @extend .fa, .fa-info;
+          @extend .fa;
+          @extend .fa-info;
+          &:before {
+            line-height: 16px;
+            width: 16px;
+          }
 
           background-color: $light-primary-color;
           border-radius: 2px;
@@ -56,7 +61,7 @@
           }
 
           &.resource__update {
-            @extend .fa-pencil;
+            @include fa-extend('pencil-alt', false);
             background-color: $light-yellow-color;
 
             &:hover {
@@ -65,7 +70,7 @@
           }
 
           &.resource__destroy {
-            @extend .fa-remove;
+            @extend .fa-times;
             background-color: $light-red-color;
 
             &:hover {
@@ -115,35 +120,24 @@
 
           &:hover {
             color: $default-primary-color;
-            &:before {
-              color: $default-primary-color;
-              content: $fa-var-sort-asc;
-            }
+            @include fa-extend('sort-up', false);
           }
         }
 
         &.asc {
           a {
-            &:before {
-              content: $fa-var-sort-asc;
-            }
+            @include fa-extend('sort-up', false);
             &:hover {
-              &:before {
-                content: $fa-var-sort-desc;
-              }
+              @include fa-extend('sort-down', false);
             }
           }
         }
 
         &.desc {
           a {
-            &:before {
-              content: $fa-var-sort-desc;
-            }
+            @include fa-extend('sort-down', false);
             &:hover {
-              &:before {
-                content: $fa-var-sort;
-              }
+              @extend .fa-sort;
             }
           }
         }
@@ -156,6 +150,11 @@
           }
         }
       }
+
+      .fa {
+        font-size: 11px;
+        margin-left: 3px;
+      }
     }
 
     &__actions {
@@ -169,20 +168,22 @@
         display: table-cell;
         font-size: 14px;
 
-        &:before, &:after {
+        &:before, & span:before {
           display: inline-block;
-          margin-top: -10px;
+          font-size: 10px;
+          font-weight: lighter;
+          margin-top: -5px;
           position: absolute;
           top: 50%;
         }
 
-        &.resources--forward:after {
-          content: $fa-var-angle-double-right;
+        &.resources--forward span:before {
+          @extend .fa, .fa-chevron-right;
           right: 16px;
         }
 
         &.resources--backward:before {
-          content: $fa-var-angle-double-left;
+          @extend .fa, .fa-chevron-left;
           left: 16px;
         }
       }

data/app/assets/stylesheets/wallaby/pages/_index_desktop.scss

@@ -1,7 +1,5 @@
 @media (min-width: $screen-sm-min) {
   body.index {
-    padding-top: 131px;
-
     .resources__header {
       padding-top: 15px;
     }
@@ -18,5 +16,3 @@
     }
   }
 }
-
-

data/app/assets/stylesheets/wallaby/pages/_show.scss

@@ -18,4 +18,26 @@
       padding-top: 8px;
     }
   }
+  .resource {
+    section {
+      margin-bottom: 4px;
+    }
+
+    &__not-found {
+      font-size: 24px;
+      padding-left: 105px;
+      padding-top: 140px;
+      position: relative;
+      text-align: left;
+
+      img {
+        height: 80px;
+        margin-left: -90px;
+        margin-top: 12px;
+        position: absolute;
+      }
+    }
+  }
 }
+
+@import '_show_desktop';