add ui-component page

edikemput1001 · Mar 30, 2017 · 8004b97 · 8004b97
1 parent 6ef27be
commit 8004b97
Show file tree

Hide file tree

Showing 20 changed files with 874 additions and 104 deletions.
diff --git a/src/application.scss b/src/application.scss
@@ -8,6 +8,12 @@
 
 @import 'card/card';
 
+@import "chip/chip";
+
+@import "badge/badge";
+
+@import "slider/slider";
+
 @import 'menu/menu';
 
 @import 'toggles/toggles';
@@ -64,12 +70,12 @@
 
 @import "widgets/ui-buttons/ui-buttons";
 
-@import "widgets/ui-progress-bars/ui-progress-bars";
-
-@import "widgets/ui-toggles/ui-toggles";
-
 @import "widgets/ui-colors/ui-colors";
 
 @import "widgets/ui-cards/ui-cards";
 
+@import "widgets/ui-typography/ui-typography";
+
+@import "widgets/ui-components/ui-components";
+
 @import 'helper';
diff --git a/src/badge/badge.scss b/src/badge/badge.scss
@@ -0,0 +1,29 @@
+//@mixin colored-badge ($color) {
+//  &[data-badge]:after {
+//    background-color: $color;
+//  }
+//}
+
+.badge--colored-green {
+  @include colored-badge($color-green);
+}
+
+.badge--colored-red {
+  @include colored-badge($color-red);
+}
+
+.badge--colored-teal {
+  @include colored-badge($color-teal);
+}
+
+.badge--colored-light-blue {
+  @include colored-badge($color-light-blue);
+}
+
+.badge--colored-purple {
+  @include colored-badge($color-purple);
+}
+
+.badge--colored-orange {
+  @include colored-badge($color-orange);
+}
diff --git a/src/chip/chip.scss b/src/chip/chip.scss
@@ -0,0 +1,6 @@
+.mdl-chip {
+  color: black;
+  &__action {
+    color: inherit;
+  }
+}
diff --git a/src/helper.scss b/src/helper.scss
@@ -6,6 +6,10 @@
   float: left;
 }
 
+.clearfix {
+  clear: both;
+}
+
 .background-color--primary {
    background-color: unquote("rgba(#{$color-primary}, 0.9)");
  }

diff --git a/src/layout/layout.scss b/src/layout/layout.scss
@@ -58,9 +58,11 @@ main {
     }
 
     .sub-navigation {
+      cursor: pointer;
       & .mdl-navigation__link {
         i:last-child {
           margin: 0 16px 0 0;
+          transition: transform 0.3s;
           float: right;
         }
       }

diff --git a/src/mixins.scss b/src/mixins.scss
@@ -205,4 +205,88 @@
       border-color: $color;
     }
   }
+}
+
+@mixin colored-icon-toggle ($color) {
+  &.is-checked .mdl-icon-toggle__label {
+    color: $color;
+  }
+  .mdl-ripple {
+    background-color: $color;
+  }
+}
+
+@mixin colored-progress($color) {
+  & > .progressbar.bar1 {
+    background-color: $color;
+  }
+  &.mdl-progress.mdl-progress__indeterminate > .auxbar {
+    background: {
+      image: none;
+      color: transparent;
+    }
+  }
+  @supports (-webkit-appearance:none) {
+    &.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
+      background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+      linear-gradient(to right, $progress-secondary-color, $progress-secondary-color);
+      mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
+      -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
+    }
+  }
+}
+
+@mixin colored-slider($color) {
+  &.is-upgraded {
+    color: $color;
+    &::-ms-fill-lower {
+      background: linear-gradient(to right,
+              transparent,
+              transparent 16px,
+              $color 16px,
+              $color 0);
+    }
+
+    &::-webkit-slider-thumb {
+      background: $color;
+    }
+
+    &::-moz-range-thumb {
+      background: $color;
+    }
+
+    &:active::-webkit-slider-thumb {
+      background: $color;
+    }
+
+    &:active::-moz-range-thumb {
+      background: $color;
+    }
+
+    &::-ms-thumb {
+      background: $color;
+    }
+
+    &:focus:not(:active)::-ms-thumb {
+      background: radial-gradient(circle closest-side,
+              $color 0%,
+              $color 37.5%,
+              $range-faded-color 37.5%,
+              $range-faded-color 100%);
+    }
+
+    &:active::-ms-thumb {
+      background: $color;
+    }
+
+  }
+  & + .mdl-slider__background-flex .mdl-slider__background-lower {
+    background: $color;
+  }
+}
+
+@mixin colored-badge ($color) {
+  &[data-badge]:after {
+    background-color: $color;
+  }
 }
diff --git a/src/progress/progress.scss b/src/progress/progress.scss
@@ -1,6 +1,3 @@
-//.mdl-progress__indeterminate > .auxbar {
-//  background: transparent;
-//}
 .mdl-progress {
   min-width: 100px;
   width: auto;
@@ -13,38 +10,24 @@
   &:focus {
     outline: none;
   }
-  @mixin progress-colored ($color) {
-    & > .progressbar.bar1 {
-      background-color: $color;
-    }
-    &.mdl-progress.mdl-progress__indeterminate > .auxbar {
-      background: {
-        image: none;
-        color: transparent;
-      }
-    }
-    @supports (-webkit-appearance:none) {
-      &.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
-        background-image: linear-gradient(to right, $color, $color),
-        linear-gradient(to right, $color, $color);
-        mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
-        -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
-      }
-    }
+}
+.progress--colored {
+  &-red {
+    @include colored-progress($color-red);
   }
-  &--red {
-    @include progress-colored($color-red);
+  &-light-blue {
+    @include colored-progress($color-light-blue);
   }
-  &--blue {
-    @include progress-colored($color-light-blue);
+  &-orange {
+    @include colored-progress($color-orange);
   }
-  &--yellow {
-    @include progress-colored($color-orange);
+  &-light-teal {
+    @include colored-progress($color-teal);
   }
-  &--light-blue {
-    @include progress-colored($color-teal);
+  &-purple {
+    @include colored-progress($color-purple);
   }
-  &--purple {
-    @include progress-colored($color-purple);
+  &-green {
+    @include colored-progress($color-green);
   }
 }
diff --git a/src/slider/slider.scss b/src/slider/slider.scss
@@ -0,0 +1,22 @@
+.mdl-slider__container {
+  margin: 0 -20px;
+
+}
+.slider--colored-green {
+  @include colored-slider($color-green);
+}
+.slider--colored-red {
+  @include colored-slider($color-red);
+}
+.slider--colored-purple {
+  @include colored-slider($color-purple);
+}
+.slider--colored-teal {
+  @include colored-slider($color-teal);
+}
+.slider--colored-light-blue {
+  @include colored-slider($color-light-blue);
+}
+.slider--colored-orange {
+  @include colored-slider($color-orange);
+}
diff --git a/src/toggles/toggles.scss b/src/toggles/toggles.scss
@@ -2,66 +2,103 @@
   -webkit-mask: url("#{$checkbox-image-path}/tick-mask.svg");
 }
 
+.mdl-switch__label {
+  left: 0;
+  margin-left: 16px;
+}
+
 //CHECKBOXES
-.mdl-checkbox--colored-yellow {
+.checkbox--colored-orange {
   @include colored-checkbox($color-orange);
 }
 
-.mdl-checkbox--colored-blue {
+.checkbox--colored-light-blue {
   @include colored-checkbox($color-light-blue);
 }
 
-.mdl-checkbox--colored-red {
+.checkbox--colored-red {
   @include colored-checkbox($color-red);
 }
 
-.mdl-checkbox--colored-light-blue {
+.checkbox--colored-teal {
   @include colored-checkbox($color-teal);
 }
 
-.mdl-checkbox--colored-purple {
+.checkbox--colored-purple {
   @include colored-checkbox($color-purple);
 }
 
+.checkbox--colored-green {
+  @include colored-checkbox($color-green);
+}
+
 //RADIO
-.mdl-radio--colored-yellow {
+.radio--colored-orange {
   @include colored-radio($color-orange);
 }
 
-.mdl-radio--colored-blue {
+.radio--colored-light-blue {
   @include colored-radio($color-light-blue);
 }
 
-.mdl-radio--colored-red {
+.radio--colored-red {
   @include colored-radio($color-red);
 }
 
-.mdl-radio--colored-light-blue {
+.radio--colored-teal {
   @include colored-radio($color-teal);
 }
 
-.mdl-radio--colored-purple {
+.radio--colored-purple {
   @include colored-radio($color-purple);
 }
 
+.radio--colored-green {
+  @include colored-radio($color-green);
+}
+
 
 //SWITCHES
-.mdl-switch--colored-red {
+.switch--colored-red {
   @include colored-switch($color-red);
 }
 
-.mdl-switch--colored-yellow {
+.switch--colored-orange {
   @include colored-switch($color-orange);
 }
 
-.mdl-switch--colored-blue {
+.switch--colored-light-blue {
   @include colored-switch($color-light-blue);
 }
 
-.mdl-switch--colored-light-blue {
+.switch--colored-teal {
   @include colored-switch($color-teal);
 }
 
-.mdl-switch--colored-purple {
+.switch--colored-purple {
   @include colored-switch($color-purple);
 }
+
+.switch--colored-green {
+  @include colored-switch($color-green);
+}
+
+//ICON TOOGLES
+.icon-toggle--colored-light-blue {
+  @include colored-icon-toggle($color-light-blue);
+}
+.icon-toggle--colored-teal {
+  @include colored-icon-toggle($color-teal);
+}
+.icon-toggle--colored-orange {
+  @include colored-icon-toggle($color-orange);
+}
+.icon-toggle--colored-purple {
+  @include colored-icon-toggle($color-purple);
+}
+.icon-toggle--colored-red {
+  @include colored-icon-toggle($color-red);
+}
+.icon-toggle--colored-green {
+  @include colored-icon-toggle($color-green);
+}
diff --git a/src/tooltip/tooltip.scss b/src/tooltip/tooltip.scss
@@ -1,4 +1,5 @@
 .mdl-tooltip {
   padding: $table-tooltip-vertical-padding $table-tooltip-horizontal-padding;
   border: none;
+  font-weight: 400;
 }