lato_view 1.1

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

@@ -0,0 +1,166 @@
+.dropdown {
+  display: inline-block;
+  position: relative;
+  .active-voice {
+    position: relative;
+    color: $drop-active-voice-color;
+    font-size: em(16px);
+    text-transform: uppercase;
+    font-family: $font-bold;
+    padding-right: 20px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    .voice-text {
+      display: inline-block;
+      margin-right: 10px;
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: $drop-active-voice-underline-color;
+        transition: width 0.3s $snappy;
+      }
+    }
+    .drop-icon {
+      display: inline-block;
+      position: relative;
+      width: 2px;
+      height: 13px;
+      border-radius: 4px;
+      background-color: $drop-icon-bg;
+      transform: translate(8.48528px, 0) rotate(45deg);
+      transition: all 0.2s ease;
+      transition-delay: 0.3s;
+      &:before, &:after {
+        position: absolute;
+        content: "";
+        width: 2px;
+        height: 13px;
+        border-radius: 4px;
+        background-color: $drop-icon-bg;
+        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+      &:before {
+        transform: translate(-6px, 6px) rotate(90deg);
+      }
+      &:after {
+        transform: translate(0, 0) rotate(0);
+      }
+    }
+  }
+  .the-drop {
+    position: absolute;
+    top: 170%;
+    left: -30px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    min-width: 130px;
+    background-color: $drop-bg;
+    color: white;
+    text-align: center;
+    font-size: em(12px);
+    box-shadow: 0px 2px 6px rgba(black, 0.3);
+    transition: all 0.3s ease;
+    z-index: z(modal);
+    &.drop-medium { // Custom Size class
+      min-width: 145px;
+      font-size: em(14px);
+    }
+    &.drop-big {
+      min-width: 160px;
+      font-size: em(16px);
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      top: -10px;
+      left: 30px;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 10px 10px 10px;
+      border-color: transparent transparent $drop-bg transparent;
+    }
+    ul {
+      padding: 15px 0;
+      @include list-unstyle();
+      overflow: hidden;
+    }
+    li {
+      display: block;
+      opacity: 0;
+      transform: translateY(6px);
+      transition: all 0.3s;
+      transition-delay: 0.3s;
+      &:nth-child(2) {
+        transition-delay: 0.35s;
+      }
+      &:nth-child(3) {
+        transition-delay: 0.38s;
+      }
+      &:nth-child(4) {
+        transition-delay: 0.42s;
+      }
+      &:nth-child(5) {
+        transition-delay: 0.45s;
+      }
+      &:nth-child(6) {
+        transition-delay: 0.50s;
+      }
+      &:nth-child(7) {
+        transition-delay: 0.54s;
+      }
+      &:nth-child(8) {
+        transition-delay: 0.59s;
+      }
+      &:nth-child(9) {
+        transition-delay: 0.53s;
+      }
+      &:nth-child(10) {
+        transition-delay: 0.57s;
+      }
+    }
+    a {
+      display: block;
+      color: white;
+      padding: 12px 15px;
+      text-decoration: none;
+      text-transform: uppercase;
+      background-color: $drop-links-bg;
+      letter-spacing: 1px;
+      transition: all 0.3s ease;
+      &:hover {
+        background-color: darken($drop-links-bg, 5%);
+        color: $drop-links-hover-color;
+      }
+    }
+  }
+  &.is-arranger-open {
+    .active-voice {
+      .drop-icon {
+        transition-delay: 0s;
+        background-color: transparent;
+        &:before {
+          transform: translate(-6px, 6px) rotate(0);
+        }
+        &:after {
+          transform: translate(0, 0) rotate(90deg);
+        }
+      }
+    }
+    .the-drop {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+      li {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+.flashes-container {
+  width: 100%;
+  position: absolute;
+  top: -25px;
+  left: 0;
+  overflow: hidden;
+  transition: opacity 0.75s ease, transform 0.55s $snappy;
+  z-index: z(highest)-1;
+  .flash {
+    width: 100%;
+    padding: 10px 5px 10px 30px;
+    background-color: $flash-default-bg;
+    color: white;
+    font-size: em(16px);
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.25s ease, transform 0.3s $snappy;
+    &.danger {
+     background-color: $flash-danger-bg;
+    }
+    &.success {
+      background-color: $flash-success-bg;
+    }
+    &.info {
+      background-color: $flash-info-bg;
+    }
+    &.warning {
+      background-color: $flash-warning-bg;
+    }
+    &:nth-child(2) {
+      transition-delay: 0.15s;
+    }
+    &:nth-child(3) {
+      transition-delay: 0.25s;
+    }
+    &:nth-child(4) {
+      transition-delay: 0.35s;
+    }
+    &:nth-child(5) {
+      transition-delay: 0.45s;
+    }
+    &:last-child {
+      box-shadow: $flash-shadow;
+    }
+  }
+  &.is-remove {
+    opacity: 0;
+    transform: translateY(-100%);
+    z-index: -1;
+    .flash {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/modules/_form-controls.scss

@@ -0,0 +1,83 @@
+// Basic form controls
+.label-control {
+  position: relative;
+  display: inline-block;
+  padding: 0 0 0 2em;
+  height: 1.5em;
+  line-height: 1.5;
+  cursor: pointer;
+  &:before, &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    @include size(1.5em);
+    transition: 0.25s all ease;
+  }
+  &:before {
+    content: " ";
+    border: 2px solid $form-control-border-color;
+    border-radius: 20%;
+  }
+}
+
+.check, .radio {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  + .label-control:after {
+    transform: scale(0);
+  }
+  &:checked {
+    + .label-control:before {
+      background: $form-control-checked-color;
+      border-color: $form-control-checked-color;
+    }
+    + .label-control:after {
+      transform: scale(1);
+    }
+  }
+  &:disabled {
+    + .label-control {
+      color: mix($text-color, white, 50%);
+      &:before {
+        border-color: lighten($form-control-border-color, 10%);
+      }
+    }
+  }
+}
+
+.check {
+  + .label-control:after {
+    content: "\2714";
+    color: $form-control-checked-bg;
+    line-height: 1.5;
+    text-align: center;
+  }
+}
+
+.radio {
+  + .label-control:before {
+    border-radius: 50%;
+  }
+  + .label-control:after {
+    content: " ";
+    top: 0.25em;
+    left: 0.25em;
+    @include size(1em);
+    background: $form-control-checked-color;
+    border: 0.2em solid $form-control-checked-bg;
+    border-radius: 50%;
+  }
+}
+
+// Hover effects - thanks to the container
+.form-control {
+  &[data-input="radio"] {
+    .form-block:hover {
+      .label-control:before {
+        border-color: darken($robin-blue, 5%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,297 @@
+/* Form Module */
+
+// Remove default fieldset styles.
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+textarea, select {
+  padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit
+  box-shadow: none;
+}
+
+textarea, input {
+  appearance: none;
+}
+
+textarea {
+  height: auto;
+  min-height: $text-area-min-height;
+}
+
+.form-title {
+  font-size: em(30px);
+}
+
+// The most basic form
+.lato-form {
+  width: 100%;
+  .input, .textarea {
+    width: 100%;
+    border: 0;
+    border-radius: 2px;
+    padding: $form-input-padding;
+    border: 1px solid $form-input-border-color;
+    transition: border-color 0.3s ease;
+    &:focus {
+      outline: none;
+      border-color: $form-input-hover-border-color;
+    }
+  }
+  .form-label {
+    display: block;
+    padding-bottom: 8px;
+    font-size: em(15px);
+    .form-advise {
+      display: inline-block;
+      padding-left: 4px;
+      font-size: 12px;
+      color: $label-advise-color;
+    }
+  }
+  .textarea {
+    padding: 10px 20px;
+  }
+}
+
+// Form group = Row for form controls
+.form-group {
+  width: 100%;
+  @include clearfix();
+}
+
+.form-block {
+  display: block;
+  margin: 8px 0;
+}
+
+// A single input container
+.form-control {
+  position: relative;
+  width: 100%;
+  margin-bottom: $form-control-margin;
+  &.half {
+    @include col(1/2);
+  }
+  &.third {
+    @include col(1/3);
+  }
+  &.two-third {
+    @include col(2/3);
+  }
+  &.fourth {
+    @include col(1/4);
+  }
+  // when an input is required
+  &[data-input="required"] {
+    .form-label:after {
+      content: "*";
+      margin-left: 5px;
+    }
+  }
+  .input-error-message {
+    opacity: 0;
+    visibility: hidden;
+    font-size: em(12px);
+    transition: all 0.28s ease;
+  }
+}
+
+.form-section-title {
+  font-size: em(18px);
+}
+
+.form-secondary-info {
+  font-size: 12px;
+  line-height: 1;
+  color: $label-advise-color;
+  // FIXME - Forse metterei in Lato Light
+}
+
+// Form states
+.form-error {
+  .input, .textarea {
+    border-color: $form-error-color;
+    &:focus {
+      border-color: $form-error-color;
+    }
+  }
+  .label-control:before {
+    border-color: $form-error-color;
+  }
+  .input-error-message {
+    opacity: 1;
+    visibility: visible;
+    color: $form-error-color;
+  }
+  .password-reveal {
+    bottom: 18px;
+  }
+}
+
+.form-required {
+  .input, .textarea {
+    border-color: $form-required-color;
+    &:focus {
+      border-color: $form-required-color;
+    }
+  }
+  .label-control:before {
+    border-color: $form-required-color;
+  }
+  .input-error-message {
+    opacity: 1;
+    visibility: visible;
+    color: $form-required-color;
+  }
+  .password-reveal {
+    bottom: 18px;
+  }
+}
+
+// Input file
+.input-file {
+  .js & {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  + label {
+    cursor: pointer;
+    font-size: em(14px);
+    color: white;
+    background-color: $input-file-bg;
+    border-radius: 100px;
+    padding: 13px 40px;
+    font-size: em(14px);
+    font-weight: bold;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    display: inline-block;
+    clear: both;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all 0.3s ease;
+    .upload-icon {
+      display: inline-block;
+      margin-right: 12px;
+      svg {
+        position: relative;
+        top: 3px;
+        @include size(20px);
+        path {
+          fill: white;
+        }
+      }
+    }
+    span {
+      position: relative;
+      top: -2px;
+    }
+    &:hover {
+      background-color: darken($input-file-bg, 10%);
+    }
+  }
+  &:focus {
+    + label {
+      background-color: darken($input-file-bg, 10%);
+      outline: 1px dotted #000;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+  }
+  .no-js & {
+    + label {
+      display: none;
+    }
+  }
+}
+
+// Password reveal submodule
+.password-reveal {
+  position: absolute;
+  @include size($psw-reveal-width, $psw-reveal-height);
+  bottom: 0;
+  right: 0;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  &:before, &:after {
+    content:'';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+  }
+  &:before {
+    @include size($psw-eye-size);
+    background: $psw-eye-bg;
+    border-radius: 15px 0 15px 0;
+    transform: rotate(45deg);
+    transition: height 0.168s, background 0.23s;
+  }
+  &:after {
+    @include size($psw-inner-size);
+    border-radius: 50%;
+    background-color: $white;
+  }
+  &.is-text {
+    &:before {
+      @include size(18px);
+      background: transparent;
+      border: 3px solid $psw-eye-bg;
+      border-radius: 15px 0 15px 0;
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      @include size(3px, 30px);
+      border-radius: 0;
+      transform: rotate(30deg);
+      background: $psw-eye-bg;
+      transition: height 0.132s;
+    }
+  }
+}
+
+.input-password, .confirm-password {
+  padding-right: 50px !important;
+  &:focus {
+    + .password-reveal {
+      &:before {
+        background: $psw-active;
+      }
+      &.is-text {
+        &:before {
+          border-color: $psw-active;
+        }
+        &:after {
+          background: $psw-active;
+        }
+      }
+    }
+  }
+}
+
+.form-hidden-messages {
+  display: none;
+}
+
+// Email autocomplete custom
+.eac-input-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+.eac-sugg {
+  color: $form-autocomplete-color;
+}

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

@@ -0,0 +1,19 @@
+@import "buttons";
+@import "button-group";
+@import "navbar";
+@import "sidebar";
+@import "status";
+@import "content-block";
+@import "datepicker";
+@import "select";
+@import "wyswyg";
+@import "arranger";
+@import "dropdown";
+@import "form";
+@import "form-controls";
+@import "upload";
+@import "flash";
+@import "table";
+@import "action-bar";
+@import "search-bar";
+@import "pagination";