fontastic 0.1.7 → 0.2.0

package/src/styles/components/buttons.scss

@@ -1,93 +0,0 @@
-/* ==========================================================================
-App button
-========================================================================== */
-
-.app-btn {
-    @apply flex items-center justify-center cursor-pointer rounded-md py-1.5 px-5 bg-slate-100;
-    span {
-      @apply flex grow;
-    }
-    &:hover {
-      @apply bg-slate-200;
-    }
-}
-
-.app-button {
-    display: inline-block;
-    background: #25b8c8;
-    color: #fff;
-    border: 0;
-    border-bottom: 0.15em solid rgba(0, 0, 0, 0.5);
-    font-weight: 500;
-    width: auto;
-    height: 2em;
-    font-size: 1em;
-    outline: none;
-    text-transform: uppercase;
-
-    &.active,
-    &:active {
-        border-bottom: 0.15em solid transparent;
-        transform: scale(0.95);
-    }
-
-    &__rounded {
-        border-radius: 2em;
-    }
-
-    &__xs {
-        width: 5em;
-    }
-
-    &__sm {
-        width: 6em;
-    }
-
-    &__md {
-        width: 7em;
-    }
-
-    &__lg {
-        width: 8em;
-    }
-
-    &__xl {
-        width: 9em !important;
-    }
-
-    &__1xl {
-        width: 10em !important;
-    }
-
-    &__2xl {
-        width: 11em !important;
-    }
-
-    &__3xl {
-        width: 12em !important;
-    }
-
-    &__4xl {
-        width: 13em !important;
-    }
-
-    &__danger {
-        background: #ed1d27f6;
-    }
-
-    &__warning {
-        background: #ffba30fb;
-    }
-
-    &__info {
-        background: #025cc9fd;
-    }
-
-    &__success {
-        background: #00a979fd;
-    }
-}
-
-app-button+app-button {
-    margin-left: 5px !important;
-}

package/src/styles/components/forms.scss

@@ -1,96 +0,0 @@
-/* ==========================================================================
-Form Control
-========================================================================== */
-
-.form-control {
-    @apply select-none outline-0 focus:outline-none focus:ring-0;
-
-    &.form-control-reset {
-        height: 26px;
-        line-height: 1;
-        font-size: 14px;
-    }
-
-    &.form-control-hidden {
-        //@apply text-default;
-        border: none !important;
-        background-color: inherit;
-        padding: 2px 0px;
-        width: 100%;
-        // &:focus {
-        //     @apply text-default;
-        // }
-    }
-}
-
-/* ==========================================================================
-Form Group
-========================================================================== */
-
-.form-group {
-    @apply flex flex-col justify-start w-full mt-1 mb-7;
-
-    label {
-        @apply text-base font-medium inline-block mb-2;
-    }
-
-    .form-text {
-        @apply block text-base mt-2;
-    }
-}
-
-.form__actions {
-    @apply p-5;
-}
-
-/* ==========================================================================
-Fieldset
-========================================================================== */
-
-fieldset {
-    @apply relative normal-case m-7 p-7 rounded border border-[#eaeaea];
-
-    legend {
-        @apply relative text-lg text-[#00a0be] font-semibold leading-none tracking-wider inline-block align-middle py-[2px] px-0 w-auto top-0;
-        span {
-            @apply px-1.5;
-        }
-    }
-
-    dl {
-        @apply overflow-hidden font-semibold mx-5 mb-3;
-    }
-
-    dt {
-        @apply text-left float-left border-none w-[45%] pt-1;
-
-        label {
-            @apply text-base text-[#00a0be];
-        }
-
-        span {
-            @apply block font-normal;
-        }
-    }
-
-    dd {
-        @apply border-l border-[#cccccc] align-top mt-0 mr-0 mb-0 ml-[45%] pt-0 pr-0 pb-0 pl-2;
-    }
-
-    dl:hover dt,
-    dl:hover dd {
-        @apply border-[#666666];
-    }
-
-    dl:hover dt label {
-        @apply text-[#00a0be];
-    }
-
-    dl dd label:hover {
-        @apply text-[#bc2a4d];
-    }
-
-    +fieldset {
-        @apply mt-14;
-    }
-}

package/src/styles/components/inputs.scss

@@ -1,113 +0,0 @@
-
-/* ==========================================================================
-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

@@ -1,52 +0,0 @@
-.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

@@ -1,108 +0,0 @@
-/* ==========================================================================
-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

@@ -1,71 +0,0 @@
-/* ==========================================================================
-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

@@ -1,11 +0,0 @@
-/* ==========================================================================
-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

@@ -1,42 +0,0 @@
-/* ==========================================================================
-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 px-3 py-1.5;
-            .material-icons {
-                color: #fff;
-            }
-        }
-
-        td {
-            @apply p-3;
-        }
-
-        // th:not(.sort_input) {
-        //     min-width: 160px;
-        // }
-
-        th.sort_input {
-            min-width: 40px;
-        }
-    }
-}

package/src/styles/components/tabs.scss

@@ -1,44 +0,0 @@
-.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%;
-}