Merge pull request #147 from picturepan2/feature/bars v0.2.3

Feature/bars

9 files changed, 150 insertions, 141 deletions

diff --git a/src/badges.less b/src/badges.less
index c9f571e..e274184 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -1,5 +1,6 @@
 // Badges
 .badge {
+  display: inline-block;
   position: relative;
 
   &[data-badge],
@@ -12,10 +13,7 @@
       color: @core-light-color;
       content: attr(data-badge);
       display: inline-block;
-      position: absolute;
-      right: 0;
-      top: 0;
-      transform: translate(100%, -50%);
+      transform: translate(-.4rem, -1rem);
     }
   }
   &[data-badge] {
@@ -38,4 +36,14 @@
       width: .8rem;
     }
   }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
 }
diff --git a/src/bars.less b/src/bars.less
new file mode 100644
index 0000000..d410fdb
--- /dev/null
+++ b/src/bars.less
@@ -0,0 +1,37 @@
+// Bars
+.bar {
+  background: @core-border-color;
+  border-radius: @border-radius;
+  display: flex;
+  flex-wrap: nowrap;
+  height: 1.6rem;
+  width: 100%;
+
+  &.bar-sm {
+    height: .4rem;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: @core-color;
+    color: @core-light-color;
+    display: block;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+    line-height: 1;
+    height: 100%;
+    padding: .2rem 0;
+    text-align: center;
+    width: 0;
+
+    &:first-of-type {
+      border-bottom-left-radius: @border-radius;
+      border-top-left-radius: @border-radius;
+    }
+    &:last-of-type {
+      border-bottom-right-radius: @border-radius;
+      border-top-right-radius: @border-radius;
+      flex-shrink: 1;
+    }
+  }
+}
diff --git a/src/chips.less b/src/chips.less
index 4143211..69b1f7c 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -18,6 +18,7 @@
   }
 
   .avatar {
+    margin-left: -.4rem;
     margin-right: .4rem;
   }
 }
diff --git a/src/fileicons.less b/src/fileicons.less
deleted file mode 100644
index 0e2c7eb..0000000
--- a/src/fileicons.less
+++ /dev/null
@@ -1,113 +0,0 @@
-// File icons
-.file-icon {
-  background: transparent;
-  border-color: @control-color;
-  border-radius: .2rem;
-  border-style: solid;
-  border-width: 0 0 2.2rem 1.4rem;
-  display: inline-block;
-  height: 3.2rem;
-  position: relative;
-  text-align: left;
-  width: 2.4rem;
-  zoom: 1;
-
-  &::before,
-  &::after {
-    background: transparent;
-    border: .5rem solid @control-color;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    height: 1rem;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 1rem;
-    z-index: 2;
-  }
-  &::after {
-    border-bottom-left-radius: .2rem;
-    border-color: rgba(255, 255, 255, .5);
-    color: @core-light-color;
-    content: attr(data-type);
-    font-size: 1rem;
-    line-height: 3.6rem;
-    text-indent: -1.6rem;
-    z-index: 3;
-  }
-
-  &.file-icon-xs {
-    border-width: 0 0 1.2rem .8rem;
-    height: 1.6rem;
-    width: 1.2rem;
-
-    &::before,
-    &::after {
-      border-width: .2rem;
-      height: .4rem;
-      width: .4rem;
-    }
-    &::after {
-      border-radius: .1rem;
-      content: "--";
-      font-size: .8rem;
-      line-height: 1.6rem;
-      text-indent: -.8rem;
-    }
-  }
-  &.file-icon-sm {
-    border-width: 0 0 1.6rem 1rem;
-    height: 2.4rem;
-    width: 1.8rem;
-
-    &::before,
-    &::after {
-      border-width: .4rem;
-      height: .8rem;
-      width: .8rem;
-    }
-    &::after {
-      font-size: .8rem;
-      line-height: 2.6rem;
-      text-indent: -1.2rem;
-    }
-  }
-  &.file-icon-lg {
-    border-width: 0 0 3.4rem 2.2rem;
-    height: 4.8rem;
-    width: 3.6rem;
-
-    &::before,
-    &::after {
-      border-width: .7rem;
-      height: 1.4rem;
-      width: 1.4rem;
-    }
-    &::after {
-      font-size: 1.2rem;
-      line-height: 6.2rem;
-      text-indent: -2.6rem;
-    }
-  }
-  &.file-icon-xl {
-    border-radius: .3rem;
-    border-width: 0 0 4.6rem 3rem;
-    height: 6.4rem;
-    width: 4.8rem;
-
-    &::before,
-    &::after {
-      border-width: .9rem;
-      height: 1.8rem;
-      width: 1.8rem;
-    }
-    &::after {
-      font-size: 1.4rem;
-      line-height: 8.8rem;
-      text-indent: -3.4rem;
-    }
-  }
-}
-
-// TODO: File types
diff --git a/src/forms.less b/src/forms.less
index a2a8b49..257438c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,6 +2,7 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+
 // Form element: Input boxes
 .form-input {
   appearance: none;
@@ -70,7 +71,7 @@
   }
 }
 
-// Form element: Input note
+// Form element: Input hint
 .form-input-hint {
   color: @core-meta-color;
   margin-top: .4rem;
@@ -146,7 +147,8 @@
     border-color: @control-color-danger;
   }
 }
-// Form element: Checkbox and radio
+
+// Form element: Checkbox and Radio
 .form-checkbox,
 .form-radio,
 .form-switch {
@@ -260,12 +262,13 @@
     }
   }
 }
+
 // Form element: Switch
 .form-switch {
   cursor: pointer;
   display: inline-block;
   line-height: 2rem;
-  padding: .3rem 2rem .3rem 3.6rem;
+  padding: .2rem 2rem .2rem 3.6rem;
   position: relative;
 
   .form-icon {
@@ -280,7 +283,7 @@
     outline: none;
     padding: 0;
     position: absolute;
-    top: .4rem;
+    top: .3rem;
     vertical-align: top;
     width: 3rem;
     &::after {
@@ -312,6 +315,7 @@
     }
   }
 }
+
 // Form element: Input groups
 .input-group {
   display: flex;
@@ -363,3 +367,21 @@
     display: inline-flex;
   }
 }
+
+// Form Horizontal
+.form-horizontal {
+  padding: 1rem;
+
+  .form-group {
+    display: flex;
+  }
+  .form-label {
+    padding: .8rem .4rem;
+    margin-bottom: 0;
+  }
+  .form-checkbox,
+  .form-radio,
+  .form-switch {
+    margin: .4rem 0;
+  }
+}
diff --git a/src/layout.less b/src/layout.less
index 657b59e..05642aa 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -355,21 +355,6 @@
     width: 8.33333333%;
   }
 }
-.form-horizontal {
-  padding: 1rem;
-
-  .form-group {
-    display: flex;
-  }
-  .form-label {
-    padding: .8rem .4rem;
-    margin-bottom: 0;
-  }
-  .form-checkbox,
-  .form-radio {
-    margin: .4rem 0;
-  }
-}
 
 // Responsive breakpoint system
 @media screen and (max-width: @size-xs) {
diff --git a/src/sliders.less b/src/sliders.less
new file mode 100644
index 0000000..520e9a1
--- /dev/null
+++ b/src/sliders.less
@@ -0,0 +1,71 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: @core-color;
+    border-radius: 50%;
+    height: 1.4rem;
+    margin-top: -.5rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+  &::-moz-range-thumb {
+    background: @core-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.4rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+  &::-ms-thumb {
+    background: @core-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.4rem;
+    transition: transform .2s ease;
+    width: 1.4rem;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: @core-border-color;
+    border-radius: @border-radius;
+    height: .4rem;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: @core-color;
+  }
+}
diff --git a/src/tabs.less b/src/tabs.less
index e2d5ad2..cb172f4 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -50,12 +50,8 @@
   }
 
   &:not(.tab-block) {
-    a.badge {
+    .badge {
       padding-right: 0;
-      &::after {
-        position: static;
-        transform: translate(-.2rem, -1rem);
-      }
     }
   }
 }
diff --git a/src/variables.less b/src/variables.less
index ef1ce34..3ac57b1 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,6 +6,8 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
+
+// Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
 @base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
 @fallback-font-family: "Helvetica Neue", sans-serif;