Skip to content

Commit

Permalink
feat: bump core-styles & use its django-cms-forms (#678)
Browse files Browse the repository at this point in the history
* feat: bump core-styles & use its django-cms-forms

Core-Styles v2.15 provides django-cms-forms via `core-styles.base.css`.

Core-Styes v12–14 do not include any breaking changes.

* feat: load django-cms-forms.css from core-styles

Core-Styles loads shared form styles via c-form.

Those shared styles to apply to Django CMS Forms.

But django-cms-forms.css has specific custom styles CMS needs.

* fix: django-cms-forms.css (core-styles ~2.22.1)

* fix: django-cms-forms.css (core-styles) not built

* docs: fix djangocms_forms comment/redirect typo

* Revert "fix: django-cms-forms.css (core-styles) not built"

This reverts commit c07ec5b.

* fix: django-cms-forms.css (core-styles) not built
  • Loading branch information
wesleyboar authored Nov 27, 2023
1 parent 8ad3ecb commit 71bdb4c
Show file tree
Hide file tree
Showing 9 changed files with 8 additions and 684 deletions.
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": "[email protected]: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

0 comments on commit 71bdb4c

Please sign in to comment.