bulma-tailwind 0.1.0

package/src/elements/delete.css

@@ -0,0 +1,39 @@
+@layer components {
+  .delete {
+    @apply relative inline-flex items-center justify-center w-5 h-5 rounded-full bg-grey-dark text-white cursor-pointer transition-colors;
+  }
+  .delete::before,
+  .delete::after {
+    content: '';
+    @apply absolute w-3 h-0.5 bg-white rounded-full;
+    transform: rotate(45deg);
+  }
+  .delete::after {
+    transform: rotate(-45deg);
+  }
+  .delete:hover {
+    @apply bg-danger;
+  }
+  /* Tamaños */
+  .delete.is-small {
+    @apply w-4 h-4;
+  }
+  .delete.is-medium {
+    @apply w-6 h-6;
+  }
+  .delete.is-large {
+    @apply w-8 h-8;
+  }
+  .delete::before,
+  .delete::after {
+    @apply w-2 h-0.5;
+  }
+  .delete.is-medium::before,
+  .delete.is-medium::after {
+    @apply w-3.5;
+  }
+  .delete.is-large::before,
+  .delete.is-large::after {
+    @apply w-5;
+  }
+}

package/src/elements/icon.css

@@ -0,0 +1,18 @@
+@layer components {
+  .icon {
+    @apply inline-flex items-center justify-center w-6 h-6;
+  }
+  .icon.is-small {
+    @apply w-4 h-4;
+  }
+  .icon.is-medium {
+    @apply w-8 h-8;
+  }
+  .icon.is-large {
+    @apply w-12 h-12;
+  }
+  /* Para usar con texto */
+  .icon-text {
+    @apply inline-flex items-center gap-2;
+  }
+}

package/src/elements/image.css

@@ -0,0 +1,46 @@
+@layer components {
+  .image {
+    @apply block relative;
+  }
+  .image img {
+    @apply block w-full h-auto;
+  }
+  /* Tamaños fijos (cuadrados) */
+  .image.is-16x16 { @apply w-4 h-4; }
+  .image.is-24x24 { @apply w-6 h-6; }
+  .image.is-32x32 { @apply w-8 h-8; }
+  .image.is-48x48 { @apply w-12 h-12; }
+  .image.is-64x64 { @apply w-16 h-16; }
+  .image.is-96x96 { @apply w-24 h-24; }
+  .image.is-128x128 { @apply w-32 h-32; }
+  
+  /* Ratios (padding-bottom trick) */
+  .image.is-square,
+  .image.is-1by1 {
+    @apply pt-[100%];
+  }
+  .image.is-4by3 {
+    @apply pt-[75%];
+  }
+  .image.is-3by2 {
+    @apply pt-[66.6667%];
+  }
+  .image.is-16by9 {
+    @apply pt-[56.25%];
+  }
+  .image.is-2by1 {
+    @apply pt-[50%];
+  }
+  .image.is-3by1 {
+    @apply pt-[33.3333%];
+  }
+  .image.is-square img,
+  .image.is-1by1 img,
+  .image.is-4by3 img,
+  .image.is-3by2 img,
+  .image.is-16by9 img,
+  .image.is-2by1 img,
+  .image.is-3by1 img {
+    @apply absolute inset-0 w-full h-full object-cover;
+  }
+}

package/src/elements/notification.css

@@ -0,0 +1,98 @@
+@layer components {
+  .notification {
+    @apply p-4 rounded-lg text-dark w-full;
+    background-color: var(--color-grey-light);
+  }
+  .notification:not(:last-child) {
+    @apply mb-4;
+  }
+
+  /* Colores sólidos */
+  .notification.is-primary {
+    background-color: var(--color-primary);
+    color: white;
+  }
+  .notification.is-link {
+    background-color: var(--color-link);
+    color: white;
+  }
+  .notification.is-info {
+    background-color: var(--color-info);
+    color: white;
+  }
+  .notification.is-success {
+    background-color: var(--color-success);
+    color: white;
+  }
+  .notification.is-warning {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .notification.is-danger {
+    background-color: var(--color-danger);
+    color: white;
+  }
+  .notification.is-light {
+    background-color: var(--color-light);
+    color: var(--color-dark);
+  }
+  .notification.is-dark {
+    background-color: var(--color-dark);
+    color: white;
+  }
+  .notification.is-white {
+    background-color: white;
+    color: var(--color-dark);
+    border: 1px solid var(--color-grey);
+  }
+  .notification.is-black {
+    background-color: var(--color-black);
+    color: white;
+  }
+
+  /* Variantes claras (light) */
+  .notification.is-primary.is-light {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, white);
+    color: var(--color-primary);
+  }
+  .notification.is-link.is-light {
+    background-color: color-mix(in srgb, var(--color-link) 10%, white);
+    color: var(--color-link);
+  }
+  .notification.is-info.is-light {
+    background-color: color-mix(in srgb, var(--color-info) 10%, white);
+    color: var(--color-info);
+  }
+  .notification.is-success.is-light {
+    background-color: color-mix(in srgb, var(--color-success) 10%, white);
+    color: var(--color-success);
+  }
+  .notification.is-warning.is-light {
+    background-color: color-mix(in srgb, var(--color-warning) 10%, white);
+    color: var(--color-warning);
+  }
+  .notification.is-danger.is-light {
+    background-color: color-mix(in srgb, var(--color-danger) 10%, white);
+    color: var(--color-danger);
+  }
+  .notification.is-dark.is-light {
+    background-color: color-mix(in srgb, var(--color-dark) 10%, white);
+    color: var(--color-dark);
+  }
+
+  /* Tamaños */
+  .notification.is-small {
+    @apply text-sm py-2 px-3;
+  }
+  .notification.is-medium {
+    @apply text-base py-5 px-6;
+  }
+  .notification.is-large {
+    @apply text-lg py-6 px-8;
+  }
+
+  /* Botón delete dentro de notificación */
+  .notification .delete {
+    @apply float-right;
+  }
+}

package/src/elements/progress.css

@@ -0,0 +1,59 @@
+@layer components {
+  progress {
+    @apply appearance-none block w-full h-3 rounded-full overflow-hidden;
+  }
+  progress::-webkit-progress-bar {
+    @apply bg-grey-light rounded-full;
+  }
+  progress::-webkit-progress-value {
+    @apply rounded-full transition-all;
+    background-color: currentColor;
+  }
+  progress::-moz-progress-bar {
+    @apply rounded-full transition-all;
+    background-color: currentColor;
+  }
+
+  /* Tamaños */
+  progress.is-small {
+    @apply h-1.5;
+  }
+  progress.is-medium {
+    @apply h-4;
+  }
+  progress.is-large {
+    @apply h-6;
+  }
+
+  /* Colores - asignamos el color al elemento progress, los pseudoelementos usan currentColor */
+  progress.is-primary {
+    color: var(--color-primary);
+  }
+  progress.is-link {
+    color: var(--color-link);
+  }
+  progress.is-info {
+    color: var(--color-info);
+  }
+  progress.is-success {
+    color: var(--color-success);
+  }
+  progress.is-warning {
+    color: var(--color-warning);
+  }
+  progress.is-danger {
+    color: var(--color-danger);
+  }
+  progress.is-dark {
+    color: var(--color-dark);
+  }
+  progress.is-light {
+    color: var(--color-light);
+  }
+  progress.is-white {
+    color: var(--color-white);
+  }
+  progress.is-black {
+    color: var(--color-black);
+  }
+}

package/src/elements/table.css

@@ -0,0 +1,129 @@
+@layer components {
+  /* Contenedor responsivo (scroll horizontal en móviles) */
+  .table-container {
+    @apply w-full overflow-x-auto;
+  }
+
+  /* Tabla base */
+  .table {
+    @apply w-full bg-white border-collapse;
+  }
+  .table td,
+  .table th {
+    @apply border border-grey px-3 py-2 text-left align-top;
+  }
+  .table th {
+    @apply font-bold;
+  }
+  .table thead td,
+  .table thead th {
+    @apply border-b-2 border-grey-dark;
+  }
+  .table tfoot td,
+  .table tfoot th {
+    @apply border-t-2 border-grey-dark;
+  }
+
+  /* Modificadores */
+  .table.is-striped tbody tr:nth-child(even) {
+    @apply bg-grey-light/50;
+  }
+  .table.is-hoverable tbody tr:hover {
+    @apply bg-grey-light;
+  }
+  .table.is-bordered td,
+  .table.is-bordered th {
+    @apply border-2 border-grey;
+  }
+  .table.is-narrow td,
+  .table.is-narrow th {
+    @apply px-2 py-1;
+  }
+  .table.is-fullwidth {
+    @apply w-full;
+  }
+
+  /* Colores de fondo para filas o celdas (contextuales) */
+  .table .is-primary {
+    background-color: var(--color-primary);
+    color: white;
+  }
+  .table .is-link {
+    background-color: var(--color-link);
+    color: white;
+  }
+  .table .is-info {
+    background-color: var(--color-info);
+    color: white;
+  }
+  .table .is-success {
+    background-color: var(--color-success);
+    color: white;
+  }
+  .table .is-warning {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .table .is-danger {
+    background-color: var(--color-danger);
+    color: white;
+  }
+  .table .is-light {
+    background-color: var(--color-light);
+    color: var(--color-dark);
+  }
+  .table .is-dark {
+    background-color: var(--color-dark);
+    color: white;
+  }
+
+  /* Filas completas con color (aplica a tr.is-primary, etc.) */
+  .table tr.is-primary,
+  .table tr.is-link,
+  .table tr.is-info,
+  .table tr.is-success,
+  .table tr.is-warning,
+  .table tr.is-danger,
+  .table tr.is-light,
+  .table tr.is-dark {
+    color: white;
+  }
+  .table tr.is-warning {
+    color: var(--color-dark);
+  }
+  .table tr.is-light {
+    color: var(--color-dark);
+  }
+  .table tr.is-primary td,
+  .table tr.is-primary th {
+    background-color: var(--color-primary);
+  }
+  .table tr.is-link td,
+  .table tr.is-link th {
+    background-color: var(--color-link);
+  }
+  .table tr.is-info td,
+  .table tr.is-info th {
+    background-color: var(--color-info);
+  }
+  .table tr.is-success td,
+  .table tr.is-success th {
+    background-color: var(--color-success);
+  }
+  .table tr.is-warning td,
+  .table tr.is-warning th {
+    background-color: var(--color-warning);
+  }
+  .table tr.is-danger td,
+  .table tr.is-danger th {
+    background-color: var(--color-danger);
+  }
+  .table tr.is-light td,
+  .table tr.is-light th {
+    background-color: var(--color-light);
+  }
+  .table tr.is-dark td,
+  .table tr.is-dark th {
+    background-color: var(--color-dark);
+  }
+}

package/src/elements/tag.css

@@ -0,0 +1,120 @@
+@layer components {
+  .tag {
+    @apply inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm font-medium bg-grey-light text-dark;
+  }
+  .tag:not(:last-child) {
+    @apply mr-1;
+  }
+
+  /* Colores sólidos */
+  .tag.is-primary {
+    background-color: var(--color-primary);
+    color: white;
+  }
+  .tag.is-link {
+    background-color: var(--color-link);
+    color: white;
+  }
+  .tag.is-info {
+    background-color: var(--color-info);
+    color: white;
+  }
+  .tag.is-success {
+    background-color: var(--color-success);
+    color: white;
+  }
+  .tag.is-warning {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .tag.is-danger {
+    background-color: var(--color-danger);
+    color: white;
+  }
+  .tag.is-dark {
+    background-color: var(--color-dark);
+    color: white;
+  }
+  .tag.is-light {
+    background-color: var(--color-light);
+    color: var(--color-dark);
+  }
+  .tag.is-white {
+    background-color: white;
+    color: var(--color-dark);
+    border: 1px solid var(--color-grey);
+  }
+  .tag.is-black {
+    background-color: var(--color-black);
+    color: white;
+  }
+
+  /* Variantes claras (light) */
+  .tag.is-primary.is-light {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, white);
+    color: var(--color-primary);
+  }
+  .tag.is-link.is-light {
+    background-color: color-mix(in srgb, var(--color-link) 10%, white);
+    color: var(--color-link);
+  }
+  .tag.is-info.is-light {
+    background-color: color-mix(in srgb, var(--color-info) 10%, white);
+    color: var(--color-info);
+  }
+  .tag.is-success.is-light {
+    background-color: color-mix(in srgb, var(--color-success) 10%, white);
+    color: var(--color-success);
+  }
+  .tag.is-warning.is-light {
+    background-color: color-mix(in srgb, var(--color-warning) 10%, white);
+    color: var(--color-warning);
+  }
+  .tag.is-danger.is-light {
+    background-color: color-mix(in srgb, var(--color-danger) 10%, white);
+    color: var(--color-danger);
+  }
+  .tag.is-dark.is-light {
+    background-color: color-mix(in srgb, var(--color-dark) 10%, white);
+    color: var(--color-dark);
+  }
+
+  /* Tamaños */
+  .tag.is-small {
+    @apply text-xs px-2 py-0.5 rounded;
+  }
+  .tag.is-medium {
+    @apply text-base px-4 py-1.5 rounded-md;
+  }
+  .tag.is-large {
+    @apply text-lg px-5 py-2 rounded-lg;
+  }
+
+  /* Tag con botón eliminar */
+  .tag .delete {
+    @apply ml-1 w-3 h-3;
+  }
+  .tag.is-small .delete {
+    @apply w-2 h-2;
+  }
+  .tag.is-medium .delete {
+    @apply w-4 h-4;
+  }
+  .tag.is-large .delete {
+    @apply w-5 h-5;
+  }
+
+  /* Grupo de tags */
+  .tags {
+    @apply flex flex-wrap gap-2;
+  }
+  .tags.has-addons {
+    @apply gap-0;
+  }
+  .tags.has-addons .tag:not(:first-child) {
+    @apply rounded-l-none;
+  }
+  .tags.has-addons .tag:not(:last-child) {
+    @apply rounded-r-none;
+  }
+}

package/src/elements/title.css

@@ -0,0 +1,21 @@
+@layer components {
+  .title {
+    @apply font-bold leading-tight text-dark;
+  }
+  .title.is-1 { @apply text-4xl; }
+  .title.is-2 { @apply text-3xl; }
+  .title.is-3 { @apply text-2xl; }
+  .title.is-4 { @apply text-xl; }
+  .title.is-5 { @apply text-lg; }
+  .title.is-6 { @apply text-base; }
+  
+  .subtitle {
+    @apply text-grey-dark font-normal leading-normal;
+  }
+  .subtitle.is-1 { @apply text-3xl; }
+  .subtitle.is-2 { @apply text-2xl; }
+  .subtitle.is-3 { @apply text-xl; }
+  .subtitle.is-4 { @apply text-lg; }
+  .subtitle.is-5 { @apply text-base; }
+  .subtitle.is-6 { @apply text-sm; }
+}