mekari_ui_toolkit 1.0.0

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

@@ -0,0 +1,120 @@
+.#{$prefix}dropdown {
+  &-toggle {
+    &::after {
+      vertical-align: 2px;
+    }
+  }
+
+  &-menu {
+    width: auto;
+    min-width: 242px;
+    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);
+    @include border-radius(4px);
+    @include scroll-default;
+  }
+
+  &-item {
+    padding: 8px 12px;
+    color: $dark;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: $cloud;
+      &:active {
+        color: $dark;
+      }
+    }
+
+    &.active {
+      &:hover {
+        background-color: darken($primary, 10%);
+      }
+    }
+
+    &.is-selected {
+      background-color: $cloud;
+    }
+  }
+
+  &-divider {
+    margin: 0;
+  }
+
+  &-not-found {
+    display: block;
+    padding: 8px 12px;
+    color: $muted;
+    text-align: center;
+  }
+
+  &-selected-list {
+    margin-top: 4px;
+
+    .#{$prefix}badge {
+      margin-top: 4px;
+      margin-right: 8px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &-action {
+    padding: 8px;
+
+    input {
+      width: 100%;
+      margin: 0;
+    }
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
+
+  &-with-action {
+    .#{$prefix}dropdown-menu {
+      max-height: none;
+      overflow: hidden;
+
+      .#{$prefix}dropdown-action {
+        &:hover {
+          background-color: inherit;
+        }
+      }
+
+      &-list {
+        height: auto;
+        max-height: 126px;
+        overflow-y: auto;
+        @include scroll-default;
+      }
+    }
+  }
+
+  &-with-avatar {
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  &-with-pill {
+    .#{$prefix}dropdown-menu-list {
+      .#{$prefix}dropdown-item {
+        &.is-selected {
+          color: $muted;
+          pointer-events: none;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,325 @@
+$input-margin-y: 4px;
+$custom-input-line-height: 20px;
+$custom-input-padding-y: 8px;
+$custom-input-padding-x: 12px;
+$custom-input-file-label-padding: 8px;
+
+// general form-control class for inputs (text, password, email, etc)
+.#{$prefix}form-control {
+  padding: $custom-input-padding-y $custom-input-padding-x;
+  margin-top: $input-margin-y;
+  margin-bottom: $input-margin-y;
+  line-height: $custom-input-line-height;
+  color: $dark;
+
+  &:hover:not(:disabled):not([readonly]) {
+    border: 1px solid $input-focus-border-color;
+  }
+
+  &:disabled,
+  &[readonly]:not(.input-datepicker) {
+    color: $muted;
+    cursor: not-allowed;
+    background-color: $cloud;
+    border-color: $smoke;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:focus {
+    color: $dark;
+  }
+
+  &.prefix-icon {
+    padding-left: 36px;
+  }
+
+  &.suffix-icon {
+    padding-right: 36px;
+  }
+}
+
+//plain text class
+.#{$prefix}form-control-plaintext {
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// supress magrin on .#{$prefix}form-group labels
+.#{$prefix}form-group {
+  label {
+    margin-bottom: 0;
+  }
+}
+
+// supress margin on labels inside form-row
+.#{$prefix}form-row {
+  label {
+    margin-bottom: 0;
+  }
+}
+
+
+.#{$prefix}custom-select,
+.#{$prefix}custom-file-input {
+  height: 36px;
+  padding: $custom-select-padding-y 8px $custom-select-padding-y 12px;
+  margin: $input-margin-y 0;
+  line-height: $custom-input-line-height;
+  color: $dark;
+
+  &:hover:not(:disabled) {
+    cursor: pointer;
+    border: 1px solid $input-focus-border-color;
+  }
+
+  &:focus {
+    box-shadow: $input-focus-box-shadow;
+  }
+
+  &:disabled {
+    color: $muted;
+    cursor: not-allowed;
+    background-color: $cloud;
+    border-color: $smoke;
+  }
+
+  &:not(:focus):invalid {
+    color: $text-muted;
+  }
+}
+
+// custom file input
+input[type="file"] { // stylelint-disable-line selector-no-qualifying-type
+  cursor: pointer;
+}
+input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selector-no-qualifying-type
+  cursor: pointer;
+}
+.#{$prefix}custom-file {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: auto;
+  margin-bottom: 20px;
+  &:hover .#{$prefix}custom-file-label::before {
+    border: 1px solid $muted;
+  }
+  .#{$prefix}form-text {
+    margin-top: 4px;
+  }
+}
+.#{$prefix}custom-file ~ .#{$prefix}custom-file-list-wrapper {
+  margin-bottom: 12px;
+}
+
+.#{$prefix}custom-file-input {
+  margin: 0;
+}
+
+.#{$prefix}custom-file-label {
+  display: flex;
+  align-items: flex-end;
+  height: 36px;
+  padding: $custom-input-padding-y $custom-input-padding-x;
+  margin-bottom: 0;
+  color: $muted;
+
+  &::after {
+    display: none;
+  }
+
+  // visualize Choose File button
+  &::before {
+    position: relative;
+    top: 3px;
+    bottom: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    height: 24px;
+    padding: 2px 8px;
+    margin-right: 12px;
+    line-height: $custom-input-line-height;
+    color: $slate;
+    content: "Choose File";
+    background-color: $snow;
+    border: 1px solid $smoke;
+    // stylelint-disable-next-line property-blacklist
+    border-radius: 4px;
+  }
+}
+
+//input text helper for validation, and normal case (form-text)
+.valid-feedback,
+.invalid-feedback {
+  font-size: 12px;
+}
+
+.#{$prefix}form-group-label {
+  margin-bottom: 0;
+  font-weight: 600;
+  line-height: $custom-input-line-height;
+}
+
+.#{$prefix}custom-control {
+  margin-bottom: 4px;
+}
+
+.#{$prefix}form-group-label + .#{$prefix}custom-control,
+.#{$prefix}form-group-label + .#{$prefix}custom-file {
+  margin-top: 4px;
+}
+
+//special case for checkbox and radio
+//checkboxes & radios are to use .#{$prefix}custom-control-input (NOT .#{$prefix}form-check) to have customize checkbox & radio
+.#{$prefix}custom-control-input {
+  &:focus {
+    box-shadow: $custom-control-indicator-focus-box-shadow;
+  }
+
+  &:hover ~ .#{$prefix}custom-control-label::before {
+    cursor: pointer;
+    border-color: $input-focus-border-color;
+  }
+
+  &:hover ~ .#{$prefix}custom-control-label::after,
+  &:hover ~ .#{$prefix}custom-control-label {
+    cursor: pointer;
+  }
+
+  &:disabled ~ .#{$prefix}custom-control-label::after{
+    cursor: not-allowed;
+    border: none;
+  }
+
+  &:disabled ~ .#{$prefix}custom-control-label::before{
+    cursor: not-allowed;
+    background-color: $cloud;
+    border: 1px solid $smoke;
+  }
+
+  &:disabled ~ .#{$prefix}custom-control-label{
+    cursor: not-allowed;
+  }
+}
+
+.#{$prefix}custom-control-label {
+  font-weight: 400;
+  color: $dark;
+}
+
+.#{$prefix}custom-control-label::before {
+  top: 2px;
+}
+
+.#{$prefix}custom-control-label::after {
+  top: 2px;
+}
+
+// to make sure checkbox & radio have 4px margin bottom
+.#{$prefix}form-check {
+  margin-bottom: $input-margin-y;
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+textarea.#{$prefix}form-control {
+  min-width: 184px;
+  height: 80px;
+  min-height: 36px;
+  max-height: 200px;
+  padding-right: 12px;
+  padding-left: 12px;
+  @include scroll-default;
+}
+
+// text helper class in Bootstrap
+.#{$prefix}form-text {
+  font-size: 12px;
+  color: $slate;
+}
+
+// input groups classess
+.#{$prefix}input-group {
+  margin-top: $input-margin-y;
+  margin-bottom: $input-margin-y;
+
+  .#{$prefix}form-control {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .valid-feedback,
+  .invalid-feedback {
+    margin-top: 4px;
+  }
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.#{$prefix}custom-select,
+.#{$prefix}custom-select-sm {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+/* stylelint-enable property-no-vendor-prefix */
+
+.#{$prefix}form-xs {
+  width: 80px;
+  max-width: 80px;
+}
+
+.#{$prefix}form-sm {
+  width: 184px;
+  max-width: 184px;
+}
+
+.#{$prefix}form-md {
+  width: 288px;
+  max-width: 288px;
+}
+
+.#{$prefix}form-lg {
+  width: 392px;
+  max-width: 392px;
+}
+
+.#{$prefix}form-xl {
+  width: 600px;
+  max-width: 600px;
+}
+
+.#{$prefix}counter-label {
+  float: right;
+  font-weight: $font-weight-normal;
+}
+
+.#{$prefix}input-group-text {
+  display: flex;
+  align-items: center;
+  padding: $input-padding-y $input-padding-x;
+  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
+  @include font-size($input-font-size); // Match inputs
+  font-weight: $font-weight-normal;
+  line-height: $input-line-height;
+  color: $input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+  @include border-radius($input-border-radius);
+}
+
+.input-datepicker {
+  cursor: pointer;
+  background-color: $white !important; // stylelint-disable-line declaration-no-important
+  &:hover:not(:disabled) {
+    border: 1px solid $input-focus-border-color;
+  }
+}
+
+.input-with-icon-container {
+  margin-bottom: -20px;
+}

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

@@ -0,0 +1,231 @@
+// variables for icons
+$icon-font-family: "Mekari-Icon-Regular";
+$icon-font-path: "../../webfonts";
+$icons-map: ();
+$icons-map: map-merge(
+  (
+    "ic-activity": \e93a,
+    "ic-add": \e800,
+    "ic-addons": \e93b,
+    "ic-adjustment": \e947,
+    "ic-alarm": \e93c,
+    "ic-approval": \e948,
+    "ic-arrow-down": \e94b,
+    "ic-arrow-left": \e94c,
+    "ic-arrow-right": \e94d,
+    "ic-arrow-up": \e94e,
+    "ic-asset": \e949,
+    "ic-attachment": \e88e,
+    "ic-bank": \e94a,
+    "ic-billing": \e934,
+    "ic-blank-icon": \e93d,
+    "ic-branch": \e935,
+    "ic-broadcast": \e936,
+    "ic-camera": \e89e,
+    "ic-camera-fill": \e877,
+    "ic-calculator": \e84c,
+    "ic-calendar": \e938,
+    "ic-celebration": \e939,
+    "ic-certificate": \e8a1,
+    "ic-chat": \e92e,
+    "ic-chevron-first": \e942,
+    "ic-chevron-last": \e943,
+    "ic-chevron-bottom": \e88b,
+    "ic-chevron-left": \e944,
+    "ic-chevron-right": \e945,
+    "ic-chevron-up": \e88c,
+    "ic-coa": \e92f,
+    "ic-copy": \e88a,
+    "ic-collapse": \e89b,
+    "ic-column-settings": \e89c,
+    "ic-column-settings-small": \e801,
+    "ic-company": \e930,
+    "ic-contact": \e931,
+    "ic-credit-card": \e932,
+    "ic-custom-slip": \e933,
+    "ic-dashboard": \e928,
+    "ic-delete": \e900,
+    "ic-description": \e929,
+    "ic-doc": \e92a,
+    "ic-dot": \e8f0,
+    "ic-drag": \e88d,
+    "ic-dropdown": \e8ef,
+    "ic-edit": \e887,
+    "ic-education": \e8a0,
+    "ic-equal": \e886,
+    "ic-error": \e93e,
+    "ic-error-fill": \e89a,
+    "ic-expand": \e899,
+    "ic-expense": \e92b,
+    "ic-family": \e89f,
+    "ic-finance": \e92c,
+    "ic-finance-dollar": \e883,
+    "ic-finance-percentage": \e881,
+    "ic-finance-rupiah": \e882,
+    "ic-file-download": \e885,
+    "ic-file-upload": \e884,
+    "ic-help": \e92d,
+    "ic-help-small": \e880,
+    "ic-history": \e922,
+    "ic-home": \e923,
+    "ic-img": \e924,
+    "ic-inbox": \e925,
+    "ic-inbox-fill": \e902,
+    "ic-info": \e898,
+    "ic-info-fill": \e903,
+    "ic-insurance": \e926,
+    "ic-integrasi": \e927,
+    "ic-job-level": \e91c,
+    "ic-job-title": \e91d,
+    "ic-jurnal": \e84b,
+    "ic-loading": \e896,
+    "ic-location": \e91e,
+    "ic-lock": \e91f,
+    "ic-logout": \e920,
+    "ic-kebab": \e897,
+    "ic-meatball": \e895,
+    "ic-merge": \e87f,
+    "ic-migration": \e921,
+    "ic-notification": \e916,
+    "ic-offboarding": \e917,
+    "ic-onboarding": \e918,
+    "ic-organization": \e919,
+    "ic-other": \e91b,
+    "ic-other-list": \e91a,
+    "ic-overtime": \e910,
+    "ic-picker-calendar": \e87e,
+    "ic-picker-time": \e87d,
+    "ic-product": \e911,
+    "ic-profile-pic": \e912,
+    "ic-purchase": \e913,
+    "ic-reload": \e914,
+    "ic-report": \e915,
+    "ic-remove-line": \e87c,
+    "ic-reset": \e90a,
+    "ic-reset-fill": \e87a,
+    "ic-resync": \e8f2,
+    "ic-rules": \e90b,
+    "ic-sale": \e90c,
+    "ic-search": \e893,
+    "ic-send": \e892,
+    "ic-setting": \e90d,
+    "ic-sort": \e879,
+    "ic-staff": \e90e,
+    "ic-stepper-error": \e901,
+    "ic-stepper-finished": \e909,
+    "ic-success": \e93f,
+    "ic-success-fill": \e891,
+    "ic-supplier": \e90f,
+    "ic-sync": \e8f1,
+    "ic-tag": \e878,
+    "ic-task": \e946,
+    "ic-tax-history": \e905,
+    "ic-time": \e906,
+    "ic-transfer-account": \e907,
+    "ic-trash": \e900,
+    "ic-upload-file": \e908,
+    "ic-view-fill": \e890,
+    "ic-view-hide-fill": \e88f,
+    "ic-warning-fill": \e940,
+    "ic-warning": \e941,
+    "ic-zip": \e904,
+  ),
+  $icons-map
+);
+
+$icon-blankslate-path: "#{$icon-font-path}/blankslate";
+$icons-blankslate-name: "calendar", "location", "not-found", "process", "web";
+$icons-blankslate-product: "jurnal", "klikpajak", "talenta";
+
+// To properly convert Unicodes in the resulting CSS
+@function icon-sanitize($icon) {
+  @return unquote("\"#{ $icon }\"");
+}
+
+@font-face {
+  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");
+  font-display: block;
+}
+
+%ic-template {
+  width: 24px;
+  height: 24px;
+  font-family: $icon-font-family, sans-serif;
+  font-size: 24px;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+.ic {
+  display: inline-block;
+  @extend %ic-template;
+  &.ic-small {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+  }
+  &.ic-medium {
+    width: 32px;
+    height: 32px;
+    font-size: 32px;
+  }
+  &.ic-large {
+    width: 60px;
+    height: 60px;
+    font-size: 60px;
+  }
+  &.ic-blankslate {
+    width: 120px;
+    height: 120px;
+    padding: 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100px 100px;
+  }
+}
+
+.ic-input-prefix {
+  position: relative;
+  bottom: 33px;
+  left: 9px;
+  padding: 0;
+  color: inherit;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.ic-input-suffix {
+  position: relative;
+  bottom: 33px;
+  left: calc(100% - 29px);
+  padding: 0;
+  color: inherit;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+@each $name, $value in $icons-map {
+  .#{$name} {
+    color: $slate;
+    &::before {
+      color: inherit;
+      content: icon-sanitize($value);
+    }
+  }
+}
+
+@each $product in $icons-blankslate-product {
+  @each $name in $icons-blankslate-name {
+    .ic-blankslate-#{$product}-#{$name} {
+      background-image: url("#{$icon-blankslate-path}/#{$product}/#{$name}.svg");
+    }
+  }
+}