🌈 New <form> styling and .grid responsive MQ

KawanuaDev · Oct 2, 2020 · 1c5a54c · 1c5a54c
1 parent 9316d97
commit 1c5a54c
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 107 deletions.
diff --git a/.travis.yml b/.travis.yml
diff --git a/dist/gorango.min.css b/dist/gorango.min.css
diff --git a/src/base/_modules.scss b/src/base/_modules.scss
@@ -33,3 +33,5 @@
 
 @import "../components/image";
 
+@import "../components/form";
+
diff --git a/src/components/_form.scss b/src/components/_form.scss
@@ -0,0 +1,50 @@
+/* FORM */
+
+form {
+  [type='text'],
+  [type='password'],
+  [type='email'],
+  [type='number'],
+  [type='password'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='url'],
+  [type='week'],
+  [type='month'],
+  [type='date'],
+  textarea {
+    width: 100%;
+    padding: 0.7em;
+    border-radius: 0.3em;
+    border: .1em solid #eee;
+    margin-bottom: 0.5em;
+
+    &:focus {
+      outline: none;
+    }
+  }
+  [type='text'],
+  [type='password'],
+  [type='email'],
+  [type='number'],
+  [type='password'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='url'],
+  [type='week'],
+  [type='month'],
+  [type='date'] {
+    &:invalid {
+      background-color: palevioletred;
+      color: whitesmoke;
+    }
+  }
+  label {
+    padding: 1em 0;
+    margin-bottom: 0.2em;
+  }
+}
+
+
diff --git a/src/components/_grid.scss b/src/components/_grid.scss
@@ -363,4 +363,98 @@ $gridgap: 0.5rem;
 @include gridgaps(7);
 @include gridgaps(8);
 @include gridgaps(9);
-@include gridgaps(10);
+@include gridgaps(10);
+
+
+/* RESPONSIVENESS */
+
+@media screen and (max-width: 750px) {
+  .grid {
+    &.\-1fr-auto {
+      -ms-grid-rows: repeat(2, auto);
+      grid-template-rows: repeat(2, auto);
+    }
+    &.-auto-1fr {
+      -ms-grid-rows: repeat(2, auto);
+      grid-template-rows: repeat(2, auto);
+    }
+    &.-col-2, &.-auto-2x, &.-auto-auto {
+      -ms-grid-rows: repeat(2, auto);
+      grid-template-rows: repeat(2, auto);
+    }
+    &.-col-3, &.-auto-3x, &.-auto-auto-auto {
+      -ms-grid-rows: repeat(3, auto);
+      grid-template-rows: repeat(3, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-rows: repeat(3, auto);
+      grid-template-rows: repeat(3, auto);
+    }
+  }
+}
+
+@media screen and (min-width: 755px) {
+  .grid {
+    &.\-1fr-auto {
+      -ms-grid-columns: 1fr auto;
+      grid-template-columns: 1fr auto;
+    }
+    &.-auto-1fr {
+      -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+    }
+    &.-col-2, &.-auto-2x, &.-auto-auto {
+      -ms-grid-columns: repeat(2, auto);
+      grid-template-columns: repeat(2, auto);
+    }
+    &.-col-3, &.-auto-3x, &.-auto-auto-auto {
+      -ms-grid-columns: repeat(2, auto);
+      grid-template-columns: repeat(2, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(2, auto);
+      grid-template-columns: repeat(2, auto);
+    }
+  }
+}
+
+@media screen and (min-width: 993px) {
+  .grid {
+    &.\-1fr-auto {
+      -ms-grid-columns: 1fr auto;
+      grid-template-columns: 1fr auto;
+    }
+    &.-auto-1fr {
+      -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+    }
+    &.-col-2, &.-auto-2x, &.-auto-auto {
+      -ms-grid-columns: repeat(2, auto);
+      grid-template-columns: repeat(2, auto);
+    }
+    &.-col-3, &.-auto-3x, &.-auto-auto-auto {
+      -ms-grid-columns: repeat(3, auto);
+      grid-template-columns: repeat(3, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(4, auto);
+      grid-template-columns: repeat(4, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(4, auto);
+      grid-template-columns: repeat(4, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(4, auto);
+      grid-template-columns: repeat(4, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(4, auto);
+      grid-template-columns: repeat(4, auto);
+    }
+    &.-col-4, &.-auto-4x, &.-auto-auto-auto-auto {
+      -ms-grid-columns: repeat(4, auto);
+      grid-template-columns: repeat(4, auto);
+    }
+  }
+}
diff --git a/src/components/_image.scss b/src/components/_image.scss
@@ -63,17 +63,17 @@ img {
 @mixin filters($name, $unit) {
   @if $name == "blur" {
     .-blur-#{$unit} {
-      filter: blur($unit + "px");
+      filter: blur($unit + px);
     }
   }
   @if $name == "brightness" {
     .-brightness-#{$unit} {
-      filter: brightness($unit);
+      filter: brightness($unit + 0%);
     }
   }
   @if $name == "contrast" {
     .-contrast-#{$unit} {
-      filter: contrast($unit);
+      filter: contrast($unit + 0%);
     }
   }
   // @if $name == "drop-shadow" or $name == "dropshadow" or $name == "shadow" {
@@ -83,32 +83,32 @@ img {
   // }
   @if $name == "grayscale" {
     .-grayscale-#{$unit} {
-      filter: grayscale($unit);
+      filter: grayscale($unit + 0%);
     }
   }
   @if $name == "hue-rotate" {
     .-hue-rotate-#{$unit} {
-      filter: hue-rotate($unit + "deg");
+      filter: hue-rotate($unit + deg);
     }
   }
   @if $name == "invert" {
     .-invert-#{$unit} {
-      filter: invert($unit);
+      filter: invert($unit + 0%);
     }
   }
   @if $name == "opacity" {
     .-opacity-#{$unit} {
-      filter: opacity($unit);
+      filter: opacity($unit + 0%);
     }
   }
   @if $name == "saturate" {
     .-saturate-#{$unit} {
-      filter: saturate($unit);
+      filter: saturate($unit + 0%);
     }
   }
   @if $name == "sepia" {
     .-sepia-#{$unit} {
-      filter: sepia($unit);
+      filter: sepia($unit + 0%);
     }
   }
   @if $name == "initial" {
@@ -123,70 +123,70 @@ img {
   }
 }
 
-// @include filters(blur,0);
-// @include filters(blur,10);
-// @include filters(blur,20);
-// @include filters(blur,30);
-// @include filters(blur,40);
-// @include filters(blur,50);
-// @include filters(blur,60);
-// @include filters(blur,70);
-// @include filters(blur,80);
-// @include filters(blur,90);
-// @include filters(blur,100);
-
-// @include filters(brightness,0);
-// @include filters(brightness,0.25);
-// @include filters(brightness,0.5);
-// @include filters(brightness,0.75);
-// @include filters(brightness,1);
-
-// @include filters(contrast,0);
-// @include filters(contrast,0.25);
-// @include filters(contrast,0.5);
-// @include filters(contrast,0.75);
-// @include filters(contrast,1);
-
-// @include filters(grayscale,0);
-// @include filters(grayscale,0.25);
-// @include filters(grayscale,0.5);
-// @include filters(grayscale,0.75);
-// @include filters(grayscale,1);
-
-// @include filters(hue-rotate,0);
-// @include filters(hue-rotate,45);
-// @include filters(hue-rotate,90);
-// @include filters(hue-rotate,135);
-// @include filters(hue-rotate,180);
-// @include filters(hue-rotate,225);
-// @include filters(hue-rotate,270);
-// @include filters(hue-rotate,315);
-// @include filters(hue-rotate,360);
-
-// @include filters(invert,0);
-// @include filters(invert,0.25);
-// @include filters(invert,0.5);
-// @include filters(invert,0.75);
-// @include filters(invert,1);
-
-// @include filters(opacity,0);
-// @include filters(opacity,0.25);
-// @include filters(opacity,0.5);
-// @include filters(opacity,0.75);
-// @include filters(opacity,1);
-
-// @include filters(saturate,0);
-// @include filters(saturate,0.25);
-// @include filters(saturate,0.5);
-// @include filters(saturate,0.75);
-// @include filters(saturate,1);
-
-// @include filters(sepia,0);
-// @include filters(sepia,0.25);
-// @include filters(sepia,0.5);
-// @include filters(sepia,0.75);
-// @include filters(sepia,1);
-
-// @include filters(initial,"");
-
-// @include filters(inherit,"");
+@include filters(blur,0);
+@include filters(blur,10);
+@include filters(blur,20);
+@include filters(blur,30);
+@include filters(blur,40);
+@include filters(blur,50);
+@include filters(blur,60);
+@include filters(blur,70);
+@include filters(blur,80);
+@include filters(blur,90);
+@include filters(blur,100);
+
+@include filters(brightness,0);
+@include filters(brightness,25);
+@include filters(brightness,50);
+@include filters(brightness,75);
+@include filters(brightness,100);
+
+@include filters(contrast,0);
+@include filters(contrast,25);
+@include filters(contrast,50);
+@include filters(contrast,75);
+@include filters(contrast,100);
+
+@include filters(grayscale,0);
+@include filters(grayscale,25);
+@include filters(grayscale,50);
+@include filters(grayscale,75);
+@include filters(grayscale,100);
+
+@include filters(hue-rotate,0);
+@include filters(hue-rotate,45);
+@include filters(hue-rotate,90);
+@include filters(hue-rotate,135);
+@include filters(hue-rotate,180);
+@include filters(hue-rotate,225);
+@include filters(hue-rotate,270);
+@include filters(hue-rotate,315);
+@include filters(hue-rotate,360);
+
+@include filters(invert,0);
+@include filters(invert,25);
+@include filters(invert,50);
+@include filters(invert,75);
+@include filters(invert,100);
+
+@include filters(opacity,0);
+@include filters(opacity,25);
+@include filters(opacity,50);
+@include filters(opacity,75);
+@include filters(opacity,100);
+
+@include filters(saturate,0);
+@include filters(saturate,25);
+@include filters(saturate,50);
+@include filters(saturate,75);
+@include filters(saturate,100);
+
+@include filters(sepia,0);
+@include filters(sepia,25);
+@include filters(sepia,50);
+@include filters(sepia,75);
+@include filters(sepia,100);
+
+@include filters(initial,"");
+
+@include filters(inherit,"");
diff --git a/src/gorango.css.map b/src/gorango.css.map
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,3 +33,5 @@

		@import "../components/image";

		@import "../components/form";