Contents

@layer components {
  [data-coco][data-component="app-plan-card"] {
    @apply @container border border-gray-transparent-200 rounded-2xl bg-background-light-1 shadow-md max-w-lg relative;
    min-width: 192px;

    .plan-container {
      @apply px-5 py-6 space-y-5;
    }

    .plan-badge {
      @apply absolute top-0 left-5 -translate-y-1/2;
    }

    .plan-promo {
      @apply label-sm text-content-primary;
    }

    .plan-header {
      @apply space-y-1;
    }

    .plan-name {
      @apply branded-heading-4;
    }

    .plan-price {
      @apply subheading-4;
    }

    .plan-info * {
      @apply para-sm;
    }

    .plan-benefits {
      @apply space-y-4 py-5 border-t border-gray-300;
    }

    .plan-benefit {
      @apply label-sm flex;

      .coco-icon {
        @apply text-content-primary mr-1 mt-0.5;
      }
    }

    .plan-benefit-detail {
      @apply flex-grow;
    }

    &[data-active="true"] {
      @apply border-background-primary bg-background-primary-light;
    }

    @container (min-width: 230px) {
      .plan-container {
        @apply px-6 pt-8 space-y-6;
      }

      .plan-badge {
        @apply left-6;
      }

      .plan-name {
        @apply branded-heading-3;
      }

      .plan-benefits {
        @apply py-6;
      }
    }

    @container (min-width: 280px) {
      .plan-container {
        @apply px-10;
      }

      .plan-badge {
        @apply left-10;
      }

      .plan-badge {
        @apply badge-md;
      }

      .plan-name {
        @apply branded-heading-2;
      }

      .plan-price {
        @apply subheading-3;
      }

      .plan-info * {
        @apply para-md;
      }

      .plan-benefits {
        @apply space-y-5;
      }

      .plan-benefit {
        @apply label-md;
      }

      .coco-button {
        @apply button-md;
      }
    }
  }
}

Version data entries

5 entries across 5 versions & 1 rubygems

Version	Path
coveragebook_components-0.13.1	app/components/coco/app/plan_card/plan_card.css
coveragebook_components-0.13.0	app/components/coco/app/plan_card/plan_card.css
coveragebook_components-0.12.2	app/components/coco/app/elements/plan_card/plan_card.css
coveragebook_components-0.12.1	app/components/coco/app/elements/plan_card/plan_card.css
coveragebook_components-0.12.0	app/components/coco/app/elements/plan_card/plan_card.css