Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: bump core-styles & use its django-cms-forms #678

Merged
merged 10 commits into from
Nov 27, 2023
11 changes: 5 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@frctl/fractal": "^1.5.14",
"@frctl/mandelbrot": "^1.10.1",
"@tacc/core-styles": "^2.22.0",
"@tacc/core-styles": "github:TACC/Core-Styles#9315ebbd",
"minimist": "^1.2.6"
},
"repository": "git@github.com:TACC/Core-CMS.git",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/* SEE: ../../site_cms/css/src/_imports/django-cms-forms.css */
/* SEE: ../../site_cms/css/src/django-cms-forms.css */
/* FAQ: We uses future syntax that must be processed to work in the present;
and the process does not support outputting files to this directory */

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,174 +1 @@
@import url("@tacc/core-styles/src/lib/_imports/components/c-button.css");

@import url("./django-cms-forms.hacks.css");
@import url("./django-cms-forms--errors-via-c-message.css");



/* Title & Description */

.description {
margin-block: 25px;
}



/* Help Text */

.help-text {
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 */
) + .help-text {
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 */
.help-text > :not(details, a, samp) {
font-style: initial;
}



/* Fields */

.field-wrapper {
margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
}

.field-wrapper:not(.checkboxinput) {
display: flex;
flex-direction: column;
}
.field-wrapper:not(.checkboxinput) > .field-errors {
order: 1; /* i.e. move to end */
}

.field-wrapper.checkboxinput {
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';
}
.field-wrapper.checkboxinput .field-errors { grid-area: error; }
.field-wrapper.checkboxinput input { grid-area: input; }
.field-wrapper.checkboxinput label { grid-area: label; }
.field-wrapper.checkboxinput .help-text { grid-area: notes; }
.field-wrapper.checkboxinput label {
margin-bottom: 0; /* overwrite forms.css label */
}

ul.radioselect label,
ul.checkboxselectmultiple label {
display: flex;
gap: 0.5em;
align-items: center;
font-weight: revert; /* undo html-elements.cms.css */
}
ul.radioselect li:last-child label,
ul.checkboxselectmultiple li:last-child label {
margin-bottom: 0; /* overwrite forms.css label */
}

/* Field: Required, Asterisk, Important */

.field-wrapper .asterisk {
margin-left: 0.5em;
}
.field-wrapper.required .asterisk {
color: var(--global-color-danger--dark);
}
.field-wrapper:not(.required) .asterisk
/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
color: var(--global-color-warning--dark);
}
/* To replace asterisk character with text */
.field-wrapper .asterisk {
width: 0;
display: inline-block;
visibility: hidden;
line-height: 0;
}
.field-wrapper .asterisk::after {
visibility: visible;
line-height: initial;
}
.field-wrapper.required .asterisk::after {
content: '(required)';
}
.field-wrapper:not(.required) .asterisk::after
/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
content: '(important)';
}



/* Errors */

.field-errors ul {
margin-top: 1rem; /* mimic ul margin-bottom */
}
.form-errors ul,
.field-errors ul {
margin-bottom: 0; /* overwrite ul margin-bottom */
}
.form-errors {
margin-bottom: 1rem; /* mimic ul margin-bottom */
}

.form-errors ul,
.field-errors ul {
list-style: none;
padding-inline: 0;
}



/* Lists */

ul.radioselect,
ul.checkboxselectmultiple {
list-style: none;

padding-left: 0;
}



/* Layout */

.button-wrapper {
margin-top: 35px;
}



/* Button */

/* To style obvious buttons that neglect class */
.button-wrapper button[type="submit"] {
@extend :--c-button;
@extend :--c-button--primary;
}

.form-button {
@extend :--c-button;
}
.form-button[type="submit"] {
@extend :--c-button--primary;
}
.form-button:where(:not([type="submit"], [type="reset"])) {
@extend :--c-button--secondary;
}
.form-button[type="reset"] {
@extend :--c-button--tertiary;
}
@import url("@tacc/core-styles/dist/components/django-cms-forms.css");

This file was deleted.

This file was deleted.

Loading