mekari_ui_toolkit 1.0.11 → 1.0.16

data/lib/assets/stylesheets/scss/components/config/_date-picker.scss

@@ -1,4 +1,4 @@
-.datepicker-container {
+.date-picker-container {
   position: relative;
   z-index: 11;
   width: 0;
@@ -8,7 +8,7 @@
   }
 }
 
-%datepicker-calendar {
+%date-picker-calendar {
   position: absolute;
   width: 392px;
   padding: 0 16px;
@@ -19,30 +19,32 @@
   box-shadow: 0 2px 4px 0 rgba($slate, .1), 0 4px 8px 0 rgba($slate, .2);
 }
 
-.datepicker-calendar-view {
-  @extend %datepicker-calendar;
-  height: 320px;
+.date-picker-calendar-view {
+  @extend %date-picker-calendar;
+  height: auto;
+  min-height: 284px;
 }
 
-.datepicker-collapse-view {
-  @extend %datepicker-calendar;
-  height: 244px;
+.date-picker-collapse-view {
+  @extend %date-picker-calendar;
+  height: auto;
+  min-height: 244px;
 }
 
-.datepicker-header {
+.date-picker-header {
   display: flex;
   align-items: center;
   height: 52px;
   text-align: center;
 }
 
-.datepicker-header-title {
+.date-picker-header-title {
   flex-grow: 5;
   font-weight: $font-weight-bold;
   cursor: pointer;
 }
 
-.datepicker-previous-button {
+.date-picker-previous-button {
   flex-grow: 1;
   padding-right: 16px;
   text-align: left;
@@ -53,7 +55,7 @@
   }
 }
 
-.datepicker-next-button {
+.date-picker-next-button {
   flex-grow: 1;
   padding-left: 16px;
   text-align: right;
@@ -72,8 +74,8 @@
 }
 
 %cell-selected-state {
-  color: $white;
-  background-color: $primary;
+  color: $white !important; // stylelint-disable-line declaration-no-important
+  background-color: $primary !important; // stylelint-disable-line declaration-no-important
   border-radius: 100%; // stylelint-disable-line property-blacklist
 }
 
@@ -87,12 +89,13 @@
   box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
 }
 
-.datepicker-row {
+.date-picker-row {
   display: flex;
-  .datepicker-cell {
+  flex-wrap: wrap;
+  .date-picker-cell {
     flex: 1 1 0;
     text-align: center;
-    .datepicker-date-cell {
+    .date-picker-date-cell {
       width: 32px;
       height: 32px;
       margin: 2px auto;
@@ -107,7 +110,7 @@
         @extend %cell-hover;
       }
     }
-    .datepicker-month-cell {
+    .date-picker-month-cell {
       width: 40px;
       height: 40px;
       margin: 0 auto;
@@ -123,7 +126,7 @@
         @extend %cell-hover;
       }
     }
-    .datepicker-year-cell {
+    .date-picker-year-cell {
       width: 48px;
       height: 48px;
       margin: 0 auto;
@@ -142,20 +145,19 @@
   }
 }
 
-.datepicker-day-container {
+.date-picker-day-container {
   display: flex;
   margin-bottom: 16px;
-  .datepicker-day {
+  .date-picker-day {
     flex: 1 1 0;
     color: $slate;
     text-align: center;
   }
 }
 
-.datepicker-shortcut-button {
-  position: absolute;
-  bottom: 16px;
+.date-picker-shortcut-button {
   width: 360px;
+  padding: 16px 0;
   color: $slate;
   text-align: center;
   cursor: pointer;
@@ -164,3 +166,12 @@
     cursor: not-allowed;
   }
 }
+
+.date-picker-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.date-picker--no-outline {
+  outline: none;
+}

data/lib/assets/stylesheets/scss/components/config/_dropdowns.scss

@@ -1,31 +1,46 @@
+@import "../../mixins/text";
+
 .#{$prefix}dropdown {
   &-toggle {
     &::after {
+      display: none;
       vertical-align: 2px;
     }
   }
 
   &-menu {
     width: auto;
-    min-width: 242px;
+    min-width: 80px;
     max-width: 684px;
-    max-height: 185px;
     padding: 0;
     margin: 4px 0 0;
     overflow-y: auto;
     background-color: $white;
     border: 1px solid $smoke;
-    box-shadow: 0 4px 8px 0 rgba(119, 119, 119, .24);
+    box-shadow: 0 2px 4px rgba(119, 119, 119, .1), 0 4px 8px rgba(119, 119, 119, .2);
     @include border-radius(4px);
     @include scroll-default;
   }
 
   &-item {
-    padding: 8px 12px;
+    padding: 8px;
     color: $dark;
+    white-space: normal;
     cursor: pointer;
     outline: none;
 
+    &--title {
+      @extend %font-size-sm;
+      padding-top: 12px;
+      padding-bottom: 4px;
+      color: $slate;
+      border-top: 1px solid $smoke;
+    }
+
+    &--title:first-child {
+      border: none;
+    }
+
     &:hover {
       background-color: $cloud;
       &:active {
@@ -50,7 +65,7 @@
 
   &-not-found {
     display: block;
-    padding: 8px 12px;
+    padding: 8px;
     color: $muted;
     text-align: center;
   }
@@ -117,4 +132,10 @@
       }
     }
   }
+  &--medium {
+    width: 184px;
+  }
+  &--large {
+    width: 288px;
+  }
 }

data/lib/assets/stylesheets/scss/components/config/_form.scss

@@ -17,7 +17,7 @@ $custom-input-file-label-padding: 8px;
   }
 
   &:disabled,
-  &[readonly]:not(.input-datepicker) {
+  &[readonly] {
     color: $muted;
     cursor: not-allowed;
     background-color: $cloud;
@@ -37,6 +37,19 @@ $custom-input-file-label-padding: 8px;
   &.suffix-icon {
     padding-right: 36px;
   }
+
+  &.with-reset-icon, // will be deprecated in future version
+  &.suffix-icon--double {
+    padding-right: 36px;
+    &.suffix-icon {
+      padding-right: 72px;
+    }
+  }
+
+  &.is-invalid,
+  &:invalid {
+    border-color: $danger;
+  }
 }
 
 //plain text class
@@ -197,8 +210,8 @@ input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selec
 
   &:disabled ~ .#{$prefix}custom-control-label::before{
     cursor: not-allowed;
-    background-color: $cloud;
-    border: 1px solid $smoke;
+    background-color: $cloud !important; // stylelint-disable-line declaration-no-important
+    border: 1px solid $smoke !important; // stylelint-disable-line declaration-no-important
   }
 
   &:disabled ~ .#{$prefix}custom-control-label{
@@ -212,11 +225,32 @@ input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selec
 }
 
 .#{$prefix}custom-control-label::before {
-  top: 2px;
+  top: 1px;
 }
 
 .#{$prefix}custom-control-label::after {
-  top: 2px;
+  top: 1px;
+}
+
+.#{$prefix}custom-checkbox {
+  .#{$prefix}custom-control-label::after {
+    background: no-repeat 100% / 100% 65%;
+  }
+  .#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after {
+    background: $custom-checkbox-indicator-icon-checked-inverse no-repeat 100% / 100% 65%;
+  }
+  .#{$prefix}custom-control-input:disabled:indeterminate ~ .#{$prefix}custom-control-label::after {
+    background: $custom-checkbox-indicator-icon-indeterminate-inverse no-repeat 100% / 100% 65%;
+  }
+}
+
+.#{$prefix}custom-radio {
+  .#{$prefix}custom-control-label::after {
+    background: no-repeat 100% / 100% 50%;
+  }
+  .#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after {
+    background: $custom-radio-indicator-icon-checked-inverse no-repeat 100% / 100% 50%;
+  }
 }
 
 // to make sure checkbox & radio have 4px margin bottom
@@ -312,20 +346,16 @@ textarea.#{$prefix}form-control {
   @include border-radius($input-border-radius);
 }
 
-.input-datepicker {
-  cursor: pointer;
+.input-date-picker, // will be deprecated in future version
+.input-no-readonly {
+  color: $dark !important; // stylelint-disable-line declaration-no-important
+  cursor: pointer !important; // stylelint-disable-line declaration-no-important
   background-color: $white !important; // stylelint-disable-line declaration-no-important
   &:hover:not(:disabled) {
     border: 1px solid $input-focus-border-color;
-    &.with-reset-icon {
-      padding-right: 36px;
-      &.suffix-icon {
-        padding-right: 72px;
-      }
-    }
   }
 }
 
-.input-with-icon-container {
-  margin-bottom: -20px;
+.input-with-icon-container { // will be deprecated in future version
+  position: relative;
 }

data/lib/assets/stylesheets/scss/components/config/_icons.scss

@@ -1,8 +1,8 @@
 // variables for icons
 $icon-font-family: "Mekari-Icon-Regular";
-$icon-font-path: "../../webfonts" !default;
+$icon-font-path: "../../webfonts/" !default;
 @if $is-using-rubygems {
-  $icon-font-path: "webfonts" !default;
+  $icon-font-path: "webfonts/" !default;
 }
 $icons-map: ();
 $icons-map: map-merge(
@@ -61,6 +61,8 @@ $icons-map: map-merge(
     "ic-expand": \e899,
     "ic-expense": \e92b,
     "ic-family": \e89f,
+    "ic-file-comment": \e953,
+    "ic-file-history": \e952,
     "ic-finance": \e92c,
     "ic-finance-dollar": \e883,
     "ic-finance-percentage": \e881,
@@ -100,6 +102,7 @@ $icons-map: map-merge(
     "ic-overtime": \e910,
     "ic-picker-calendar": \e87e,
     "ic-picker-time": \e87d,
+    "ic-plans": \e955,
     "ic-product": \e911,
     "ic-profile-pic": \e912,
     "ic-purchase": \e913,
@@ -126,6 +129,7 @@ $icons-map: map-merge(
     "ic-talenta": \e951,
     "ic-task": \e946,
     "ic-tax-history": \e905,
+    "ic-team-goal": \e954,
     "ic-time": \e906,
     "ic-transfer-account": \e907,
     "ic-trash": \e900,
@@ -139,7 +143,7 @@ $icons-map: map-merge(
   $icons-map
 );
 
-$icon-blankslate-path: "#{$icon-font-path}/blankslate";
+$icon-blankslate-path: "#{$icon-font-path}blankslate";
 $icons-blankslate-name: "calendar", "location", "not-found", "process", "web";
 $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
 
@@ -152,8 +156,8 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
   font-family: "#{$icon-font-family}";
   font-style: normal;
   font-weight: 400;
-  src: url("#{$icon-font-path}/#{$icon-font-family}.eot?4revhd");
-  src: url("#{$icon-font-path}/#{$icon-font-family}.eot?4revhd#iefix") format("embedded-opentype"), url("#{$icon-font-path}/#{$icon-font-family}.ttf?4revhd") format("truetype"), url("#{$icon-font-path}/#{$icon-font-family}.woff?4revhd") format("woff"), url("#{$icon-font-path}/#{$icon-font-family}.svg?4revhd##{$icon-font-family}") format("svg");
+  src: url("#{$icon-font-path}#{$icon-font-family}.eot?4revhd");
+  src: url("#{$icon-font-path}#{$icon-font-family}.eot?4revhd#iefix") format("embedded-opentype"), url("#{$icon-font-path}#{$icon-font-family}.ttf?4revhd") format("truetype"), url("#{$icon-font-path}#{$icon-font-family}.woff?4revhd") format("woff"), url("#{$icon-font-path}#{$icon-font-family}.svg?4revhd##{$icon-font-family}") format("svg");
   font-display: block;
 }
 
@@ -199,30 +203,42 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
 }
 
 .ic-input-prefix {
-  position: relative;
-  bottom: 33px;
-  left: 9px;
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: 5;
   padding: 0;
   color: inherit;
   pointer-events: all;
   cursor: pointer;
+  &.ic-small {
+    top: 7px;
+    left: 10px;
+  }
 }
 
 .ic-input-suffix {
-  position: relative;
-  bottom: 33px;
-  left: calc(100% - 33px);
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 5;
   padding: 0;
   color: inherit;
   pointer-events: all;
   cursor: pointer;
-  &.ic-input-double-suffix {
-    left: calc(100% - 87px);
+  &.ic-input-double-suffix, // this will be deprecated in future version
+  &.ic-input-suffix--double {
+    right: 36px;
+    z-index: 5;
+  }
+  &.ic-small {
+    top: 7px;
+    right: 10px;
+    &.ic-input-double-suffix, // this will be deprecated in future version
+    &.ic-input-suffix--double {
+      right: 38px;
+    }
   }
-}
-
-.ic-input-prefix + .ic-input-suffix {
-  left: calc(100% - 60px);
 }
 
 @each $name, $value in $icons-map {

data/lib/assets/stylesheets/scss/components/config/_pagination.scss

@@ -14,6 +14,11 @@
       margin: 0;
       color: $slate;
       list-style-type: none;
+      .ic {
+        width: 20px;
+        height: 20px;
+        font-size: 20px;
+      }
     }
   }
 
@@ -39,8 +44,8 @@
         max-width: 20px;
         max-height: 20px;
         padding: 0;
-        margin-top: -2px;
         font-size: 20px;
+        border: 0;
         &:hover {
           text-decoration: none;
         }

data/lib/assets/stylesheets/scss/components/config/_tables.scss

@@ -5,6 +5,9 @@
   border-collapse: separate;
   border: 1px solid $smoke;
   @include border-radius(4px);
+  tr:hover {
+    background: $cloud;
+  }
   th,
   td {
     padding: 10px 16px;