lay_me_out 1.2.8

data/app/assets/stylesheets/lay_me_out.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require lay_me_out/reset
+ *= require_self
+ *= require font-awesome
+ *= require_tree ./lay_me_out
+ */

data/app/assets/stylesheets/lay_me_out/buttons.css.scss

@@ -0,0 +1,55 @@
+@import "colors.css.scss";
+@import "mixins.css.scss";
+
+input[type="submit"],
+input[type="button"],
+button,
+.nice-button,
+{
+  @include background-gradient(#f8f8f8,#ededed);
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: bold;
+  cursor: pointer;
+  color: #696969;
+  text-shadow: 1px 1px 1px #fff;
+  border: 1px solid rgba(0,0,0,0.15);
+  border-radius: 3px;
+
+  &.success-button,
+  &.primary-button,
+  &.danger-button {
+    box-shadow: inset 0 0 0 rgba(0,0,0,0.15),inset 0 14px 14px rgba(255,255,255,0.15),inset 0 1px 0 rgba(255,255,255,0.50);
+    color: #fff;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.60);
+  }
+}
+
+input[type="submit"].primary-button {
+  background:#12598a;
+}
+
+input[type="submit"].primary-button:hover {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0px -1px 0px rgba(0,0,0,0.15), inset 0px 14px 14px rgba(255,255,255,0.25), inset 0px 1px 0px rgba(255,255,255,0.50);
+  color:#fff;
+}
+
+input[type="submit"].primary-button:active{
+  box-shadow: inset 0px 1px 0px rgba(0,0,0,0.2);
+  text-shadow: 0 1px 1px rgba(0,0,0,0.40);
+}
+
+input[disabled],
+input[disabled]:active,
+input[disabled]:hover,
+button[disabled],
+button[disabled]:active,
+button[disabled]:hover {
+  @include background-gradient(#f5f5f5, #e7e7e7);
+  color: $disabled-button-grey;
+  -webkit-transition: none;
+  box-shadow: none;
+  text-shadow: none;
+  cursor: not-allowed;
+  border: 1px solid $border-black;
+}

data/app/assets/stylesheets/lay_me_out/colors.css.scss

@@ -0,0 +1,31 @@
+$black: #000;
+$white: #fff;
+
+//text-colors
+$text-white: #fff;
+$text-white-shadow:rgba(0,0,0,0.2);
+$text-blue: #2b99c7;
+
+//heading colors
+$heading-black:#2d2d2d;
+$heading-blue:#2b99c7;
+$heading-grey:#b3b3b3;
+
+//side menu colors
+$side-menu-background-dark:#3c3c3c;
+$side-menu-background-light:#353535;
+$side-menu-box-shadow:rgba(141,141,141,0.2);
+
+//form colors
+$label-light-grey:#aaa;
+$input-border-grey:#d2d2d2;
+$select-text-grey:#5a5a5a;
+
+//button colors
+$primary-button-navy:#12598a;
+$danger-button-red:#c43c35;
+$success-button-green:#57a957;
+$disabled-button-grey:#aaa;
+
+//border colors
+$border-black:rgba(0,0,0,0.1);

data/app/assets/stylesheets/lay_me_out/flash.css.scss

@@ -0,0 +1,40 @@
+#flash {
+  position: absolute;
+  left:0;
+  right:0;
+  margin:0 auto;
+  z-index:2;
+  pointer-events:none;
+
+  .error {
+    background: #fededc;
+    color: #696969;
+    border: 1px solid #eab9b6;
+  }
+
+  .success {
+    background: #defedc;
+    color: #696969;
+    border: 1px solid #b4e2b1;
+  }
+
+  .warning {
+    background: #fdf5d9;
+    color: #696969;
+    border: 1px solid #e3d8b2;
+  }
+
+  div {
+    width: 500px;
+    border-radius: 3px;
+    text-align: left;
+    margin: 5px auto;
+    padding:10px;
+    display:none;
+    pointer-events:auto;
+  }
+
+  p {
+    margin:0;
+  }
+}

data/app/assets/stylesheets/lay_me_out/flash_mobile.css.scss

@@ -0,0 +1,7 @@
+@media only
+screen and (max-width: 500px)
+{
+  #flash div {
+    width: 85%;
+  }
+}

data/app/assets/stylesheets/lay_me_out/forms.css.scss

@@ -0,0 +1,79 @@
+@import "colors.css.scss";
+
+label {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+
+  span {
+    color: $label-light-grey;
+    font-weight: normal;
+  }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="search"],
+select,
+textarea {
+  display: block;
+  margin-bottom: 20px;
+  border: 1px solid $input-border-grey;
+  font-size: 12px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+textarea {
+  background: #fff;
+  border-radius: 4px;
+  padding: 7px;
+  -webkit-appearance: none;
+}
+
+select {
+  outline: none;
+  color:$select-text-grey; 
+  height: 30px;
+}
+
+input.success-button,
+button.success-button {
+  background: $success-button-green; 
+}
+
+input.danger-button,
+button.danger-button {
+  background: $danger-button-red;
+}
+
+li [class^="icon-"], .nav li [class^="icon-"], li [class*=" icon-"], .nav li [class*=" icon-"] { width:inherit;}
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  padding-right:5px;
+}
+
+a.font-icon {
+  overflow: hidden;
+  font-size: 17px;
+  width: 18px;
+  height: 18px;
+  color: #222;
+  opacity: .6;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 17px;
+  text-align: center;
+  margin-right:10px;
+}
+
+a {
+  color: #2b99c7;
+  font-weight: bold;
+}
+fieldset {
+  margin-bottom: 20px;
+}

data/app/assets/stylesheets/lay_me_out/headers.css.scss

@@ -0,0 +1,50 @@
+//This file contains all styling for any headers the system
+
+@import "colors.css.scss";
+@import "mixins.css.scss";
+
+h1, h2, h3, h4, h5 {
+  color: $heading-black;
+  margin-bottom: 15px;
+}
+
+h1 {
+  font-size:23px;
+  font-weight:bold;
+}
+
+h3 {
+  font-size: 19px;
+  font-weight: bold;
+  color: $label-light-grey;
+}
+
+h4 {
+  font-size:17px;
+  color:$heading-blue;
+  border-bottom: 1px solid #ddd;
+}
+
+h5 {
+  font-size:15px;
+}
+
+div#side-menu h3 {
+  @include background-gradient($side-menu-background-dark, $side-menu-background-light);
+  color: $heading-grey;
+  font-weight: bold;
+  text-shadow: 0 -1px 0 black;
+  border-top: 1px solid $border-black;
+  border-left: 0;
+  border-bottom: 1px solid $border-black;
+  border-right: 0;
+  box-shadow: inset 0 1px 0 $side-menu-box-shadow;
+  margin: 0;
+  font-size: 12px;
+  height: 18px;
+  padding: 10px 15px 3px;
+
+  &:first-child {
+    border-radius: 5px 0 0 0;
+  }
+}

data/app/assets/stylesheets/lay_me_out/layout.css.scss

@@ -0,0 +1,377 @@
+@import "colors.css.scss";
+@import "mixins.css.scss";
+
+body.main {
+  min-width: 1000px;
+  -webkit-user-select: none;
+  user-select: none;
+
+  header {
+    background: image-url('lay_me_out/header-background.png') repeat-x;
+    height:155px;
+
+    div.tagline {
+      float:left;
+      font-size: 17px;
+      font-weight: lighter;
+      padding-left: 20px;
+      color: #979797;
+      text-shadow: 1px 1px 1px $black;
+      font-family: Helvetica Neue,Helvetica,Arial;
+      border-left: 1px solid rgba(255,255,255,0.06);
+      margin-left: 15px;
+      height:43px;
+
+      strong {
+        color:$text-white;
+        font-weight:bold;
+      }
+
+      p {
+        margin-top: 12px;
+      }
+    }
+
+
+    div.title-bar {
+      padding:30px 0 32px 0;
+      height:46px;
+    }
+
+    a#logo {
+      float:left;
+    }
+
+    div.user-profile {
+      float:right;
+      width:200px;
+
+      div {
+        float:left;
+      }
+
+      div + div {
+        float:right;
+        width:147px;
+      }
+
+      img {
+        width: 40px;
+        border: 2px solid #CCC;
+        margin-right: 7px;
+        border-radius: 3px;
+        box-shadow: 0 0 2px rgba(0,0,0,1);
+      }
+
+      div.drop-down,
+      ul.user-nav {
+        border: 1px solid black;
+        @include background-gradient(#292929, black);
+        border-radius: 4px;
+        z-index: 1;
+
+        a {
+          display: inline-block;
+          width: 95px;
+          font-size: 11px;
+          font-weight: bold;
+          color: #FFF;
+          padding: 6px 0px 6px 10px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+
+      div.drop-down {
+        position:relative;
+      }
+
+      div.drop-down ul {
+        position:absolute;
+      }
+
+      span {
+        cursor: pointer;
+
+        &:after {
+          content:'\00a0\00a0\25be';
+          color:$text-white;
+          display:inline-block;
+          vertical-align:top;
+          padding: 5px 10px;
+        }
+      }
+
+      p {
+        display:inline-block;
+        margin: 5px 0 0 13px;
+        color: #AAA;
+        font-size: 10px;
+      }
+
+      ul.user-nav {
+        display:none;
+        list-style:none;
+        width:140px;
+
+        li:hover {
+          background-color:#333;
+        }
+        a {
+          width: 120px;
+          padding: 10px 10px;
+        }
+      }
+    }
+  }
+
+  footer {
+    overflow:auto;
+    margin-bottom:50px;
+
+    ul {
+      list-style:none;
+      padding-top:25px;
+    }
+
+    ul#footer-logo {
+      background: transparent image-url('lay_me_out/payroll-hero-logo-light.png') 0 0 no-repeat;
+      height: 45px;
+      padding: 25px 0 0 130px;
+      float:left;
+      margin-left:40px;
+    }
+
+    li {
+      padding-bottom:3px;
+    }
+
+    ul#legalese {
+      float:right;
+      margin-right:40px;
+
+      li {
+        display:inline-block;
+      }
+    }
+
+    li.iubenda {
+      vertical-align:middle;
+    }
+
+    li.terms-of-service, li.privacy-policy {
+      vertical-align:top;
+      background: $white;
+      padding: 3px 6px 4px;
+      font-size: 11px;
+      border-radius: 2px;
+      vertical-align: 2px;
+      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+      border: 1px solid #d0d0d0;
+
+      a {
+        color: #59636d;
+        font-weight:bold;
+      }
+
+      &:active {
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.05);
+      }
+    }
+  }
+
+  nav {
+    ul {
+      list-style: none;
+    }
+
+    li {
+      float:left;
+    }
+
+    a {
+      display: block;
+    }
+  }
+
+  nav.main > ul {
+    color:$text-white;
+    text-shadow: 0 1px 1px $text-white-shadow;
+    height:45px;
+
+    > li {
+      border-right: 1px solid #1b4f60;
+    }
+
+    > li + li {
+      border-left: 1px solid #21677e;
+    }
+
+    > li.active > a {
+      @include background-gradient(#1a5571,#205f79);
+    }
+
+    > li.has-sub-menu > a:after {
+      content:'\00a0\00a0\25be';
+      color:$text-white;
+    }
+
+    > li > a {
+      padding: 16px 15px;
+      text-align: center;
+      color: #d5e1e7;
+      font-weight: bold;
+      text-shadow: 0 -1px 0 #08435e;
+
+      &:hover {
+        @include background-gradient(#22627f,#1b536f);
+      }
+    }
+  }
+
+  nav.sub-menu {
+    @include background-gradient(#fdfdfd,#f0f0f0);
+    box-shadow: inset 0 1px 0 white,0 3px 3px rgba(0,0,0,0.07);
+    height:45px;
+    font-size:12px;
+    position: absolute;
+    left:0;
+    width: 100%;
+
+    li {
+      padding:10px 0;
+    }
+
+    a {
+      border: none;
+      color: dimGray;
+      text-shadow: 0 1px 0 $text-white;
+      background: none;
+      font-weight: normal;
+      padding: 5px 15px;
+      border-radius: 15px;
+
+    }
+
+    li.active a,
+    a:hover {
+      background-color: dimGray;
+      color:$text-white;
+      text-shadow: 0 1px 1px $text-white-shadow;
+    }
+  }
+
+  div.wrapper {
+    max-width: 1400px;
+    min-width: 950px;
+    margin: 0 auto;
+    padding: 0 25px;
+  }
+
+  section#contents-container {
+    margin:60px 0 50px;
+  }
+
+  div#content {
+    box-shadow: 0 4px 10px rgba(0,0,0,0.12),inset 0 1px 0 white;
+    border-radius: 5px;
+
+    div.main {
+      background: #f7f7f7;
+      padding: 25px;
+      border-radius: 0 0 5px 5px;
+    }
+
+    div#crumbs {
+      border-radius: 5px 5px 0 0;
+    }
+  }
+
+  div#content.two-column {
+    padding-left: 250px;
+    @include background-gradient(#3c3c3c, #353535);
+
+    div#side-menu {
+      border-radius: 5px 0 0 5px;
+    }
+
+    div.main {
+      border-radius: 0 0 5px 0;
+    }
+
+    div#crumbs {
+      border-radius: 0 5px 0 0;
+    }
+  }
+
+  div#crumbs {
+    color: #595959;
+    @include background-gradient(#f8f8f8,#f3f3f3);
+    border-bottom: 1px solid #e0e0e0;
+    box-shadow: inset 0 1px 0 $white,0 1px 0 $white;
+
+    p {
+      display:inline-block;
+      padding:10px;
+      position:relative;
+      margin:0;
+    }
+
+    p a {
+      font-size: 12px;
+      padding: 7px 30px 7px 10px;
+      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+      color: #666;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    p:first-child a {
+      font-weight: bold;
+      padding-left: 25px;
+      color: #4f656e;
+
+      &:before {
+        font-size:18px;
+        position:absolute;
+        top:7px;
+        left:10px;
+      }
+    }
+
+    p:after {
+      background:image-url('lay_me_out/crumb-arrows.png') no-repeat;
+      content:"";
+      position:absolute;
+      top:0;
+      right:0;
+      width:18px;
+      height:33px;
+    }
+
+    p:last-child a,
+    p:last-child {
+      font-weight: normal;
+      color: #bbb;
+   }
+  }
+
+  section.sidebox {
+    margin-right: 25px;
+    width: 250px;
+  }
+
+  div.infobox {
+    background: #e7f1f3;
+    border: 1px solid #c4d3d3;
+    margin: 0 0 20px;
+    padding: 20px;
+    color: #696969;
+  }
+
+  .iconset {
+    width:33%;
+    display:inline-block;
+  }
+}