adding badge field

dist/index.html

@@ -17,9 +17,8 @@
                 <div class="col-12">
                     <div class="text-center">
                         <hgroup>
-                            <a href="/">
-                                <h1 class="h2 margin-top-4 margin-bottom-0">Plain UI</h1>
-                        </a></hgroup>
+                            <h1>Plain UI</h1>
+                        </hgroup>
                     </div>
                 </div>
             </div>
@@ -54,8 +53,11 @@
                 <svg class="icon" aria-hidden="true">
                     <use xlink:href="symbol-defs.svg#icon-check"></use>
                 </svg>
-                <svg class="icon icon--circle" aria-hidden="true">
-                    <use xlink:href="symbol-defs.svg#icon-check"></use>
+                <svg class="icon" aria-hidden="true">
+                    <use xlink:href="symbol-defs.svg#icon-camera"></use>
+                </svg>
+                <svg class="icon icon--success" aria-hidden="true">
+                    <use xlink:href="symbol-defs.svg#icon-clock"></use>
                 </svg>
             </div>
         </div>
@@ -66,6 +68,9 @@
                 <span class="badge">
                     Category
                 </span>
+                <span class="badge badge--round">
+                    99+
+                </span>
             </div>
         </div>
 
@@ -109,38 +114,48 @@
 
         <div class="grid">
             <div class="col-12">
-                <h2>Form</h2>
+                <h2>Field</h2>
 
                 <form>
-                    <div class="group">
-                        <label class="label">
+                    <div class="field-group">
+                        <label class="field-label">
                             Name
-                            <input class="text" />
+                            <input class="field-text" />
                         </label>
                     </div>
 
-                    <div class="group group--valid">
-                        <label class="label">
+                    <div class="field-group field-group--valid">
+                        <label class="field-label">
                             <svg class="icon" aria-hidden="true">
                                 <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
                             </svg>
                             Surname
-                            <input class="text" />
+                            <input class="field-text" />
                         </label>
                     </div>
 
-                    <div class="group group--error">
-                        <label class="label">
+                    <div class="field-group field-group--error">
+                        <label class="field-label">
                             <svg class="icon" aria-hidden="true">
                                 <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
                             </svg>
                             E-Mail
-                            <input class="text" />
+                            <input class="field-text" />
                         </label>
-                        <span class="error">
+                        <span class="field-error">
                             String is not valid
                         </span>
                     </div>
+
+                    <div class="field-group">
+                        <label class="field-label">
+                            Towns
+                            <select class="field-choice">
+                                <option></option>
+                                <option value="lonytown">Lonytown</option>
+                            </select>
+                        </label>
+                    </div>
                 </form>
 
             </div>

dist/plain-ui.css

@@ -213,12 +213,19 @@ summary {
   display: list-item;
 }
 
+/**
+ *
+ *
+ *
+ *
+ */
 /**
  *
  *
  *
  */
 /**
+ *
  *
  *
  *
@@ -258,6 +265,22 @@ body {
   line-height: 1.4;
 }
 
+.badge {
+  display: inline-block;
+  background-color: #3e3e3e;
+  color: white;
+  font-size: 0.85rem;
+  padding: 0.4em 0.8em;
+  border: 1px solid #242424;
+  border-radius: 2px;
+}
+.badge--round {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: 50%;
+  width: 2.5em;
+}
+
 .button {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -279,64 +302,68 @@ body {
   text-decoration: none;
   background-color: #575757;
 }
-.label {
+.button .icon {
+  fill: white;
+}
+
+.field-group {
+  margin-bottom: 1.2em;
+}
+.field-group--valid input.field-text, .field-group--valid textarea.field-text {
+  border-color: #64ac64;
+}
+.field-group--valid .icon {
+  fill: #64ac64;
+}
+.field-group--error input.field-text, .field-group--error textarea.field-text {
+  border-color: #d95959;
+}
+.field-group--error .icon {
+  fill: #d95959;
+}
+
+.field-label {
+  font-size: 1rem;
   font-family: "IBM Plex Mono", sans-serif;
 }
-.label .icon {
-  vertical-align: text-top;
-  font-size: 1.2rem;
+.field-label .icon {
+  vertical-align: sub;
+  font-size: 1.1rem;
 }
 
-input.text, textarea.text {
+input.field-text, textarea.field-text, select.field-choice {
   font-family: "IBM Plex Mono", sans-serif;
+  font-size: 0.95rem;
   width: 100%;
-  padding: 0.8em 1.1em;
-  font-size: 0.9rem;
-  border: 1px solid;
+  border: 1px solid #8a8a8a;
+  background-color: white;
   border-radius: 2px;
   margin: 0.7em 0 0;
 }
-input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
+input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active {
   outline: 0;
-  border-color: #4d8c4d;
+  border-color: #242424;
+}
+
+input.field-text, textarea.field-text {
+  padding: 0.8em 1.1em;
+}
+
+select.field-choice {
+  padding: 0.8em;
 }
 
-.help, .error {
+.field-help, .field-error {
   display: inline-block;
   width: 100%;
   padding: 0.6em 0.5em;
   font-size: 0.8rem;
 }
 
-.error {
+.field-error {
   color: #d95959;
 }
 
-.group {
-  margin-bottom: 1.2em;
-}
-.group--valid input.text, .group--valid textarea.text {
-  border-color: #64ac64;
-}
-.group--valid .icon {
-  fill: #64ac64;
-}
-.group--error input.text, .group--error textarea.text {
-  border-color: #d95959;
-}
-.group--error .icon {
-  fill: #d95959;
-}
-
-.text-wrapper {
-  display: flex;
-}
-.text-wrapper input.text {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0;
-}
-
 .icon {
   width: 1em;
   height: 1em;
@@ -344,7 +371,11 @@ input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
   max-width: 100%;
   vertical-align: middle;
   overflow: hidden;
-  fill: white;
+  fill: #242424;
+}
+
+.icon--success {
+  fill: #64ac64;
 }
 
 .icon--danger {
@@ -379,6 +410,7 @@ input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
   width: 1.5em;
   height: 1.5em;
   margin-right: 0.5em;
+  fill: white;
 }
 .panel__buttons {
   display: flex;

src/scss/components/_badge.scss

@@ -0,0 +1,29 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+@mixin plain-ui__component__badge() {
+    .badge {
+        display: inline-block;
+
+        background-color: lighten($plain-ui__primary-light, 10%);
+        color: white;
+
+        font-size: 0.85rem;
+        padding: 0.4em 0.8em;
+
+        border: 1px solid $plain-ui__primary-light;
+        border-radius: 2px;
+
+        &--round {
+            display: inline-flex;
+            justify-content: center;
+            
+            border-radius: 50%;
+            width: 2.5em;
+        }
+    }
+}

src/scss/components/_button.scss

@@ -36,14 +36,8 @@
 
         }
 
-        &--lighter {
-
-        }
-    }
-
-    .plain-ui-dark {
-        .button {
-
+        .icon {
+            fill: white;
         }
     }
 }

src/scss/components/_field.scss

@@ -1,4 +1,5 @@
 /**
+ *
  *
  *
  *
@@ -6,34 +7,69 @@
 
 @mixin plain-ui__component__field()
 {
-    .label {
+    // group, container for fields
+    .field-group {
+        margin-bottom: 1.2em;
+
+        &--valid {
+            input.field-text, textarea.field-text {
+                border-color: $plain-ui__success-light;
+            }
+
+            .icon {
+                fill: $plain-ui__success-light;
+            }
+        }
+
+        &--error {
+            input.field-text, textarea.field-text {
+                border-color: $plain-ui__danger-light;
+            }
+
+            .icon {
+                fill: $plain-ui__danger-light;
+            }
+        }
+    }
+    
+    .field-label {
+        font-size: 1rem;
         font-family: $plain-ui__font-family;
 
         .icon {
-            vertical-align: text-top;
-            font-size: 1.2rem;
+            vertical-align: sub;
+            font-size: 1.1rem;
         }
     }
 
-    input.text, textarea.text {
+    input.field-text, textarea.field-text, select.field-choice {
         font-family: $plain-ui__font-family;
+        font-size: 0.95rem;
 
         width: 100%;
-        padding: 0.8em 1.1em;
-        font-size: 0.9rem;
 
-        border: 1px solid;
+        border: 1px solid lighten($plain-ui__primary-light, 40%);
+        background-color: white;
         border-radius: 2px;
 
         margin: 0.7em 0 0;
 
         &:focus, &:active {
             outline: 0;
-            border-color: #4d8c4d;
+            border-color: $plain-ui__primary-light;
         }
     }
 
-    .help, .error {
+    input.field-text, textarea.field-text {
+        padding: 0.8em 1.1em;
+    }
+
+    select.field-choice {
+        padding: 0.8em;
+    }
+
+    //
+    .field-help, .field-error {
         display: inline-block;
         width: 100%;
 
@@ -41,41 +77,8 @@
         font-size: 0.8rem;
     }
 
-    .error {
+    // display error for fields
+    .field-error {
         color: $plain-ui__danger-light;
     }
-
-    .group {
-        margin-bottom: 1.2em;
-
-        &--valid {
-            input.text, textarea.text {
-                border-color: $plain-ui__success-light;
-            }
-
-            .icon {
-                fill: $plain-ui__success-light;
-            }
-        }
-
-        &--error {
-            input.text, textarea.text {
-                border-color: $plain-ui__danger-light;
-            }
-
-            .icon {
-                fill: $plain-ui__danger-light;
-            }
-        }
-    }
-
-    .text-wrapper {
-        display: flex;
-
-        input.text {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border-right: 0;
-        }
-    }
 }

src/scss/components/_icon.scss

@@ -16,7 +16,11 @@
         vertical-align: middle;
         overflow: hidden;
 
-        fill: white;
+        fill: $plain-ui__primary-light;
+    }
+
+    .icon--success {
+        fill: $plain-ui__success-light;
     }
 
     .icon--danger {

src/scss/components/_panel.scss

@@ -35,6 +35,8 @@
                 width: 1.5em;
                 height: 1.5em;
                 margin-right: 0.5em;
+
+                fill: white;
             }
         }
 
@@ -52,10 +54,4 @@
             padding: 0.6em 1.2em;
         }
     }
-
-    .plain-ui-dark {
-        .panel {
-
-        }
-    }
 }

src/scss/plain-ui.scss

@@ -4,12 +4,16 @@
 
     'variables',
     'core',
+
+    'components/badge',
     'components/button',
     'components/field',
     'components/icon',
     'components/panel';
 
 @include plain-ui__core();
+
+@include plain-ui__component__badge();
 @include plain-ui__component__button();
 @include plain-ui__component__field();
 @include plain-ui__component__icon();