updates to form, card and nav

dist/chota.css

@@ -226,11 +226,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]
 }
 select{
     -webkit-appearance:none;
-    background-color:#fafafa;
+    background:#fafafa no-repeat 1ex;
     border:1px solid var(--lightGrey-color);
-    background-position:100%;
-    background-repeat:no-repeat;
     background-size:1ex;
+    background-position:100%;
     background-origin:content-box;
     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
@@ -245,11 +244,14 @@ select{
     border-radius:50%;
     box-shadow:inset 0 0 0 3px #fff;
 }
-[type=radio]:checked{
+[type=checkbox]:checked,[type=radio]:checked{
+    background-color:#000;
     background-color:var(--primary-color);
 }
 [type=checkbox]:checked{
-    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;
+    background-repeat:no-repeat;
+    background-position:50%;
+    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC");
     background-size:1rem;
 }
 .button,[type=button],[type=reset],[type=submit],button{
@@ -282,6 +284,7 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
 }
 .button.primary,[type=submit]{
     color:#fff;
+    background-color:#000;
     background:var(--primary-color);
 }
 .button.outline{
@@ -335,15 +338,17 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
     display:flex;
     align-items:center;
     padding:1rem 2rem;
+    color:#555;
+}
+.nav .active:not(.button){
+    color:#000;
+    color:var(--primary-color);
 }
 .nav .brand{
-    margin:0;
+    font-size:1.75em;
     padding-top:0;
     padding-bottom:0;
 }
-.nav .brand a{
-    padding:0;
-}
 .nav .button{
     margin:auto 1rem;
 }
@@ -352,6 +357,9 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
     border-radius:4px;
     box-shadow:0 0 2px rgba(0,0,0,.4);
 }
+.card p:last-child{
+  margin:0;
+}
 .card header>*{
   margin-top:0;
   margin-bottom:1rem;

package.json

@@ -4,7 +4,7 @@
   "description": "A really small CSS framework",
   "main": "dist/chota.min.css",
   "scripts": {
-    "start": "browser-sync start --server --files '**/*.css' '**/*.html'",
+    "start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
     "build": "rm -r dist/ && yarn postcss && yarn postcss -- -x .min.css && yarn cssnano && yarn cssnano:min",
     "postcss": "postcss ./src/chota.css -u postcss-import -d dist/ --no-map",
     "cssnano": "cssnano ./dist/chota.css ./dist/chota.css --no-calc --no-core",

src/_card.css

@@ -4,6 +4,10 @@
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
 }
 
+.card p:last-child {
+  margin: 0;
+}
+
 .card header > * {
   margin-top: 0;
   margin-bottom: 1rem;

src/_form.css

@@ -39,11 +39,10 @@ textarea[type=text]:focus {
 
 select {
     -webkit-appearance: none;
-    background-color: #fafafa;
+    background: #fafafa no-repeat 1ex;
     border: 1px solid var(--lightGrey-color);
-    background-position: right center;
-    background-repeat: no-repeat;
     background-size: 1ex;
+    background-position: right center;
     background-origin: content-box;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
@@ -63,11 +62,16 @@ select {
 }
 
 [type="radio"]:checked {
+    background-color: #000; /* fallback */
     background-color: var(--primary-color);
 }
 
 [type="checkbox"]:checked {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat center;
+    background-color: #000; /* fallback */
+    background-color: var(--primary-color);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC");
     background-size: 1rem;
 }
 /* BUTTONS */
@@ -122,6 +126,7 @@ button[disabled]:hover {
 .button.primary,
 [type=submit] {
     color: #fff;
+    background-color: #000;
     background: var(--primary-color);
 }
 

src/_nav.css

@@ -50,18 +50,20 @@
     display: flex;
     align-items: center;
     padding: 1rem 2rem;
+    color: #555;
+}
+
+.nav .active:not(.button) {
+    color: #000; /* fallback */
+    color: var(--primary-color);
 }
 
 .nav .brand {
-    margin: 0;
+    font-size: 1.75em;
     padding-top: 0;
     padding-bottom: 0;
 }
 
-.nav .brand a {
-    padding: 0;
-}
-
 .nav .button {
     margin: auto 1rem;
 }

test/components.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Grids</title>
+  <title>Components</title>
   <link rel="stylesheet" href="../dist/chota.min.css">
   <style>
     .nav {
@@ -17,9 +17,7 @@
   <nav class="nav">
     <div class="container">
       <div class="nav-left">
-        <h2 class="brand">
+        <a class="brand" href="#">Logo</a>
-          <a href="#">Logo</a>
-        </h2>
       </div>
       <div class="nav-center">
         <a class="button outline" href="#">Centered</a>
@@ -27,16 +25,14 @@
       <div class="nav-right">
         <a href="#!1.html">Link 1</a>
         <a href="#!2.html">Link 2</a>
-        <a href="#!3.html">Link 3</a>
+        <a href="#!3.html" class="active">Link 3</a>
       </div>
     </div>
   </nav>
   <br>
   <nav class="nav">
     <div class="nav-left">
-      <h2 class="brand">
+      <a class="brand" href="#">Logo</a>
-        <a href="#">Logo</a>
-      </h2>
     </div>
     <div class="nav-center">
       <a href="#">Centered</a>
@@ -53,20 +49,20 @@
       <div class="nav-center">
         <a href="#!1.html">Link 1</a>
         <a href="#!2.html">Link 2</a>
-        <a href="#!3.html">Link 3</a>
+        <a href="#!3.html" class="active">Link 3</a>
         <a href="#!" class="button primary">Button</a>
       </div>
     </nav>
     <br><hr><br>
     <nav class="nav">
       <div class="nav-left">
-        <h3 class="brand"><a href="#">Brand</a></h3>
+        <a class="brand" href="#">Brand</a>
       </div>
       <div class="nav-right">
         <div class="tabs">
           <a href="#!1.html">Link 1</a>
           <a href="#!2.html">Link 2</a>
-          <a href="#!3.html">Link 3</a>
+          <a href="#!3.html" class="active">Link 3</a>
         </div>
       </div>
     </nav>