@tacc/core-styles 2.40.2 → 2.41.1

package/src/lib/_imports/components/c-card/c-card.demo.images.css

@@ -1,30 +1,49 @@
 /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
 
-/* To allow the image max-height to not be 100% for the demo */
-.o-grid img {
-    max-height: unset;
-}
-
 /* Rid margin-bottom on last section */
 .o-section>:last-child {
     margin-bottom: var(--global-space--bootstrap-gap);
 }
 
+/* To make a title inside a section… */
+.o-section > h2 {
+  /* …have "better" gap above and below */
+  margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
+}
+
 /* create a two column grid (cleaner look) */
-.s-image-grid {
-    --max-cols: 2;
+.c-card-list {
+    grid-template-columns: 1fr 1fr;
+}
+
+/* To make a title inside a card list… */
+.c-card-list > h3 {
+  /* …span all columns */
+  grid-column: 1/-1;
+
+  /* …have "better" gap above and below */
+  margin-top: 40px;
+  margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
+}
+
+/* So hover outline shrink-wraps to card */
+.c-card-list > .c-card {
+    height: min-content;
 }
 
-/* get rid of margin for inner-sections */
-section > section {
-    margin: unset;
+/* To show a card must not be used (even if it works) */
+.c-card.demo-disabled * {
+    opacity: 0.5;
 }
+.c-card.demo-disabled { position: relative; }
+.c-card.demo-disabled::after {
+    content: "Card like this must not be linked. Design does not approve of such a configuration.";
+    padding: 1rem;
+    position: absolute;
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
 
-/* Image: Contact Card */
-/* To overwrite `.s-image-grid > *` specificity */
-/* WARNING: This may be a specificty bug... */
-/* NOTE: Should `s-image-grid` be `o-image-grid`,
-         so `c-card` has greater specificity? */
-.c-card--image-top:has(h4) {
-    max-width: fit-content;
+    background-color: black;
+    color: white;
 }

package/src/lib/_imports/components/c-card/config.yml

@@ -15,9 +15,6 @@ variants:
   - name: standard-3
     status: backup
   - name: images
-    context:
-      supportStyles:
-        - ../../assets/trumps/s-image-grid.css
   - name: docs
     context:
       shouldLoadDocs: true

package/src/lib/_imports/components/c-card-list.css

@@ -6,7 +6,7 @@ ul.c-card-list {
 }
 .c-card-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: var(--global-space--bootstrap-gap);
 }
 
@@ -16,3 +16,12 @@ ul.c-card-list {
 .c-card-list [class*="card--"] {
     margin-bottom: unset;
 }
+
+/* to prevent card images from overflowing */
+.c-card-list [class*="card--"] {
+    & > img,
+    & > a > img,
+    & > a:has(>img) {
+        max-width: 100%;
+    }
+}

package/src/lib/_imports/components/c-card.css

@@ -135,6 +135,17 @@
     margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
     margin-right: var(--global-space--pattern-pad);
 }
+/* So text of card links does not all look link a link */
+a:--c-card {
+    color: inherit;
+    text-decoration: none;
+}
+a:--c-card:hover {
+    --border-width: var(--global-border-width--thick);
+
+    outline-offset: calc(-1* var(--border-width));
+    outline: var(--border-width) solid var(--global-color-accent--normal);
+}
 
 /* Block */
 :--c-card {

package/src/lib/_imports/components/c-card.selectors.css

@@ -53,6 +53,8 @@
 
 @custom-selector :--c-card__image
     :--c-card img,
-    :--c-card__image-link;
+    :--c-card__image-link,
+    .embed-responsive,
+    .ratio; /* Bootstrap 4 (embed), Bootstrap 5 (ratio) */
 @custom-selector :--c-card__image-link
     :--c-card a:has(> img);

package/src/lib/_imports/elements/links.css

@@ -1,16 +1,17 @@
 @import url('../components/c-button.selectors.css');
+@import url('../components/c-card.selectors.css');
 @import url("../tools/selectors.css");
 @import url('../tools/x-link.css');
 
-a:where(:not(:--c-button)) {
+a:where(:not(:--c-button, :--c-card)) {
   @mixin link;
 }
 a:where(:not([href])) {
   @mixin link--disabled;
 }
-a:where(:not(:--c-button)):hover {
+a:where(:not(:--c-button, :--c-card)):hover {
   @mixin link--hover;
 }
-a:where(:not(:--c-button)):active {
+a:where(:not(:--c-button, :--c-card)):active {
   @mixin link--active;
 }