lato_view 1.1

data/app/assets/stylesheets/lato_view/modules/_sidebar.scss

@@ -0,0 +1,211 @@
+.main-navigation-sidebar {
+  width: $sidebar-width;
+  min-height: 100vh;
+  background-color: $sidebar-bg;
+  @include clearfix();
+  z-index: z(menu);
+}
+
+.sidebar-logo {
+  display: block;
+  width: 100%;
+  padding: 24px 0;
+  text-align: center;
+  color: white;
+  background-color: darken($sidebar-bg, 10%);
+  text-decoration: none;
+  padding: 20px;
+
+  svg {
+    max-width: 60%;
+    margin: auto;
+  }
+  &.lato-logo {
+    svg {
+      position: relative;
+      top: 2px;
+      @include size(70px, 26px);
+      path {
+        fill: white;
+      }
+    }
+  }
+}
+
+.sidebar-nav {
+  width: 100%;
+}
+
+.sidebar-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  .sidebar-list-item {
+    position: relative;
+    .sidebar-main-link {
+      font-size: 16px;
+      color: $sidebar-inactive-color;
+      display: block;
+      padding: 14px 0 14px 25px;
+      text-decoration: none;
+      transition: background-color 0.25s ease-in-out, color 0.25s ease;
+      .sidebar-item-icon {
+        display: inline-block;
+        padding-right: 15px;
+        svg {
+          @include size(18px);
+          display: inline-block;
+          position: relative;
+          top: 3px;
+          path {
+            fill: $sidebar-inactive-color;
+            transition: all 0.25s ease;
+          }
+        }
+      }
+      &:hover {
+        background-color: darken($sidebar-bg, 10%);
+        .sidebar-item-icon {
+          svg path {
+            fill: $sidebar-icon-active-color;
+          }
+        }
+      }
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 3px;
+      height: 100%;
+      opacity: 0;
+      background-color: transparent;
+      transition: opacity 0.3s ease, background-color 0.25s ease-in-out;
+    }
+    &.has-child {
+      > ul {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 160px;
+        display: none;
+        list-style: none;
+        padding: 0;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        z-index: 1;
+        a {
+          font-size: 14px;
+          padding: 14px 10px 14px 20px;
+          text-decoration: none;
+          position: relative;
+          background-color: $sidebar-bg;
+          color: $sidebar-color;
+          display: block;
+          transition: background-color 0.25s ease-in-out;
+          &:hover {
+            background-color: darken($sidebar-bg, 10%);
+          }
+        }
+      }
+      @include mq-min(1024px) {
+        &:hover {
+          > ul {
+            display: block;
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+      }
+    }
+    &.active, &:hover {
+      &:before {
+        opacity: 1;
+        background-color: $sidebar-icon-active-color;
+      }
+      a {
+        color: $sidebar-color;
+      }
+      .sidebar-main-link {
+        color: white;
+        svg path {
+          fill: $sidebar-icon-active-color;
+        }
+      }
+    }
+  }
+}
+
+@include mq-max(1023px) {
+  .main-navigation-sidebar {
+    width: 160px;
+  }
+  .sidebar-list {
+    .sidebar-list-item {
+      border-bottom: 1px solid lighten($sidebar-bg, 7%);
+      .sidebar-main-link {
+        padding: 14px 0;
+        text-align: center;
+        .sidebar-item-icon {
+          display: block;
+          padding-right: 0;
+        }
+      }
+      &.has-child {
+        > ul.is-drop-open {
+          display: block;
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+@include mq-max(766px) {
+  .main-navigation-sidebar {
+    width: 100%;
+    min-height: auto;
+    position: absolute;
+    top: 54px;
+    left: 0;
+    opacity: 0;
+    visibility: hidden;
+    z-index: -1;
+    &.is-mobile-menu-open {
+      opacity: 1;
+      visibility: visible;
+      z-index: 90;
+    }
+  }
+  .sidebar-logo {
+    display: none;
+  }
+  .sidebar-list {
+    border-top: 1px solid lighten($sidebar-bg, 7%);
+  }
+  .sidebar-list .sidebar-list-item .sidebar-main-link {
+    text-align: left;
+    padding-left: 25px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    .sidebar-item-icon {
+      display: inline-block;
+      padding-right: 20px;
+    }
+  }
+  .sidebar-list .sidebar-list-item.has-child > ul {
+    width: 100%;
+    position: relative;
+    top: auto;
+    left: auto;
+    box-shadow: none;
+    li {
+      border-top: 1px solid lighten($sidebar-bg, 7%);
+    }
+    a {
+      background-color: darken($sidebar-bg, 10%);
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/modules/_status.scss

@@ -0,0 +1,39 @@
+.general-status {
+  text-align: center;
+  @include clearfix();
+}
+
+.status {
+  &.icon-status {
+    @include size(18px);
+    margin: 0 auto;
+    svg {
+      display: inline-block;
+      @include size(18px);
+      + svg {
+        margin-right: 15px;
+      }
+    }
+    &.true {
+      svg path {
+        fill: $jungle-green;
+      }
+    }
+    &.false {
+      svg path {
+        fill: $scarlet;
+      }
+    }
+  }
+  &.round-status {
+    @include size(18px);
+    border-radius: 50%;
+    margin: 0 auto;
+    &.true {
+      background-color: $jungle-green;
+    }
+    &.false {
+      background-color: $scarlet;
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/modules/_table.scss

@@ -0,0 +1,94 @@
+.table {
+  width: 100%;
+  margin-bottom: $base-padding;
+  border-collapse: collapse;
+  th {
+    letter-spacing: 1px;
+  }
+  th, td {
+    border-bottom: .1rem solid #e1e1e1;
+    padding: 10px 20px;
+    text-align: left;
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &.actions {
+      text-align: center;
+      a {
+        font-size: 11px;
+        padding: 7px 18px;
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+
+@include mq-max(1100px) {
+  .table {
+    &.down-before {
+      thead {
+        display: none;
+      }
+      th, td {
+        &:first-child {
+          padding-left: 20px;
+        }
+        &:last-child {
+          padding-right: 20px;
+        }
+      }
+      tr {
+        display: block;
+      }
+      td {
+        border-bottom: 1px solid #ddd;
+        display: block;
+        text-align: right;
+        &:before {
+          content: attr(data-label);
+          float: left;
+          font-weight: bold;
+        }
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+@include mq-max(940px) {
+  .table {
+    thead {
+      display: none;
+    }
+    th, td {
+      &:first-child {
+        padding-left: 20px;
+      }
+      &:last-child {
+        padding-right: 20px;
+      }
+    }
+    tr {
+      display: block;
+    }
+    td {
+      border-bottom: 1px solid #ddd;
+      display: block;
+      text-align: right;
+      &:before {
+        content: attr(data-label);
+        float: left;
+        font-weight: bold;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/modules/_upload.scss

@@ -0,0 +1,371 @@
+// Dropzone.js
+
+.dropzone, .dropzone * {
+  box-sizing: border-box;
+}
+
+.dropzone {
+  position: relative; 
+}
+
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  margin: 0.5em;
+}
+
+.dropzone .dz-preview .dz-progress {
+  display: block;
+  height: 15px;
+  border: 1px solid #aaa;
+}
+
+.dropzone .dz-preview .dz-progress .dz-upload {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: green;
+}
+
+.dropzone .dz-preview .dz-error-message {
+  color: red;
+  display: none;
+}
+
+.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
+  display: block;
+}
+
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  display: block;
+}
+
+.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
+  position: absolute;
+  display: none;
+  left: 30px;
+  top: 30px;
+  width: 54px;
+  height: 58px;
+  left: 50%;
+  margin-left: -27px;
+}
+
+
+@keyframes passing-through {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30%, 70% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateY(40px); }
+  30% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.1);
+  }
+  20% {
+    transform: scale(1);
+  }
+}
+
+.dropzone, .dropzone * {
+  box-sizing: border-box; }
+
+.dropzone {
+  min-height: 150px;
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: white;
+  padding: 20px 20px;
+}
+
+.dropzone.dz-clickable {
+  cursor: pointer;
+}
+
+.dropzone.dz-clickable * {
+  cursor: default;
+}
+
+.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
+  cursor: pointer;
+}
+
+.dropzone.dz-started .dz-message {
+  display: none;
+}
+
+.dropzone.dz-drag-hover {
+  border-style: solid;
+}
+
+.dropzone.dz-drag-hover .dz-message {
+  opacity: 0.5;
+}
+
+.dropzone .dz-message {
+  text-align: center;
+  margin: 2em 0;
+}
+
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin: 16px;
+  min-height: 100px;
+}
+
+.dropzone .dz-preview:hover {
+  z-index: 1000;
+}
+
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview.dz-file-preview .dz-image {
+  border-radius: 20px;
+  background: #999;
+  background: linear-gradient(to bottom, #eee, #ddd);
+}
+
+.dropzone .dz-preview.dz-file-preview .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview.dz-image-preview {
+  background: white;
+}
+
+.dropzone .dz-preview.dz-image-preview .dz-details {
+  transition: opacity 0.2s linear;
+}
+
+.dropzone .dz-preview .dz-remove {
+  font-size: 14px;
+  text-align: center;
+  display: block;
+  cursor: pointer;
+  border: none;
+}
+
+.dropzone .dz-preview .dz-remove:hover {
+  text-decoration: underline;
+}
+
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview .dz-details {
+  z-index: 20;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 13px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 2em 1em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 150%;
+}
+
+.dropzone .dz-preview .dz-details .dz-size {
+  margin-bottom: 1em;
+  font-size: 16px;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename {
+  white-space: nowrap;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+  border: 1px solid rgba(200, 200, 200, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+  border: 1px solid transparent;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 0 0.4em;
+  border-radius: 3px;
+}
+
+.dropzone .dz-preview:hover .dz-image img {
+  transform: scale(1.05, 1.05);
+  filter: blur(8px);
+}
+
+.dropzone .dz-preview .dz-image {
+  border-radius: 20px;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  position: relative;
+  display: block;
+  z-index: 10;
+}
+
+.dropzone .dz-preview .dz-image img {
+  display: block;
+}
+
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone .dz-preview.dz-error .dz-error-mark {
+  opacity: 1;
+  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
+  pointer-events: none;
+  opacity: 0;
+  z-index: 500;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -27px;
+  margin-top: -27px;
+}
+
+.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
+  display: block;
+  width: 54px;
+  height: 54px;
+}
+
+.dropzone .dz-preview.dz-processing .dz-progress {
+  opacity: 1;
+  transition: all 0.2s linear;
+}
+
+.dropzone .dz-preview.dz-complete .dz-progress {
+  opacity: 0;
+  transition: opacity 0.4s ease-in;
+}
+
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+  animation: pulse 6s ease infinite
+}
+
+.dropzone .dz-preview .dz-progress {
+  opacity: 1;
+  z-index: 1000;
+  pointer-events: none;
+  position: absolute;
+  height: 16px;
+  left: 50%;
+  top: 50%;
+  margin-top: -8px;
+  width: 80px;
+  margin-left: -40px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-transform: scale(1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.dropzone .dz-preview .dz-progress .dz-upload {
+  background: #333;
+  background: linear-gradient(to bottom, #666, #444);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  transition: width 300ms ease-in-out;
+}
+
+.dropzone .dz-preview.dz-error .dz-error-message {
+  display: block;
+}
+
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dropzone .dz-preview .dz-error-message {
+  pointer-events: none;
+  z-index: 1000;
+  position: absolute;
+  display: block;
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 8px;
+  font-size: 13px;
+  top: 130px;
+  left: -10px;
+  width: 140px;
+  background: #be2626;
+  background: linear-gradient(to bottom, #be2626, #a92222);
+  padding: 0.5em 1.2em;
+  color: white;
+}
+
+.dropzone .dz-preview .dz-error-message:after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 64px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #be2626;
+}
+
+
+// Custom
+.dropzone {
+  min-height: auto;
+  border: none;
+  background: auto;
+  padding: 0;
+}
+
+.dropzone .dz-message {
+  margin: 0;
+  padding: 30px 0;
+  border: 2px solid $ship-cove;
+  transition: border-color 0.26s ease;
+  &:hover {
+    border-color: $robin-blue;
+  }
+}