Skip to content

Commit

Permalink
Mobile first + CS
Browse files Browse the repository at this point in the history 
- also introduce `--widget-gap-rows` and `--widget-gap-cols`
  • Loading branch information
@zoglo
zoglo committed Apr 10, 2024
1 parent 608b93e commit 87c308d
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 128 deletions.
2 changes: 2 additions & 0 deletions core-bundle/contao/themes/flexible/backend.02c0c53f.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions core-bundle/contao/themes/flexible/backend.02c0c53f.css.map
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions core-bundle/contao/themes/flexible/backend.a9391162.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion core-bundle/contao/themes/flexible/backend.a9391162.css.map
View file

This file was deleted.

2 changes: 1 addition & 1 deletion core-bundle/contao/themes/flexible/entrypoints.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"entrypoints": {
"backend": {
"css": [
"/system/themes/flexible/backend.a9391162.css"
"/system/themes/flexible/backend.02c0c53f.css"
]
},
"confirm": {
Expand Down
4 changes: 2 additions & 2 deletions core-bundle/contao/themes/flexible/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"backend.css": "/system/themes/flexible/backend.a9391162.css",
"backend.css": "/system/themes/flexible/backend.02c0c53f.css",
"confirm.css": "/system/themes/flexible/confirm.c2996dd4.css",
"conflict.css": "/system/themes/flexible/conflict.aa6b9c95.css",
"diff.css": "/system/themes/flexible/diff.171af75f.css",
Expand All @@ -8,7 +8,7 @@
"popup.css": "/system/themes/flexible/popup.4728c2fc.css",
"tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
"tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
"backend.a9391162.css.map": "/system/themes/flexible/backend.a9391162.css.map",
"backend.02c0c53f.css.map": "/system/themes/flexible/backend.02c0c53f.css.map",
"confirm.c2996dd4.css.map": "/system/themes/flexible/confirm.c2996dd4.css.map",
"conflict.aa6b9c95.css.map": "/system/themes/flexible/conflict.aa6b9c95.css.map",
"diff.171af75f.css.map": "/system/themes/flexible/diff.171af75f.css.map",
Expand Down
259 changes: 137 additions & 122 deletions core-bundle/contao/themes/flexible/styles/basic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@
--active-bg: #fffce1;
--active-border: #e7b36a;
--pre-disabled: #a6a6a6;
--error-bg: rgba(204,51,51,.15);
--confirm-bg: rgba(88,155,14,.15);
--info-bg: rgba(0,100,148,.15);
--new-bg: rgba(224,149,21,.15);
--error-bg: rgba(204, 51, 51, .15);
--confirm-bg: rgba(88, 155, 14, .15);
--info-bg: rgba(0, 100, 148, .15);
--new-bg: rgba(224, 149, 21, .15);
--progress-running: #f47c00;
--progress-finished: #589b0e;
--drag-bg: #a3c2db;
Expand Down Expand Up @@ -110,10 +110,10 @@ html[data-color-scheme="dark"] {
--form-button-hover: #383a42;
--form-button-active: #777;
--form-button-disabled: #26272c;
--diff-left: rgba(248,81,73,.17);
--diff-del: rgba(248,81,73,.4);
--diff-right: rgba(46,160,67,.17);
--diff-ins: rgba(46,160,67,.4);
--diff-left: rgba(248, 81, 73, .17);
--diff-del: rgba(248, 81, 73, .4);
--diff-right: rgba(46, 160, 67, .17);
--diff-ins: rgba(46, 160, 67, .4);
--code-bg: #30343b;
--checkerbox-bg: #30343b;
--info: #9095a2;
Expand Down Expand Up @@ -195,16 +195,6 @@ h1, h2, h3, h4, h5, h6, strong, b, th {
font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
font-weight: 300;
}

h1, h2, h3, h4, h5, h6, strong, b, th {
font-weight: 500;
}
}

pre, code, .tl_textarea.monospace {
font: 300 .75rem/1.25 SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Expand Down Expand Up @@ -350,30 +340,55 @@ table.with-zebra tbody tr:nth-child(even) td {
fieldset > .widget-group {
padding: 0 15px;
}

.widget-group {
--widget-col-amount: 12;
--widget-gap-rows: 0;
--widget-gap-cols: 0;
display: grid;
grid-column-gap: 30px;
gap: var(--widget-gap-rows) var(--widget-gap-cols);
grid-template-columns: repeat(var(--widget-col-amount), minmax(0, 1fr));
}

.widget-group > * {
--widget-cols: 1;
grid-column-end: span calc(var(--widget-col-amount) / var(--widget-cols));
--widget-cols: var(--widget-col-amount);
grid-column-end: span var(--widget-cols);
}

.widget-group > .m12 {
margin: 0;
}
.w50 {
--widget-cols: 2;

.widget-group > .clr {
grid-column-start: 1;
}

/* BC */
*:not(.widget-group) > .w50 {
float: none;
width: calc(100% - 30px);
}

*:not(.widget-group) > .clr {
clear: both;
width: calc(100% - 30px);
}

*:not(.widget-group) > .long {
width: calc(100% - 30px); /* see #6320 */
}
.w33 {
--widget-cols: 3;

*:not(.widget-group) > .clr:not(.widget) {
width: 100%;
}
.w25 {
--widget-cols: 4;

*:not(.widget-group) > .clr:before {
content: "";
display: table;
}
.w16 {
--widget-cols: 6;

*:not(.widget-group) > .m12 {
margin: 0 15px;
}

.widget {
Expand Down Expand Up @@ -454,12 +469,6 @@ fieldset.tl_checkbox_container legend, fieldset.tl_radio_container legend {
font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
fieldset.tl_checkbox_container legend, fieldset.tl_radio_container legend {
font-weight: 500;
}
}

fieldset.tl_checkbox_container .check-all {
color: var(--gray);
}
Expand Down Expand Up @@ -672,12 +681,6 @@ select[multiple] {
font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.tl_checkbox_single_container label {
font-weight: 500;
}
}

/* Grouped checkboxes */
.checkbox_toggler {
font-weight: 600;
Expand All @@ -688,12 +691,6 @@ select[multiple] {
font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.checkbox_toggler, .checkbox_toggler_first {
font-weight: 500;
}
}

.checkbox_toggler img, .checkbox_toggler_first img {
position: relative;
top: -1px;
Expand All @@ -704,6 +701,11 @@ select[multiple] {
margin: 0 0 6px 21px !important;
}

.tl_checkbox_container .tl_checkbox {
margin-top: 1px;
margin-bottom: 1px;
}

.tl_checkbox_container .checkbox_options:last-of-type {
margin-bottom: 0 !important;
}
Expand Down Expand Up @@ -830,20 +832,15 @@ a.tl_submit {
}

.m12 {
margin: 0 15px;
padding: 18px 0 16px;
padding-top: 0;
padding-bottom: 0;
}

.nogrid .m12 {
padding: 0;
}

.cbx {
min-height: 46px;
}

.cbx.m12 {
min-height: 80px;
box-sizing: border-box;
}

Expand Down Expand Up @@ -872,7 +869,7 @@ a.tl_submit {

.tip {
position: relative;
max-width: 320px;
max-width: 80vw;
padding: 6px 9px;
border-radius: 2px;
background: var(--invert-bg);
Expand Down Expand Up @@ -921,14 +918,99 @@ a.tl_submit {
font-weight: 600;
}

/* Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
font-weight: 300;
}

h1, h2, h3, h4, h5, h6, strong, b, th {
font-weight: 500;
}

fieldset.tl_checkbox_container legend, fieldset.tl_radio_container legend {
font-weight: 500;
}

.tl_checkbox_single_container label {
font-weight: 500;
}

.checkbox_toggler, .checkbox_toggler_first {
font-weight: 500;
}

.badge-title {
font-weight: 500;
}
}

/* Tablets */
@media (min-width: 768px) {
.widget-group {
--widget-gap-cols: 30px;
}

.widget-group > * {
--widget-cols: 6;
}

.w100 {
--widget-cols: var(--widget-col-amount);
}

/* BC */
*:not(.widget-group) > .w50 {
width: calc(50% - 30px);
float: left;
min-height: 80px;
}

.m12 {
margin: 0 15px;
padding: 18px 0 16px;
}

.cbx {
min-height: 46px;
}

.cbx.m12 {
min-height: 80px;
}

.tip {
max-width: 320px;
}

.tl_checkbox_container .tl_checkbox {
margin-top: revert;
margin-bottom: revert;
}
}

/* Large screens */
@media (min-width: 1280px) {
.w16 {
--widget-cols: 2;
}

.w25 {
--widget-cols: 3;
}

.w33 {
--widget-cols: 4;
}

.w50 {
--widget-cols: 6;
}

.w75 {
--widget-cols: 9;
}

#sbtog {
display: none;
}
Expand Down Expand Up @@ -1034,71 +1116,4 @@ a.tl_submit {
.split-button > button[type="button"]:focus {
outline: none;
}

.w16, .w25, .w33, .w50, .w66, .w75 {
--widget-cols: 2;
}
}

/* Handheld */
@media (max-width: 767.98px) {

.widget-group {
grid-column-gap: 0;
}

.w16, .w25, .w33, .w50, .w66, .w75 {
--widget-cols: 1;
}

*:not(.widget-group) > .w50 {
float:none;
width:calc(100% - 30px);
}

.m12 {
padding-top: 0;
padding-bottom: 0;
}

.cbx, .cbx.m12 {
min-height: auto;
}

.tip {
max-width: 80vw;
}

.tl_checkbox_container .tl_checkbox {
margin-top: 1px;
margin-bottom: 1px;
}
}

/* BC */
*:not(.widget-group) > .clr {
clear:both;
width:calc(100% - 30px);
}
*:not(.widget-group) > .clr:not(.widget) {
width:100%;
}
*:not(.widget-group) > .clr:before {
content:"";
display:table;
}
*:not(.widget-group) > .w50 {
width:calc(50% - 30px);
float:left;
min-height:80px;
}
*:not(.widget-group) > .long {
width:calc(100% - 30px); /* see #6320 */
}
*:not(.widget-group) > .m12 {
margin: 0 15px;
}

.widget-group > .clr {
grid-column-start: 1;
}

0 comments on commit 87c308d

Please sign in to comment.