@tacc/core-styles 2.40.1 → 2.40.2

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

@@ -0,0 +1,146 @@
+@import url('./cortal-icon-font.css');
+
+
+
+/* IMPORTANT: Do not add support for icons that neglect `.icon` class */
+/* FAQ: Users should build their icons to spec */
+
+
+
+/* Aliases */
+/* SEE: https://github.com/TACC/Core-Portal/blob/22405ca/client/src/styles/trumps/icon.css#L57 */
+
+/* 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;
+}
+
+
+
+/* Label atop Icon */
+
+/* To create a dynamic label atop an existing icon */
+.icon[data-label] {
+    display: inline-grid;
+
+    font-size: 2.5em;
+}
+.icon[data-label]::before,
+.icon[data-label]::after {
+    grid-area: 1 / 1;
+}
+.icon[data-label]::after {
+    content: attr(data-label);
+    place-self: center;
+
+    font-size: 0.375em;
+    -webkit-text-stroke: medium white;
+    background-color: currentColor;
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0.25em 0.25em;
+}
+
+
+
+/* Cross-Pattern */
+
+/* To tweak action icon appearance and layout */
+:--c-card > :is(:--action) > .icon:first-child,
+p > :is(:--action) > .icon:first-child {
+    margin-right: 10px;
+    font-size: 1.2em;
+
+    position: relative;
+    top: 0.2em;
+}
+
+
+
+/* Overrides */
+
+/* To overwrite `cortal.icon.fonts.css` icon sizes */
+/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
+/* CAVEAT: Assumes 1rem = 10px */
+/* 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 */ }
+
+
+
+/* Placeholders */
+/* FAQ: Some icons do not exist, but can be faked (with caveats) */
+
+/* To create a small "chevron" */
+/* CAVEAT: Use `--color` to set color */
+[class*='icon-nav-'] {
+  border: solid var(--color, var(--global-color-primary--xx-dark));
+  border-width: 0 0.25em 0.25em 0;
+  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 {
+  position: relative;
+  top: 2px;
+  transform: rotate(-135deg) translate(-1px, 1px);
+}
+.icon-nav-left {
+  transform: rotate(135deg) translate(-1px, -1px);
+}
+.icon-nav-down {
+  position: relative;
+  top: -2px;
+  transform: rotate(45deg) translate(1px, -1px);
+}
+.icon-nav-right {
+  transform: rotate(-45deg) translate(-1px, -1px);
+}

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

@@ -1,146 +1,3 @@
-@import url('./cortal.icon.font.css');
+/* for backwards-compatibility since `cortal.icon.css` rename */
 
-
-
-/* IMPORTANT: Do not add support for icons that neglect `.icon` class */
-/* FAQ: Users should build their icons to spec */
-
-
-
-/* Aliases */
-/* SEE: https://github.com/TACC/Core-Portal/blob/22405ca/client/src/styles/trumps/icon.css#L57 */
-
-/* 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;
-}
-
-
-
-/* Label atop Icon */
-
-/* To create a dynamic label atop an existing icon */
-.icon[data-label] {
-    display: inline-grid;
-
-    font-size: 2.5em;
-}
-.icon[data-label]::before,
-.icon[data-label]::after {
-    grid-area: 1 / 1;
-}
-.icon[data-label]::after {
-    content: attr(data-label);
-    place-self: center;
-
-    font-size: 0.375em;
-    -webkit-text-stroke: medium white;
-    background-color: currentColor;
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 0 0.25em 0.25em;
-}
-
-
-
-/* Cross-Pattern */
-
-/* To tweak action icon appearance and layout */
-:--c-card > :is(:--action) > .icon:first-child,
-p > :is(:--action) > .icon:first-child {
-    margin-right: 10px;
-    font-size: 1.2em;
-
-    position: relative;
-    top: 0.2em;
-}
-
-
-
-/* Overrides */
-
-/* To overwrite `cortal.icon.fonts.css` icon sizes */
-/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
-/* CAVEAT: Assumes 1rem = 10px */
-/* 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 */ }
-
-
-
-/* Placeholders */
-/* FAQ: Some icons do not exist, but can be faked (with caveats) */
-
-/* To create a small "chevron" */
-/* CAVEAT: Use `--color` to set color */
-[class*='icon-nav-'] {
-  border: solid var(--color, var(--global-color-primary--xx-dark));
-  border-width: 0 0.25em 0.25em 0;
-  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 {
-  position: relative;
-  top: 2px;
-  transform: rotate(-135deg) translate(-1px, 1px);
-}
-.icon-nav-left {
-  transform: rotate(135deg) translate(-1px, -1px);
-}
-.icon-nav-down {
-  position: relative;
-  top: -2px;
-  transform: rotate(45deg) translate(1px, -1px);
-}
-.icon-nav-right {
-  transform: rotate(-45deg) translate(-1px, -1px);
-}
+@import url('./cortal-icon.css');