griddyup 0.0.2 → 0.0.3

data/app/assets/stylesheets/griddyup.scss

@@ -1,314 +1,358 @@
-// Place all the styles related to the grid controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-@import "normalize/normalize";
-
-$DEBUG_MODE: "false"; //enables the use of "random-color-x"
-
-
-@function to-rem($px,$b: $font-base-size) {
-    @return #{$px/$b}rem;
-}
-@function to-em($px,$b: $font-base-size) {
-    @return #{$px/$b}em;
-}
-
-
-$max-columns: 8;
-
-$primary-color: #1976D2;
-$primary-color-light: #63a4ff;
-$primary-color-dark: #004ba0;
-
-$secondary-color: #37474F;
-$secondary-color-light: #62727b;
-$secondary-color-dark: #102027;
-
-$primary-color-text: #fff;
-$primary-color-light-text: #000;
-$primary-color-dark-text: #fff;
-
-$secondary-color-text: #fff;
-$secondary-color-light-text:#fff;
-$secondary-color-dark-text:#fff;
-
-.color-primary {
-  background-color: $primary-color;
-  color: $primary-color-text;
-  &.light {
-    background-color: $primary-color-light;
-    color: $primary-color-light-text;
-  }
-  &.dark {
-    background-color: $primary-color-dark;
-    color: $primary-color-dark-text;
-  }
-}
-
-.color-secondary {
-  background-color: $secondary-color;
-  color: $secondary-color-text;
-  &.light {
-    background-color: $secondary-color-light;
-    color: $secondary-color-light-text;
-  }
-  &.dark {
-    background-color: $secondary-color-dark;
-    color: $secondary-color-dark-text;
-  }
-}
-
-$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-family-base:        $font-family-sans-serif;
-
-$font-size-base:          14px;
-$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
-$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
-
-$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
-$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
-$font-size-h5:            $font-size-base;
-$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
-
-$font-size-h-list: $font-size-h1 $font-size-h2 $font-size-h3 $font-size-h4 $font-size-h5 $font-size-h6;
-
-$line-height-base:        1.428571429; // 20/14
-$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
-
-$headings-font-family:    inherit;
-$headings-font-weight:    500;
-$headings-line-height:    1.1;
-$headings-color:          inherit;
-
-//Breakpoints
-$bp-small:  (0,40em);
-$bp-medium: (40.00001em,64em);
-$bp-large:  (64.00001em,90em);
-$bp-xlarge: (90.00001, 500000em);
-
-$row-width-small:   64em;
-$row-width-medium:  $row-width-small;
-$row-width-large:   $row-width-medium;
-$row-width-xlarge: 80em;
-
-//Specific breakpoints
-$bp-small-up:   "only screen";
-$bp-small-only: "only screen and (max-width: #{nth($bp-small,2)})";
-$bp-small-down: "only screen and (max-width:#{nth($bp-small,2)})";
-
-$bp-medium-up:  "only screen and (min-width: #{nth($bp-medium,1)})";
-$bp-medium-only:  "only screen and (min-width: #{nth($bp-medium,1)}) and (max-width:#{nth($bp-medium,2)})";
-$bp-medium-down: "only screen and (max-width:#{nth($bp-medium,2)})";
-
-$bp-large-up:  "only screen and (min-width: #{nth($bp-large,1)})";
-$bp-large-only:  "only screen and (min-width: #{nth($bp-large,1)}) and (max-width:#{nth($bp-large,2)})";
-$bp-large-down: "only screen and (max-width:#{nth($bp-large,2)})";
-
-$bp-xlarge-up: "only screen and (min-width: #{nth($bp-xlarge,1)})";
-$bp-xlarge-only: "only screen and (min-width: #{nth($bp-xlarge,1)}) and (max-width:#{nth($bp-xlarge,2)})";
-$bp-xlarge-down: "only screen";
-
-* {
-  box-sizing: border-box;
-}
-
-html,body {
-  height:100%;
-}
-
-body {
-  font-size: $font-size-base;
-}
-
-.font-large {
-  font-size: $font-size-large;
-}
-.font-small {
-  font-size: $font-size-small;
-}
-
-@for $i from 1 through 6 {
-  h#{$i} {
-    font-family: $headings-font-family;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
-    color:$headings-color;
-    font-size: nth($font-size-h-list,$i);
-  }
-}
-
-.site-container {
-  height:100%;
-  display:grid;
-  grid-template-areas:
-    "h"
-    "m"
-    "f";
-  grid-template-rows: 1fr 12fr 1fr;
-}
-
-.site-container-aside {
-  height:100%;
-  display:grid;
-  grid-template-areas:
-    "h h"
-    "m a"
-    "f f";
-  grid-template-rows: 1fr 10fr 1fr;
-  grid-template-columns: 8fr 4fr;
-  &-reverse {
-    @extend .site-container-aside;
-    grid-template-areas:
-      "h h"
-      "a m"
-      "f f";
-    grid-template-columns: 4fr 8fr;
-  }
-}
-random-color-3
-nav {
-  display:grid;
-  grid-template-columns: repeat($max-columns,1fr);
-  grid-auto-flow:column;
-  grid-area: h;
-}
-
-footer {
-  display: grid;
-  grid-area: f;
-  &.fixed {
-    grid-template-columns: 1fr 80em 1fr;
-    grid-auto-flow: row;
-    & .row {
-      grid-column-start: 2;
-      max-width: 80em;
-    }
-  }
-}
-
-main {
-  grid-area: m;
-  display:inline-grid;
-  align-content: flex-start;
-  grid-template-rows: fit-content(0px);
-  grid-row-gap: 0.4rem;
-  &.fixed {
-    grid-template-columns: 1fr 80em 1fr;
-    grid-auto-flow: row;
-    & .row {
-      grid-column-start: 2;
-      max-width: 80em;
-    }
-  }
-}
-
-aside {
-  grid-area: a;
-}
-
-.row {
-  display:grid;
-  grid-template-columns: repeat($max-columns,1fr);
-  grid-gap: 0.4rem;
-}
-
-@for $i from 1 through $max-columns {
-  .random-color-#{$i} {
-    $alpha: random(100)/100;
-    $red: random(256)-1;
-    $green: random(256)-1;
-    $blue: random(256)-1;
-    $color: unquote("rgb(#{$red}, #{$green}, #{$blue})");
-    @if $DEBUG_MODE == 'true' {
-      background-color:$color;
-    }
-  }
-}
-
-@mixin columns($size) {
-  @for $i from 1 through $max-columns {
-    .#{$size}-col-#{$i} {
-      grid-column: span $i;
-    }
-  }
-}
-
-@mixin hide($size) {
-  @for $i from 1 through $max-columns {
-    .#{$size}-hide {
-      display:none;
-    }
-  }
-}
-
-@mixin show($size) {
-  @for $i from 1 through $max-columns {
-    $show-small: none;
-    $show-medium: none;
-    $show-large: none;
-    $show-xlarge: none;
-
-    @if $size=="s" {
-    $show-small: inherit;
-    }
-    @if $size=="m" {
-      $show-medium: inherit;
-    }
-    @if $size=="l" {
-      $show-large: inherit;
-    }
-    @if $size=="l" {
-      $show-xlarge: inherit;
-    }
-    .s-only {
-      display:$show-small;
-    }
-    .m-only {
-      display:$show-medium;
-    }
-    .l-only {
-      display:$show-large;
-    }
-    .xl-only {
-      display:$show-xlarge;
-    }
-  }
-}
-
-@for $i from 1 through $max-columns {
-  .col-#{$i} {
-    grid-column: span $i;
-  }
-}
-
-@media #{$bp-small-only} {
-  @include hide("s");
-}
-
-@media #{$bp-medium-only} {
-  @include hide("m");
-}
-
-@media #{$bp-large-up} { //change to bp-large-only if xlarge should be used
-  @include hide("l");
-}
-
-@media #{$bp-small-up} {
-  @include columns("s");
-  @include show("s");
-}
-
-@media #{$bp-medium-up} {
-  @include columns("m");
-  @include show("m");
-}
-
-@media #{$bp-large-up} {
-  @include columns("l");
-  @include show("l");
-}
+// Place all the styles related to the grid controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+@import "normalize/normalize";
+
+$DEBUG_MODE: "false"; //enables the use of "random-color-x"
+
+
+@function to-rem($px,$b: $font-base-size) {
+    @return #{$px/$b}rem;
+}
+@function to-em($px,$b: $font-base-size) {
+    @return #{$px/$b}em;
+}
+
+
+$max-columns: 8;
+
+$primary-color: #1976D2;
+$primary-color-light: #63a4ff;
+$primary-color-dark: #004ba0;
+
+$secondary-color: #37474F;
+$secondary-color-light: #62727b;
+$secondary-color-dark: #102027;
+
+$primary-color-text: #fff;
+$primary-color-light-text: #000;
+$primary-color-dark-text: #fff;
+
+$secondary-color-text: #fff;
+$secondary-color-light-text:#fff;
+$secondary-color-dark-text:#fff;
+
+.color-primary {
+  background-color: $primary-color;
+  color: $primary-color-text;
+  &.light {
+    background-color: $primary-color-light;
+    color: $primary-color-light-text;
+  }
+  &.dark {
+    background-color: $primary-color-dark;
+    color: $primary-color-dark-text;
+  }
+}
+
+.color-secondary {
+  background-color: $secondary-color;
+  color: $secondary-color-text;
+  &.light {
+    background-color: $secondary-color-light;
+    color: $secondary-color-light-text;
+  }
+  &.dark {
+    background-color: $secondary-color-dark;
+    color: $secondary-color-dark-text;
+  }
+}
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:        $font-family-sans-serif;
+
+$font-size-base:          14px;
+$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
+$font-size-h5:            $font-size-base;
+$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h-list: $font-size-h1 $font-size-h2 $font-size-h3 $font-size-h4 $font-size-h5 $font-size-h6;
+
+$line-height-base:        1.428571429; // 20/14
+$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
+
+$headings-font-family:    inherit;
+$headings-font-weight:    500;
+$headings-line-height:    1.1;
+$headings-color:          inherit;
+
+//Breakpoints
+$bp-small:  (0,40em);
+$bp-medium: (40.00001em,64em);
+$bp-large:  (64.00001em,90em);
+$bp-xlarge: (90.00001, 500000em);
+
+$row-width-small:   64em;
+$row-width-medium:  $row-width-small;
+$row-width-large:   $row-width-medium;
+$row-width-xlarge: 80em;
+
+//Specific breakpoints
+$bp-small-up:   "only screen";
+$bp-small-only: "only screen and (max-width: #{nth($bp-small,2)})";
+$bp-small-down: "only screen and (max-width:#{nth($bp-small,2)})";
+
+$bp-medium-up:  "only screen and (min-width: #{nth($bp-medium,1)})";
+$bp-medium-only:  "only screen and (min-width: #{nth($bp-medium,1)}) and (max-width:#{nth($bp-medium,2)})";
+$bp-medium-down: "only screen and (max-width:#{nth($bp-medium,2)})";
+
+$bp-large-up:  "only screen and (min-width: #{nth($bp-large,1)})";
+$bp-large-only:  "only screen and (min-width: #{nth($bp-large,1)}) and (max-width:#{nth($bp-large,2)})";
+$bp-large-down: "only screen and (max-width:#{nth($bp-large,2)})";
+
+$bp-xlarge-up: "only screen and (min-width: #{nth($bp-xlarge,1)})";
+$bp-xlarge-only: "only screen and (min-width: #{nth($bp-xlarge,1)}) and (max-width:#{nth($bp-xlarge,2)})";
+$bp-xlarge-down: "only screen";
+
+* {
+  box-sizing: border-box;
+}
+
+html,body {
+  height:100%;
+}
+
+body {
+  font-size: $font-size-base;
+}
+
+.font-large {
+  font-size: $font-size-large;
+}
+.font-small {
+  font-size: $font-size-small;
+}
+
+@for $i from 1 through 6 {
+  h#{$i} {
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color:$headings-color;
+    font-size: nth($font-size-h-list,$i);
+  }
+}
+
+.grid-container {
+  display: grid;
+  grid-row-gap: 0.4rem;
+  &.fixed {
+    max-width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.row {
+  display:grid;
+  grid-template-columns: repeat($max-columns,1fr);
+  grid-gap: 0.4rem;
+}
+
+@for $i from 1 through $max-columns {
+  .random-color-#{$i} {
+    $alpha: random(100)/100;
+    $red: random(256)-1;
+    $green: random(256)-1;
+    $blue: random(256)-1;
+    $color: unquote("rgb(#{$red}, #{$green}, #{$blue})");
+    @if $DEBUG_MODE == 'true' {
+      background-color:$color;
+    }
+  }
+}
+
+@mixin columns($size) {
+  @for $i from 1 through $max-columns {
+    .#{$size}-col-#{$i} {
+      grid-column: span $i;
+    }
+  }
+}
+
+@mixin hide($size) {
+  @for $i from 1 through $max-columns {
+    .#{$size}-hide {
+      display:none;
+    }
+  }
+}
+
+@mixin show($size) {
+  @for $i from 1 through $max-columns {
+    $show-small: none;
+    $show-medium: none;
+    $show-large: none;
+    $show-xlarge: none;
+
+    @if $size=="s" {
+    $show-small: inherit;
+    }
+    @if $size=="m" {
+      $show-medium: inherit;
+    }
+    @if $size=="l" {
+      $show-large: inherit;
+    }
+    @if $size=="l" {
+      $show-xlarge: inherit;
+    }
+    .s-only {
+      display:$show-small;
+    }
+    .m-only {
+      display:$show-medium;
+    }
+    .l-only {
+      display:$show-large;
+    }
+    .xl-only {
+      display:$show-xlarge;
+    }
+  }
+}
+
+@for $i from 1 through $max-columns {
+  .col-#{$i} {
+    grid-column: span $i;
+  }
+}
+
+@media #{$bp-small-only} {
+  @include hide("s");
+}
+
+@media #{$bp-medium-only} {
+  @include hide("m");
+}
+
+@media #{$bp-large-up} { //change to bp-large-only if xlarge should be used
+  @include hide("l");
+}
+
+@media #{$bp-small-up} {
+  @include columns("s");
+  @include show("s");
+}
+
+@media #{$bp-medium-up} {
+  @include columns("m");
+  @include show("m");
+}
+
+@media #{$bp-large-up} {
+  @include columns("l");
+  @include show("l");
+}
+
+$btn-color-default:#FFF ;
+$btn-color-default-text:#333333;
+$btn-color-default-hover:darken($btn-color-default,10%);
+
+$btn-color-primary:#BDE5F8 ;
+$btn-color-primary-text:#00529B;
+$btn-color-primary-hover:darken($btn-color-primary,10%);
+
+$btn-color-success:#DFF2BF;
+$btn-color-success-text:#4F8A10;
+$btn-color-success-hover:darken($btn-color-success,10%);;
+
+$btn-color-warning:#FEEFB3;
+$btn-color-warning-text:#9F6000;
+$btn-color-warning-hover:darken($btn-color-warning,10%);;
+
+$btn-color-alert:#FFBABA;
+$btn-color-alert-text:#D8000C;
+$btn-color-alert-hover:darken($btn-color-alert,10%);;
+
+form {
+  max-width: 100%;
+  display: grid;
+  grid-gap: 0.4rem;
+  & .form-group {
+    display:grid;
+    grid-gap: 0.2rem;
+    grid-template-areas: "l" "i";
+    & label {
+      grid-area: l;
+      max-width: 100%;
+    }
+    & input {
+      grid-area: i;
+      max-width: 100%;
+    }
+    &.inline {
+      grid-template-areas: "l i";
+      grid-template-columns: 1fr 2fr;
+      align-items: center;
+    }
+    @for $i from 3 through 10 {
+      &.inline-#{$i} {
+        grid-template-columns: repeat($i,1fr);
+        align-items: center;
+      }
+    }
+  }
+
+  button {
+    background-color: $btn-color-default;
+    border-color: $btn-color-default;
+    color: $btn-color-default-text;
+    &:hover {
+      background-color: $btn-color-default-hover;
+    }
+    &.primary {
+      background-color: $btn-color-primary;
+      border-color: $btn-color-primary;
+      color: $btn-color-primary-text;
+      &:hover {
+        background-color: $btn-color-primary-hover;
+      }
+    }
+    &.success {
+      background-color: $btn-color-success;
+      border-color: $btn-color-success;
+      color: $btn-color-success-text;
+      &:hover {
+        background-color: $btn-color-success-hover;
+      }
+    }
+    &.warning {
+      background-color: $btn-color-warning;
+      border-color: $btn-color-warning;
+      color: $btn-color-warning-text;
+      &:hover {
+        background-color: $btn-color-warning-hover;
+      }
+    }
+    &.alert {
+      background-color: $btn-color-alert;
+      border-color: $btn-color-alert;
+      color: $btn-color-alert-text;
+      &:hover {
+        background-color: $btn-color-alert-hover;
+      }
+    }
+  }
+}
+
+input, button, select, textarea {
+  padding: 0.3rem;
+  border: 0.5px #333 solid;
+  border-radius: 0.2rem;
+  &:focus {
+    border-color: $primary-color-light;
+  }
+  &:invalid {
+    border-color: #990000;
+  }
+}