Contents

@layer components {
  [data-coco].coco-button {
    @apply inline-flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none;
    @apply outline-none focus-visible:outline-0;
    width: min-content;

    .button-element {
      @apply inline-flex w-full no-underline;
    }

    .button-inner {
      @apply inline-flex items-center text-center mx-auto gap-2;
      width: fit-content;
    }

    .button-content {
      @apply whitespace-nowrap relative leading-none inline-flex items-center order-2;
    }

    .button-state-content {
      @apply contents;
    }

    .button-icon {
      @apply inline-flex items-center order-1;
    }

    .button-dropdown {
      @apply contents rounded-md;
    }

    .button-toggle {
      @apply order-3;
    }

    /* disabled */

    &[data-disabled="true"] .button-element {
      @apply cursor-not-allowed;
    }

    /* loading */

    &[data-state="loading"] > .button-element .button-icon {
      @apply animate-spin;
    }

    /* Fit */

    &[data-fit="full"] {
      @apply w-full;
    }

    /* Icons */

    &[data-icon-position="end"] > .button-element {
      .button-content {
        @apply order-1;
      }

      .button-icon {
        @apply order-2;
      }

      .button-toggle {
        @apply order-3;
      }
    }

    &.with-icon[data-collapsed="true"] > .button-element {
      .button-content {
        display: none;
      }
    }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
coveragebook_components-0.5.3	app/components/coco/base/button/button.css
coveragebook_components-0.5.2	app/components/coco/base/button/button.css