mekari_ui_toolkit 1.0.0

data/lib/scss/components/config/_badge.scss

@@ -0,0 +1,37 @@
+.#{$prefix}badge {
+  vertical-align: middle;
+  @extend %font-size-sm;
+
+  .ic {
+    font-size: 12px;
+    line-height: 12px;
+    vertical-align: middle;
+
+    &-reset {
+      margin-left: 4px;
+      font-weight: 600;
+      color: $slate;
+      cursor: pointer;
+    }
+  }
+
+  &-sm {
+    padding: 0 4px;
+  }
+
+  &-dot,
+  &-dot:empty {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+  }
+
+  &-cloud,
+  &-info,
+  &-light,
+  &-smoke,
+  &-warning {
+    color: $dark;
+  }
+}

data/lib/scss/components/config/_banner.scss

@@ -0,0 +1,39 @@
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 1rem;
+  font-weight: $font-weight-bold;
+  text-align: center;
+  &.warning {
+    color: $dark;
+    background-color: $warning;
+    .ic {
+      color: $dark;
+    }
+  }
+  &.error {
+    color: $white;
+    background-color: $danger;
+    .ic {
+      color: $white;
+    }
+  }
+}
+
+.banner-icon,
+.banner-text {
+  display: inline-block;
+  padding-right: 8px;
+}
+
+.banner-link {
+  display: inline-block;
+  text-decoration: underline;
+  cursor: pointer;
+  a {
+    color: inherit;
+  }
+}

data/lib/scss/components/config/_breadcrumb.scss

@@ -0,0 +1,14 @@
+.#{$prefix}breadcrumb {
+  li {
+    a {
+      color: $slate;
+    }
+  }
+}
+
+.#{$prefix}breadcrumb-item.active {
+  a {
+    color: $breadcrumb-active-color;
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,266 @@
+// Button related variable
+%btn-link-active {
+  color: $blue;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+%btn-ghost {
+  color: $secondary;
+  background-color: transparent;
+  border: 1px solid transparent;
+  &:not(:disabled):not(.disabled):hover {
+    background-color: $cloud;
+    border-color: $cloud;
+  }
+  &:not(:disabled):not(.disabled):focus {
+    background-color: transparent;
+    border-color: $blue;
+    box-shadow: 0 0 4px 1px $blue;
+  }
+}
+
+$btn-basic-border-color: $smoke;
+// End of button related variable
+
+.#{$prefix}btn {
+  &.#{$prefix}btn-basic {
+    color: $secondary;
+    background-color: $light;
+    border: 1px solid $btn-basic-border-color;
+    &:not(:disabled):not(.disabled):hover {
+      border-color: $sapphire;
+    }
+    &:not(:disabled):not(.disabled):focus {
+      border-color: $sapphire;
+      box-shadow: 0 0 4px 1px $sapphire;
+    }
+  }
+
+  &.#{$prefix}btn-ghost {
+    @extend %btn-ghost;
+    &:not(:disabled):not(.disabled):focus {
+      background-color: transparent;
+      border-color: $primary;
+      box-shadow: 0 0 4px 1px $primary;
+    }
+  }
+
+  &.#{$prefix}btn-link {
+    padding: 0;
+    @extend %btn-link-active;
+    &:not(:disabled):not(.disabled):active {
+      @extend %btn-link-active;
+    }
+    &:not(:disabled):not(.disabled):focus {
+      text-decoration: none;
+      box-shadow: 0 0 4px 1px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      text-decoration: none;
+      pointer-events: auto;
+      background-color: transparent;
+      border: none;
+    }
+  }
+
+  &.#{$prefix}btn-primary {
+    &.#{$prefix}btn-with-icon {
+      .ic {
+        &::before {
+          // stylelint-disable-next-line declaration-no-important
+          color: $white !important;
+        }
+      }
+    }
+  }
+
+  &.#{$prefix}btn-icon {
+    width: 36px;
+    height: 36px;
+    padding: 8px;
+    @extend %btn-ghost;
+
+    > .ic {
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      font-size: 16px;
+    }
+  }
+
+  &.#{$prefix}is-loading {
+    position: relative;
+    pointer-events: none;
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 3;
+      content: "";
+      background-color: inherit;
+      // stylelint-disable-next-line property-blacklist
+      border-radius: 4px;
+    }
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 4;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin: auto;
+      content: "";
+      background: center center no-repeat;
+      background-size: cover;
+      border: 2px solid $white;
+      border-right-color: transparent;
+      // stylelint-disable-next-line property-blacklist
+      border-radius: 50%;
+      animation: spinner-border .75s linear infinite;
+    }
+
+    &.#{$prefix}btn-basic {
+      &::after {
+        border-color: $secondary;
+        border-right-color: transparent;
+      }
+    }
+    &.#{$prefix}btn-ghost {
+      color: transparent;
+      &::after {
+        border-color: $secondary;
+        border-right-color: transparent;
+      }
+    }
+  }
+
+  &.#{$prefix}btn-with-icon {
+    .ic {
+      padding: 0;
+      font-size: 20px;
+      vertical-align: top;
+      border: none;
+      &.is-left {
+        margin-right: 8px;
+      }
+      &.is-right {
+        margin-left: 8px;
+      }
+    }
+    span {
+      padding: 2px 0;
+      vertical-align: top;
+      border: none;
+    }
+    &.#{$prefix}btn-sm {
+      .ic {
+        padding: 0;
+        font-size: 16px;
+        vertical-align: text-top;
+        border: none;
+      }
+      span {
+        padding: 0;
+        line-height: 16px;
+        vertical-align: text-top;
+        border: none;
+      }
+    }
+    &.#{$prefix}btn-lg {
+      .ic {
+        padding: 0;
+        font-size: 24px;
+        vertical-align: top;
+        border: none;
+      }
+      span {
+        padding: 3px 0;
+        font-size: 18px;
+        vertical-align: top;
+        border: none;
+      }
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $text-muted;
+    cursor: not-allowed;
+    background-color: $cloud;
+    border: 1px solid $cloud;
+    opacity: 1;
+    &.#{$prefix}btn-ghost {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // Caret
+  &.#{$prefix}dropdown-toggle {
+    &::before {
+      margin-right: 16px;
+    }
+    &::after {
+      margin-left: 16px;
+    }
+  }
+
+  // Button group
+  &-group {
+    .#{$prefix}btn:first-child:not(:only-child):not(.#{$prefix}dropdown-toggle) {
+      padding-right: 8px;
+    }
+
+    .#{$prefix}btn:last-child:not(:only-child) {
+      padding-left: 8px;
+    }
+
+    // Caret
+    .#{$prefix}dropdown-toggle-split {
+      min-width: 36px;
+      padding-right: 8px;
+      padding-left: 8px;
+      &::before {
+        margin-right: 0;
+      }
+      &::after {
+        margin-left: 0;
+      }
+
+      // Button basic
+      &.#{$prefix}btn-basic:not(:hover):not(:focus) {
+        padding-left: 9px;
+        border-left: none;
+      }
+    }
+
+    // Button basic
+    &.#{$prefix}dropleft {
+      .#{$prefix}dropdown-toggle-split {
+        &.#{$prefix}btn-basic:not(:hover):not(:focus) {
+          padding-left: 8px;
+          border-left: 1px solid $btn-basic-border-color;
+        }
+      }
+
+      ~ .#{$prefix}btn-basic:not(:hover):not(:focus) {
+        padding-left: 9px;
+        border-left: none;
+      }
+    }
+
+    // Button link active
+    &.show {
+      > .#{$prefix}btn-link {
+        @extend %btn-link-active;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+.datepicker-container {
+  position: relative;
+  z-index: 11;
+  width: 0;
+  height: 0;
+  &.on-right {
+    left: calc(100% - 392px);
+  }
+}
+
+%datepicker-calendar {
+  position: absolute;
+  width: 392px;
+  padding: 0 16px;
+  background-color: $white;
+  background-clip: border-box;
+  border: 1px solid $smoke;
+  border-radius: 4px; // stylelint-disable-line property-blacklist
+  box-shadow: 0 2px 4px 0 rgba($slate, .1), 0 4px 8px 0 rgba($slate, .2);
+}
+
+.datepicker-calendar-view {
+  @extend %datepicker-calendar;
+  height: 320px;
+}
+
+.datepicker-collapse-view {
+  @extend %datepicker-calendar;
+  height: 244px;
+}
+
+.datepicker-header {
+  display: flex;
+  align-items: center;
+  height: 52px;
+  text-align: center;
+}
+
+.datepicker-header-title {
+  flex-grow: 5;
+  font-weight: $font-weight-bold;
+  cursor: pointer;
+}
+
+.datepicker-previous-button {
+  flex-grow: 1;
+  padding-right: 16px;
+  text-align: left;
+  .ic {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.datepicker-next-button {
+  flex-grow: 1;
+  padding-left: 16px;
+  text-align: right;
+  .ic {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+%cell-current-state {
+  border-radius: 100%; // stylelint-disable-line property-blacklist
+  -webkit-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix
+  -moz-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix
+  box-shadow: inset 0 0 0 1px $primary;
+}
+
+%cell-selected-state {
+  color: $white;
+  background-color: $primary;
+  border-radius: 100%; // stylelint-disable-line property-blacklist
+}
+
+%cell-hover {
+  color: $dark;
+  cursor: pointer;
+  background-color: $cloud;
+  border-radius: 100%; // stylelint-disable-line property-blacklist
+  -webkit-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
+  -moz-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
+  box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
+}
+
+.datepicker-row {
+  display: flex;
+  .datepicker-cell {
+    flex: 1 1 0;
+    text-align: center;
+    .datepicker-date-cell {
+      width: 32px;
+      height: 32px;
+      margin: 2px auto;
+      line-height: 32px;
+      &.current-date {
+        @extend %cell-current-state;
+      }
+      &.selected-date {
+        @extend %cell-selected-state;
+      }
+      &:hover {
+        @extend %cell-hover;
+      }
+    }
+    .datepicker-month-cell {
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      margin-bottom: 12px;
+      line-height: 40px;
+      &.current-month {
+        @extend %cell-current-state;
+      }
+      &.selected-month {
+        @extend %cell-selected-state;
+      }
+      &:hover {
+        @extend %cell-hover;
+      }
+    }
+    .datepicker-year-cell {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto;
+      margin-bottom: 4px;
+      line-height: 48px;
+      &.current-year {
+        @extend %cell-current-state;
+      }
+      &.selected-year {
+        @extend %cell-selected-state;
+      }
+      &:hover {
+        @extend %cell-hover;
+      }
+    }
+  }
+}
+
+.datepicker-day-container {
+  display: flex;
+  margin-bottom: 16px;
+  .datepicker-day {
+    flex: 1 1 0;
+    color: $slate;
+    text-align: center;
+  }
+}
+
+.datepicker-shortcut-button {
+  position: absolute;
+  bottom: 16px;
+  width: 360px;
+  color: $slate;
+  text-align: center;
+  cursor: pointer;
+  &.disabled {
+    color: $muted;
+    cursor: not-allowed;
+  }
+}