@tacc/core-styles 2.30.0 → 2.31.0

package/src/lib/_imports/tools/x-message.css

@@ -1,38 +1,181 @@
+@import url('../tools/x-link.css');
+@import url("../components/c-button.selectors.css");
+
+
 /* Elements */
 
+/* To prevent excess space at top and bottom of message */
+
 @define-mixin message {
-  /* To prevent excess space at top and bottom of message */
-  & > *:first-child { margin-top: 0; }
-  & > *:last-child { margin-bottom: 0; }
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
 
 
 /* Modifiers */
 
+/* Modifiers: Scope-Inline & Type-* */
+
+@define-mixin message--scope-inline {
+  & > * {
+    display: inline;
+  }
+
+  /* IMPORTANT: Inline message has icon by default */
+  @mixin message--has-icon;
+  &::before {
+    margin-right: 0.5ch;
+
+    color: var(--icon-color);
+  }
+}
+@define-mixin message--type-info---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-success---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-warning---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-error---message--scope-inline {
+  color: var(--global-color-danger--dark);
+}
+@define-mixin message--type-extra---message--scope-inline {
+  /* no common styles */
+}
+
+/* Modifiers: Scope-Section & Type-* */
+
+@define-mixin message--scope-section {
+  border-width: var(--global-border-width--normal);
+  border-style: solid;
+
+  padding-block: 8px;
+  padding-inline: 12px;
+}
 @define-mixin message--type-info---message--scope-section {
   background-color: var(--global-color-info--x-light);
   border-color: var(--global-color-info--normal);
 }
 @define-mixin message--type-success---message--scope-section {
   background-color: var(--global-color-success--x-light);
-  border-color: var(--global-color-success--normal);
+  border-color: var(--global-color-success--x-dark);
 }
 @define-mixin message--type-warning---message--scope-section {
   background-color: var(--global-color-warning--x-light);
-  border-color: var(--global-color-warning--normal);
+  border-color: var(--global-color-warning--dark);
 }
 @define-mixin message--type-error---message--scope-section {
   background-color: var(--global-color-danger--x-light);
-  border-color: var(--global-color-danger--normal);
+  border-color: var(--global-color-danger--dark);
 }
-@define-mixin message--type-tip---message--scope-section {
+@define-mixin message--type-extra---message--scope-section {
   background-color: var(--global-color-extra--x-light);
   border-color: var(--global-color-extra--normal);
 }
 
+/* Modifiers: Scope-Global */
+
 @define-mixin message--scope-global {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--secondary);
   border-color: var(--global-color-primary--dark);
+
+  padding-block: 8px;
+  padding-inline: 12px;
+
+  border-width: 0;
+  text-align: center;
+
+  /* To avoid clash of link color with message color */
+  & a,
+  & :--c-button--as-link {
+    color: inherit !important; /* override :hover and :active */
+  }
+  /* To distinguish link from message text */
+  & a,
+  & :--c-button--as-link {
+    @mixin link--irregular;
+  }
+  & a:hover,
+  & :--c-button--as-link:hover {
+    @mixin link--irregular--hover;
+  }
+  & a:active,
+  & :--c-button--as-link:active {
+    @mixin link--irregular--active;
+  }
+}
+
+/* Modifiers: Icon */
+
+@define-mixin message--has-icon {
+  &::before {
+    font-family: var(--icon);
+  }
+}
+
+/* IMPORTANT: Inline message has icon by default */
+
+/* IMPORTANT: Section message NO icon by default */
+@define-mixin message--has-icon---message--scope-section {
+  --icon-block-width: 32px;
+  --icon-size: 16px;
+
+  position: relative;
+  border-left-width: var(--icon-block-width);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--icon-block-width);
+    left: calc( -1 * var(--icon-block-width));
+    margin-left: var(--global-border-width--normal);
+
+    color: var(--global-color-primary--xx-light);
+    font-size: var(--icon-size);
+
+    /* To take up left column */
+    grid-row: 1 / span 99; /* 99 is for arbitrary implicit row count */
+
+    /* To center content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* NOTE: Client is expected to overwrite these */
+@define-mixin message--has-icon---message--type-info {
+  --icon-color: var(--global-color-info--normal);
+
+  &::before { content: "✎"; }
+}
+@define-mixin message--has-icon---message--type-success {
+  --icon-color: var(--global-color-success--x-dark);
+
+  &::before { content: "✓"; }
+}
+@define-mixin message--has-icon---message--type-warning {
+  --icon-color: var(--global-color-warning--dark);
+
+  &::before { content: "⚠"; }
+}
+@define-mixin message--has-icon---message--type-error {
+  --icon-color: var(--global-color-danger--dark);
+
+  &::before { content: "⚠"; }
+}
+@define-mixin message--has-icon---message--type-extra {
+  --icon-color: var(--global-color-extra--normal);
+
+  &::before { content: "✎"; }
 }

package/src/lib/_imports/tools/x-message.demo.css

@@ -7,6 +7,28 @@
     @mixin message;
   }
 
+  .x-message--scope-inline {
+    @mixin message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-info {
+    @mixin message--type-info---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-success {
+    @mixin message--type-success---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-warning {
+    @mixin message--type-warning---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-error {
+    @mixin message--type-error---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-extra {
+    @mixin message--type-extra---message--scope-inline;
+  }
+
+  .x-message--scope-section {
+    @mixin message--scope-section;
+  }
   .x-message--scope-section.x-message--type-info {
     @mixin message--type-info---message--scope-section;
   }
@@ -19,11 +41,36 @@
   .x-message--scope-section.x-message--type-error {
     @mixin message--type-error---message--scope-section;
   }
-  .x-message--scope-section.x-message--type-tip {
-    @mixin message--type-tip---message--scope-section;
+  .x-message--scope-section.x-message--type-extra {
+    @mixin message--type-extra---message--scope-section;
   }
 
   .x-message--scope-global {
     @mixin message--scope-global;
   }
+
+  .x-message--has-icon.x-message--scope-section {
+    @mixin message--has-icon;
+    @mixin message--has-icon---message--scope-section;
+  }
+  .x-message--has-icon.x-message--type-info,
+  .x-message--scope-inline.x-message--type-info {
+    @mixin message--has-icon---message--type-info;
+  }
+  .x-message--has-icon.x-message--type-success,
+  .x-message--scope-inline.x-message--type-success {
+    @mixin message--has-icon---message--type-success;
+  }
+  .x-message--has-icon.x-message--type-warning,
+  .x-message--scope-inline.x-message--type-warning {
+    @mixin message--has-icon---message--type-warning;
+  }
+  .x-message--has-icon.x-message--type-error,
+  .x-message--scope-inline.x-message--type-error {
+    @mixin message--has-icon---message--type-error;
+  }
+  .x-message--has-icon.x-message--type-extra,
+  .x-message--scope-inline.x-message--type-extra {
+    @mixin message--has-icon---message--type-extra;
+  }
 }

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

@@ -1,5 +1,6 @@
-<div class="s-drop-cap">
-  <h1>Lorem Ipsum</h1>
-  <p>{{> @text-of-one-paragraph-long }}</p>
-  <p>{{> @text-of-one-paragraph-long }}</p>
-</div>
+<dl>
+  <dt>Used on Element to Drop-Cap</dt>
+  <dd><p class="s-drop-cap">The first letter of this sentence should be a drop-cap, because this paragraph has a <code>s-drop-cap</code> class. {{> @text-of-one-paragraph-short }}</p></dd>
+  <dt>Used on Wrapper of Element to Drop-Cap</code></dt>
+  <dd class="s-drop-cap"><p>The first letter of this sentence should be a drop-cap, because this paragraph is the first within an element that has a <code>s-drop-cap</code>. {{> @text-of-one-paragraph-short }}</p></dd>
+</dl>

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

@@ -1,14 +1,6 @@
-@supports (initial-letter: 3){
-  .s-drop-cap > p:first-of-type::first-letter {
-    padding-right: 1em;
-    initial-letter: 3;
-  }
-}
+@import url("../tools/x-drop-cap.css");
 
-@supports (-webkit-initial-letter: 3) {
-  .s-drop-cap > p:first-of-type::first-letter {
-    padding-right: 1em;
-    -webkit-initial-letter: 3;
-    font-family: Arial;
-  }
+.s-drop-cap::first-letter,
+.s-drop-cap > p:first-of-type::first-letter {
+  @mixin drop-cap;
 }