mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-11 09:11:05 +01:00
99c86d58bd
Copied from Shoelace https://shoelace.style/getting-started/customizing#css-parts - Add fixed width label example to docs - Get etemplate2.css included in docs to make sure styles are consistent
133 lines
4.0 KiB
Markdown
133 lines
4.0 KiB
Markdown
# Styling
|
|
|
|
Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css
|
|
and [Shoelace](https://shoelace.style/) styles
|
|
|
|
Some handy excerpts:
|
|
|
|
## Global CSS variables
|
|
|
|
```css
|
|
:root {
|
|
--primary-background-color: #4177a2;
|
|
--highlight-background-color: rgba(153, 204, 255, .4);
|
|
|
|
--label-color: #000000;
|
|
/* For fixed width labels - use class 'et2-label-fixed'*/
|
|
--label-width: 8em;
|
|
|
|
--input-border-color: #E6E6E6;
|
|
--input-text-color: #26537C;
|
|
|
|
--warning-color: rgba(255, 204, 0, .5);
|
|
--error-color: rgba(204, 0, 51, .5);
|
|
|
|
}
|
|
```
|
|
|
|
Use these variables instead of specific colors to make maintenance and customisation easier. In most places, we can
|
|
use Shoelace's [design tokens](https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.css ) as well
|
|
|
|
```html:preview
|
|
<style>
|
|
.customStyle {
|
|
background-color: var(--primary-background-color, white);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--label-color);
|
|
|
|
/* Shoelace gives us many variables as well */
|
|
padding: var(--sl-spacing-medium);
|
|
}
|
|
|
|
.customStyle.warning {
|
|
/* Local override of the label color */
|
|
--label-color: red;
|
|
|
|
background-color: var(--warning-color);
|
|
border-width: 2px;
|
|
}
|
|
</style>
|
|
|
|
<et2-box class="customStyle">customStyle</et2-box>
|
|
<et2-box class="customStyle warning">customStyle + warning</et2-box>
|
|
```
|
|
|
|
## Useful CSS classes
|
|
|
|
### hide
|
|
|
|
Hides the element using css```display: none```
|
|
|
|
### hideme
|
|
|
|
Hides the element using css```display: none !important;```
|
|
|
|
### et2-label-fixed
|
|
|
|
Use on a widget to force its label to have a fixed width. This helps line up labels and widgets into columns without
|
|
having to use a grid, which allows them to reflow if needed. Set the CSS variable ```--label_width``` to change how much
|
|
space the labels get.
|
|
|
|
These widgets are in an et2-vbox:
|
|
|
|
|  |
|
|
|:-------------------------------------------------------------------------------------------------------:|
|
|
| *Without et2-label-fixed class* |
|
|
|  |
|
|
| *Fixed width labels using et2-label-fixed* |
|
|
|  |
|
|
| *--label_width CSS variable changed for more space* <br/>Note how 'Responsible' widget wraps |
|
|
|
|
## Directly Customising Widgets
|
|
|
|
If you need to customise an individual widget further, you can
|
|
use [CSS Parts](https://shoelace.style/getting-started/customizing#css-parts)
|
|
or [Custom Properties](https://shoelace.style/getting-started/customizing#custom-properties) to directly override the
|
|
widget's internal styling.
|
|
|
|
## Examples
|
|
|
|
### Custom Button Color
|
|
|
|
```html:preview
|
|
<et2-button class="tomato-button">Custom button</et2-button>
|
|
<style>
|
|
.tomato-button::part(base) {
|
|
background: var(--sl-color-neutral-0);
|
|
border: solid 1px tomato;
|
|
}
|
|
|
|
.tomato-button::part(base):hover {
|
|
background: rgba(255, 99, 71, 0.1);
|
|
}
|
|
|
|
.tomato-button::part(base):active {
|
|
background: rgba(255, 99, 71, 0.2);
|
|
}
|
|
|
|
.tomato-button::part(base):focus-visible {
|
|
box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
|
|
}
|
|
|
|
.tomato-button::part(label) {
|
|
color: tomato;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Fixed width labels
|
|
|
|
Here we've used the class `et2-label-fixed` and overridden the standard width of `8em` to `--label-width: 16em;`. Adjust
|
|
the viewport width to see the widgets reflow when there's not enough horizontal space. No grid is used, which allows the
|
|
reflow from 2 columns to 1 column.
|
|
|
|
```html:preview
|
|
<style>
|
|
.fixed-example {
|
|
--label-width: 16em;
|
|
}
|
|
</style>
|
|
<et2-select class="fixed-example et2-label-fixed" label="Select"></et2-select>
|
|
<et2-select-number class="fixed-example et2-label-fixed" label="Select number from list"></et2-select-number>
|
|
```
|