@tacc/core-styles 2.22.6 → 2.23.1

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

@@ -103,8 +103,15 @@
 /* Structure */
 
 /* Elements */
-:--c-card > a:not(:--c-button) {
-    display: flex;
+
+:--c-card > a:not(:--c-button),
+:--c-card > p > a:not(:--c-button) {
+    display: inline-flex;
+    align-items: baseline;
+}
+/* I.e. one of multiple icon links within a p tag */
+:--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
+    margin-right: 1rem;
 }
 :--c-card > :is(:--action) {
     vertical-align: middle;
@@ -264,9 +271,11 @@
 
 :--c-card--image-top,
 :--c-card--image-bottom {
-    --image-height: auto;
     --global-space--pattern-pad: 15px;
 
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: repeat(10, min-content);
+
     /* Use extra columns to add horizontal padding */
     grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
     padding-inline: unset;
@@ -284,10 +293,6 @@
     grid-column-end: -1;
 }
 
-:--c-card--image-top {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: repeat(10, min-content) var(--image-height);
-}
 :--c-card--image-top > img {
     grid-row-start: 1;
     margin-bottom: var(--global-space--pattern-pad);
@@ -296,10 +301,6 @@
     margin-top: unset; /* to avoid combining margin with image */
 }
 
-:--c-card--image-bottom {
-    /* Repeat many times, because element count is unknown */
-    grid-template-rows: var(--image-height) repeat(10, min-content);
-}
 :--c-card--image-bottom > img {
     grid-row-end: -1;
     margin-top: var(--global-space--pattern-pad);
@@ -307,3 +308,20 @@
 :--c-card--image-bottom > p:last-of-type {
     margin-bottom: unset; /* to avoid combining margin with image */
 }
+
+/* Image: Contact Card */
+
+:--c-card--image-top h4 {
+    margin-bottom: 0.375em;
+}
+:--c-card--image-top h4 ~ p {
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+/* To not let card be wider than image */
+/* NOTE: For now, only applied where problem appears */
+/* HELP: Should this apply to all cards? How to demo it? */
+:--c-card--image-top:has(h4) {
+    max-width: fit-content;
+}

package/src/lib/_imports/components/cortal.icon.css

@@ -42,9 +42,12 @@ Styleguide Components.Cortal.Icon
 
 /* To tweak action icon appearance and layout */
 :--c-card > :is(:--action) > .icon:first-child,
-p > :is(:--action):only-child > .icon:first-child {
+p > :is(:--action) > .icon:first-child {
     margin-right: 10px;
     font-size: 1.2em;
+
+    position: relative;
+    top: 0.2em;
 }
 
 

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -9,8 +9,8 @@ Reference:
 
 Styleguide Components.DjangoCMS.Forms.Hacks
 */
-@custom-selector :--cms-logged-in   .cms-ready;
-@custom-selector :--cms-edit-mode   [class*="cms-structure-mode-"];
+@custom-selector :--django-cms-logged-in   .cms-ready;
+@custom-selector :--django-cms-edit-mode   [class*="cms-structure-mode-"];
 /* IDEA: import and extend `.c-message(...)` */
 /* IDEA: WP-280 use postcss mixin for message styles */
 /* @tacc/core-styles/src/lib/_imports/components/c-message.css */
@@ -33,7 +33,7 @@ Styleguide Components.DjangoCMS.Forms.Hacks
   font-size: var(--global-font-size--small);
 }
 /* To give error to admin */
-html:--cms-edit-mode :--problem-field > label::after {
+html:--django-cms-edit-mode :--problem-field > label::after {
   content: 'A multi checkbox field that is required is not well implemented. Do not require this field or replace it with multiple required Yes/No radio fields.';
 
   color: var(--global-color-danger--dark);
@@ -41,7 +41,7 @@ html:--cms-edit-mode :--problem-field > label::after {
   border-color: var(--global-color-danger--normal);
 }
 /* To give warning to user */
-html:not(:--cms-edit-mode) :--problem-field > label::after {
+html:not(:--django-cms-edit-mode) :--problem-field > label::after {
   content: 'This field is not well implemented. Select all boxes to bypass the error with this field.';
 
   color: var(--global-color-warning--dark);

package/src/lib/_imports/core-styles.cms.css

@@ -19,6 +19,7 @@
 @import url("./elements/sticky-footer.css");
 @import url("./elements/html-elements.cms.css");
 @import url("./elements/headings--cms.css");
+@import url("./elements/mailto-link.css");
 @import url("./elements/monospace.css");
 @import url("./elements/table.cms.css");
 
@@ -35,6 +36,7 @@
 @import url("./components/bootstrap.row.css");
 @import url("./components/c-content-block.css");
 @import url("./components/cortal.icon.css");
+@import url("./components/c-button--cms.css");
 @import url("./components/c-card.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
@@ -47,6 +49,7 @@
 @import url("./components/c-card--frontera-about-page.css");
 
 /* TRUMPS */
+@import url("./trumps/s-drop-cap.css");
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thick.css");
 @import url("./trumps/s-truncated-table.css");

package/src/lib/_imports/elements/irregular-link.css

@@ -0,0 +1,15 @@
+/* Allow making all hyperlinks "irregular" styles */
+/* FAQ: Only included by a project as client wants it */
+/* SEE: https://ecepalliance.org/ (<style id="site-css-links">) */
+
+@import url('../tools/x-link.css');
+
+a {
+  @extend .x-link--irregular;
+}
+a:hover {
+  @extend .x-link--irregular--hover;
+}
+a:active {
+  @extend .x-link--irregular--active;
+}

package/src/lib/_imports/elements/mailto-link.css

@@ -0,0 +1,9 @@
+/* Allow supporting `u-mailto-text-replace` on all hyperlinks */
+/* FAQ: Only included by a project as client wants it */
+/* SEE: https://ecepalliance.org/about/leadership/ */
+
+@import url("../tools/x-mailto-text-replace.css");
+
+a[data-user][data-domain] {
+  @extend %x-mailto-text-replace;
+}

package/src/lib/_imports/settings/color.css

@@ -127,8 +127,8 @@
 
   /* Link */
   /* DEPRECATED */
-  /* TODO: Rely on src/lib/_imports/generics/color.css to manage dark/light */
+  /* TODO: Rely on :--light-context and :--dark-context instead */
 
   --global-color-link-on-light--normal: var(--global-color-accent--normal);
-  --global-color-link-on-dark--normal: var(--global-color-accent--light);
+  --global-color-link-on-dark--normal: var(--global-color-accent--xxx-light);
 }

package/src/lib/_imports/tools/media-queries.css

@@ -15,6 +15,10 @@ Reference:
 
 Styleguide Tools.CustomMediaQueries.Breakpoints
 */
+@custom-media --xx-narrow-and-below (width < 380px);
+@custom-media --xx-narrow-and-above (width >= 380px);
+@custom-media --xx-narrow-to-x-narrow (380px <= width < 576px);
+
 @custom-media --x-narrow-and-below (width < 576px);
 @custom-media --x-narrow-and-above (width >= 576px);
 @custom-media --x-narrow-to-narrow (576px <= width < 768px);

package/src/lib/_imports/trumps/s-drop-cap/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: only CMS imports this

package/src/lib/_imports/trumps/s-drop-cap/readme.md

@@ -0,0 +1 @@
+Create drop-cap from first letter of first direct-child paragraph.

package/src/lib/_imports/trumps/s-drop-cap/s-drop-cap.hbs

@@ -0,0 +1,5 @@
+<div class="s-drop-cap">
+  <h1>Lorem Ipsum</h1>
+  <p>{{> @text-of-one-paragraph-long }}</p>
+  <p>{{> @text-of-one-paragraph-long }}</p>
+</div>

package/src/lib/_imports/trumps/s-drop-cap.css

@@ -0,0 +1,14 @@
+@supports (initial-letter: 3){
+  .s-drop-cap > p:first-of-type::first-letter {
+    padding-right: 1em;
+    initial-letter: 3;
+  }
+}
+
+@supports (-webkit-initial-letter: 3) {
+  .s-drop-cap > p:first-of-type::first-letter {
+    padding-right: 1em;
+    -webkit-initial-letter: 3;
+    font-family: Arial;
+  }
+}