Merge pull request #149 from picturepan2/feature/meter-exp v0.2.4

Feature/meter exp

8 files changed, 129 insertions, 41 deletions

diff --git a/src/chips.less b/src/chips.less
index 69b1f7c..1e822bb 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -3,7 +3,7 @@
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
-  color: #666;
+  color: @core-grey-color;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
diff --git a/src/codes.less b/src/codes.less
new file mode 100644
index 0000000..a5be02e
--- /dev/null
+++ b/src/codes.less
@@ -0,0 +1,31 @@
+// Codes
+code {
+  background: @core-bg-color;
+  color: @code-color;
+  .label-base();
+}
+
+.code {
+  border-radius: @border-radius;
+  color: @core-grey-color;
+  line-height: 2rem;
+  position: relative;
+
+  &::before {
+    content: attr(data-lang);
+    color: @control-color;
+    font-size: 1.2rem;
+    position: absolute;
+    right: 1rem;
+    top: .2rem;
+  }
+
+  code {
+    color: inherit;
+    display: block;
+    line-height: inherit;
+    overflow-x: auto;
+    padding: 2rem;
+    width: 100%;
+  }
+}
diff --git a/src/meters.less b/src/meters.less
new file mode 100644
index 0000000..ada4371
--- /dev/null
+++ b/src/meters.less
@@ -0,0 +1,60 @@
+// Meters
+// Credit: https://css-tricks.com/html5-meter-element/
+.meter {
+  appearance: none;
+  background: @core-bg-color;
+  border: 0;
+  display: block;
+  width: 100%;
+  height: 1.6rem;
+
+  &::-webkit-meter-inner-element {
+    display: block;
+  }
+  
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    border-radius: @border-radius;
+  }
+
+  &::-webkit-meter-bar {
+    background: @core-bg-color;
+  }
+
+  &::-webkit-meter-optimum-value {
+    background: @control-color-success;
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: @control-color-warning;
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: @control-color-danger;
+  }
+
+  &::-moz-meter-bar,
+  &::-moz-meter-optimum,
+  &::-moz-meter-sub-optimum,
+  &::-moz-meter-sub-sub-optimum {
+    border-radius: @border-radius;
+  }
+
+  &::-moz-meter-bar {
+    background: @core-bg-color;
+  }
+
+  &:-moz-meter-optimum {
+    background: @control-color-success;
+  }
+
+  &:-moz-meter-sub-optimum {
+    background: @control-color-warning;
+  }
+
+  &:-moz-meter-sub-sub-optimum {
+    background: @control-color-danger;
+  }
+}
diff --git a/src/progress.less b/src/progress.less
index 24c3000..ed45c32 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,13 +2,16 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
+  background: @core-border-color;
   border: 0;
+  border-radius: @border-radius;
   color: @core-color;
   height: .4rem;
+  position: relative;
   width: 100%;
 
   &::-webkit-progress-bar {
-    background: @core-border-color;
+    background: transparent;
     border-radius: @border-radius;
   }
 
@@ -21,4 +24,22 @@
     background: @core-color;
     border-radius: @border-radius;
   }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
diff --git a/src/sliders.less b/src/sliders.less
index 520e9a1..f2fa26b 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -12,26 +12,26 @@
     -webkit-appearance: none;
     background: @core-color;
     border-radius: 50%;
-    height: 1.4rem;
-    margin-top: -.5rem;
+    height: 1.2rem;
+    margin-top: -.4rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
   &::-moz-range-thumb {
     background: @core-color;
     border: 0;
     border-radius: 50%;
-    height: 1.4rem;
+    height: 1.2rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
   &::-ms-thumb {
     background: @core-color;
     border: 0;
     border-radius: 50%;
-    height: 1.4rem;
+    height: 1.2rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
 
   &:active {
diff --git a/src/tooltips.less b/src/tooltips.less
index 54fe085..f9cadb4 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -21,7 +21,7 @@
     transform: translate(-50%, 0);
     transition: transform .2s ease;
     white-space: nowrap;
-    z-index: 99;
+    z-index: 999;
   }
   &:focus,
   &:hover {
diff --git a/src/typography.less b/src/typography.less
index 5f97389..af247f0 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -33,6 +33,11 @@ p {
   line-height: 2.4rem;
   margin: 0 0 1em;
 }
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
+}
 blockquote {
   border-left: .2rem solid #ddd;
   margin-left: 0;
@@ -96,34 +101,3 @@ abbr[title] {
   cursor: help;
   text-decoration: none;
 }
-
-// Code
-code {
-  background: @core-bg-color;
-  color: lighten(@body-font-color, 20%);
-  .label-base();
-}
-pre {
-  background: lighten(@core-border-color, 4%);
-  line-height: 2rem;
-  margin-bottom: 1em;
-  margin-top: 1em;
-  overflow: auto;
-  padding: 2rem 2.5rem;
-  position: relative;
-
-  & > code {
-    background: transparent;
-    line-height: 2rem;
-    padding: 0;
-
-    &::before {
-      content: attr(data-lang);
-      color: @control-color;
-      font-size: 1.2rem;
-      position: absolute;
-      right: 1rem;
-      top: .2rem;
-    }
-  }
-}
diff --git a/src/variables.less b/src/variables.less
index 3ac57b1..c086a53 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -23,6 +23,7 @@
 @core-color: #5764c6;
 @core-secondary-color: lighten(@core-color, 40%);
 @core-dark-color: #333;
+@core-grey-color: #666;
 @core-light-color: #fff;
 @core-meta-color: #888;
 @core-link-color: #5764c6;
@@ -32,6 +33,7 @@
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
+@code-color: #e06870;
 
 // Responsive breakpoints
 @size-xs: 480px;