diff --git a/CHANGELOG.rst b/CHANGELOG.rst index fd1a653..d8fe540 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -2,9 +2,10 @@ Changelog ========= -Version 1.0.4 +Version 1.0.5 ============= +* Fix multicolumn flexbox issues * Fix responsive bug for changelists with filters * Better font sizes for filters diff --git a/djangocms_simple_admin_style/__init__.py b/djangocms_simple_admin_style/__init__.py index 92192ee..68cdeee 100644 --- a/djangocms_simple_admin_style/__init__.py +++ b/djangocms_simple_admin_style/__init__.py @@ -1 +1 @@ -__version__ = "1.0.4" +__version__ = "1.0.5" diff --git a/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css b/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css index 820e95c..a1543f6 100644 --- a/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css +++ b/djangocms_simple_admin_style/static/djangocms_simple_admin_style/css/djangocms-simple-admin.min.css @@ -1 +1 @@ -:root,body{--font-family-primary:Helvetica,Arial,sans-serif;--button-radius:4px;--primary:var(--dca-primary);--secondary:var(--dca-white);--accent:var(--primary);--primary-fg:var(--dca-white);--body-fg:var(--dca-gray-darkest);--body-bg:var(--dca-white);--header-color:var(--dca-black);--header-branding-color:var(--accent);--header-bg:var(--secondary);--header-link-color:var(--dca-gray-darkest);--breadcrumbs-fg:var(--dca-gray);--breadcrumbs-link-fg:var(--dca-primary);--breadcrumbs-bg:var(--dca-gray-lightest);--link-fg:var(--dca-primary);--link-selected-fg:var(--dca-primary);--hairline-color:var(--dca-gray-lightest);--border-color:var(--dca-gray-lighter);--error-fg:red;--darkened-bg:var(--dca-gray-lightest);--button-fg:var(--dca-gray-darker);--button-bg:var(--dca-white);--button-hover-bg:var(--dca-gray-lighter);--default-button-fg:var(--dca-white);--default-button-bg:var(--dca-primary);--default-button-hover-bg:var(--dca-primary);--object-tools-fg:var(--body-fg);--object-tools-bg:vaR(--dca-white);--object-tools-hover-bg:var(--dca-gray-lighter)}:root[data-color-scheme=light],:root[data-theme=light],html,html[data-color-scheme=light],html[data-theme=light],root{--dca-light-mode:1;--dca-dark-mode:0;--dca-white:#fff;--dca-black:#000;--dca-primary:#0bf;--dca-gray:#666;--dca-gray-lightest:#f2f2f2;--dca-gray-lighter:#ddd;--dca-gray-light:#999;--dca-gray-darker:#454545;--dca-gray-darkest:#333;--dca-gray-super-lightest:#f7f7f7;color-scheme:light}@media (prefers-color-scheme:dark){:root{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#ccc;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#ddd;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}}:root[data-theme=dark],html[data-color-scheme=dark],html[data-theme=dark],root[data-color-scheme=dark]{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#ccc;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#ddd;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}.dashboard #content{width:calc(100% - 340px)}h1{font-size:1.6rem}h2{font-size:1.4rem}h3{font-size:1.2rem}#changelist .actions label,.inline-group h2,.module caption,.module h2,h4,label{font-size:1rem}.help,.small,div.help,div.help li,form div.help,form p.help,h5,p.help,td,th,thead th{font-size:.875rem}.mini{font-size:.75rem}dd,dt,li{font-size:1rem;line-height:1.6rem}table thead th .text span{padding:12px}.changelist-filter{h3,li{font-size:.875rem}}a:link,a:visited{color:var(--dca-primary)}.inline-group h2,.module caption,.module h2{background:var(--body-bg);color:var(--body-fg)}.module>h2{padding-inline-start:0}#nav-sidebar{& .module caption{background:var(--primary)};& .current-app .section:link,& .current-app .section:visited,& .section:link,& .section:visited{color:var(--dca-white)};a{color:var(--body-fg)};.module{display:none;&:has(tr:not([style*="display: none"])){display:unset}}}a.addlink{min-height:16px;min-width:16px}.button.default,.submit-row input.default,input[type=submit].default{color:var(--dca-white,#fff);transition:filter .15s}:is(.button,input[type=submit]).default:is(:active,:focus,:hover){filter:brightness(.8)}.submit-row{background:var(--dca-white,#fff);& a.deletelink{color:var(--dca-white,#fff)}& a.closelink{background:var(--dca-white,#fff);color:var(--dca-black,#000)}}.delete-confirmation a.cancel-link{background:var(--dca-white,#fff);color:var(--dca-black,#000)}.button,.submit-row input,a.button,input[type=button],input[type=submit]{border:1px solid var(--dca-gray-lighter,#ddd)}.delete-confirmation a.cancel-link:hover,.submit-row a.closelink:hover{background:var(--dca-gray-lightest,#fff)}.object-tools{& a{border:1px solid var(--dca-gray-lighter);border-radius:var(--button-radius)}& a.addlink{background-color:var(--default-button-bg);border-color:var(--default-button-fg);color:var(--default-button-fg);&:focus,&:hover{background-color:var(--default-button-hover-bg)}}}.module{& tr{height:2.3rem}& td,& th{border-bottom:1px solid var(--dca-gray-lighter)}& th{font-weight:400}& caption,& h2{font-weight:600}}nav .module th{vertical-align:middle}.inline-group h2{font-weight:600}.aligned label:not(.btn){color:var(--body-fg);font-weight:600;margin-bottom:2px;width:inherit}.aligned .checkbox-row label{width:auto}#user-tools #logout-form button,#user-tools a:link,#user-tools a:visited{color:var(--primary)}#logout-form button:active,#logout-form button:hover{margin-bottom:2px;padding-bottom:1px}.flex-container.fieldBox,.form-row>div>.flex-container{display:block}.required label:not(.vCheckboxLabel):after,label.required:not(.vCheckboxLabel):after{color:var(--delete-button-bg);content:"*"}form{.aligned div.help,.aligned p.help,.wide input+div.help,.wide input+p.help,.wide p,.wide ul.errorlist{margin-inline-start:0;padding-inline-start:0};button{background-color:var(--default-button-bg);border:1px solid var(--default-button-bg);border-radius:var(--button-radius);color:var(--default-button-fg);font-family:var(--font-family-primary);font-size:.8125rem;font-weight:400;margin:2px 0;padding:5px 6px;vertical-align:middle};.aligned :is(label,input,textarea,select)+:is(p,div.help,p.help,div.readonly),.aligned ul{margin-inline-start:0;padding-inline-start:0};.button,.form-row,input,select,textarea{font-size:inherit};.selector h2{font-size:1rem};.selector input[type=text]{padding:5px 6px};.selector label{float:inline-start}}.button,.submit-row input,a.button,input[type=button],input[type=submit]{font-size:14px}.colM .aligned .vLargeTextField,.colM .aligned .vXMLLargeTextField,.flex-container>label+div,.vLargeTextField,.vTextField,.vURLField,.vUUIDField,.vXMLLargeTextField,input[type=email],input[type=text],input[type=url],textarea{width:calc(100% - 10px)}.vTextField,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],select,textarea{padding:10px}.datetime input,.form-row .datetime input.vDateField,.form-row .datetime input.vTimeField{margin-inline-start:0}.form-row p.date,.form-row p.datetime,.form-row p.time{margin-bottom:0;margin-top:0;padding-bottom:0;padding-top:0}#changelist-search input[type=text]{width:unset}.form-row p,form .button,input,select,textarea{font-family:unset}div.form-row:not([hidden]){display:flex;flex-wrap:wrap;margin-bottom:1em;overflow:unset;padding-inline:0}.auth-user.change-form div.form-row:not([hidden]){display:block}div.form-row>div:not(.help){flex:1 0 0;margin-inline-end:10px;width:100%}.form-row>ul.errorlist{width:100%}fieldset.collapse.collapsed .form-row{display:none}.change-form .select2-container,.change-form select,.related-widget-wrapper{width:100%}.change-form .related-widget-wrapper>select,.related-widget-wrapper>.select2-container{width:calc(100% - 112px)}.related-widget-wrapper>.select2-container .select2{width:calc(100% - 112px)!important}select[multiple]{min-width:200px}.colMS .aligned .vLargeTextField,.colMS .aligned .vXMLLargeTextField{width:unset}@media (max-width:1024px){form fieldset .fieldBox+.fieldBox{border-top:unset;margin-top:0;padding-top:0}}.cms-admin a.skip-to-content-link{display:none}.cms-admin-modal{#content>h2,#header,#nav-sidebar,#toggle-nav-sidebar,.breadcrumbs,.hide-in-modal,.object-tools{display:none};#changelist{margin-top:20px};.object-tools{padding-top:20px};.main.shifted>#nav-sidebar+.content,.main>#nav-sidebar+.content{max-width:100%}}.cms-admin-sideframe{margin-top:0;#content>h1,#header{display:none};#container{padding-top:46px};.object-tools{margin-inline-end:92px}}@media (min-width:768px){.main.shifted>#nav-sidebar+.content{max-width:calc(100% - 299px)}}fieldset .collapse-toggle{color:var(--dca-primary)}.parler-language-tabs{border-bottom-color:var(--primary);a:link,a:visited{color:var(--body-fg)};span.available,span.current,span.empty{border-radius:var(--button-radius) var(--button-radius) 0 0};span.current{background-color:var(--primary);border-color:var(--primary);color:var(--dca-white)}}#page_form_lang_tabs{border-bottom:2px solid var(--primary);input[type=button]{border-bottom:none;border-radius:var(--button-radius) var(--button-radius) 0 0;margin-bottom:0;padding:5px 15px;&.language_button.selected{background-color:var(--default-button-bg);border-color:var(--default-button-bg);color:var(--default-button-fg)}}}.insertlinkButton{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230bf'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");display:inline-block;height:16px;width:16px}.cms-btn-group{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:0;line-height:15px;margin-inline-end:0;margin-inline-start:-5px;padding:10px 15px}.cms-btn,.cms-btn-group{background:var(--button-bg);color:var(--button-fg);display:inline-block}.cms-btn{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:var(--button-radius);margin-inline-start:5px}a.cms-btn-group,a.cms-btn-group:hover,a.cms-btn-group:link{color:var(--button-fg)}.cms-btn-group:first-child{border-end-start-radius:4px;border-start-start-radius:4px;margin-inline-start:5px}.cms-btn-group:last-child{border-end-end-radius:4px;border-start-end-radius:4px}.cms-btn-active{background-color:var(--dca-gray-lighter)}a.btn.cms-action-btn{bottom:-3px;height:28px;width:28px;span{font-size:94%}}.delete-confirmation form input[type=submit]{color:var(--dca-white)}.cms-admin-modal.delete-confirmation .cancel-link,.cms_modal-window.delete-confirmation .cancel-link,.popup.delete-confirmation .cancel-link{display:none} \ No newline at end of file +:root,body{--font-family-primary:Helvetica,Arial,sans-serif;--button-radius:4px;--primary:var(--dca-primary);--secondary:var(--dca-white);--accent:var(--primary);--primary-fg:var(--dca-white);--body-fg:var(--dca-gray-darkest);--body-bg:var(--dca-white);--header-color:var(--dca-black);--header-branding-color:var(--accent);--header-bg:var(--secondary);--header-link-color:var(--dca-gray-darkest);--breadcrumbs-fg:var(--dca-gray);--breadcrumbs-link-fg:var(--dca-primary);--breadcrumbs-bg:var(--dca-gray-lightest);--link-fg:var(--dca-primary);--link-selected-fg:var(--dca-primary);--hairline-color:var(--dca-gray-lightest);--border-color:var(--dca-gray-lighter);--error-fg:red;--darkened-bg:var(--dca-gray-lightest);--button-fg:var(--dca-gray-darker);--button-bg:var(--dca-white);--button-hover-bg:var(--dca-gray-lighter);--default-button-fg:var(--dca-white);--default-button-bg:var(--dca-primary);--default-button-hover-bg:var(--dca-primary);--object-tools-fg:var(--body-fg);--object-tools-bg:vaR(--dca-white);--object-tools-hover-bg:var(--dca-gray-lighter)}:root[data-color-scheme=light],:root[data-theme=light],html,html[data-color-scheme=light],html[data-theme=light],root{--dca-light-mode:1;--dca-dark-mode:0;--dca-white:#fff;--dca-black:#000;--dca-primary:#0bf;--dca-gray:#666;--dca-gray-lightest:#f2f2f2;--dca-gray-lighter:#ddd;--dca-gray-light:#999;--dca-gray-darker:#454545;--dca-gray-darkest:#333;--dca-gray-super-lightest:#f7f7f7;color-scheme:light}@media (prefers-color-scheme:dark){:root{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#ccc;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#ddd;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}}:root[data-theme=dark],html[data-color-scheme=dark],html[data-theme=dark],root[data-color-scheme=dark]{--dca-light-mode:0;--dca-dark-mode:1;--dca-white:#2a2c2e;--dca-black:#fff;--dca-primary:#58d1fc;--dca-gray:#ccc;--dca-gray-lightest:#444;--dca-gray-lighter:#666;--dca-gray-light:#888;--dca-gray-darker:#ddd;--dca-gray-darkest:#eee;--dca-gray-super-lightest:#333;--active-brightness:2;--focus-brightness:1.5;color-scheme:dark}.dashboard #content{width:calc(100% - 340px)}h1{font-size:1.6rem}h2{font-size:1.4rem}h3{font-size:1.2rem}#changelist .actions label,.inline-group h2,.module caption,.module h2,h4,label{font-size:1rem}.help,.small,div.help,div.help li,form div.help,form p.help,h5,p.help,td,th,thead th{font-size:.875rem}.mini{font-size:.75rem}dd,dt,li{font-size:1rem;line-height:1.6rem}table thead th .text span{padding:12px}#changelist-filter{h3,li{font-size:.875rem}}a:link,a:visited{color:var(--dca-primary)}.inline-group h2,.module caption,.module h2{background:var(--body-bg);color:var(--body-fg)}.module>h2{padding-inline-start:0}#nav-sidebar{& .module caption{background:var(--primary)};& .current-app .section:link,& .current-app .section:visited,& .section:link,& .section:visited{color:var(--dca-white)};a{color:var(--body-fg)};.module{display:none;&:has(tr:not([style*="display: none"])){display:unset}}}a.addlink{min-height:16px;min-width:16px}.button.default,.submit-row input.default,input[type=submit].default{color:var(--dca-white,#fff);transition:filter .15s}:is(.button,input[type=submit]).default:is(:active,:focus,:hover){filter:brightness(.8)}.submit-row{background:var(--dca-white,#fff);& a.deletelink{color:var(--dca-white,#fff)}& a.closelink{background:var(--dca-white,#fff);color:var(--dca-black,#000)}}.delete-confirmation a.cancel-link{background:var(--dca-white,#fff);color:var(--dca-black,#000)}.button,.submit-row input,a.button,input[type=button],input[type=submit]{border:1px solid var(--dca-gray-lighter,#ddd)}.delete-confirmation a.cancel-link:hover,.submit-row a.closelink:hover{background:var(--dca-gray-lightest,#fff)}.object-tools{& a{border:1px solid var(--dca-gray-lighter);border-radius:var(--button-radius)}& a.addlink{background-color:var(--default-button-bg);border-color:var(--default-button-fg);color:var(--default-button-fg);&:focus,&:hover{background-color:var(--default-button-hover-bg)}}}.module{& tr{height:2.3rem}& td,& th{border-bottom:1px solid var(--dca-gray-lighter)}& th{font-weight:400}& caption,& h2{font-weight:600}}nav .module th{vertical-align:middle}.inline-group h2{font-weight:600}.aligned label:not(.btn){color:var(--body-fg);font-weight:600;margin-bottom:2px;width:inherit}.aligned .checkbox-row label{width:auto}#user-tools #logout-form button,#user-tools a:link,#user-tools a:visited{color:var(--primary)}#logout-form button:active,#logout-form button:hover{margin-bottom:2px;padding-bottom:1px}.form-row .flex-container{display:block}.flex-container.form-multiline{display:flex;flex-wrap:wrap;&>div{flex:1 0 0}}.form-multiline>div:last-child .fieldBox{margin-inline-end:0}.required label:not(.vCheckboxLabel):after,label.required:not(.vCheckboxLabel):after{color:var(--delete-button-bg);content:"*"}form{.aligned div.help,.aligned p.help,.wide input+div.help,.wide input+p.help,.wide p,.wide ul.errorlist{margin-inline-start:0;padding-inline-start:0};button{background-color:var(--default-button-bg);border:1px solid var(--default-button-bg);border-radius:var(--button-radius);color:var(--default-button-fg);font-family:var(--font-family-primary);font-size:.8125rem;font-weight:400;margin:2px 0;padding:5px 6px;vertical-align:middle};.aligned :is(label,input,textarea,select)+:is(p,div.help,p.help,div.readonly),.aligned ul{margin-inline-start:0;padding-inline-start:0};.button,.form-row,input,select,textarea{font-size:inherit};.selector h2{font-size:1rem};.selector input[type=text]{padding:5px 6px};.selector label{float:inline-start}}.button,.submit-row input,a.button,input[type=button],input[type=submit]{font-size:14px}.colM .aligned .vLargeTextField,.colM .aligned .vXMLLargeTextField,.flex-container>label+div,.vLargeTextField,.vTextField,.vURLField,.vUUIDField,.vXMLLargeTextField,input[type=email],input[type=text],input[type=url],textarea{width:calc(100% - 22px)}.vTextField,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],select,textarea{padding:10px}.datetime input,.form-row .datetime input.vDateField,.form-row .datetime input.vTimeField{margin-inline-start:0}.form-row p.date,.form-row p.datetime,.form-row p.time{margin-bottom:0;margin-top:0;padding-bottom:0;padding-top:0}#changelist-search input[type=text]{width:unset}.form-row p,form .button,input,select,textarea{font-family:unset}div.form-row:not([hidden]){margin-bottom:1em;overflow:unset;padding-inline:0}.auth-user.change-form div.form-row:not([hidden]){display:block}div.form-row>div:not(.help){flex:1 0 0;margin-inline-end:10px;width:100%}.form-row>ul.errorlist{width:100%}fieldset.collapse.collapsed .form-row{display:none}.change-form .select2-container,.change-form select,.related-widget-wrapper{width:100%}.change-form .related-widget-wrapper>select,.related-widget-wrapper>.select2-container{width:calc(100% - 112px)}.related-widget-wrapper>.select2-container .select2{width:calc(100% - 112px)!important}select[multiple]{min-width:200px}.colMS .aligned .vLargeTextField,.colMS .aligned .vXMLLargeTextField{width:unset}@media (max-width:1024px){form fieldset .fieldBox+.fieldBox{border-top:unset;margin-top:0;padding-top:0}}.cms-admin a.skip-to-content-link{display:none}.cms-admin-modal{#content>h2,#header,#nav-sidebar,#toggle-nav-sidebar,.breadcrumbs,.hide-in-modal,.object-tools{display:none};#changelist{margin-top:20px};.object-tools{padding-top:20px};.main.shifted>#nav-sidebar+.content,.main>#nav-sidebar+.content{max-width:100%}}.cms-admin-sideframe{margin-top:0;#content>h1,#header{display:none};#container{padding-top:46px};.object-tools{margin-inline-end:92px}}@media (min-width:768px){.main.shifted>#nav-sidebar+.content{max-width:calc(100% - 299px)}}fieldset .collapse-toggle{color:var(--dca-primary)}.parler-language-tabs{border-bottom-color:var(--primary);a:link,a:visited{color:var(--body-fg)};span.available,span.current,span.empty{border-radius:var(--button-radius) var(--button-radius) 0 0};span.current{background-color:var(--primary);border-color:var(--primary);color:var(--dca-white)}}#page_form_lang_tabs{border-bottom:2px solid var(--primary);input[type=button]{border-bottom:none;border-radius:var(--button-radius) var(--button-radius) 0 0;margin-bottom:0;padding:5px 15px;&.language_button.selected{background-color:var(--default-button-bg);border-color:var(--default-button-bg);color:var(--default-button-fg)}}}.insertlinkButton{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230bf'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");display:inline-block;height:16px;width:16px}.cms-btn-group{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:0;line-height:15px;margin-inline-end:0;margin-inline-start:-5px;padding:10px 15px}.cms-btn,.cms-btn-group{background:var(--button-bg);color:var(--button-fg);display:inline-block}.cms-btn{border:1px solid var(--dca-gray-lighter,#ddd);border-radius:var(--button-radius);margin-inline-start:5px}a.cms-btn-group,a.cms-btn-group:hover,a.cms-btn-group:link{color:var(--button-fg)}.cms-btn-group:first-child{border-end-start-radius:4px;border-start-start-radius:4px;margin-inline-start:5px}.cms-btn-group:last-child{border-end-end-radius:4px;border-start-end-radius:4px}.cms-btn-active{background-color:var(--dca-gray-lighter)}a.btn.cms-action-btn{bottom:-3px;height:28px;width:28px;span{font-size:94%}}.delete-confirmation form input[type=submit]{color:var(--dca-white)}.cms-admin-modal.delete-confirmation .cancel-link,.cms_modal-window.delete-confirmation .cancel-link,.popup.delete-confirmation .cancel-link{display:none} \ No newline at end of file diff --git a/private/djangocms-simple-admin.css b/private/djangocms-simple-admin.css index 645924a..1ae79cd 100644 --- a/private/djangocms-simple-admin.css +++ b/private/djangocms-simple-admin.css @@ -149,7 +149,7 @@ table thead th .text span { padding: 12px; } -.changelist-filter { +#changelist-filter { h3, li { font-size: 0.875rem; } @@ -304,9 +304,19 @@ nav .module th { /* Forms */ -.form-row > div > .flex-container, .flex-container.fieldBox { +.form-row .flex-container { display: block; /* Label and input in separate lines */ } +.flex-container.form-multiline { + display: flex; + flex-wrap: wrap; + & > div { + flex: 1 0 0; + } +} +.form-multiline > div:last-child .fieldBox { + margin-inline-end: 0; +} .required label:not(.vCheckboxLabel):after, label.required:not(.vCheckboxLabel):after { @@ -364,7 +374,7 @@ form { input[type="text"], input[type="url"], input[type="email"], .vLargeTextField, .vXMLLargeTextField, .vTextField, .vUUIDField, .colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField, .vURLField, textarea, .flex-container > label + div { - width: calc(100% - 10px); + width: calc(100% - 22px); /* 2x10px padding + 2px border */ } input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], textarea, select, .vTextField { @@ -391,8 +401,6 @@ input, textarea, select, .form-row p, form .button { } div.form-row:not([hidden]) { - display: flex; - flex-wrap: wrap; padding-inline: 0; overflow: unset; margin-bottom: 1em;