@tacc/core-styles 0.11.0 → 2.0.0

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

@@ -0,0 +1,176 @@
+@import url("../components/c-button.css");
+@import url("../components/c-message.css");
+@import url('../tools/x-link.css');
+
+
+
+/* Title & Description */
+
+.c-form__desc {
+  margin-block: 25px;
+}
+
+
+
+/* Help Text */
+
+.c-form__help {
+  font-size: var(--global-font-size--small);
+  font-style: italic;
+}
+:not(
+  ul, /* FAQ: Lists already have margin-bottom */
+  label /* FAQ: Labels already have margin-bottom */
+) + .c-form__help {
+    margin-top: 0.3em; /* mimic Bootstrap _reboot.css label margin-bottom */
+}
+/* To prevent help text font-style from affecting any tags */
+/* FAQ: Help text can contain inline elements like <samp> */
+/* FAQ: Help text can be (ab)used to add headings between form fields */
+.c-form__help > :not(details, a, samp) {
+  font-style: initial;
+}
+
+
+
+/* Fields */
+/* TODO: Make fieldset-child <div>s be opt-out automatic field-wrappers.
+    0. [ ] Define `fieldset > div { @extend .c-form__field; }` ruleset.
+    1. [ ] Create `.c-form--no-auto-wrappers`.
+    2. [ ] Define `.c-form:not(.c-form--no-auto-wrappers) fieldset > div` rules.
+*/
+
+.c-form__field {
+  margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
+}
+
+.c-form__field:not(.has-type-check) {
+  display: flex;
+  flex-direction: column;
+}
+.c-form__field:not(.has-type-check) > .c-form__errors {
+  order: 1; /* i.e. move to end */
+}
+
+.c-form__field.has-type-check {
+  display: inline-grid;
+
+  column-gap: 0.5em;
+  align-items: center;
+  grid-template-columns: min-content auto; /* shrink input, let label extend */
+  grid-template-areas:
+    'error _____'
+    'input label'
+    'notes notes';
+}
+.c-form__field.has-type-check .c-form__errors { grid-area: error; }
+.c-form__field.has-type-check input           { grid-area: input; }
+.c-form__field.has-type-check label           { grid-area: label; }
+.c-form__field.has-type-check .c-form__help   { grid-area: notes; }
+.c-form__field.has-type-check label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+.c-form__field > ul:where(:not(.c-form__errors)) label {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  font-weight: revert; /* undo html-elements.cms.css */
+}
+.c-form__field > ul:where(:not(.c-form__errors)) li:last-child label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+/* Field: Required, Asterisk, Important */
+
+.c-form__field .c-form__star {
+  margin-left: 0.5em;
+}
+.c-form__field.has-required .c-form__star {
+  color: var(--global-color-danger--dark);
+}
+.c-form__field:not(.has-required) .c-form__star
+/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
+  color: var(--global-color-warning--dark);
+}
+/* To replace asterisk character with text */
+.c-form__field .c-form__star {
+  width: 0;
+  display: inline-block;
+  visibility: hidden;
+  line-height: 0;
+}
+.c-form__field .c-form__star::after {
+  visibility: visible;
+  line-height: initial;
+}
+.c-form__field.has-required .c-form__star::after {
+  content: '(required)';
+}
+.c-form__field:not(.has-required) .c-form__star::after
+/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
+  content: '(important)';
+}
+
+
+
+/* Errors */
+
+.c-form__field ul.c-form__errors {
+  margin-top: 1rem; /* mimic ul margin-bottom */
+  margin-bottom: 0; /* overwrite ul margin-bottom */
+}
+
+ul.c-form__errors {
+  list-style: none;
+  padding-inline: 0;
+}
+
+.c-form > .c-form__errors {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-section;
+  @extend .c-message--type-error.c-message--scope-section;
+}
+.c-form__field .c-form__errors li {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-inline;
+}
+
+
+
+/* Lists */
+
+.c-form__field > ul:where(:not(.c-form__errors)) {
+  list-style: none;
+
+  padding-left: 0;
+}
+
+
+
+/* Buttons */
+
+.c-form__buttons {
+  margin-top: 35px;
+}
+
+/* To style obvious buttons that neglect class */
+.c-form__buttons button[type="submit"] {
+  @extend .c-button;
+  @extend .c-button--primary;
+}
+
+.c-form__button {
+  @extend .c-button;
+}
+.c-form__button[type="submit"] {
+  @extend .c-button--primary;
+}
+.c-form__button:where(:not([type="submit"], [type="reset"])) {
+  @extend .c-button--secondary;
+}
+.c-form__button[type="reset"] {
+  @extend .c-button--tertiary;
+}

package/src/lib/_imports/components/c-message/_c-message--classes.hbs

@@ -0,0 +1,5 @@
+| Class (Std.)             | Class (Alt.)             | Usage
+| - | - | - |
+| `.c-message`             | ⊘                        | base class required only for `c-message--` modifiers
+| `.c-message--type-...`   | `.message--...`          | express reason for message
+| `.c-message--scope-...`  | `.message--...`          | define context of message

package/src/lib/_imports/components/c-message/_c-message--intro.hbs

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

package/src/lib/_imports/components/c-message/_c-message--single.hbs

@@ -0,0 +1,3 @@
+<div class="c-message c-message--type-{{ type }} c-message--scope-{{ scope }}">
+  <p><strong>{{ title }}:</strong> {{{ content }}}</p>
+</div>

package/src/lib/_imports/components/c-message/c-message--scope.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each scopes}}
+  <dt>Scope <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @c-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="info" title="Info" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="warning" title="Warning" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="error" title="Error" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-message/c-message--scope.readme.md

@@ -0,0 +1,14 @@
+{{render '@c-message--intro'}}
+
+| Class (Std.)                | Class (Alt.)                | Context
+| - | - | - |
+| `.c-message--scope-inline`  | `.message--inline`          | inline text
+| `.c-message--scope-section` | `.message--section`         | wide block
+| `.c-message--scope-app`*    | `.message--app`*            | floating block*
+| `.c-message--scope-section` | `.message--section`         | site-wide banner
+
+<small>* Not implemented officially yet. Exists in Core Portal as a "toast notification".</small>
+
+---
+
+{{render '@c-message--classes'}}

package/src/lib/_imports/components/c-message/c-message--type.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each types }}
+  <dt>Type <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @c-message--single type=this.name
+        scope="inline" title="Inline" content=this.content}}
+    {{> @c-message--single type=this.name
+        scope="section" title="Section" content=this.content}}
+    <!--{{> @c-message--single type=this.name
+        scope="app" title="App" content=this.content}}-->
+    {{> @c-message--single type=this.name
+        scope="global" title="Global" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-message/c-message--type.readme.md

@@ -0,0 +1,12 @@
+{{render '@c-message--intro'}}
+
+| Class (Std.)               | Class (Alt.)             | Reason
+| - | - | - |
+| `.c-message--type-success` | `.message--success`      | action completed
+| `.c-message--type-info`    | `.message--info`         | just info, no problem
+| `.c-message--type-warning` | `.message--warning`      | event could prevent function
+| `.c-message--type-error`   | `.message--error`        | event does prevent function
+
+---
+
+{{render '@c-message--classes'}}

package/src/lib/_imports/components/c-message/c-message.hbs

@@ -0,0 +1 @@
+<!-- SEE: c-message--type(-…), c-message--scope(-…) -->

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

@@ -0,0 +1,35 @@
+status: wip
+context:
+  types:
+    - name: success
+      content: Notify user of a successful event.
+    - name: info
+      content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: warning
+      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
+    - name: error
+      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
+  scopes:
+    - name: inline
+      content: 	An inline message.
+    - name: section
+      content: A wide block message.
+    # - name: app
+    #   content: A floating block message.
+    - name: global
+      content: A site-wide banner message.
+variants:
+  - name: default
+    hidden: true
+  - name: type
+  - name: type-portal
+    label: Type (Portal)
+    view: 'c-message--type.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: scope
+  - name: scope-portal
+    label: Scope (Portal)
+    view: 'c-message--scope.hbs'
+    context:
+      shouldLoadPortal: true

package/src/lib/_imports/components/c-message/demo.css

@@ -0,0 +1,12 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.c-message {
+  margin-top: 1em;
+}
+
+dt {
+  text-transform: capitalize;
+}
+dd {
+  margin-block: 2em;
+}

package/src/lib/_imports/components/c-message/readme.md

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

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

@@ -1,53 +1,119 @@
-/*
-Message
+@import url('../tools/x-link.css');
 
-Inform user about a temporary status.
 
-- .c-message--info - neither positive nor negative
-- .c-message--success - a positive status
-- .c-message--warning - a minor negative status
-- .c-message--danger - a major negative status
 
-Reference:
-- https://getbootstrap.com/docs/4.0/components/alerts/
+/* Elements */
 
-Styleguide Components.Message
-*/
-@import url('../settings/color.css');
+/* To prevent excess space at top and bottom of message */
+.c-message > *:first-child {
+  margin-top: 0;
+}
+.c-message > *:last-child {
+  margin-bottom: 0;
+}
 
-/* Base */
+/* To avoid clash of link color with message color */
+.c-message a,
+.c-message .c-button--as-link {
+  color: inherit !important; /* override :hover and :active */
+}
 
-.c-message {
+/* To distinguish link from message text */
+.c-message a,
+.c-message .c-button--as-link {
+  @extend .x-link--irregular;
+}
+.c-message a:hover,
+.c-message .c-button--as-link:hover {
+  @extend .x-link--irregular--hover;
+}
+.c-message a:active,
+.c-message .c-button--as-link:active {
+  @extend .x-link--irregular--active;
+}
+
+
+
+/* Modifiers */
+
+/* Structure */
+
+.c-message--scope-inline {
+  /* no styles yet *//* FAQ: added so alt. class name @extend does not fail */
+}
+
+.c-message--scope-section,
+.c-message--scope-global {
   padding: 15px 20px;
   border: var(--global-border--thick);
-  font-size: var(--global-font-size--small);
 }
 
-/* Elements */
-
-.c-message a {
-  color: inherit;
+.c-message--scope-global {
+  text-align: center;
 }
 
-/* Modifiers */
+/* Skin */
 
-.c-message--info {
+.c-message--type-info {
   color: var(--global-color-info--dark);
-  background-color: var(--global-color-info--light);
-  border-color: var(--global-color-info--normal);
 }
-.c-message--success {
+.c-message--type-success {
   color: var(--global-color-success--dark);
-  background-color: var(--global-color-success--weak);
-  border-color: var(--global-color-success--normal);
 }
-.c-message--warning {
+.c-message--type-warning {
   color: var(--global-color-warning--dark);
-  background-color: var(--global-color-warning--weak);
-  border-color: var(--global-color-warning--normal);
 }
-.c-message--error {
+.c-message--type-error {
   color: var(--global-color-danger--dark);
-  background-color: var(--global-color-danger--weak);
+}
+
+.c-message--type-info.c-message--scope-section {
+  background-color: var(--global-color-info--x-light);
+  border-color: var(--global-color-info--normal);
+}
+.c-message--type-success.c-message--scope-section {
+  background-color: var(--global-color-success--x-light);
+  border-color: var(--global-color-success--normal);
+}
+.c-message--type-warning.c-message--scope-section {
+  background-color: var(--global-color-warning--x-light);
+  border-color: var(--global-color-warning--normal);
+}
+.c-message--type-error.c-message--scope-section {
+  background-color: var(--global-color-danger--x-light);
   border-color: var(--global-color-danger--normal);
 }
+
+.c-message--scope-global {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--secondary);
+  border-color: var(--global-color-primary--dark);
+}
+
+
+
+/* Alternate Class Names */
+
+[class*="message--"]:not(.c-message) { @extend .c-message; }
+
+.message--inline { @extend .c-message--scope-inline; }
+.message--section { @extend .c-message--scope-section; }
+.message--global { @extend .c-message--scope-global; }
+
+.message--success { @extend .c-message--type-success; }
+.message--info { @extend .c-message--type-info; }
+.message--warning { @extend .c-message--type-warning; }
+.message--error { @extend .c-message--type-error; }
+
+.message--success.message--section {
+  @extend .c-message--type-success.c-message--scope-section;
+}
+.message--info.message--section {
+  @extend .c-message--type-info.c-message--scope-section;
+}
+.message--warning.message--section {
+  @extend .c-message--type-warning.c-message--scope-section;
+}
+.message--error.message--section {
+  @extend .c-message--type-error.c-message--scope-section;
+}

package/src/lib/_imports/components/c-message.portal.css

@@ -0,0 +1,5 @@
+.c-message--scope-inline,
+.c-message--scope-section,
+.c-message--scope-global {
+  font-size: var(--global-font-size--small);
+}

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

@@ -21,6 +21,33 @@ Styleguide Components.Cortal.Icon
 
 /* CAVEAT: Urgent use only; always prefer official icon names */
 
+.icon-collapse::before {
+  content: "\ea15"; /* from `.icon-contract::before` */
+}
+
+
+
+/* Extensions */
+.icon {
+  /* To hide text within icon */
+  overflow: hidden;
+  /* To mirror cortal.icon.font.css font-size */
+  width: 1em;
+  height: 1em;
+}
+
+
+
+/* Cross-Pattern */
+
+/* To tweak action icon appearance and layout */
+:--c-card > :is(:--action) > .icon:first-child,
+p > :is(:--action):only-child > .icon:first-child {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-size: 1.2em;
+}
+
 
 
 /* Overrides */
@@ -31,22 +58,34 @@ Styleguide Components.Cortal.Icon
 /* relative units */
 .icon-sm {
   font-size: 1.8rem;
+  width: 1.8rem;
+  height: 1.8rem;
 }
 .icon-md {
   font-size: 2.4rem;
+  width: 2.4rem;
+  height: 2.4rem;
 }
 .icon-lg {
   font-size: 6.4rem;
+  width: 6.4rem;
+  height: 6.4rem;
 }
 /* absolute units */
 .icon-18 {
   font-size: 18px;
+  width: 18px;
+  height: 18px;
 }
 .icon-24 {
   font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 .icon-64 {
   font-size: 64px;
+  width: 64px;
+  height: 64px;
 }
 .icon-16,
 .icon-32 { font-size: unset /* to disallow unsupported font sizes */ }
@@ -61,19 +100,28 @@ Styleguide Components.Cortal.Icon
 [class*='icon-nav-'] {
   border: solid var(--color, var(--global-color-primary--xx-dark));
   border-width: 0 0.25em 0.25em 0;
-  font-size: 8px;
+  font-size: 8px; /* thus 1px = 0.125em */
   /* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
   /* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
 }
+/* To rotate icon each direction and move graphic to stay within icon box */
+/* NOTE: For '-up' and '-down':
+         - translate gave (sub-pixel) better horz. align than relative position
+         - relative position gave easier vertical alignment
+         So 'left' and 'right' (for consistency) use translate for horz. move */
 .icon-nav-up {
-  transform: rotate(-135deg);
+  position: relative;
+  top: 2px;
+  transform: rotate(-135deg) translate(-1px, 1px);
 }
 .icon-nav-left {
-  transform: rotate(135deg);
+  transform: rotate(135deg) translate(-1px, -1px);
 }
 .icon-nav-down {
-  transform: rotate(45deg);
+  position: relative;
+  top: -2px;
+  transform: rotate(45deg) translate(1px, -1px);
 }
 .icon-nav-right {
-  transform: rotate(-45deg);
-}
+  transform: rotate(-45deg) translate(-1px, -1px);
+}

package/src/lib/_imports/components/demo.css

@@ -0,0 +1,40 @@
+/* Grid */
+
+.demo-grid {
+  display: grid;
+  gap: 10px;
+}
+.demo-grid > figure {
+  margin: unset; /* undo browser & Bootstrap */
+}
+
+/* Grid: Boxes */
+
+.demo-grid--boxes > * {
+  border: var(--global-border--normal);
+  padding: 10px;
+  text-align: center;
+}
+
+/* Grid: Square */
+/* https://medium.com/cloudaper/ea48baf038f3 */
+/* https://codepen.io/krystof-k/pen/vdNQGB */
+
+.demo-grid--square {
+  --size: 115px;
+
+  grid-template-columns: repeat(auto-fill, var(--size));
+}
+/* To force height to match width */
+.demo-grid--square::before {
+  content: '';
+  width: 0; /* to obscure this item from grid visualization for developers */
+  padding-bottom: 100%;
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}
+/* To hide the ::before grid item */
+.demo-grid--square > *:first-child {
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}

package/src/lib/_imports/components/django-cms-forms/config.yml

@@ -0,0 +1,6 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: because this is demo but this is CMS pattern
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+label: Django CMS Forms