mekari_ui_toolkit 1.0.21 → 1.0.22

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

@@ -81,7 +81,7 @@ $btn-secondary-border-color: $smoke;
 
   &.#{$prefix}btn-primary {
     &.#{$prefix}btn-with-icon {
-      .ic {
+      .#{$prefix}ic {
         &::before {
           // stylelint-disable-next-line declaration-no-important
           color: $white !important;
@@ -90,7 +90,7 @@ $btn-secondary-border-color: $smoke;
     }
 
     &.#{$prefix}btn-icon-only {
-      .ic {
+      .#{$prefix}ic {
         &::before {
           // stylelint-disable-next-line declaration-no-important
           color: inherit !important;
@@ -101,7 +101,7 @@ $btn-secondary-border-color: $smoke;
 
   &.#{$prefix}is-loading {
     position: relative;
-    min-height: 36px;
+    min-height: 38px;
     pointer-events: none;
     &::before {
       position: absolute;
@@ -153,16 +153,16 @@ $btn-secondary-border-color: $smoke;
   }
 
   &.#{$prefix}btn-with-icon {
-    .ic,
+    .#{$prefix}ic,
     span {
       vertical-align: top;
       border: none;
     }
-    .ic {
-      width: 16px;
-      height: 16px;
+    .#{$prefix}ic {
+      width: 20px;
+      height: 20px;
       padding: 0;
-      font-size: 16px;
+      font-size: 20px;
       color: inherit;
       &.is-left {
         margin-right: 8px;
@@ -172,13 +172,13 @@ $btn-secondary-border-color: $smoke;
       }
     }
     &.#{$prefix}btn-sm {
-      .ic,
+      .#{$prefix}ic,
       span {
         line-height: 16px;
         vertical-align: baseline;
         border: none;
       }
-      .ic {
+      .#{$prefix}ic {
         margin-right: 0;
         line-height: 18px;
       }
@@ -190,12 +190,12 @@ $btn-secondary-border-color: $smoke;
       }
     }
     &.#{$prefix}btn-lg {
-      .ic,
+      .#{$prefix}ic,
       span {
         vertical-align: top;
         border: none;
       }
-      .ic {
+      .#{$prefix}ic {
         width: 24px;
         height: 24px;
         padding: 0;
@@ -242,7 +242,7 @@ $btn-secondary-border-color: $smoke;
 
     // Caret
     .#{$prefix}dropdown-toggle-split {
-      min-width: 36px;
+      min-width: 38px;
       padding-right: 8px;
       padding-left: 8px;
       &::before {
@@ -287,7 +287,6 @@ $btn-secondary-border-color: $smoke;
 }
 
 .btn {
-  height: 36px;
   &.btn-sm {
     height: 24px;
   }
@@ -295,14 +294,14 @@ $btn-secondary-border-color: $smoke;
     height: 40px;
   }
   &.#{$prefix}btn-icon-only {
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
     padding: 8px;
     font-size: 18px;
     line-height: 18px;
     @extend %btn-ghost;
 
-    > .ic {
+    > .#{$prefix}ic {
       width: 18px;
       height: 18px;
       padding: 0;
@@ -318,10 +317,10 @@ $btn-secondary-border-color: $smoke;
     align-items: flex-end;
     .btn {
       position: relative;
-      width: 36px;
-      height: 36px;
+      width: 38px;
+      height: 38px;
       padding: 4px;
-      .ic {
+      .#{$prefix}ic {
         width: 24px !important; // stylelint-disable-line declaration-no-important
         height: 24px !important; // stylelint-disable-line declaration-no-important
         font-size: 24px !important; // stylelint-disable-line declaration-no-important

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

@@ -1,11 +1,8 @@
 .date-picker-container {
   position: relative;
   z-index: 11;
-  width: 0;
-  height: 0;
-  &.on-right {
-    left: calc(100% - 392px);
-  }
+  width: 392px;
+  height: auto;
 }
 
 %date-picker-calendar {
@@ -48,7 +45,7 @@
   flex-grow: 1;
   padding-right: 16px;
   text-align: left;
-  .ic {
+  .#{$prefix}ic {
     &:hover {
       cursor: pointer;
     }
@@ -59,7 +56,7 @@
   flex-grow: 1;
   padding-left: 16px;
   text-align: right;
-  .ic {
+  .#{$prefix}ic {
     &:hover {
       cursor: pointer;
     }

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

@@ -70,7 +70,7 @@
           color: $cloud;
         }
       }
-      .ic {
+      .#{$prefix}ic {
         color: inherit;
       }
     }

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

@@ -77,7 +77,7 @@ $custom-input-file-label-padding: 8px;
 
 .#{$prefix}custom-select,
 .#{$prefix}custom-file-input {
-  height: 36px;
+  height: $input-height;
   padding: $custom-select-padding-y 8px $custom-select-padding-y 12px;
   margin: $input-margin-y 0;
   line-height: $custom-input-line-height;
@@ -135,7 +135,7 @@ input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selec
 .#{$prefix}custom-file-label {
   display: flex;
   align-items: flex-end;
-  height: 36px;
+  height: 38px;
   padding: $custom-input-padding-y $custom-input-padding-x;
   margin-bottom: 0;
   color: $muted;
@@ -234,13 +234,13 @@ input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selec
 
 .#{$prefix}custom-checkbox {
   .#{$prefix}custom-control-label::after {
-    background: no-repeat 100% / 100% 65%;
+    background: no-repeat 50%;
   }
   .#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after {
-    background: $custom-checkbox-indicator-icon-checked-inverse no-repeat 100% / 100% 65%;
+    background: $custom-checkbox-indicator-icon-checked-inverse no-repeat 50%;
   }
   .#{$prefix}custom-control-input:disabled:indeterminate ~ .#{$prefix}custom-control-label::after {
-    background: $custom-checkbox-indicator-icon-indeterminate-inverse no-repeat 100% / 100% 65%;
+    background: $custom-checkbox-indicator-icon-indeterminate-inverse no-repeat 50%;
   }
 }
 
@@ -262,7 +262,7 @@ input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selec
 textarea.#{$prefix}form-control {
   min-width: 184px;
   height: 80px;
-  min-height: 36px;
+  min-height: 38px;
   max-height: 200px;
   padding-right: 12px;
   padding-left: 12px;

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

@@ -162,25 +162,25 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
   line-height: 1;
 }
 
-.ic {
+.#{$prefix}ic {
   display: inline-block;
   @extend %ic-template;
-  &.ic-small {
+  &.#{$prefix}ic-small {
     width: 20px;
     height: 20px;
     font-size: 20px;
   }
-  &.ic-medium {
+  &.#{$prefix}ic-medium {
     width: 32px;
     height: 32px;
     font-size: 32px;
   }
-  &.ic-large {
+  &.#{$prefix}ic-large {
     width: 60px;
     height: 60px;
     font-size: 60px;
   }
-  &.ic-blankslate {
+  &.#{$prefix}ic-blankslate {
     width: 120px;
     height: 120px;
     padding: 10px;
@@ -190,7 +190,7 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
   }
 }
 
-.ic-input-prefix {
+.#{$prefix}ic-input-prefix {
   position: absolute;
   top: 6px;
   left: 6px;
@@ -199,13 +199,13 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
   color: inherit;
   pointer-events: all;
   cursor: pointer;
-  &.ic-small {
+  &.#{$prefix}ic-small {
     top: 7px;
     left: 10px;
   }
 }
 
-.ic-input-suffix {
+.#{$prefix}ic-input-suffix {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -214,16 +214,16 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
   color: inherit;
   pointer-events: all;
   cursor: pointer;
-  &.ic-input-double-suffix, // this will be deprecated in future version
-  &.ic-input-suffix--double {
+  &.#{$prefix}ic-input-double-suffix, // this will be deprecated in future version
+  &.#{$prefix}ic-input-suffix--double {
     right: 36px;
     z-index: 5;
   }
-  &.ic-small {
+  &.#{$prefix}ic-small {
     top: 7px;
     right: 10px;
-    &.ic-input-double-suffix, // this will be deprecated in future version
-    &.ic-input-suffix--double {
+    &.#{$prefix}ic-input-double-suffix, // this will be deprecated in future version
+    &.#{$prefix}ic-input-suffix--double {
       right: 38px;
     }
   }
@@ -241,7 +241,7 @@ $icons-blankslate-product: "jurnal", "klikpajak", "talenta";
 
 @each $product in $icons-blankslate-product {
   @each $name in $icons-blankslate-name {
-    .ic-blankslate-#{$product}-#{$name} {
+    .#{$prefix}ic-blankslate-#{$product}-#{$name} {
       background-image: url("#{$icon-blankslate-path}/#{$product}/#{$name}.svg");
     }
   }

data/lib/assets/stylesheets/scss/main.scss

@@ -6,11 +6,11 @@ $is-using-gcs-font-path: null !default;
 $icon-font-family: "Mekari-Icon-Regular";
 $icon-font-path: "../../webfonts/" !default;
 @if $is-using-rubygems {
-  $icon-font-path: "webfonts/" !default;
+  $icon-font-path: "webfonts/";
 }
 
 @if $is-using-gcs-font-path {
-  $icon-font-path: "https://storage.googleapis.com/mekari-ui-toolkit-assets/" !default;
+  $icon-font-path: "https://storage.googleapis.com/mekari-ui-toolkit-assets/";
 }
 
 @import "./vendor-extensions/main";

data/lib/assets/stylesheets/scss/vendor-extensions/_form.scss

@@ -269,7 +269,7 @@ $form-feedback-tooltip-border-radius: 4px;
 
 // Custom from mekari
 
-$input-height: 36px;
+$input-height: 38px;
 $input-placeholder-color: $muted;
 $form-feedback-margin-top: 0;
 $input-border-radius: 4px;

data/lib/mekari_ui_toolkit/version.rb

@@ -1,3 +1,3 @@
 module MekariUiToolkit
-  VERSION = "1.0.21"
+  VERSION = "1.0.22"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mekari_ui_toolkit
 version: !ruby/object:Gem::Version
-  version: 1.0.21
+  version: 1.0.22
 platform: ruby
 authors:
 - Rezky Pangestu Gunarso
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-26 00:00:00.000000000 Z
+date: 2021-01-28 00:00:00.000000000 Z
 dependencies: []
 description: Mekari ui toolkit is a base styling repository of general components
   in Mekari