holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP styling buttons and color definitions

Browse Source
This commit is contained in:
Hadi Nategh 2022-01-18 15:13:48 +01:00
parent 32be8200a6
commit 8b9e81fbfd
3 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api/js/etemplate/Et2Button/ButtonStyles.ts Normal file
View File

@ -0,0 +1,24 @@
/**
* Sharable button styles constant
*/
import {css} from "@lion/core";
import {colorsDefStyles} from "../Styles/colorsDefStyles";
export const buttonStyles = [
colorsDefStyles,
css`
:host {
border: 1px solid gray;
color: var(--gray_70, #505050);
background-color: var(--gray_10, #e6e6e6);
border-radius: 3px;
}
:host(:hover) {
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
background-color: var(--bg_color_15_gray, #d9d9d9);
}
:host(:active) {
box-shadow: inset 1px 2px 1px rgb(0 0 0 / 50%);
}
`];

4
api/js/etemplate/Et2Button/Et2Button.ts
View File

@ -13,6 +13,7 @@ import {css, html} from "@lion/core";
import {LionButton} from "@lion/button"; import {LionButton} from "@lion/button";
import {SlotMixin} from "@lion/core"; import {SlotMixin} from "@lion/core";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {buttonStyles} from "./ButtonStyles";
export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{ {
@ -55,12 +56,11 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{ {
return [ return [
...super.styles, ...super.styles,
buttonStyles,
css` css`
:host { :host {
padding: 1px 8px; padding: 1px 8px;
/* These should probably come from somewhere else */ /* These should probably come from somewhere else */
border-radius: 3px;
background-color: #e6e6e6;
max-width: 125px; max-width: 125px;
} }
:host([readonly]) { :host([readonly]) {

35
api/js/etemplate/Styles/colorsDefStyles.ts Normal file
View File

@ -0,0 +1,35 @@
/**
* Sharable colors definition styles constant
*/
import {css} from "@lion/core";
export const colorsDefStyles = css`
:host {
/****** colors ************/
--gray_100 : #000000;
--gray_90 : #1E1E1E;
--gray_80 : #373737;
--gray_70 : #505050;
--gray_60 : #696969;
--gray_50 : #828282;
--gray_40 : #9B9B9B;
--gray_30 : #B4B4B4;
--gray_20 : #CDCDCD;
--gray_10 : #E6E6E6;
--gray_5 : #F2F2F2;
--gray_0 : #FFFFFF;
/****** Backgrounds *******/
--bg_color_0_gray : #FFFFFF;
--bg_color_5_gray : #FAFAFA;
--bg_color_10_gray : #F0F0F0;
--bg_color_15_gray : #D9D9D9;
--bg_color_20_gray : #CCCCCC;
--bg_color_25_gray : #BFBFBF;
--bg_color_30_gray : #B3B3B3;
--bg_color_40_gray : #999999;
--bg_color_50_gray : #808080;
}
`;