@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/styles/elements/buttons.css

@@ -1,103 +0,0 @@
-/* Tailwind Elements: button.css */
-
-@layer components {
-  /* === States === */
-
-  button:disabled {
-    @apply !cursor-not-allowed !opacity-50 hover:brightness-100 active:scale-100;
-  }
-
-  .button-base-styles {
-    /* Size (match base)  */
-    @apply px-5 py-[9px] text-base;
-    /* Core */
-    @apply whitespace-nowrap text-center;
-    /* Flex Columns */
-    @apply inline-flex items-center justify-center space-x-2;
-    /* States */
-    @apply hover:brightness-[1.15];
-    /* Transitions */
-    @apply transition-all;
-  }
-
-  /* === Button === */
-  /* Standard button/anchor tag elements. */
-
-  .btn {
-    @apply button-base-styles rounded-token active:scale-[95%] active:brightness-90;
-  }
-
-  /* Button: Sizes */
-  /* Note: Default values are built into `.btn` */
-  .btn-sm {
-    @apply px-3 py-1.5 text-sm;
-  }
-  .btn-lg {
-    @apply px-7 py-3 text-lg;
-  }
-  .btn-xl {
-    @apply px-9 py-4 text-xl;
-  }
-
-  /* === Icon Button === */
-  /* A circular button meant for housing icons. */
-
-  .btn-icon {
-    /* Extend Base Button Clases */
-    @apply btn;
-    /* Size (match base) */
-    @apply aspect-square w-[43px] text-base;
-    /* Rounded */
-    @apply rounded-full;
-  }
-
-  /* Icon Button: Size */
-  .btn-icon-sm {
-    @apply aspect-square w-[33px] text-sm;
-  }
-  .btn-icon-base {
-    @apply aspect-square w-[43px] text-base;
-  }
-  .btn-icon-lg {
-    @apply aspect-square w-[53px] text-lg;
-  }
-  .btn-icon-xl {
-    @apply aspect-square w-[63px] text-xl;
-  }
-
-  /* File Input Button */
-  input[type='file']:not(.file-dropzone-input)::file-selector-button {
-    @apply variant-filled btn btn-sm mr-2 border-0;
-  }
-
-  /* === Button Groups === */
-
-  .btn-group {
-    @apply inline-flex flex-row space-x-0 overflow-hidden rounded-token;
-    /* Safari: hover overflow fix for border radius */
-    isolation: isolate;
-  }
-  .btn-group-vertical {
-    @apply btn-group flex-col space-y-0 rounded-container-token;
-    /* Safari: hover overflow fix for border radius */
-    isolation: isolate;
-  }
-
-  /* Button / Anchors */
-  .btn-group button,
-  .btn-group a,
-  .btn-group-vertical button,
-  .btn-group-vertical a {
-    @apply button-base-styles hover:bg-surface-50/[3%] active:bg-surface-900/[3%];
-    /* Reset Anchor Styles */
-    @apply !text-inherit !no-underline;
-  }
-
-  /* Set Neutral Divider */
-  .btn-group * + * {
-    @apply border-l border-t-0 border-surface-500/20;
-  }
-  .btn-group-vertical * + * {
-    @apply border-l-0 border-t border-surface-500/20;
-  }
-}

package/src/styles/elements/cards.css

@@ -1,32 +0,0 @@
-/* Tailwind Elements: cards.css */
-
-@layer components {
-  .card {
-    /* background */
-    @apply bg-surface-100-800-token;
-    /* Ring */
-    @apply ring-outline-token;
-    /* Theme: Rounded */
-    @apply rounded-container-token;
-  }
-
-  /* === Regions === */
-
-  .card-header {
-    @apply p-4 pb-0;
-  }
-
-  .card-footer {
-    @apply p-4 pt-0;
-  }
-
-  /* === States === */
-
-  a.card {
-    @apply transition-all hover:brightness-105;
-  }
-
-  .card-hover {
-    @apply transition-all hover:scale-[101%] hover:shadow-xl;
-  }
-}

package/src/styles/elements/chips.css

@@ -1,22 +0,0 @@
-/* Tailwind Elements: chips.css */
-
-@layer components {
-  .chip {
-    @apply cursor-pointer whitespace-nowrap px-3 py-1.5;
-    /* Text */
-    @apply text-center text-xs;
-    /* Rounded */
-    @apply rounded;
-    /* Flex Columns */
-    @apply inline-flex items-center justify-center space-x-2;
-    /* States */
-    @apply hover:brightness-[1.15];
-    /* Transitions */
-    @apply transition-all;
-  }
-
-  .chip-disabled,
-  .chip:disabled {
-    @apply !cursor-not-allowed !opacity-50 active:scale-100;
-  }
-}

package/src/styles/elements/forms.css

@@ -1,269 +0,0 @@
-/* Stylesheet: forms.css */
-
-@layer base {
-  /* === Resets === */
-
-  fieldset,
-  legend,
-  label {
-    @apply block;
-  }
-
-  /* Placeholders */
-  ::-moz-placeholder {
-    @apply text-surface-500-400-token;
-  }
-  :-ms-input-placeholder {
-    @apply text-surface-500-400-token;
-  }
-  ::placeholder {
-    @apply text-surface-500-400-token;
-  }
-
-  /* Date Calendar Picker (Webkit) */
-  ::-webkit-calendar-picker-indicator {
-    @apply dark:invert;
-  }
-
-  /* Progress Bar */
-  progress {
-    webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    @apply h-2 w-full overflow-hidden rounded-token;
-    @apply bg-surface-400-500-token;
-  }
-  progress::-webkit-progress-bar {
-    @apply bg-surface-400-500-token;
-  }
-  progress::-webkit-progress-value {
-    @apply bg-surface-900-50-token;
-  }
-  ::-moz-progress-bar {
-    @apply bg-surface-900-50-token;
-  }
-  :indeterminate::-moz-progress-bar {
-    width: 0;
-  }
-
-  /* Range Input */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
-  [type='range'] {
-    @apply w-full accent-surface-900 dark:accent-surface-50;
-  }
-
-  /* === Text Labeling === */
-
-  .legend {
-    @apply text-xl font-heading-token md:text-2xl;
-  }
-
-  .label {
-    @apply space-y-1;
-  }
-
-  /* === Core Styles === */
-
-  .input,
-  .textarea,
-  .select,
-  .input-group {
-    @apply w-full transition duration-200;
-    /* Background */
-    @apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105;
-    /* Ring */
-    @apply !ring-0;
-    /* Border */
-    @apply border-token border-surface-400-500-token focus-within:border-primary-500;
-  }
-
-  /* Base Inputs */
-  .input,
-  .input-group {
-    @apply rounded-token;
-  }
-
-  /* Container Inputs */
-  .textarea,
-  .select {
-    @apply rounded-container-token;
-  }
-
-  /* Select (size/multiple) */
-  .select {
-    @apply space-y-1 p-2 pr-8;
-  }
-  .select[size] {
-    @apply bg-none;
-  }
-  .select optgroup {
-    @apply space-y-1 font-bold;
-  }
-  .select optgroup option {
-    @apply ml-0 pl-0;
-  }
-  .select optgroup option:first-of-type {
-    @apply mt-3;
-  }
-  .select optgroup option:last-child {
-    @apply !mb-3;
-  }
-  .select option {
-    @apply cursor-pointer px-4 py-2 bg-surface-200-700-token rounded-token;
-  }
-  .select option:checked {
-    /* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
-    /* prettier-ignore */
-    background: rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
-    @apply text-on-primary-token;
-  }
-
-  /* Checkbox & Radio */
-  .checkbox,
-  .radio {
-    @apply h-5 w-5 cursor-pointer rounded !ring-0;
-    /* Background */
-    @apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105;
-    /* Border */
-    @apply border-token border-surface-400-500-token focus:border-primary-500;
-  }
-  .checkbox:checked,
-  .radio:checked {
-    @apply bg-primary-500 hover:bg-primary-500 focus:bg-primary-500 focus:ring-0;
-  }
-  .radio {
-    @apply rounded-token;
-  }
-
-  /* === Specialized === */
-
-  /* File Inputs */
-  .input[type='file'] {
-    @apply p-1;
-  }
-
-  /* Color Picker */
-  /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
-  .input[type='color'] {
-    @apply h-10 w-10 cursor-pointer overflow-hidden border-none rounded-token;
-    -webkit-appearance: none; /* WebKit Only */
-  }
-  .input[type='color']::-webkit-color-swatch-wrapper {
-    @apply p-0;
-  }
-  .input[type='color']::-webkit-color-swatch {
-    @apply border-none hover:brightness-110;
-  }
-  .input[type='color']::-moz-color-swatch {
-    @apply border-none;
-  }
-
-  /* === States === */
-
-  .input:disabled,
-  .textarea:disabled,
-  .select:disabled {
-    @apply !cursor-not-allowed !opacity-50 hover:!brightness-100;
-  }
-
-  .input[readonly],
-  .textarea[readonly],
-  .select[readonly] {
-    @apply !cursor-not-allowed !border-0 hover:!brightness-100;
-  }
-
-  /* === Input Groups === */
-
-  .input-group {
-    @apply grid overflow-hidden;
-  }
-  .input-group input,
-  .input-group select {
-    @apply border-0 bg-transparent ring-0;
-  }
-  .input-group select option {
-    @apply bg-surface-200-700-token;
-  }
-  .input-group div,
-  .input-group a,
-  .input-group button {
-    @apply flex items-center justify-between px-4;
-  }
-  .input-group-divider input,
-  .input-group-divider select,
-  .input-group-divider div,
-  .input-group-divider a {
-    @apply border-l border-surface-400-500-token focus:border-surface-400-500-token;
-    /* Disable Ring */
-    @apply !ring-0;
-    /* Prevent buttons from being squished */
-    @apply !min-w-fit;
-  }
-  .input-group-divider *:first-child {
-    @apply !border-l-0;
-  }
-  .input-group-shim {
-    @apply bg-surface-400/10 text-surface-600-300-token;
-  }
-
-  /* === Variants === */
-
-  /* success */
-  .input-success {
-    @apply !border-success-500 !bg-success-200 !text-success-700;
-  }
-  .input-success::-moz-placeholder {
-    @apply text-success-700;
-  }
-  .input-success:-ms-input-placeholder {
-    @apply text-success-700;
-  }
-  .input-success::placeholder {
-    @apply text-success-700;
-  }
-
-  /* warning */
-  .input-warning {
-    @apply !border-warning-500 !bg-warning-200 !text-warning-700;
-  }
-  .input-warning::-moz-placeholder {
-    @apply text-warning-700;
-  }
-  .input-warning:-ms-input-placeholder {
-    @apply text-warning-700;
-  }
-  .input-warning::placeholder {
-    @apply text-warning-700;
-  }
-
-  /* error */
-  .input-error {
-    @apply !border-error-500 !bg-error-200 !text-error-500;
-  }
-  .input-error::-moz-placeholder {
-    @apply text-error-500;
-  }
-  .input-error:-ms-input-placeholder {
-    @apply text-error-500;
-  }
-  .input-error::placeholder {
-    @apply text-error-500;
-  }
-
-  /* === Variants === */
-
-  /* Material */
-  .variant-form-material {
-    /* Border Radius */
-    @apply !rounded-bl-none !rounded-br-none !rounded-tl !rounded-tr;
-    /* Background */
-    @apply bg-surface-500/10 dark:bg-surface-500/20;
-    /* Border */
-    @apply border-0 border-b-2;
-    /* Blur */
-    @apply backdrop-blur;
-  }
-  .variant-form-material[type='file'] {
-    @apply !py-1.5;
-  }
-}

package/src/styles/elements/lists.css

@@ -1,48 +0,0 @@
-/* Tailwind Elements: button.css */
-
-@layer components {
-  /* === Lists (Parents) === */
-
-  .list,
-  .list-dl,
-  .list-nav ul {
-    /* List Style */
-    @apply list-none;
-    /* Spacing */
-    @apply space-y-1;
-  }
-
-  /* === List Items (Children) === */
-
-  .list li {
-    /* @apply bg-red-500; */
-    @apply flex items-center space-x-4 whitespace-nowrap;
-    /* Padding */
-    @apply p-2;
-    /* Theme: Rounded */
-    @apply rounded-token;
-  }
-
-  .list-dl div {
-    /* @apply bg-blue-500; */
-    @apply flex items-center space-x-4 whitespace-nowrap;
-    /* Padding */
-    @apply p-2;
-    /* Theme: Rounded */
-    @apply rounded-token;
-  }
-
-  .list-nav a,
-  .list-nav button,
-  .list-option {
-    @apply flex items-center space-x-4 whitespace-nowrap;
-    /* Padding */
-    @apply px-4 py-2;
-    /* Hover */
-    @apply bg-primary-hover-token;
-    /* Cursor */
-    @apply cursor-pointer;
-    /* Theme: Rounded */
-    @apply rounded-token;
-  }
-}

package/src/styles/elements/logo-clouds.css

@@ -1,29 +0,0 @@
-/* Tailwind Elements: logo-clouds.css */
-
-@layer components {
-  .logo-cloud {
-    @apply grid overflow-hidden;
-    /* Theme: Rounded */
-    @apply rounded-container-token;
-  }
-
-  /* === Logo Item (Child) === */
-
-  .logo-item {
-    @apply: flex-auto text-center space-x-4 shadow;
-    /* Center Contents */
-    @apply flex items-center justify-center space-x-4;
-    /* Background */
-    @apply bg-surface-100-800-token;
-    /* Text */
-    @apply text-base font-bold text-black dark:text-white;
-    /* Padding */
-    @apply py-4 md:py-8;
-  }
-
-  /* === States === */
-
-  a.logo-item {
-    @apply hover:brightness-110;
-  }
-}

package/src/styles/elements/modals.css

@@ -1,15 +0,0 @@
-/* Tailwind Elements: modals.css */
-
-/* === Modal (helpers) === */
-
-.w-modal-slim {
-  @apply w-full max-w-[400px];
-}
-
-.w-modal {
-  @apply w-full max-w-[640px];
-}
-
-.w-modal-wide {
-  @apply w-full max-w-[80%];
-}

package/src/styles/elements/placeholders.css

@@ -1,17 +0,0 @@
-/* Tailwind Elements: placeholders.css */
-
-@layer components {
-  /* === Base === */
-
-  .placeholder {
-    @apply h-5 bg-surface-300-600-token;
-    /* Theme: Rounded */
-    @apply rounded-token;
-  }
-
-  /* === Shapes === */
-
-  .placeholder-circle {
-    @apply aspect-square rounded-full bg-surface-300-600-token;
-  }
-}

package/src/styles/elements/popups.css

@@ -1,16 +0,0 @@
-/* Tailwind Elements: popups.css */
-
-/* === Popup === */
-
-[data-popup] {
-  /* https://floating-ui.com/docs/computeposition#usage */
-  @apply absolute left-0 top-0; /* max-w-max */
-  /* Set hidden on page load */
-  @apply hidden;
-  /* Transitions */
-  @apply transition-opacity duration-200;
-}
-
-[data-popup] .arrow {
-  @apply absolute h-2 w-2 rotate-45;
-}

package/src/styles/elements/tables.css

@@ -1,102 +0,0 @@
-/* Elements: tables.css */
-
-@layer components {
-  .table-container {
-    @apply w-full overflow-x-auto rounded-container-token;
-  }
-
-  .table {
-    @apply w-full table-auto overflow-hidden;
-    /* background */
-    @apply bg-surface-100-800-token;
-    /* Theme: Rounded */
-    @apply rounded-container-token;
-  }
-
-  /* === Hover Styles ==== */
-
-  .table-hover tbody tr {
-    @apply hover:bg-surface-500/20 even:hover:bg-surface-500/20;
-  }
-
-  .table-interactive tbody tr {
-    @apply cursor-pointer hover:bg-primary-hover-token even:hover:bg-primary-hover-token;
-  }
-
-  /* === Sort Styles ==== */
-
-  [data-sort] {
-    @apply cursor-pointer hover:bg-primary-hover-token;
-    /* Sort Icon - invisible by default */
-    @apply after:!ml-2 after:opacity-0 after:!content-['↓'];
-  }
-
-  .table-sort-asc {
-    @apply after:opacity-50 after:!content-['↓'];
-  }
-
-  .table-sort-dsc {
-    @apply after:opacity-50 after:!content-['↑'];
-  }
-
-  /* === Table Head === */
-
-  .table thead {
-    @apply border-b border-surface-500/20 bg-surface-200-700-token;
-  }
-
-  .table thead tr {
-    @apply text-left capitalize;
-  }
-
-  .table thead th {
-    @apply p-4 font-bold;
-  }
-
-  /* === Table Body === */
-
-  .table tbody tr {
-    @apply border-b border-surface-500/20 even:bg-surface-500/5;
-  }
-
-  .table tbody td {
-    /* NOTE: removed this to allow wrapping */
-    @apply whitespace-nowrap px-3 py-4 align-top text-sm lg:whitespace-normal;
-  }
-
-  .table-compact tbody td {
-    @apply !py-3;
-  }
-
-  .table-comfortable tbody td {
-    @apply !py-5;
-  }
-
-  /* === Table Foot === */
-
-  .table tfoot {
-    @apply bg-surface-100-800-token;
-  }
-
-  .table tfoot tr {
-    @apply text-left capitalize;
-  }
-
-  .table tfoot th,
-  .table tfoot td {
-    @apply p-4;
-  }
-
-  /* === Rows Specific === */
-
-  .table-row-checked {
-    @apply !bg-secondary-500/20;
-  }
-
-  /* === Cells Specific === */
-
-  /* Source: https://stackoverflow.com/questions/11267154/fit-cell-width-to-content */
-  .table-cell-fit {
-    @apply w-[1%] whitespace-nowrap;
-  }
-}

package/src/styles/elements.css

@@ -1,19 +0,0 @@
-/* Stylesheet: elements.css */
-/* Import AFTER your theme, but BEFORE your global stylesheet. */
-/* Recommended as the LAST stylesheet in the set */
-
-@import 'elements/alerts.css';
-@import 'elements/badges.css';
-@import 'elements/breadcrumbs.css';
-@import 'elements/buttons.css';
-@import 'elements/cards.css';
-@import 'elements/chips.css';
-@import 'elements/forms.css';
-@import 'elements/lists.css';
-@import 'elements/logo-clouds.css';
-@import 'elements/placeholders.css';
-@import 'elements/tables.css';
-
-/* Utilities */
-@import 'elements/modals.css';
-@import 'elements/popups.css';