mekari_ui_toolkit 1.0.0

data/lib/scss/components/config/_images.scss

@@ -0,0 +1,28 @@
+.#{$prefix}img {
+  &-xs {
+    width: 24px;
+    height: 24px;
+  }
+  &-sm {
+    width: 40px;
+    height: 40px;
+  }
+  &-md {
+    width: 60px;
+    height: 60px;
+  }
+  &-lg {
+    width: 120px;
+    height: 120px;
+  }
+  &-blank-user {
+    display: inline-block;
+    vertical-align: middle;
+    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIwcHgiIGhlaWdodD0iMTIwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Ni4zICg4MTcxNikgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+IEF2YXRhci8gUGhvdG8gLyAxMjA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iLi8tQXZhdGFyLy1QaG90byIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9IlBlb3BsZXMvLUJsYW5rLVBob3RvIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJCYXNlIiBmaWxsPSIjRTJFMkUyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYxLjA1ODgyMzUsNzAuNTg4MjM1MyBDNDkuMzYzMzgxOCw3MC41ODgyMzUzIDM5Ljg4MjM1MjksNjEuMTA3MjA2NSAzOS44ODIzNTI5LDQ5LjQxMTc2NDcgQzM5Ljg4MjM1MjksMzcuNzE2MzIyOSA0OS4zNjMzODE4LDI4LjIzNTI5NDEgNjEuMDU4ODIzNSwyOC4yMzUyOTQxIEM3Mi43NTQyNjUzLDI4LjIzNTI5NDEgODIuMjM1Mjk0MSwzNy43MTYzMjI5IDgyLjIzNTI5NDEsNDkuNDExNzY0NyBDODIuMjM1Mjk0MSw2MS4xMDcyMDY1IDcyLjc1NDI2NTMsNzAuNTg4MjM1MyA2MS4wNTg4MjM1LDcwLjU4ODIzNTMgWiBNNTYuNDcwNTg4Miw3Ny42NDcwNTg4IEw2My41Mjk0MTE4LDc3LjY0NzA1ODggQzgzLjAyMTgxNDcsNzcuNjQ3MDU4OCA5OC44MjM1Mjk0LDkzLjQ0ODc3MzUgOTguODIzNTI5NCwxMTIuOTQxMTc2IEw5OC44MjM1Mjk0LDEyMCBMMjEuMTc2NDcwNiwxMjAgTDIxLjE3NjQ3MDYsMTEyLjk0MTE3NiBDMjEuMTc2NDcwNiw5My40NDg3NzM1IDM2Ljk3ODE4NTMsNzcuNjQ3MDU4OCA1Ni40NzA1ODgyLDc3LjY0NzA1ODggWiIgaWQ9IlBhdGgiIGZpbGw9IiNCNEI0QjQiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+}
+
+

data/lib/scss/components/config/_modal.scss

@@ -0,0 +1,20 @@
+.#{$prefix}modal {
+  .#{$prefix}modal-header {
+    position: relative;
+
+    .close {
+      padding: 16px;
+      margin: -16px -16px -16px auto;
+      font-size: 20px;
+      font-weight: 600;
+      opacity: 1;
+
+      span {
+        color: $slate;
+      }
+    }
+  }
+  .#{$prefix}modal-footer {
+    border-top: 0;
+  }
+}

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

@@ -0,0 +1,58 @@
+.#{$prefix}pagination {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0 16px;
+
+  ul {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: 0;
+      margin: 0;
+      color: $slate;
+      list-style-type: none;
+    }
+  }
+
+  &_limit {
+    ul {
+      li {
+        margin-right: 6px;
+        color: $slate;
+        &:last-child {
+          margin-right: 0;
+        }
+        .custom-select {
+          width: 75px;
+          padding: 4px 8px;
+          margin: 0 4px 0 0;
+        }
+      }
+    }
+  }
+  &_pages {
+    li {
+      .#{$prefix}btn {
+        max-width: 20px;
+        max-height: 20px;
+        padding: 0;
+        margin-top: -2px;
+        font-size: 20px;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+      input {
+        width: 50px;
+        margin: 0 8px 0 4px;
+      }
+    }
+  }
+
+  &_total_pages {
+    margin: 0 6px;
+  }
+}

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

@@ -0,0 +1,114 @@
+
+.#{$prefix}table {
+  margin-bottom: 0;
+  border-spacing: 0;
+  border-collapse: separate;
+  border: 1px solid $smoke;
+  @include border-radius(4px);
+  th,
+  td {
+    padding: 10px 16px;
+    border-top: 0;
+
+    .#{$prefix}btn-icon {
+      margin-top: -8px;
+      margin-bottom: -8px;
+    }
+  }
+  thead {
+    th {
+      background-color: $light;
+      border-bottom: $table-border-width solid $table-border-color;
+      &:first-child {
+        // stylelint-disable-next-line property-blacklist
+        border-top-left-radius: 4px;
+      }
+      &:last-child {
+        // stylelint-disable-next-line property-blacklist
+        border-top-right-radius: 4px;
+      }
+    }
+    .sort {
+      cursor: pointer;
+      span {
+        position: relative;
+        &::before,
+        &::after {
+          position: absolute;
+          right: -12px;
+          width: 0;
+          height: 0;
+          content: "";
+          border-style: solid;
+        }
+        &::before {
+          top: 2px;
+          border-color: transparent transparent $slate transparent;
+          border-width: 0 4px 4px;
+        }
+        &::after {
+          bottom: 2px;
+          border-color: $slate transparent transparent transparent;
+          border-width: 4px 4px 0;
+        }
+      }
+      &.sort-up,
+      &.sort-down {
+        span {
+          &::before {
+            border-color: transparent transparent $dark transparent;
+          }
+          &::after {
+            border-color: $dark transparent transparent transparent;
+          }
+        }
+      }
+    }
+  }
+  tbody {
+    tr:not(:last-child) {
+      // stylelint-disable-next-line selector-max-type
+      th,
+      td {
+        border-bottom: 1px solid $table-border-color;
+      }
+    }
+  }
+
+  &.#{$prefix}table-bordered {
+    tbody {
+      th,
+      td {
+        border-bottom: 0;
+      }
+    }
+    th,
+    td {
+      border-right: $table-border-width solid $table-border-color;
+      border-left: 0;
+    }
+    thead th:last-child,
+    tbody td:last-child {
+      border-right: 0;
+    }
+  }
+
+  .#{$prefix}table {
+    &__checkbox {
+      width: 32px;
+      padding-right: 0;
+
+      .#{$prefix}custom-control {
+        padding-left: 16px;
+        margin-bottom: 0;
+
+        &-label {
+          &::before,
+          &::after {
+            left: -16px;
+          }
+        }
+      }
+    }
+  }
+}

data/lib/scss/components/config/_tabs.scss

@@ -0,0 +1,52 @@
+.#{$prefix}nav-tabs {
+  margin-bottom: 24px;
+
+  .#{$prefix}nav {
+    &-item {
+      margin: 8px 0 11px;
+    }
+
+    &-link {
+      position: relative;
+      padding: 8px 16px;
+      color: $slate;
+      border: none;
+      @include border-radius(4px);
+
+      &:hover {
+        color: $dark;
+      }
+
+      &.active {
+        font-weight: 500;
+        &::after {
+          position: absolute;
+          bottom: -12px;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          content: "";
+          background-color: $dark;
+        }
+      }
+
+      &.disabled {
+        color: $muted;
+        pointer-events: auto;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .#{$prefix}dropdown-menu {
+    margin-top: 11px;
+    @include border-radius(4px);
+
+    .#{$prefix}dropdown-item {
+      &.active {
+        color: inherit;
+        background-color: inherit;
+      }
+    }
+  }
+}

data/lib/scss/components/config/_tooltip.scss

@@ -0,0 +1,8 @@
+.#{$prefix}tooltip {
+  @extend %font-size-sm;
+
+  &-inner {
+    text-align: left;
+    box-shadow: 0 2px 4px 0 rgba(65, 64, 66, .2);
+  }
+}

data/lib/scss/components/date-picker.scss

@@ -0,0 +1,3 @@
+@import "../settings";
+
+@import "./config/date-picker";

data/lib/scss/components/dropdown.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/dropdown";
+
+@import "./config/dropdowns";

data/lib/scss/components/form.scss

@@ -0,0 +1,7 @@
+@import "../settings";
+
+@import "../vendors/forms";
+@import "../vendors/custom-forms";
+@import "../vendors/input-group";
+
+@import "./config/form";

data/lib/scss/components/icons.scss

@@ -0,0 +1,3 @@
+@import "../settings";
+
+@import "./config/icons";

data/lib/scss/components/images.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/images";
+
+@import "./config/images";

data/lib/scss/components/list-group.scss

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

data/lib/scss/components/modal.scss

@@ -0,0 +1,7 @@
+@import "../settings";
+
+@import "../vendors/modal";
+@import "../vendors/transitions";
+@import "../vendors/close";
+
+@import "./config/modal";

data/lib/scss/components/navbar.scss

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

data/lib/scss/components/pagination.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/pagination";
+
+@import "./config/pagination";

data/lib/scss/components/popover.scss

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

data/lib/scss/components/progress.scss

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

data/lib/scss/components/reboot-bootstrap.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+@import "../base/fonts";
+
+@import "../vendors/bootstrap-reboot";
+@import "../base/text";

data/lib/scss/components/spinners.scss

@@ -0,0 +1,4 @@
+@import "../settings";
+
+@import "../vendors/spinners";
+

data/lib/scss/components/tables.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/tables";
+
+@import "./config/tables";

data/lib/scss/components/tabs.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/nav";
+
+@import "./config/tabs";

data/lib/scss/components/tooltip.scss

@@ -0,0 +1,5 @@
+@import "../settings";
+
+@import "../vendors/tooltip";
+
+@import "./config/tooltip";

data/lib/scss/main.scss

@@ -0,0 +1,26 @@
+$prefix: null !default;
+
+@import "./vendor-extensions/main";
+@import "./vendors/bootstrap";
+
+@import "./base/main";
+@import "./mixins/main";
+
+@import "./utilities/grid";
+@import "./utilities/utilities";
+@import "./components/config/icons";
+@import "./components/config/badge";
+@import "./components/config/banner";
+@import "./components/config/breadcrumb";
+@import "./components/config/button";
+@import "./components/config/alert";
+@import "./components/config/avatar";
+@import "./components/config/dropdowns";
+@import "./components/config/date-picker";
+@import "./components/config/form";
+@import "./components/config/images";
+@import "./components/config/modal";
+@import "./components/config/pagination";
+@import "./components/config/tables";
+@import "./components/config/tabs";
+@import "./components/config/tooltip";

data/lib/scss/mixins/_main.scss

@@ -0,0 +1,2 @@
+@import "./scroll";
+@import "./text";

data/lib/scss/mixins/_scroll.scss

@@ -0,0 +1,18 @@
+@mixin scroll-default {
+  &::-webkit-scrollbar {
+    width: 12px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $slate;
+    background-clip: padding-box;
+    border: 4px solid transparent;
+    @include border-radius(16px);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $white;
+    @include border-radius(4px);
+  }
+}

data/lib/scss/mixins/_text.scss

@@ -0,0 +1,11 @@
+%font-size-base {
+  font-size: $font-size-base; // 16px
+  line-height: 20px;
+  letter-spacing: $letter-spacing;
+}
+
+%font-size-sm {
+  font-size: $font-size-sm; // 12px
+  line-height: 16px;
+  letter-spacing: $letter-spacing;
+}