mekari_ui_toolkit 1.0.0

data/lib/scss/utilities/config/_border.scss

@@ -0,0 +1,24 @@
+@each $color, $hex in $theme-colors {
+  @for $i from 1 through 4 {
+    .border-#{$i}-#{$color} {
+      // stylelint-disable-next-line declaration-no-important
+      border: #{$i}px solid $hex !important;
+    }
+    .border-top-#{$i}-#{$color} {
+      // stylelint-disable-next-line declaration-no-important
+      border-top: #{$i}px solid $hex !important;
+    }
+    .border-right-#{$i}-#{$color} {
+      // stylelint-disable-next-line declaration-no-important
+      border-right: #{$i}px solid $hex !important;
+    }
+    .border-bottom-#{$i}-#{$color} {
+      // stylelint-disable-next-line declaration-no-important
+      border-bottom: #{$i}px solid $hex !important;
+    }
+    .border-left-#{$i}-#{$color} {
+      // stylelint-disable-next-line declaration-no-important
+      border-left: #{$i}px solid $hex !important;
+    }
+  }
+}

data/lib/scss/utilities/grid.scss

@@ -0,0 +1,3 @@
+@import "../settings";
+
+@import "../vendors/grid";

data/lib/scss/utilities/utilities.scss

@@ -0,0 +1,4 @@
+@import "../settings";
+
+@import "../vendors/utilities";
+@import "./config/border";

data/lib/scss/vendor-extensions/_alert.scss

@@ -0,0 +1,14 @@
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem;
+$alert-padding-x:                   1.25rem;
+$alert-margin-bottom:               1rem;
+$alert-border-radius:               4px;
+$alert-link-font-weight:            500;
+$alert-border-width:                1px;
+
+$alert-bg-level:                    -10;
+$alert-border-level:                -9;
+$alert-color-level:                 6;

data/lib/scss/vendor-extensions/_avatar.scss

@@ -0,0 +1,5 @@
+$avatar-default-people: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='60px' height='60px' viewBox='0 0 60 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E57B2CFBF-9694-4E42-8A9B-7C4261320855svg/%3C/title%3E%3Cdefs%3E%3Ccircle id='path-1' cx='30' cy='30' r='30'%3E%3C/circle%3E%3C/defs%3E%3Cg id='Design-Principle' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/-Avatar' transform='translate(-852.000000, -1412.000000)'%3E%3Cg id='Default-avatars' transform='translate(660.000000, 1315.000000)'%3E%3Cg id='Components/-Avatar/-Circle/-60px' transform='translate(192.000000, 97.000000)'%3E%3Cg id='Border'%3E%3Ccircle cx='30' cy='30' r='30'%3E%3C/circle%3E%3C/g%3E%3Cg id='Container'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Oval'%3E%3C/g%3E%3Cg id='Type' mask='url(%23mask-2)' fill-rule='nonzero'%3E%3Cg id='🙂-Face'%3E%3Crect id='Base' fill='%23E2E2E2' x='0' y='0' width='60' height='60'%3E%3C/rect%3E%3Cpath d='M31.7647059,38.8235294 C41.5109073,38.8235294 49.4117647,46.7243868 49.4117647,56.4705882 L49.4117647,60 L10.5882353,60 L10.5882353,56.4705882 C10.5882353,46.7243868 18.4890927,38.8235294 28.2352941,38.8235294 L31.7647059,38.8235294 Z M30.5294118,14.1176471 C36.3771326,14.1176471 41.1176471,18.8581615 41.1176471,24.7058824 C41.1176471,30.5536032 36.3771326,35.2941176 30.5294118,35.2941176 C24.6816909,35.2941176 19.9411765,30.5536032 19.9411765,24.7058824 C19.9411765,18.8581615 24.6816909,14.1176471 30.5294118,14.1176471 Z' id='Path' fill='%23B4B4B4'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg id='State' mask='url(%23mask-2)'%3E%3Crect id='Overlay' x='0' y='0' width='60' height='60'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+
+$avatar-default-file: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 64 (101010) - https://sketch.com --%3E%3Ctitle%3E8416DD89-AB9A-4D81-8594-0E1ED11C1B09svg/%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cdefs%3E%3Crect id='path-1' x='0' y='0' width='60' height='60' rx='8'%3E%3C/rect%3E%3C/defs%3E%3Cg id='Design-Principle' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/-Avatar' transform='translate(-1224.000000, -1424.000000)'%3E%3Crect id='base' fill='%23FFFFFF' x='0' y='0' width='1920' height='3164'%3E%3C/rect%3E%3Cg id='Default-avatars' transform='translate(660.000000, 1315.000000)'%3E%3Cg id='Avatar-blank-type' transform='translate(192.000000, 97.000000)'%3E%3Cg id='Components/-Avatar/-Square/-60px' transform='translate(360.000000, 0.000000)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Base'%3E%3C/g%3E%3Cg id='Type' mask='url(%23mask-2)' fill-rule='nonzero'%3E%3Crect id='Base' fill='%23E2E2E2' x='0' y='0' width='60' height='60'%3E%3C/rect%3E%3Cg id='Icons/-Regular/-Feature/-IMG' transform='translate(12.000000, 12.000000)' fill='%23777777'%3E%3Cpath d='M23.1213203,3 L30,9.87867966 L30,30 C30,31.6568542 28.6568542,33 27,33 L9,33 C7.34314575,33 6,31.6568542 6,30 L6,6 C6,4.34314575 7.34314575,3 9,3 L23.1213203,3 Z M21,4.5 L9,4.5 C8.17157288,4.5 7.5,5.17157288 7.5,6 L7.5,30 C7.5,30.8284271 8.17157288,31.5 9,31.5 L27,31.5 C27.8284271,31.5 28.5,30.8284271 28.5,30 L28.5,12 L23.25,12 C22.1342953,12 21.0906184,11.0028107 21.0055823,9.89504535 L21,9.75 L21,4.5 Z M24.75,25.5 C25.1642136,25.5 25.5,25.8357864 25.5,26.25 C25.5,26.6642136 25.1642136,27 24.75,27 L11.25,27 C10.8357864,27 10.5,26.6642136 10.5,26.25 C10.5,25.8357864 10.8357864,25.5 11.25,25.5 L24.75,25.5 Z M24.75,18 C25.1642136,18 25.5,18.3357864 25.5,18.75 C25.5,19.1642136 25.1642136,19.5 24.75,19.5 L11.25,19.5 C10.8357864,19.5 10.5,19.1642136 10.5,18.75 C10.5,18.3357864 10.8357864,18 11.25,18 L24.75,18 Z M15.75,10.5 C16.1642136,10.5 16.5,10.8357864 16.5,11.25 C16.5,11.6642136 16.1642136,12 15.75,12 L11.25,12 C10.8357864,12 10.5,11.6642136 10.5,11.25 C10.5,10.8357864 10.8357864,10.5 11.25,10.5 L15.75,10.5 Z M22.5,4.5 L22.5,9.75 C22.5,10.0857864 22.9142136,10.5 23.25,10.5 L23.25,10.5 L28.5,10.5 L22.5,4.5 Z' id='Color'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+
+$avatar-default-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 64 (101010) - https://sketch.com --%3E%3Ctitle%3E854A7405-039C-4712-92A0-AB1D01FDD088svg/%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cdefs%3E%3Crect id='path-1' x='0' y='0' width='60' height='60' rx='8'%3E%3C/rect%3E%3C/defs%3E%3Cg id='Design-Principle' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/-Avatar' transform='translate(-1044.000000, -1424.000000)'%3E%3Crect id='base' fill='%23FFFFFF' x='0' y='0' width='1920' height='3164'%3E%3C/rect%3E%3Cg id='Default-avatars' transform='translate(660.000000, 1315.000000)'%3E%3Cg id='Avatar-blank-type' transform='translate(192.000000, 97.000000)'%3E%3Cg id='Components/-Avatar/-Square/-60px' transform='translate(180.000000, 0.000000)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Base'%3E%3C/g%3E%3Cg id='Type' mask='url(%23mask-2)' fill-rule='nonzero'%3E%3Crect id='Base' fill='%23E2E2E2' x='0' y='0' width='60' height='60'%3E%3C/rect%3E%3Cg id='Icons/-Regular/-Feature/-IMG' transform='translate(12.000000, 12.000000)' fill='%23777777'%3E%3Cpath d='M24.0307692,3 C24.2326984,3 24.4271578,3.07954407 24.5751301,3.22267209 L29.7443609,8.22267209 C29.9073745,8.38034894 30,8.60160933 30,8.83333333 L30,32.1666667 C30,32.626904 29.6418278,33 29.2,33 L6.8,33 C6.3581722,33 6,32.626904 6,32.1666667 L6,3.83333333 C6,3.37309604 6.3581722,3 6.8,3 L24.0307692,3 Z M12.2596988,25.7875335 L8.92873792,30.3339749 C8.84660416,30.4571755 8.80277564,30.6019313 8.80277564,30.75 C8.80277564,31.1642136 9.13856208,31.5 9.55277564,31.5 L18.6487188,31.5 L13.4599025,25.7234205 C13.4137204,25.6680021 13.3597846,25.6195363 13.2997616,25.579521 C12.9551151,25.3497567 12.4894631,25.442887 12.2596988,25.7875335 Z M21.1758419,19.8540405 L16.7020464,26.6752406 L20.607804,31.5 L27.299016,31.4994534 C28.5,31.4923469 28.5,31.3928571 28.5,30 L28.5,28.5391523 L22.3636022,19.842318 C22.3238169,19.7917673 22.2776933,19.7465447 22.2263672,19.707765 C21.8958797,19.4580634 21.4255435,19.523553 21.1758419,19.8540405 Z M23.7715845,4.5 L7.5,4.5 L7.50072911,29.827172 C7.55141195,29.7144696 7.61151182,29.6056505 7.68066248,29.5019246 L11.0116233,24.9554835 C11.7009164,23.921544 13.0978724,23.642153 14.1318119,24.331446 C14.3118808,24.4514919 14.4736883,24.5968893 14.6122344,24.7631445 L15.455,25.722 L19.9790409,18.949791 C20.7281458,17.9583286 22.1391544,17.7618596 23.1306168,18.5109645 C23.2845952,18.6273037 23.4229661,18.7629699 23.5423219,18.914622 L28.5,25.905 L28.5,9.08668365 L23.7715845,4.5 Z M12.75,12 C14.4068542,12 15.75,13.3431458 15.75,15 C15.75,16.6568542 14.4068542,18 12.75,18 C11.0931458,18 9.75,16.6568542 9.75,15 C9.75,13.3431458 11.0931458,12 12.75,12 Z M12.75,13.5 C11.9215729,13.5 11.25,14.1715729 11.25,15 C11.25,15.8284271 11.9215729,16.5 12.75,16.5 C13.5784271,16.5 14.25,15.8284271 14.25,15 C14.25,14.1715729 13.5784271,13.5 12.75,13.5 Z' id='Color'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

data/lib/scss/vendor-extensions/_badge.scss

@@ -0,0 +1,11 @@
+// Badges
+$badge-font-size:                   $font-size-base;
+$badge-font-weight:                 $font-weight-normal;
+$badge-padding-y:                   4px;
+$badge-padding-x:                   8px;
+$badge-border-radius: 4px;
+$badge-transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$badge-pill-padding-x: .6em;
+$badge-pill-border-radius:          10rem;
+$badge-focus-width: .2em;

data/lib/scss/vendor-extensions/_breadcrumb.scss

@@ -0,0 +1,10 @@
+$breadcrumb-bg:             transparent;
+$breadcrumb-margin-bottom:  0;
+$breadcrumb-padding-y:      0;
+$breadcrumb-padding-x:      0;
+$breadcrumb-divider-color:  $slate;
+$breadcrumb-item-padding:   4px;
+$breadcrumb-border-radius:  4px;
+$breadcrumb-divider: quote("/");
+$breadcrumb-divider-color: $slate;
+$breadcrumb-active-color: $dark;

data/lib/scss/vendor-extensions/_button.scss

@@ -0,0 +1,37 @@
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               8px;
+$btn-padding-x:               16px;
+$btn-font-size:               14px;
+$btn-line-height:             20px;
+
+$btn-padding-y-sm:            2px;
+$btn-padding-x-sm:            8px;
+$btn-font-size-sm:            14px;
+$btn-line-height-sm:          20px;
+
+// $btn-padding-y-lg:            8px;
+// $btn-padding-x-lg:            16px;
+$btn-font-size-lg:            16px;
+$btn-line-height-lg:          24px;
+
+$btn-font-family: $font-family-base;
+$btn-font-weight: $font-weight-normal;
+$btn-border-width: 1px;
+$btn-border-radius: 4px;
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$btn-focus-box-shadow: 0 0 4px 1px $link;
+$btn-disabled-opacity: .65;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: .2rem;
+
+$btn-link-disabled-color: $cloud;
+$btn-padding-y-lg: 8px;
+$btn-padding-x-lg: 16px;
+$btn-border-radius-lg: 4px;
+$btn-border-radius-sm: 4px;
+$btn-block-spacing-y: .5rem;

data/lib/scss/vendor-extensions/_card.scss

@@ -0,0 +1,19 @@
+$card-spacer-y:                     .75rem;
+$card-spacer-x:                     1.25rem;
+$card-border-width:                 1px;
+$card-border-radius:                4px;
+$card-border-color:                 rgba($black, .125);
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width});
+$card-cap-bg:                       rgba($black, .03);
+$card-cap-color:                    null;
+$card-color:                        null;
+$card-bg:                           $white;
+
+$card-img-overlay-padding:          1.25rem;
+
+$card-group-margin:                 15px;
+$card-deck-margin:                  $card-group-margin;
+
+$card-columns-count:                3;
+$card-columns-gap:                  1.25rem;
+$card-columns-margin:               $card-spacer-y;

data/lib/scss/vendor-extensions/_color.scss

@@ -0,0 +1,132 @@
+// Neutrals color variables
+$dark:  #212121;
+$slate: #777;
+$muted: #b4b4b4;
+$smoke: #e2e2e2;
+$snow:  #fbfbfb;
+$white: #fff;
+$cloud: #f2f4f7;
+
+// UI color variables
+$red:           #d74022;
+$green:         #009f61;
+$light-yellow:  #ffeb99;
+$blue:          #1357ff;
+$orange:        #ffb700;
+$sapphire:      #005fbf;
+
+// Branding color variables
+$crimson:     #c02a34;
+$azure:       #009bde;
+$salamander:  #f96d01;
+$purple:      #6d48e5;
+
+// Bootstrap dependencies color
+$black:    #000 !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+// register mekari color variables too bootstrap
+$colors: ();
+$colors: map-merge(
+  (
+    "noir"         : $dark, // going to deprecated
+    "dark"         : $dark,
+    "slate"        : $slate,
+    "muted"        : $muted,
+    "smoke"        : $smoke,
+    "snow"         : $snow,
+    "cloud"        : $cloud,
+    "crimson"      : $crimson,
+    "azure"        : $azure,
+    "salamander"   : $salamander,
+    "purple"       : $purple,
+    "sapphire"     : $sapphire,
+    "white"        : $white,
+    "red"          : $red,
+    "orange"       : $orange,
+    "green"        : $green,
+    "blue"         : $blue,
+    "light-yellow" : $light-yellow
+  ),
+  $colors
+);
+
+//extend bootstrap class
+$danger:    $red;
+$success:   $green;
+$info:      $light-yellow;
+$warning:   $orange;
+$primary:   $sapphire;
+$jurnal:    $azure;
+$talenta:   $crimson;
+$klikpajak: $salamander;
+$mekari:    $purple;
+
+$link: $blue;
+
+$text-muted:  $muted;
+$body-color:  $dark;
+$dark:        $dark;
+$secondary:   $slate;
+$light:       $snow;
+
+// Add more theme color variables
+$theme-colors: ();
+$theme-colors: map-merge(
+  (
+    "danger"    : $danger,
+    "success"   : $success,
+    "info"      : $info,
+    "warning"   : $warning,
+    "primary"   : $primary,
+    "jurnal"    : $jurnal,
+    "talenta"   : $talenta,
+    "klikpajak" : $klikpajak,
+    "mekari"    : $mekari,
+    "dark"      : $dark,
+    "slate"     : $slate,
+    "muted"     : $muted,
+    "smoke"     : $smoke,
+    "light"     : $light,
+    "cloud"     : $cloud,
+    "link"      : $blue,
+    "white"     : $white
+  ),
+  $theme-colors
+);
+
+$card-border-color: $smoke;
+$body-bg: $white;

data/lib/scss/vendor-extensions/_dropdown.scss

@@ -0,0 +1,33 @@
+$dropdown-link-disabled-color: $muted;
+$caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
+
+
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            4px !default;
+$dropdown-border-width:             1px !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-divider-margin-y:         8px !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-100 !default;
+
+$dropdown-link-active-color:        $white !default;
+$dropdown-link-active-bg:           $primary !default;
+
+$dropdown-link-disabled-color:      $gray-600 !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1.5rem !default;
+
+$dropdown-header-color:             $gray-600 !default;

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

@@ -0,0 +1,301 @@
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .375rem;
+$input-btn-padding-x:         .75rem;
+$input-btn-font-family:       null;
+$input-btn-font-size:         $font-size-base;
+$input-btn-line-height:       $line-height-base;
+
+$input-btn-focus-width:       .2rem;
+$input-btn-focus-color:       rgba($blue, .25);
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
+
+$input-btn-padding-y-sm:      .25rem;
+$input-btn-padding-x-sm:      .5rem;
+$input-btn-font-size-sm:      $font-size-sm;
+$input-btn-line-height-sm:    $line-height-sm;
+
+$input-btn-padding-y-lg:      .5rem;
+$input-btn-padding-x-lg:      1rem;
+$input-btn-font-size-lg:      $font-size-lg;
+$input-btn-line-height-lg:    $line-height-lg;
+
+$input-btn-border-width:      1px;
+
+// Forms
+
+$label-margin-bottom:                   .5rem;
+
+$input-padding-y:                       $input-btn-padding-y;
+$input-padding-x:                       $input-btn-padding-x;
+$input-font-family:                     $input-btn-font-family;
+$input-font-size:                       $input-btn-font-size;
+$input-font-weight:                     $font-weight-base;
+$input-line-height:                     $input-btn-line-height;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm;
+$input-padding-x-sm:                    $input-btn-padding-x-sm;
+$input-font-size-sm:                    $input-btn-font-size-sm;
+$input-line-height-sm:                  $input-btn-line-height-sm;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg;
+$input-padding-x-lg:                    $input-btn-padding-x-lg;
+$input-font-size-lg:                    $input-btn-font-size-lg;
+$input-line-height-lg:                  $input-btn-line-height-lg;
+
+$input-bg:                              $white;
+$input-disabled-bg:                     $cloud;
+
+$input-color:                           $dark;
+$input-border-color:                    $smoke;
+$input-border-width:                    $input-btn-border-width;
+$input-box-shadow:                      inset 0 1px 1px rgba($black, .075);
+
+$input-border-radius:                   4px;
+$input-border-radius-lg:                4px;
+$input-border-radius-sm:                4px;
+
+$input-focus-bg:                        $input-bg;
+$input-focus-border-color:              lighten($primary, 25%);
+$input-focus-color:                     $input-color;
+$input-focus-width:                     $input-btn-focus-width;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow;
+
+$input-placeholder-color:               $gray-600;
+$input-plaintext-color:                 $body-color;
+
+$input-height-border:                   $input-border-width * 2;
+
+$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2});
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y});
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2});
+
+$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
+$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border});
+$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border});
+
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$form-text-margin-top:                  .25rem;
+
+$form-check-input-gutter:               1.25rem;
+$form-check-input-margin-y:             .3rem;
+$form-check-input-margin-x:             .25rem;
+
+$form-check-inline-margin-x:            .75rem;
+$form-check-inline-input-margin-x:      .3125rem;
+
+$form-grid-gutter-width:                10px;
+$form-group-margin-bottom:              1rem;
+
+$input-group-addon-color:               $input-color;
+$input-group-addon-bg:                  $cloud;
+$input-group-addon-border-color:        $input-border-color;
+
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$custom-control-gutter:                 .5rem;
+$custom-control-spacer-x:               1rem;
+
+$custom-control-indicator-size:         1rem;
+$custom-control-indicator-bg:           $input-bg;
+
+$custom-control-indicator-bg-size:      50% 50%;
+$custom-control-indicator-box-shadow:   $input-box-shadow;
+$custom-control-indicator-border-color: $gray-500;
+$custom-control-indicator-border-width: $input-border-width;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg;
+$custom-control-label-disabled-color:           $gray-600;
+
+$custom-control-indicator-checked-color:        $white;
+$custom-control-indicator-checked-bg:           $primary;
+$custom-control-indicator-checked-disabled-bg:  rgba($primary, .5);
+$custom-control-indicator-checked-box-shadow:   none;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color;
+
+$custom-control-indicator-active-color:         $white;
+$custom-control-indicator-active-bg:            lighten($primary, 35%);
+$custom-control-indicator-active-box-shadow:    none;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg;
+
+$custom-checkbox-indicator-border-radius:       4px;
+$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+
+$custom-checkbox-indicator-indeterminate-bg:           $primary;
+$custom-checkbox-indicator-indeterminate-color:        $white;
+$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e");
+
+$custom-checkbox-indicator-indeterminate-box-shadow:   none;
+$custom-checkbox-indicator-indeterminate-border-color: $smoke;
+
+$custom-radio-indicator-border-radius:          50%;
+$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
+
+$custom-switch-width:                           $custom-control-indicator-size * 1.75;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2;
+$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4});
+
+$custom-select-padding-y:           $input-padding-y;
+$custom-select-padding-x:           $input-padding-x;
+$custom-select-font-family:         $input-font-family;
+$custom-select-font-size:           $input-font-size;
+$custom-select-height:              $input-height;
+$custom-select-indicator-padding:   1rem; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-font-weight:         $input-font-weight;
+$custom-select-line-height:         $input-line-height;
+$custom-select-color:               $slate;
+$custom-select-disabled-color:      $muted;
+$custom-select-bg:                  $input-bg;
+$custom-select-disabled-bg:         $cloud;
+$custom-select-bg-size:             24px; // In pixels because image dimensions
+// for arrow down icon in Mekari's select
+$custom-select-indicator-color:    $slate;
+$custom-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23777' d='M6.28178611,7.34112994 C5.98969924,7.04743259 5.5148273,7.04612703 5.22112994,7.33821389 C4.92743259,7.63030076 4.92612703,8.1051727 5.21821389,8.39887006 L9.44490899,12.6488701 C9.73699896,12.9425705 10.2118771,12.9438725 10.5055731,12.6517782 L14.7788781,8.40177816 C15.072571,8.10968687 15.0738694,7.63481492 14.7817782,7.34112195 C14.4896869,7.04742898 14.0148149,7.04613056 13.7211219,7.33822184 L9.9796032,11.0593358 L6.28178611,7.34112994 Z'/%3e%3c/svg%3e");
+
+$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size; // Used so we can have multiple
+$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding});
+$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding);
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half;
+
+$custom-select-border-width:        $input-border-width;
+$custom-select-border-color:        $input-border-color;
+$custom-select-border-radius:       4px;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075);
+
+$custom-select-focus-border-color:  $input-focus-border-color;
+$custom-select-focus-width:         $input-focus-width;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color;
+
+$custom-select-padding-y-sm:        $input-padding-y-sm;
+$custom-select-padding-x-sm:        $input-padding-x-sm;
+$custom-select-font-size-sm:        $input-font-size-sm;
+$custom-select-height-sm:           $input-height-sm;
+
+$custom-select-padding-y-lg:        $input-padding-y-lg;
+$custom-select-padding-x-lg:        $input-padding-x-lg;
+$custom-select-font-size-lg:        $input-font-size-lg;
+$custom-select-height-lg:           $input-height-lg;
+
+$custom-range-track-width:          100%;
+$custom-range-track-height:         .5rem;
+$custom-range-track-cursor:         pointer;
+$custom-range-track-bg:             $gray-300;
+$custom-range-track-border-radius:  1rem;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1);
+
+$custom-range-thumb-width:                   1rem;
+$custom-range-thumb-height:                  $custom-range-thumb-width;
+$custom-range-thumb-bg:                      $primary;
+$custom-range-thumb-border:                  0;
+$custom-range-thumb-border-radius:           1rem;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($primary, 35%);
+$custom-range-thumb-disabled-bg:             $gray-500;
+
+$custom-file-height:                $input-height;
+$custom-file-height-inner:          $input-height-inner;
+$custom-file-focus-border-color:    $input-focus-border-color;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow;
+$custom-file-disabled-bg:           $input-disabled-bg;
+
+$custom-file-padding-y:             $input-padding-y;
+$custom-file-padding-x:             $input-padding-x;
+$custom-file-line-height:           $input-line-height;
+$custom-file-font-family:           $input-font-family;
+$custom-file-font-weight:           $input-font-weight;
+$custom-file-color:                 $input-color;
+$custom-file-bg:                    $input-bg;
+$custom-file-border-width:          $input-border-width;
+$custom-file-border-color:          $input-border-color;
+$custom-file-border-radius:         $input-border-radius;
+$custom-file-box-shadow:            $input-box-shadow;
+$custom-file-button-color:          $custom-file-color;
+$custom-file-button-bg:             $input-group-addon-bg;
+$custom-file-text: (
+  en: "Browse"
+);
+
+
+// Form validation
+
+$form-feedback-margin-top:          $form-text-margin-top;
+$form-feedback-font-size:           $font-size-sm;
+$form-feedback-valid-color:         $green;
+$form-feedback-invalid-color:       $red;
+
+$form-feedback-icon-valid-color:    $form-feedback-valid-color;
+$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23");
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
+$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23");
+
+$form-validation-states: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     .25rem;
+$form-feedback-tooltip-padding-x:     .5rem;
+$form-feedback-tooltip-font-size:     $font-size-sm;
+$form-feedback-tooltip-line-height:   $line-height-base;
+$form-feedback-tooltip-opacity:       .9;
+$form-feedback-tooltip-border-radius: 4px;
+
+
+
+// Custom from mekari
+
+$input-height: 36px;
+$input-placeholder-color: $muted;
+$form-feedback-margin-top: 0;
+$input-border-radius: 4px;
+
+$input-focus-border-color: $sapphire;
+$input-focus-box-shadow: 0 0 4px 1px rgba($sapphire, .3);
+
+//different focus shadow for radio and checkbox
+$custom-control-indicator-focus-box-shadow: 0 0 0 2px rgba($sapphire, .3);
+$custom-control-indicator-checked-border-color: $input-focus-border-color;
+$custom-control-indicator-checked-bg: $input-focus-border-color;
+
+$custom-control-indicator-border-color: $input-border-color;
+$custom-checkbox-indicator-border-radius: 2px;
+$custom-radio-indicator-border-radius: 100%;
+
+$custom-control-label-disabled-color: $muted;
+$custom-select-padding-y: 8px;
+
+// text helper
+$form-text-margin-top:  0;
+
+// form-group
+$form-group-margin-bottom: 20px;
+
+
+// input form button text
+$custom-file-text: (
+  en: "Choose file",
+  id: "Pilih file",
+);
+
+// remove validation icons
+$enable-validation-icons: false;