fontastic 0.1.3

package/src/styles/components/inputs.scss

@@ -0,0 +1,113 @@
+
+/* ==========================================================================
+Inputs
+========================================================================== */
+
+input,
+select {
+  @apply text-gray-700;
+  &:focus {
+    @apply text-gray-700;
+  }
+}
+
+input:not([type='range']):not([type='color']):not(.form-control-hidden),
+select:not([type='range']):not(.form-control-hidden) {
+  @apply border border-solid border-default;
+}
+
+input[type='color'] {
+  @apply border-none;
+}
+
+/* ==========================================================================
+Checkbox/Radio
+========================================================================== */
+
+.radio,
+.checkbox {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checkbox {
+  --border-radius: 0;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.radio label,
+.checkbox label {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #00a0be;
+  border-radius: var(--border-radius);
+  pointer-events: none;
+}
+
+.radio label::before,
+.checkbox label::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--border-radius);
+  background-color: transparent;
+  transform: translate(-50%, -50%);
+  transition: background-color 0.25s;
+}
+
+.radio :checked ~ label::before,
+.checkbox :checked ~ label::before {
+  background-color: #00a0be;
+}
+
+.radio :checked ~ span,
+.checkbox :checked ~ span {
+  color: #00a0be;
+}
+
+.radio.radio-large {
+  label {
+    width: 16px;
+    height: 16px;
+    border-width: 1px;
+  }
+  label::before {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+/* ==========================================================================
+Range Slider
+========================================================================== */
+
+input[type="range"] {
+  @apply cursor-pointer appearance-none;
+}
+
+input[type="range"]:focus {
+  @apply outline-none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  @apply bg-[#00a0be] h-1.5 rounded;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  @apply appearance-none h-[15px] w-[15px] -mt-[5px] rounded-full bg-[#00a0be] border-3 border-solid border-white shadow-md;
+}

package/src/styles/components/modal.scss

@@ -0,0 +1,52 @@
+.modal {
+    @apply flex items-center justify-center fixed inset-0 z-20 overflow-hidden outline-none;
+
+    &__dialog {
+        @apply relative w-full h-full p-4;
+        width: 600px;
+        margin: 0px auto;
+        &.sm {
+            width: 600px;
+            height: auto;
+        }
+        &.md {
+            width: 900px;
+            height: auto;
+        }
+        &.lg {
+            width: 1440px;
+        }
+        &.xl {
+            width: 1680px;
+        }
+        &.full {
+            width: 100vw;
+        }
+    }
+
+    &__content {
+        @apply flex flex-col relative bg-white h-full;
+        &.rounded-md {
+            border-radius: 0.475rem;
+        }
+    }
+
+    &__header {
+        @apply flex items-center justify-between p-4;
+        &-title {
+            @apply text-lg font-semibold tracking-wide leading-4;
+        }
+    }
+
+    &__body {
+        @apply relative h-full overflow-hidden;
+    }
+
+    &__footer {
+        @apply text-right p-4;
+    }
+}
+
+.modal-bg {
+    @apply fixed inset-0 z-10 bg-black opacity-30;
+}

package/src/styles/components/paginator.scss

@@ -0,0 +1,108 @@
+/* ==========================================================================
+Paginator
+========================================================================== */
+
+.paginator {
+    padding: 0;
+    margin: 0;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0s, opacity 0.5s ease-in-out;
+
+    .paginator-block {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    .paginator-panel {
+        display: flex !important;
+        align-items: center;
+    }
+
+    a,
+    input,
+    .paginator-panel,
+    .paginator-counts,
+    .paginator-results {
+        display: inline-block;
+    }
+
+    .paginator-counts,
+    .paginator-results {
+        padding-left: 15px;
+    }
+
+    .paginator-results {
+        margin: 0;
+
+        label {
+            margin: 0;
+        }
+    }
+
+    .paginator-counts {
+        font-size: 13px;
+        line-height: 1;
+        vertical-align: middle;
+        margin-top: 3px;
+    }
+
+    a {
+        cursor: pointer;
+        //border: 1px solid transparent;
+        border-radius: 0;
+        border-width: 0;
+        height: 26px;
+        width: 26px;
+        outline: none;
+        filter: none;
+        box-shadow: none;
+        text-shadow: none;
+        user-select: none;
+        padding: 0px;
+        margin: 0 3px;
+        text-align: center;
+        text-decoration: none;
+        vertical-align: middle;
+        white-space: nowrap;
+
+        i.material-icons {
+            margin-top: 1px;
+        }
+    }
+
+    a.page-disabled {
+        pointer-events: none;
+        i.material-icons {
+            opacity: 0.50;
+        }
+    }
+
+    input {
+        padding: 5px 10px;
+        text-align: center;
+        width: 45px;
+    }
+}
+
+@media only screen and (max-width: 1440px) {
+    .paginator {
+        .paginator-counts {
+            display: none;
+        }
+    }
+}
+
+.paginator {
+    a {
+        @apply border-none bg-gray-100;
+        i.material-icons {
+            @apply text-default;
+        }
+    }
+}

package/src/styles/components/scrollbox.scss

@@ -0,0 +1,71 @@
+/* ==========================================================================
+Scrollbox
+========================================================================== */
+
+.hover-scrollbox-x,
+.hover-scrollbox-y {
+  --scrollbar-color: #00a0be;
+  --scrollbar-hover-color: #00a1bece;
+  --scrollbar-space: 0.1rem;
+  --scrollbar-height: calc(.3rem + var(--scrollbar-space));
+  --scrollbar-width: calc(.3rem + var(--scrollbar-space));
+}
+
+.hover-scrollbox-x,
+.hover-scrollbox-y {
+  position: relative;
+}
+
+.hover-scrollbox-x {
+  overflow-x: hidden;
+}
+
+.hover-scrollbox-y {
+  overflow-y: hidden;
+}
+
+.hover-scrollbox-x::-webkit-scrollbar {
+  height: var(--scrollbar-height);
+}
+
+.hover-scrollbox-y::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+}
+
+.hover-scrollbox-x::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border-bottom: var(--scrollbar-space) solid transparent;
+}
+
+.hover-scrollbox-y::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border-right: var(--scrollbar-space) solid transparent;
+}
+
+.hover-scrollbox-x:hover {
+  overflow-x: overlay;
+}
+
+.hover-scrollbox-y:hover {
+  overflow-y: overlay;
+}
+
+.hover-scrollbox-x,
+.hover-scrollbox-y {
+  scrollbar-color: var(--scrollbar-color) transparent;
+}
+
+.hover-scrollbox-x:hover,
+.hover-scrollbox-y:hover {
+  scrollbar-color: var(--scrollbar-color) transparent;
+}
+
+.hover-scrollbox-x::-webkit-scrollbar-thumb,
+.hover-scrollbox-y::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-color);
+}
+
+.hover-scrollbox-x::-webkit-scrollbar-thumb:hover,
+.hover-scrollbox-y::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-hover-color);
+}

package/src/styles/components/spinner.scss

@@ -0,0 +1,11 @@
+/* ==========================================================================
+Spinner
+========================================================================== */
+
+.app-spinner {
+    @apply relative rounded-full w-[19px] h-[19px] m-0 p-0 opacity-0 indent-[150%] border-4 border-[#00a0be];
+    border-left: 4px solid #fff;
+    &.is-animating {
+      @apply opacity-100 animate-spin;
+    }
+}

package/src/styles/components/tables.scss

@@ -0,0 +1,42 @@
+/* ==========================================================================
+Tables
+========================================================================== */
+
+.table {
+    @apply text-[#616467] opacity-0 invisible transition-opacity;
+
+    thead>tr {
+        @apply text-white bg-[#00a1be];
+    }
+
+    &.striped>tbody>tr:nth-child(odd) {
+        @apply bg-[#f5f5f5];
+    }
+
+    tr {
+
+        th,
+        td {
+            @apply bg-inherit relative align-middle whitespace-nowrap overflow-hidden;
+        }
+
+        th {
+            @apply cursor-pointer p-3;
+            .material-icons {
+                color: #fff;
+            }
+        }
+
+        td {
+            @apply p-3;
+        }
+
+        th:not(.sort_input) {
+            min-width: 120px;
+        }
+
+        th.sort_input {
+            min-width: 40px;
+        }
+    }
+}

package/src/styles/components/tabs.scss

@@ -0,0 +1,44 @@
+.tabs {
+    list-style: none;
+    padding-left: 0;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    margin: 0;
+    height: 38px;
+}
+
+.tabs li {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    align-content: stretch;
+    text-align: center;
+    background-color: inherit;
+    cursor: pointer;
+    transition: background-color 0.45s ease-in-out;
+}
+
+.tabs li:last-of-type {
+    border-right: unset !important;
+}
+
+.tabs li.tabs-panel-open {
+    border-bottom: none !important;
+}
+
+.tabs li>a {
+    text-decoration: none;
+}
+
+@media (max-width: 480px) {
+    .tabs {
+        grid-template-columns: 1fr;
+    }
+}
+
+.tabs-content {
+    position: relative;
+    height: 100%;
+}

package/src/styles/components/toolbar.scss

@@ -0,0 +1,130 @@
+/* ==========================================================================
+Toolbar
+========================================================================== */
+
+.input-preview {
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+    align-items: center;
+
+    &:not(:last-of-type) {
+        margin: 0 10px 0 0;
+    }
+
+    white-space: nowrap;
+
+    @include loading-transition(0s, 1s);
+
+    label {
+        font-size: 12px;
+        margin: 0 10px;
+        display: none;
+    }
+}
+
+.input-preview.quick-text,
+.input-preview.preview-size,
+.input-preview.preview-range,
+.input-preview.preview-color,
+.input-preview.preview-reset,
+.input-preview.preview-casing,
+.input-preview.preview-spacing {
+
+    button {
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        margin: 0;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+
+        span {
+            color: #9b9af1;
+            vertical-align: middle;
+            line-height: 1;
+            width: 24px;
+            height: 24px;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+$inputColorWidth: 90px;
+
+.input-preview.preview-color {
+    input {
+        width: $inputColorWidth;
+        min-width: $inputColorWidth;
+        max-width: $inputColorWidth;
+    }
+}
+
+.input-preview.preview-text {
+    height: 24px;
+    width: 350px;
+
+    &.open {
+        transform: scale(1);
+        transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
+    }
+
+    select,
+    input {
+        background-color: #fff;
+        border: 1px solid $color-border;
+        border-radius: 0;
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 24px;
+        width: 0%;
+        margin: 0;
+        padding: 5px 10px 5px 6px;
+        outline: none;
+        box-shadow: none;
+        vertical-align: middle;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 1.5;
+        text-align: left;
+        transition: width 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
+    }
+
+    &.open select,
+    &.open input {
+        width: 100%;
+    }
+
+    button {
+        background-color: $color-blue;
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        height: 24px;
+
+        span {
+            color: $color-white;
+            vertical-align: middle;
+            position: relative;
+            top: 0px;
+            width: 26px;
+            height: 26px;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+}

package/src/styles/fonts/md.scss

@@ -0,0 +1,54 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../assets/fonts/md/MaterialIcons-Regular.woff2) format('woff2');
+}
+
+.material-icons {
+  color: inherit;
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  cursor: pointer;
+  vertical-align: middle;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: "liga";
+
+  // fixes icon resizing when clicking
+  &.material-icons-sized {
+    height: 26px;
+    width: 26px;
+  }
+}
+
+.material-icons-rounded {
+  .material-icons {
+    border-radius: 50%;
+    padding: 4px;
+    transition-property: background-color, color;
+    transition-duration: 0.2s;
+    &:hover {
+      color: #008197;
+      background-color: #f3f4f6;
+    }
+  }
+}