waterfall_bourbon_neat_rails 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b13e9da6b42623249c058e63b50d9d5d02d25be6
-  data.tar.gz: c17fc5e05f472744e5b529df2ae55350493f49ea
+  metadata.gz: 8cc18ef9681099ee51999cc15628bb68a0fdd40f
+  data.tar.gz: 4b70be436760a0a7411401e4789743c40aed0cb9
 SHA512:
-  metadata.gz: 887372bc2252e3f0e81bbf3f093451f9e69586bbc91fa33d16d0d9c7d23fdcad07a5e85374de24f595f50f8e5c7e4f27033b733b290b8002b5f6d6d5fe61dded
-  data.tar.gz: 24011b7f35292a296c3aa3e8e821e91a5e01296df48aab011febbdcf1c634cf476bd7e1a370ff4c148cf6dc19a8a07dcec1b4af084826b925722d5c84490e2cd
+  metadata.gz: 09a704801f2d856b2d611990f823252cf3ed34d157f98831317a492ccba056392aaedb50fe5043404a4c2e67d493dbc3562678124eecf200d5d50b766974d1d0
+  data.tar.gz: f9ac23a8104ddf1848290a702c480f424f27b86150d1f60bb743a51f22791c22cd4d65917897836777f9ea3876eeb6b1758e51120e66b9e0d75ca3e316ffb100

data/app/assets/stylesheets/base/_grid-settings.scss

@@ -4,11 +4,34 @@
 // $column: 90px;
 // $gutter: 30px;
 // $grid-columns: 12;
-$max-width: em(700);
+//$max-width: em(700);
 
 // Neat Breakpoints
-$medium-screen: em(640);
-$large-screen: em(860);
+//$medium-screen: em(640);
+//$large-screen: em(860);
 
-$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
-$large-screen-up: new-breakpoint(min-width $large-screen 8);
+//$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+//$large-screen-up: new-breakpoint(min-width $large-screen 8);
+
+// will be removed when things are done
+// $visual-grid: true;
+// $visual-grid-color: red;
+// $visual-grid-index: front;
+// $visual-grid-opacity: 0.1;
+
+$large-screen: new-breakpoint(max-width 1200px 12);
+$medium-screen: new-breakpoint(max-width 992px 8);
+$small-screen: new-breakpoint(max-width 768px 6);
+
+@mixin container{
+	@include outer-container;
+	@include media($large-screen){
+		max-width: 1170px;
+	}
+	@include media($medium-screen){
+		max-width: 970px;
+	}
+	@include media($small-screen){
+		max-width:750px;
+	}
+}

data/app/assets/stylesheets/custom/_base.scss

@@ -0,0 +1,346 @@
+@import 'neat-helpers'; // or '../neat/neat-helpers' when not in Rails
+// ------------------------------------------------------------------------
+// General styles for all elements that must be found in a website :)
+// It is important to start from here before moving to components and grid styles
+// DON'T IGNORE THIS FILE
+// ------------------------------------------------------------------------
+
+* {
+  @include box-sizing(border-box);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+// ------------------------------------------------------------------------
+// Selection mixin, set the background color and the font color
+// Small bugs on Chorme, nothing major and known issue :)
+// ------------------------------------------------------------------------
+// @include selection();
+
+:required {
+
+}
+
+a {
+  color: $actionColor;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:active {
+
+  }
+  &:link {
+
+  }
+
+  &:visited {
+
+  }
+  &:focus {
+    @extend :hover;
+  }
+}
+
+address {
+
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+html {
+  font-size: 62.5%;
+  height: 100%;
+}
+
+body {
+  color: $baseColor;
+  font-family: $primaryFontFamily;
+  display: table;
+  @include setRem('font-size', 13px);
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+blockquote,
+q {
+  quotes: "" "";
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+}
+
+// button {
+//   background: $themeColor;
+//   border: 1px solid #ddd;
+//   color: $whiteColor;
+//   font-weight: $boldFont;
+//   @include rem(font-size, 22px);
+//   @include em(line-height, 22px, 48px);
+//   @include em(padding, 22px, 0 20px);
+//   text-transform: uppercase;
+
+//   &:hover {
+//     background: darken($themeColor, 10%);
+//     text-decoration: none;
+//   }
+
+//   &:active {
+//     background: darken($themeColor, 30%);
+//   }
+
+  // ------------------------------------------------------------------------
+  // Do not ignore the focus styles
+  // Most users navigate the website with the TAB key
+  // ------------------------------------------------------------------------
+  // A cool trick to solve the :focus styles for most elements is
+  // to extend the hover styles @extend :hover;
+  // ------------------------------------------------------------------------
+//   &:focus {
+//     @extend :hover;
+//   }
+
+//   // ------------------------------------------------------------------------
+//   &:disabled {
+//     cursor: no-drop;
+//     opacity: .5;
+//   }
+// }
+
+label {
+
+}
+
+input {
+  &[type="checkbox"] {
+
+  }
+  &[type="button"] {
+    @extend button;
+  }
+  &[type="radio"] {
+
+  }
+
+  // ------------------------------------------------------------------------
+  // Extra input types just in case you need them
+  // ------------------------------------------------------------------------
+  &[type="color"] {
+
+  }
+  &[type="date"] {
+
+  }
+  &[type="email"] {
+
+  }
+  &[type="file"] {
+
+  }
+  &[type="number"] {
+
+  }
+  &[type="password"] {
+
+  }
+  &[type="range"] {
+
+  }
+  &[type="reset"] {
+
+  }
+  &[type="search"] {
+
+  }
+  &[type="tel"] {
+
+  }
+  &[type="time"] {
+
+  }
+  &[type="url"] {
+
+  }
+
+  // ------------------------------------------------------------------------
+  // If you need more input types check out the link below
+  // http://www.w3.org/wiki/HTML/Elements/input
+  // ------------------------------------------------------------------------
+  &:focus {
+    /* @extend :hover; */
+  }
+}
+
+// ------------------------------------------------------------------------
+// Set the input placeholder color to something different that gray :)
+::-webkit-input-placeholder {
+  color: $baseColor;
+}
+:-moz-placeholder {
+  color: $baseColor;
+  opacity: 1;
+}
+::-moz-placeholder {
+  color: $baseColor;
+  opacity: 1;
+}
+:-ms-input-placeholder {
+  color: $baseColor;
+}
+
+select {
+  // ------------------------------------------------------------------------
+  // Remove default browser style for select
+  // Delete them if you don't need them...
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  option {
+
+  }
+
+  &:hover {
+
+  }
+  &:active {
+
+  }
+
+  &:focus {
+    /* @extend :hover; */
+  }
+}
+
+textarea {
+  // ------------------------------------------------------------------------
+  // Do not use resize: none if the textarea box is smaller that 200-300 px
+  // Let the user resize it on the vertical and lock the width
+  // In combination with max-height it's a good combo
+  // ------------------------------------------------------------------------
+  // resize: horizontal; might break your page layout, use with care
+  resize: vertical;
+  width: 100%;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+em, i {
+  font-style: italic;
+}
+
+// ------------------------------------------------------------------------
+// Generate headings based on the Fibonacci row
+// Go crazy!
+// ------------------------------------------------------------------------
+// @each $header, $values in (
+//   // ------------------------------------------------------------------------
+//   // H1 font-szie, font-weight, text-transfrom
+//   // you can add more values and get them with nth($valuse, #no)
+//   // ------------------------------------------------------------------------
+
+//   h1: 89 $thinFont uppercase,
+//   h2: 55 $boldFont uppercase,
+//   h3: 21 $mediumFont uppercase,
+//   h4: 13 $regularFont normal,
+//   h5: 13 $regularFont normal,
+//   h6: 13 $regularFont normal) {
+
+//   #{$header} {
+//     font-size: #{nth($values, 1)}px; // font-size in px as fallback
+//     font-size: #{nth($values, 1) * .1}rem; // font-size in rem
+//     font-weight: nth($values, 2);
+//     text-transform: nth($values, 3);
+
+//     -moz-font-feature-settings: "liga=1, dlig=1";
+//     -ms-font-feature-settings: "liga", "dlig";
+//     -webkit-font-feature-settings: "liga", "dlig";
+//     -o-font-feature-settings: "liga", "dlig";
+//     font-feature-settings: "liga", "dlig";
+//   }
+// }
+
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+nav {
+  li {
+
+  }
+}
+
+p {
+  margin: 1em 0;
+}
+
+pre, code {
+  font-family: Monaco, Courier, monospace;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+table {
+  border: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+}
+
+u {
+  text-decoration: underline;
+}
+
+ul, ol {
+  // ------------------------------------------------------------------------
+  // We don't need list-style on every ul or ol
+  // Default will be none
+  // ------------------------------------------------------------------------
+  list-style: none;
+}
+
+li {
+
+}
+
+// ------------------------------------------------------------------------
+// Custom styles
+// Fixing various corss browser display issues and the clearfix issue :)
+// :before and :after will be used only to do awesome tricks not to fix the lyout :)
+// ------------------------------------------------------------------------
+aside,
+div,
+dl,
+fieldset,
+footer,
+form,
+header,
+iframe,
+main,
+nav,
+ul,
+ol,
+section,
+table {
+  clear: both;
+  float: left;
+  width: 100%;
+}

data/app/assets/stylesheets/custom/_components.scss

@@ -0,0 +1,280 @@
+/* to be moved in shared assets gem */
+
+/*general classes*/
+
+.reset-margin{
+  margin: 0;
+}
+
+.padding10{
+  padding: 10px;
+}
+
+form input[type="text"], form input[type="email"], form input[type="password"], form input[type="tel"]{
+  padding: 0 0 0 10px!important;
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 0 !important;
+
+  &:focus{
+    border-color: none;
+  }
+}
+
+/*page components - are extended in main page*/
+
+#form-inputs .password a {
+  display: block;
+  float: right;
+  color: #A8C7E3;
+  &:hover {
+        color: #FFF;
+    }
+}
+
+input.error{
+  @include border(solid,3px,$font_error_color);
+  border-color: $font_error_color!important;
+}
+
+.form-inputs input{
+  @extend .reset-margin;
+}
+
+#email-error, #password-error, div.error, #current_password-error, #new_password-error, #new_password_confirmation-error{
+  height: 30px;
+  
+  label{
+    display: block;
+    line-height: 30px;  
+    height: 100%;
+    color:red;
+  }
+}
+
+//toolbar component
+
+.toolbar{
+  background: rgba(255, 255, 255, 0.43);
+  border: solid 1px #A8A8A8;
+  padding:10px 5px;
+  position: relative;
+
+  .toolbar_item{
+    display:inline-block;
+    height:40px;
+    width:120px;
+    line-height:40px;
+    text-align:center;
+    margin:5px;
+    border-radius:3px;
+    cursor:pointer;
+    @include font-attr(1.1em, whitesmoke, bold);
+  }
+
+  .toolbar_item.enabled{
+    background-color:$medium_blue;
+    color: white;
+    box-shadow: 3px 3px 7px 1px #1C1D1F;
+
+    &:hover{   
+      box-shadow: 1px 1px 4px 1px #1C1D1F;
+    }
+  }
+
+  .toolbar_item.disabled{
+  background-color: #B0B0B2;
+  color: #E0E0E0;
+}
+
+  .toolbar_item-pagination{
+    position:  absolute;
+    right: 0;
+    top: 10px;
+    width: 165px;
+    color: $medium_blue;
+
+    input{
+      display: inline-block;
+      width: 60px; 
+      margin-top: 10px;
+      margin-left: 30px;
+    }
+
+    .previous, .next{
+      position: absolute;
+      top:17px;
+      display: block;
+      width: 20px;
+      height: 20px;
+      @include rotate(45deg);
+
+      &:hover{
+        box-shadow: none;
+      }
+    }
+
+    .previous{
+      left:5px;
+      border-left: solid 4px blue;
+      border-bottom: solid 4px blue;
+      box-shadow: -4px 4px 4px 0px rgba(150, 150, 150, 1);
+    }
+
+    .next{
+      right:12px;
+      border-top: solid 4px blue;
+      border-right: solid 4px blue;
+      box-shadow: 4px -4px 4px 0px rgba(150, 150, 150, 1);
+    }
+  }
+}
+
+
+//table component
+
+.rwd-table {
+  margin: 1em 0;
+  min-width: 300px; // adjust to your needs
+  font-size: 16px;
+  
+  tr {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  th {
+    display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!   
+  }
+  
+  td {
+    display: block; 
+    
+    &:first-child {
+      padding-top: .5em;
+    }
+    &:last-child {
+      padding-bottom: .5em;
+    }
+
+    &:before {
+      content: attr(data-th)": ";
+      font-weight: bold;
+
+      // optional stuff to make it look nicer
+      width: 6.5em; // magic number :( adjust according to your own content
+      display: inline-block;
+      // end options
+      
+      @media (min-width: $breakpoint-alpha) {
+        display: none;
+      }
+    }
+  }
+  
+  th, td {
+    text-align: left;
+    
+    @media (min-width: $breakpoint-alpha) {
+      display: table-cell;
+      padding: .25em .5em;
+      
+      &:first-child {
+        padding-left: 0;
+      }
+      
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.rwd-table {
+  background: rgba(233, 233, 233, 0.77);;
+  table-layout: auto;
+  color: #295158;
+  overflow: hidden;
+  tr {
+    border-color: lighten(#34495E, 10%);
+    cursor: pointer;
+  }
+  tr.selected{
+    background-color: $medium_blue;
+    color: white;
+  }  
+  th, td {
+    margin: .5em 1em;
+    @media (min-width: $breakpoint-alpha) { 
+      padding: 1em !important; 
+    }
+  }
+  tbody tr:first-child{
+    background: #2399C7;
+    @include font-attr(18px, whitesmoke, bolder);
+  }
+}
+
+
+
+//ajax spinner
+
+.spinner{
+  position: fixed;
+  top:0;
+  bottom:0;
+  left:0;
+  right:0;
+  z-index: 9999;
+  display: none;
+  background-color: rgba(241, 241, 241, 0.66);
+
+  .ajax-spinner{
+    width: 30px;
+    height: 30px;
+    margin: 200px auto;
+    border: 8px solid #fff;
+    border-right-color: transparent;
+    border-radius: 50%;
+    box-shadow: 0 0 25px 2px #eee;
+    -webkit-animation: spin 1s linear infinite;
+    -moz-animation: spin 1s linear infinite;
+    -ms-animation: spin 1s linear infinite;
+    -o-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+  }
+  @-webkit-keyframes spin
+  {
+      from { -webkit-transform: rotate(0deg); opacity: 0.4; }
+      50%  { -webkit-transform: rotate(180deg); opacity: 1; }
+      to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
+  }
+
+  @-moz-keyframes spin
+  {
+      from { -moz-transform: rotate(0deg); opacity: 0.4; }
+      50%  { -moz-transform: rotate(180deg); opacity: 1; }
+      to   { -moz-transform: rotate(360deg); opacity: 0.4; }
+  }
+
+  @-ms-keyframes spin
+  {
+      from { -ms-transform: rotate(0deg); opacity: 0.4; }
+      50%  { -ms-transform: rotate(180deg); opacity: 1; }
+      to   { -ms-transform: rotate(360deg); opacity: 0.4; }
+  }
+
+  @-o-keyframes spin
+  {
+      from { -o-transform: rotate(0deg); opacity: 0.4; }
+      50%  { -o-transform: rotate(180deg); opacity: 1; }
+      to   { -o-transform: rotate(360deg); opacity: 0.4; }
+  }
+
+  @keyframes spin
+  {
+      from { transform: rotate(0deg); opacity: 0.2; }
+      50%  { transform: rotate(180deg); opacity: 1; }
+      to   { transform: rotate(360deg); opacity: 0.2; }
+  }
+}