lato_view 1.1

data/app/assets/stylesheets/lato_view/views/_admin.scss

@@ -0,0 +1,30 @@
+#admin-wrapper {
+  display: flex;
+  width: 100%;
+  @include clearfix();
+}
+
+.main-content {
+  flex: 1;
+  height: 100vh;
+  overflow: auto;
+  .content-wrapper {
+    margin-top: 25px;
+    padding: 0 15px 0 30px;
+    @include clearfix();
+  }
+}
+
+.admin-section-title {
+  font-size: em(35px);
+  margin-bottom: 0;
+}
+
+@include mq-max(766px) {
+  .main-content {
+    .content-wrapper {
+      margin-top: 35px;
+      padding: 0 20px;
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/views/_grid.scss

@@ -0,0 +1,448 @@
+/* Basic grid system */
+
+@if settings('use-flex-grid') {
+
+  .content-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 $flex-row-gap $flex-row-margin-bottom $flex-row-gap;
+
+    // Align Row-level
+    &.align-top {
+      align-items: flex-start;
+    }
+    &.align-bottom {
+      align-items: flex-end;
+    }
+    &.align-center {
+      align-items: center;
+    }
+    &.no-gutter {
+      margin: 0;
+      > .column {
+        margin: 0 0 20px 0;
+      }
+    }
+  }
+
+  .column {
+    flex: 1;
+    flex-basis: 100%;
+    margin: 0 $flex-col-gap;
+
+    // Align Column-level
+    &.top {
+      align-self: flex-start;
+    }
+    &.bottom {
+      align-self: flex-end;
+    }
+    &.center {
+      align-self: center;
+    }
+  }
+
+  @include mq-max($grid-small-break) {
+    .small-1 {
+      flex: 0 0 (8.333333% - $flex-gap);
+    }
+
+    .small-2 {
+      flex: 0 0 (16.666667% - $flex-gap);
+    }
+
+    .small-3 {
+      flex: 0 0 (25% - $flex-gap);
+    }
+
+    .small-4 {
+      flex: 0 0 (33.333333% - $flex-gap);
+    }
+
+    .small-5 {
+      flex: 0 0 (41.666667% - $flex-gap);
+    }
+
+    .small-6, .small-half {
+      flex: 0 0 (50% - $flex-gap);
+    }
+
+    .small-7 {
+      flex: 0 0 (58.333333% - $flex-gap);
+    }
+
+    .small-8 {
+      flex: 0 0 (66.666667% - $flex-gap);
+    }
+
+    .small-9 {
+      flex: 0 0 (75% - $flex-gap);
+    }
+
+    .small-10 {
+      flex: 0 0 (83.333333% - $flex-gap);
+    }
+
+    .small-11 {
+      flex: 0 0 (91.666667% - $flex-gap);
+    }
+
+    .small-12, .small-full {
+      flex: 0 0 (100% - $flex-gap);
+    }
+
+  }
+
+  @include mq-min($grid-medium-break) {
+    .medium-1 {
+      flex: 0 0 (8.333333% - $flex-gap);
+    }
+
+    .medium-2 {
+      flex: 0 0 (16.666667% - $flex-gap);
+    }
+
+    .medium-3 {
+      flex: 0 0 (25% - $flex-gap);
+    }
+
+    .medium-4 {
+      flex: 0 0 (33.333333% - $flex-gap);
+    }
+
+    .medium-5 {
+      flex: 0 0 (41.666667% - $flex-gap);
+    }
+
+    .medium-6, .medium-half {
+      flex: 0 0 (50% - $flex-gap);
+    }
+
+    .medium-7 {
+      flex: 0 0 (58.333333% - $flex-gap);
+    }
+
+    .medium-8 {
+      flex: 0 0 (66.666667% - $flex-gap);
+    }
+
+    .medium-9 {
+      flex: 0 0 (75% - $flex-gap);
+    }
+
+    .medium-10 {
+      flex: 0 0 (83.333333% - $flex-gap);
+    }
+
+    .medium-11 {
+      flex: 0 0 (91.666667% - $flex-gap);
+    }
+
+    .medium-12, .medium-full {
+      flex: 0 0 (100% - $flex-gap);
+    }
+  }
+
+  @include mq-min($grid-large-break) {
+    .large-1 {
+      flex: 0 0 (8.333333% - $flex-gap);
+    }
+
+    .large-2 {
+      flex: 0 0 (16.666667% - $flex-gap);
+    }
+
+    .large-3 {
+      flex: 0 0 (25% - $flex-gap);
+    }
+
+    .large-4 {
+      flex: 0 0 (33.333333% - $flex-gap);
+    }
+
+    .large-5 {
+      flex: 0 0 (41.666667% - $flex-gap);
+    }
+
+    .large-6, .large-half {
+      flex: 0 0 (50% - $flex-gap);
+    }
+
+    .large-7 {
+      flex: 0 0 (58.333333% - $flex-gap);
+    }
+
+    .large-8 {
+      flex: 0 0 (66.666667% - $flex-gap);
+    }
+
+    .large-9 {
+      flex: 0 0 (75% - $flex-gap);
+    }
+
+    .large-10 {
+      flex: 0 0 (83.333333% - $flex-gap);
+    }
+
+    .large-11 {
+      flex: 0 0 (91.666667% - $flex-gap);
+    }
+
+    .large-12, .large-full {
+      flex: 0 0 (100% - $flex-gap);
+    }
+  }
+
+  @include mq-min($grid-x-large-break) {
+    .xlarge-1 {
+      flex: 0 0 (8.333333% - $flex-gap);
+    }
+
+    .xlarge-2 {
+      flex: 0 0 (16.666667% - $flex-gap);
+    }
+
+    .xlarge-3 {
+      flex: 0 0 (25% - $flex-gap);
+    }
+
+    .xlarge-4 {
+      flex: 0 0 (33.333333% - $flex-gap);
+    }
+
+    .xlarge-5 {
+      flex: 0 0 (41.666667% - $flex-gap);
+    }
+
+    .xlarge-6, .xlarge-half {
+      flex: 0 0 (50% - $flex-gap);
+    }
+
+    .xlarge-7 {
+      flex: 0 0 (58.333333% - $flex-gap);
+    }
+
+    .xlarge-8 {
+      flex: 0 0 (66.666667% - $flex-gap);
+    }
+
+    .xlarge-9 {
+      flex: 0 0 (75% - $flex-gap);
+    }
+
+    .xlarge-10 {
+      flex: 0 0 (83.333333% - $flex-gap);
+    }
+
+    .xlarge-11 {
+      flex: 0 0 (91.666667% - $flex-gap);
+    }
+
+    .xlarge-12, .xlarge-full {
+      flex: 0 0 (100% - $flex-gap);
+    }
+  }
+
+} @else {
+
+  @include mq-max($grid-small-break) {
+    .small-1 {
+      @include col(1/12);
+    }
+
+    .small-2 {
+      @include col(2/12);
+    }
+
+    .small-3 {
+      @include col(3/12);
+    }
+
+    .small-4 {
+      @include col(4/12);
+    }
+
+    .small-5 {
+      @include col(5/12);
+    }
+
+    .small-6, .small-half {
+     @include col(6/12);
+    }
+
+    .small-7 {
+      @include col(7/12);
+    }
+
+    .small-8 {
+      @include col(8/12);
+    }
+
+    .small-9 {
+      @include col(9/12);
+    }
+
+    .small-10 {
+      @include col(10/12);
+    }
+
+    .small-11 {
+      @include col(11/12);
+    }
+
+    .small-12, .small-full {
+      @include col(12/12);
+    }
+
+  }
+
+  @include mq-min($grid-medium-break) {
+    .medium-1 {
+      @include col(1/12);
+    }
+
+    .medium-2 {
+      @include col(2/12);
+    }
+
+    .medium-3 {
+      @include col(3/12);
+    }
+
+    .medium-4 {
+      @include col(4/12);
+    }
+
+    .medium-5 {
+      @include col(5/12);
+    }
+
+    .medium-6, .medium-half {
+      @include col(6/12);
+    }
+
+    .medium-7 {
+      @include col(7/12);
+    }
+
+    .medium-8 {
+      @include col(8/12);
+    }
+
+    .medium-9 {
+      @include col(9/12);
+    }
+
+    .medium-10 {
+      @include col(10/12);
+    }
+
+    .medium-11 {
+      @include col(11/12);
+    }
+
+    .medium-12, .medium-full {
+      @include col(12/12);
+    }
+  }
+
+  @include mq-min($grid-large-break) {
+    .large-1 {
+      @include col(1/12);
+    }
+
+    .large-2 {
+      @include col(2/12);
+    }
+
+    .large-3 {
+      @include col(3/12);
+    }
+
+    .large-4 {
+      @include col(4/12);
+    }
+
+    .large-5 {
+      @include col(5/12);
+    }
+
+    .large-6, .large-half {
+      @include col(6/12);
+    }
+
+    .large-7 {
+      @include col(7/12);
+    }
+
+    .large-8 {
+      @include col(8/12);
+    }
+
+    .large-9 {
+      @include col(9/12);
+    }
+
+    .large-10 {
+      @include col(10/12);
+    }
+
+    .large-11 {
+      @include col(11/12);
+    }
+
+    .large-12, .large-full {
+      @include col(12/12);
+    }
+  }
+
+  @include mq-min($grid-x-large-break) {
+    .xlarge-1 {
+      @include col(1/12);
+    }
+
+    .xlarge-2 {
+      @include col(2/12);
+    }
+
+    .xlarge-3 {
+      @include col(3/12);
+    }
+
+    .xlarge-4 {
+      @include col(4/12);
+    }
+
+    .xlarge-5 {
+      @include col(5/12);
+    }
+
+    .xlarge-6, .xlarge-half {
+      @include col(6/12);
+    }
+
+    .xlarge-7 {
+      @include col(7/12);
+    }
+
+    .xlarge-8 {
+      @include col(8/12);
+    }
+
+    .xlarge-9 {
+      @include col(9/12);
+    }
+
+    .xlarge-10 {
+      @include col(10/12);
+    }
+
+    .xlarge-11 {
+      @include col(11/12);
+    }
+
+    .xlarge-12, .xlarge-full {
+      @include col(12/12);
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/views/_login.scss

@@ -0,0 +1,152 @@
+@keyframes square {
+  0%   { transform: translateY(0); }
+  100% { transform: translateY(-1000px) rotate(600deg); }
+}
+
+.main-content {
+  &.login {
+    position: relative;
+    overflow: hidden;
+    background: #50a3a2;
+    background: -webkit-linear-gradient(top left, $catskill-white 0%, lighten($ship-cove, 22%) 100%);
+    background: linear-gradient(to bottom right, $catskill-white 0%, lighten($ship-cove, 22%) 100%);
+    .flashes-container{
+      top: 0;
+    }
+    .link-back-login {
+      display: inline-block;
+      float: right;
+      padding: 14px 0;
+      text-decoration: none;
+      font-size: em(10px);
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+    }
+    .link-password-forget {
+      display: inline-block;
+      float: right;
+      padding: 14px 0;
+      text-decoration: none;
+      font-size: em(10px);
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+    }
+    .recover-guide {
+      font-size: 14px;
+    }
+  }
+}
+
+.content-login {
+  @include align();
+  width: 33.3%;
+  margin: 0 auto;
+  background-color: white;
+  box-shadow: $content-block-shadow;
+  padding: 20px;
+  z-index: 10;
+  @include mq-max(1024px) {
+    width: 50%;
+  }
+  @include mq-max(850px) {
+    width: 85%;
+  }
+}
+
+.bg-bubbles{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+
+  li {
+    position: absolute;
+    list-style: none;
+    display: block;
+    width: 40px;
+    height: 40px;
+    background-color: rgba(white, 0.3);
+    bottom: -160px;
+    animation: square 28s infinite;
+    transition-timing-function: linear;
+
+    &:nth-child(1) {
+      left: 10%;
+    }
+
+    &:nth-child(2) {
+      left: 20%;
+      width: 80px;
+      height: 80px;
+      animation-delay: 2s;
+      animation-duration: 17s;
+    }
+
+    &:nth-child(3) {
+      left: 25%;
+      animation-delay: 4s;
+    }
+
+    &:nth-child(4) {
+      left: 40%;
+      width: 60px;
+      height: 60px;
+      animation-duration: 22s;
+      background-color: rgba(white, 0.4);
+    }
+
+    &:nth-child(5) {
+      left: 70%;
+    }
+
+    &:nth-child(6) {
+      left: 80%;
+      width: 120px;
+      height: 120px;
+
+      animation-delay: 3s;
+      background-color: rgba(white, 0.35);
+    }
+
+    &:nth-child(7) {
+      left: 32%;
+      width: 160px;
+      height: 160px;
+      animation-delay: 7s;
+    }
+
+    &:nth-child(8) {
+      left: 55%;
+      width: 20px;
+      height: 20px;
+      animation-delay: 15s;
+      animation-duration: 40s;
+    }
+
+    &:nth-child(9) {
+      left: 25%;
+      width: 10px;
+      height: 10px;
+      animation-delay: 2s;
+      animation-duration: 40s;
+      background-color: rgba(white, 0.45);
+    }
+
+    &:nth-child(10) {
+      left: 90%;
+      width: 160px;
+      height: 160px;
+      animation-delay: 11s;
+    }
+  }
+}
+
+.login-logo {
+  text-align: center;
+  max-width: 190px;
+  margin: auto;
+}

data/app/assets/stylesheets/lato_view/views/_print.scss

@@ -0,0 +1,41 @@
+/* PRINT STYLES */
+
+@media print {
+  *, *:before, *:after, *:first-letter, *:first-line {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a, a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+  }
+  // Hide Here Other Key Items
+
+}

data/app/assets/stylesheets/lato_view/views/_views.scss

@@ -0,0 +1,48 @@
+/* General layout */
+
+@import "grid";
+
+main, section {
+  position: relative;
+}
+
+section {
+  width: 100%;
+  display: block;
+  position: relative;
+  @include clearfix();
+}
+
+// Layout Utility classes
+.content, .content-box {
+  width: $main-max-width;
+  margin: 0 auto;
+  @include clearfix();
+  @include mq-min($large) {
+    width: $main-max-width_large;
+  }
+  @include mq-max($desk) {
+    width: 95%;
+  }
+}
+
+.inner-container {
+  width: 100%;
+  @include clearfix();
+}
+
+// Small helper classes
+.text-center    { text-align: center !important; }
+.text-left      { text-align: left !important; }
+.text-right     { text-align: right !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.go-right       { float: right !important; }
+.go-left        { float: left !important; }
+.full-width     { width: 100% !important; }
+.spacing        { padding: $base-padding 0; }
+.hidden         { display: none !important; }
+.no-radius      { border-radius: 0 }
+
+@import "admin";
+@import "login";
+//@import "print";