extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-30 18:49:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

CSS / Layout cleanup - better autosize

Browse Source 
- let things inside box shrink, actual widget can decide minimums
- Slotted inputs take up full width by default
- More consistent sizing/position for invoker
This commit is contained in:
nathan 2022-04-22 15:21:46 -06:00
parent f8f04071be
commit ec8b32c01d
5 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Box/Et2Box.ts
View File

@ -39,7 +39,7 @@ export class Et2Box extends Et2Widget(LitElement) implements et2_IDetachedDOM
} }
/* CSS for child elements */ /* CSS for child elements */
::slotted(*) { ::slotted(*) {
flex: 1 0 auto; flex: 1 1 auto;
} }
::slotted(img),::slotted(et2-image) { ::slotted(img),::slotted(et2-image) {
/* Stop images from growing. In general we want them to stay */ /* Stop images from growing. In general we want them to stay */

7
api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
View File

@ -52,7 +52,12 @@ const Et2InputWidgetMixin = (superclass) =>
/* Needed so required can show through */ /* Needed so required can show through */
::slotted(input), input { ::slotted(input), input {
background-color: transparent; background-color: transparent;
}` }
/* Used to allow auto-sizing on slotted inputs */
.input-group__container > .input-group__input ::slotted(.form-control) {
width: 100%;
}
`
]; ];
} }

3
api/js/etemplate/Et2Url/Et2InvokerMixin.ts
View File

@ -54,12 +54,13 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
} }
.input-group__suffix{ .input-group__suffix{
text-align: center;
} }
.input-group__container { .input-group__container {
align-items: center align-items: center
} }
::slotted([slot="suffix"]) { ::slotted([slot="suffix"]) {
width: 12px; width: 14px;
border: none !important; border: none !important;
background-color: transparent !important; background-color: transparent !important;
} }

2
api/js/etemplate/Et2Url/Et2Url.ts
View File

@ -9,7 +9,6 @@
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
import {Et2InvokerMixin} from "./Et2InvokerMixin"; import {Et2InvokerMixin} from "./Et2InvokerMixin";
import {IsEmail} from "../Validators/IsEmail";
import {Et2Textbox} from "../Et2Textbox/Et2Textbox"; import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
import {colorsDefStyles} from "../Styles/colorsDefStyles"; import {colorsDefStyles} from "../Styles/colorsDefStyles";
import {css} from "@lion/core"; import {css} from "@lion/core";
@ -50,7 +49,6 @@ export class Et2Url extends Et2InvokerMixin(Et2Textbox)
::slotted([slot="suffix"]) { ::slotted([slot="suffix"]) {
font-size: 133% !important; font-size: 133% !important;
position: relative; position: relative;
left: -2px;
} }
`, `,
]; ];

1
api/js/etemplate/Et2Url/Et2UrlFax.ts
View File

@ -27,7 +27,6 @@ export class Et2UrlFax extends Et2UrlPhone
::slotted([slot="suffix"]) { ::slotted([slot="suffix"]) {
font-size: 90% !important; font-size: 90% !important;
position: relative; position: relative;
left: -2px;
} }
`, `,
]; ];