Skip to content

Commit e0e2df9

Browse files
wesleyboarwesleyboar
committed
Merge branch 'task/fp-1499-cms-pattern-library' into task/fp-1499-cms-pattern-library--general-fix-for-import-paths
2 parents c1f5d24 + 25d184d commit e0e2df9

File tree

9 files changed

+697
-3
lines changed

9 files changed

+697
-3
lines changed

‎src/lib/_imports/components/bootstrap.form.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
Form (Bootstrap)
3+
Override Bootstrap styles. See:
4+
- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
5+
- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
6+
Styleguide Components.Bootstrap.Form
7+
*/
8+
@import url('../settings/border.css');
9+
10+
.form-control {
11+
border: var(--global-border--normal);
12+
border-radius: 0;
13+
}
14+
input.form-control,
15+
textarea.form-control {
16+
/* FAQ: Vertical padding reduced by 1px each to near input height of design * 1.2 */
17+
padding: 6px 12px; /* 6px 10px design * 1.2 design-to-app ratio */
18+
}
19+
.input-group-prepend {
20+
z-index: 1; /* so child button border is above sibling input border */
21+
}

‎src/lib/_imports/components/bootstrap.modal.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* TODO: Migrate any other should-be-global Portal modal styles to here */
2+
/* FP-344: Consider a Modal component and a CSS module */
3+
/*
4+
Modal (Bootstrap)
5+
6+
Override Bootstrap styles. See:
7+
8+
- [ReactStrap Forms](https://reactstrap.github.io/components/modals/)
9+
- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/modal/)
10+
11+
Styleguide Components.Bootstrap.Modal
12+
*/
13+
@import url('../tools/x-truncate.css');
14+
15+
.modal-content,
16+
.modal-header,
17+
.modal-body,
18+
.modal-footer {
19+
border-radius: 0;
20+
}
21+
.modal-content,
22+
.modal-header,
23+
.modal-body {
24+
border: none;
25+
}
26+
.modal-footer {
27+
border-left: none;
28+
border-right: none;
29+
border-bottom: none;
30+
}
31+
32+
.modal-header {
33+
background-color: var(--global-color-primary--x-light);
34+
padding: 1.35rem 1.75rem; /* (18px 23.5px design * 1.2 design-to-app ratio) */
35+
}
36+
.modal-title {
37+
color: var(--global-color-primary--xx-dark);
38+
font-weight: normal;
39+
font-size: 1.2rem; /* 16px design * 1.2 design-to-app ratio */
40+
41+
@extend .x-truncate--one-line;
42+
}
43+
44+
/* To darken close button */
45+
.modal-header .close {
46+
color: var(--global-color-primary--x-dark);
47+
opacity: 1;
48+
}
49+
/* FAQ: The specificity matches Bootstrap */
50+
.modal-header .close:not(:disabled):not(.disabled):focus,
51+
.modal-header .close:not(:disabled):not(.disabled):hover {
52+
color: var(--global-color-primary--xx-dark);
53+
opacity: 1;
54+
}
55+
56+
/* To render modal close button icon as a Cortal icon */
57+
/* CAVEAT: Pass `charCode="&#xe912;"` to `<ModalHeader>` */
58+
.modal-header .close span {
59+
/* To mimic `.icon` styles without `@extend` or `composes` (unavailable) */
60+
/* HACK: Copied (and reduced and edited) from `src/styles/trumps/icon...` */
61+
font-size: 1.5rem; /* bigger to match header text font height (like design) */
62+
font-family: Cortal-Icons !important;
63+
}
64+
65+
.modal-header.has-MuiTabs {
66+
flex-direction: row;
67+
position: relative;
68+
height: 63.5px;
69+
border-bottom: 1px solid #afafaf;
70+
padding: 5px;
71+
}
72+
.modal-header.has-MuiTabs .close {
73+
transform: translate(-25%, 25%);
74+
}

‎src/lib/_imports/components/c-button.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,13 @@
235235

236236
/* Modifiers: Sizes */
237237

238+
.c-button:not(
239+
.c-button--width-short,
240+
.c-button--width-medium,
241+
.c-button--width-long,
242+
.c-button--size-small,
243+
.c-button--as-link
244+
),
238245
.c-button--width-short {
239246
width: var(--min-width);
240247
}
@@ -256,6 +263,10 @@
256263

257264
/* Elements */
258265

266+
.c-button > * {
267+
vertical-align: middle;
268+
}
269+
259270
.c-button__icon--before {
260271
margin-right: 0.5em;
261272
}

‎src/lib/_imports/components/c-button/c-button.hbs

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,14 @@
4141
<dt>Icons</dt>
4242
<dd>
4343
<button class="c-button c-button--{{this._self.name}}
44+
{{#if supports.width}}c-button--width-long{{/if}}
4445
{{#if type}}{{type}}{{/if}}"
4546
{{#if disabled}}disabled{{/if}}>
4647
<i class="c-button__icon--before" aria-description="validate input">…</i>
4748
<span class="c-button__text">__icon--before</span>
4849
</button>
4950
<button class="c-button c-button--{{this._self.name}}
51+
{{#if supports.width}}c-button--width-long{{/if}}
5052
{{#if type}}{{type}}{{/if}}"
5153
{{#if disabled}}disabled{{/if}}>
5254
<span class="c-button__text">__icon--after</span>
@@ -58,7 +60,7 @@
5860
{{#if supports.width}}
5961
<dt>Width</dt>
6062
<dd>
61-
<button class="c-button c-button--{{this._self.name}} c-button--width-short
63+
<button class="c-button c-button--{{this._self.name}}
6264
{{#if type}}{{type}}{{/if}}"
6365
{{#if disabled}}disabled{{/if}}>
6466
<span class="c-button__text">--width-short</span>
@@ -67,9 +69,9 @@
6769
{{#if disabled}}disabled{{/if}}>
6870
<span class="c-button__text">--width-medium</span>
6971
</button>
70-
<button class="c-button c-button--{{this._self.name}} c-button--width-large {{#if type}}{{type}}{{/if}}"
72+
<button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
7173
{{#if disabled}}disabled{{/if}}>
72-
<span class="c-button__text">--width-large</span>
74+
<span class="c-button__text">--width-long</span>
7375
</button>
7476
</dd>
7577
{{/if}}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
Container (Bootstrap)
3+
4+
Provide Cortal Icon styles. See:
5+
6+
- [Cortal Icons (Confluence)](https://confluence.tacc.utexas.edu/x/MCAFDg)
7+
8+
Styleguide Components.Cortal.Icon
9+
*/
10+
@import url('./cortal.icon.font.css');
11+
12+
13+
14+
/* IMPORTANT: Do not add support for icons that neglect `.icon` class */
15+
/* FAQ: Users should build their icons to spec */
16+
17+
18+
19+
/* Aliases */
20+
/* SEE: https://github.com/TACC/Core-Portal/blob/22405ca/client/src/styles/trumps/icon.css#L57 */
21+
22+
/* CAVEAT: Urgent use only; always prefer official icon names */
23+
24+
25+
26+
/* Overrides */
27+
28+
/* To overwrite `cortal.icon.fonts.css` icon sizes */
29+
/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
30+
/* CAVEAT: Assumes 1rem = 10px */
31+
/* relative units */
32+
.icon-sm {
33+
font-size: 1.8rem;
34+
}
35+
.icon-md {
36+
font-size: 2.4rem;
37+
}
38+
.icon-lg {
39+
font-size: 6.4rem;
40+
}
41+
/* absolute units */
42+
.icon-18 {
43+
font-size: 18px;
44+
}
45+
.icon-24 {
46+
font-size: 24px;
47+
}
48+
.icon-64 {
49+
font-size: 64px;
50+
}
51+
.icon-16,
52+
.icon-32 { font-size: unset /* to disallow unsupported font sizes */ }
53+
54+
55+
56+
/* Placeholders */
57+
/* FAQ: Some icons do not exist, but can be faked (with caveats) */
58+
59+
/* To create a small "chevron" */
60+
/* CAVEAT: Use `--color` to set color */
61+
[class*='icon-nav-'] {
62+
border: solid var(--color, var(--global-color-primary--xx-dark));
63+
border-width: 0 0.25em 0.25em 0;
64+
font-size: 8px;
65+
/* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
66+
/* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
67+
}
68+
.icon-nav-up {
69+
transform: rotate(-135deg);
70+
}
71+
.icon-nav-left {
72+
transform: rotate(135deg);
73+
}
74+
.icon-nav-down {
75+
transform: rotate(45deg);
76+
}
77+
.icon-nav-right {
78+
transform: rotate(-45deg);
79+
}

‎src/lib/_imports/components/cortal.icon.font.css

Lines changed: 464 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/_imports/components/cortal.icon.font.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Cortal Icon Font
2+
3+
The file `cortal.icon.font.css` comes from raw CSS provided by latest version of [TACC's "Cortal" icon font](https://confluence.tacc.utexas.edu/x/MCAFDg).

‎src/lib/_imports/objects/o-fixed-header-table.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Fixed Header Table
3+
4+
A table with a header that does not move, and a body that scrolls.
5+
6+
Markup:
7+
<table class="o-fixed-header-table">
8+
<thead>
9+
<tr>
10+
<th>A</th>
11+
<th>B</th>
12+
<th>C</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr>
17+
<td>A</td>
18+
<td>B</td>
19+
<td>C</td>
20+
</tr>
21+
</thead>
22+
</table>
23+
24+
Styleguide Objects.FixedHeaderTable
25+
*/
26+
/* SEE: https://css-tricks.com/position-sticky-and-table-headers/ */
27+
.o-fixed-header-table th {
28+
position: sticky;
29+
top: 0;
30+
31+
z-index: 1; /* so table content (e.g. button)¹ does not scroll over <th> */
32+
/* ¹ table content with a `position` value other than static */
33+
}

‎src/lib/_imports/settings/font.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ Styleguide Settings.CustomProperties.Font
2020
*/
2121

2222
:root {
23+
/* Family */
24+
/* NOTE: Clients are expected to overwrite these values via their CSS */
25+
--global-font-family--sans: sans-serif;
26+
--global-font-family--serif: serif;
27+
--global-font-family--mono: monospace;
28+
29+
2330
/* Size */
2431
/* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
2532
/* CAVEAT: These font sizes assume root font is 10px or an equivalent value */

0 commit comments

Comments
 (0)