mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-04 05:44:32 +01:00

nathan 99c86d58bd - Add custom button color example to docs

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

2024-04-04 14:31:27 -06:00

4.0 KiB

Raw Blame History

Styling

Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css and Shoelace styles

Some handy excerpts:

Global CSS variables

: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 as well

<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 cssdisplay: none

hideme

Hides the element using cssdisplay: 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 Note how 'Responsible' widget wraps

Directly Customising Widgets

If you need to customise an individual widget further, you can use CSS Parts or Custom Properties to directly override the widget's internal styling.

Examples

Custom Button Color

<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.

<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>

4.0 KiB Raw Blame History