From 3f16620dc1627838d35035230392c14df39c21d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dan=20B=C3=BCschlen?= Date: Wed, 6 Dec 2023 15:55:27 +0100 Subject: [PATCH] refactor: move styles to external css files (#75) --- src/components/checkbox/Checkbox.js | 83 +----------------- src/components/checkbox/CheckboxGroup.js | 36 +------- src/components/checkbox/checkbox-group.css | 29 +++++++ src/components/checkbox/checkbox.css | 76 +++++++++++++++++ src/components/radio/RadioGroup.js | 36 +------- src/components/radio/radio-group.css | 29 +++++++ src/components/table/Table.js | 92 +------------------- src/components/table/table.css | 99 ++++++++++++++++++++++ 8 files changed, 249 insertions(+), 231 deletions(-) create mode 100644 src/components/checkbox/checkbox-group.css create mode 100644 src/components/checkbox/checkbox.css create mode 100644 src/components/radio/radio-group.css create mode 100644 src/components/table/table.css diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js index 8deee4b5..58245796 100644 --- a/src/components/checkbox/Checkbox.js +++ b/src/components/checkbox/Checkbox.js @@ -1,89 +1,14 @@ -import { html, css, LitElement } from "lit" +import { html, LitElement } from "lit" import { Icon } from "../icon/icon.js" import { defineElement } from "../../lib/defineElement.js" +import styles from "./checkbox.css" + /** * @tagname leu-checkbox */ export class LeuCheckbox extends LitElement { - static styles = css` - :host { - --checkbox-color: var(--leu-color-black-40); - --checkbox-color-disabled: var(--leu-color-black-20); - --checkbox-color-focus: var(--leu-color-func-cyan); - - --checkbox-label-color: var(--leu-color-black-100); - --checkbox-label-color-disabled: var(--checkbox-color-disabled); - - --checkbox-tick-color: var(--leu-color-black-0); - - --checkbox-font-regular: var(--leu-font-regular); - - position: relative; - - display: inline-flex; - align-items: flex-start; - gap: 0.5rem; - - font-family: var(--checkbox-font-regular); - } - - .checkbox { - --_length: 1.5rem; - appearance: none; - cursor: pointer; - - width: var(--_length); - height: var(--_length); - margin: 0; - - border: 2px solid var(--checkbox-color); - border-radius: 2px; - - flex: 1 0 var(--_length); - - display: grid; - place-items: center; - } - - .checkbox:checked { - background-color: var(--checkbox-color); - } - - .checkbox:is(:hover, :checked, :focus) { - --checkbox-color: var(--checkbox-color-focus); - } - - .checkbox:focus-visible { - outline: 2px solid var(--checkbox-color-focus); - outline-offset: 2px; - } - - .checkbox:disabled { - --checkbox-color: var(--checkbox-color-disabled); - cursor: not-allowed; - } - - .label { - cursor: pointer; - color: var(--checkbox-label-color); - font-size: 1rem; - line-height: 1.5; - } - - .checkbox:disabled + .label { - --checkbox-label-color: var(--checkbox-label-color-disabled); - cursor: not-allowed; - } - - .icon { - position: absolute; - top: 0; - left: 0; - color: var(--checkbox-tick-color); - pointer-events: none; - } - ` + static styles = styles static shadowRootOptions = { ...LitElement.shadowRootOptions, diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js index 35cb29e0..85aa92d6 100644 --- a/src/components/checkbox/CheckboxGroup.js +++ b/src/components/checkbox/CheckboxGroup.js @@ -1,42 +1,14 @@ -import { html, css, LitElement } from "lit" +import { html, LitElement } from "lit" import { classMap } from "lit/directives/class-map.js" import { defineElement } from "../../lib/defineElement.js" +import styles from "./checkbox-group.css" + /** * @tagname leu-checkbox-group */ export class LeuCheckboxGroup extends LitElement { - static styles = css` - :host { - --group-font-regular: var(--leu-font-regular); - --group-font-black: var(--leu-font-black); - - font-family: var(--group-font-regular); - } - - .fieldset { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - gap: 0.5rem 1rem; - - border: none; - padding: 0; - } - - .fieldset--vertical { - flex-direction: column; - gap: 1rem; - } - - .legend { - font-family: var(--group-font-black); - font-size: 1.125rem; - line-height: 1.5; - - margin-bottom: 0.5rem; - } - ` + static styles = styles static properties = { orientation: { type: String, reflect: true }, diff --git a/src/components/checkbox/checkbox-group.css b/src/components/checkbox/checkbox-group.css new file mode 100644 index 00000000..0f081b1c --- /dev/null +++ b/src/components/checkbox/checkbox-group.css @@ -0,0 +1,29 @@ +:host { + --group-font-regular: var(--leu-font-regular); + --group-font-black: var(--leu-font-black); + + font-family: var(--group-font-regular); +} + +.fieldset { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + gap: 0.5rem 1rem; + + border: none; + padding: 0; +} + +.fieldset--vertical { + flex-direction: column; + gap: 1rem; +} + +.legend { + font-family: var(--group-font-black); + font-size: 1.125rem; + line-height: 1.5; + + margin-bottom: 0.5rem; +} diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css new file mode 100644 index 00000000..a30f39d2 --- /dev/null +++ b/src/components/checkbox/checkbox.css @@ -0,0 +1,76 @@ +:host { + --checkbox-color: var(--leu-color-black-40); + --checkbox-color-disabled: var(--leu-color-black-20); + --checkbox-color-focus: var(--leu-color-func-cyan); + + --checkbox-label-color: var(--leu-color-black-100); + --checkbox-label-color-disabled: var(--checkbox-color-disabled); + + --checkbox-tick-color: var(--leu-color-black-0); + + --checkbox-font-regular: var(--leu-font-regular); + + position: relative; + + display: inline-flex; + align-items: flex-start; + gap: 0.5rem; + + font-family: var(--checkbox-font-regular); +} + +.checkbox { + --_length: 1.5rem; + appearance: none; + cursor: pointer; + + width: var(--_length); + height: var(--_length); + margin: 0; + + border: 2px solid var(--checkbox-color); + border-radius: 2px; + + flex: 1 0 var(--_length); + + display: grid; + place-items: center; +} + +.checkbox:checked { + background-color: var(--checkbox-color); +} + +.checkbox:is(:hover, :checked, :focus) { + --checkbox-color: var(--checkbox-color-focus); +} + +.checkbox:focus-visible { + outline: 2px solid var(--checkbox-color-focus); + outline-offset: 2px; +} + +.checkbox:disabled { + --checkbox-color: var(--checkbox-color-disabled); + cursor: not-allowed; +} + +.label { + cursor: pointer; + color: var(--checkbox-label-color); + font-size: 1rem; + line-height: 1.5; +} + +.checkbox:disabled + .label { + --checkbox-label-color: var(--checkbox-label-color-disabled); + cursor: not-allowed; +} + +.icon { + position: absolute; + top: 0; + left: 0; + color: var(--checkbox-tick-color); + pointer-events: none; +} diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js index ef337f7e..5899e78d 100644 --- a/src/components/radio/RadioGroup.js +++ b/src/components/radio/RadioGroup.js @@ -1,42 +1,14 @@ -import { html, css, LitElement } from "lit" +import { html, LitElement } from "lit" import { classMap } from "lit/directives/class-map.js" import { defineElement } from "../../lib/defineElement.js" +import styles from "./radio-group.css" + /** * @tagname leu-radio-group */ export class LeuRadioGroup extends LitElement { - static styles = css` - :host { - --group-font-regular: var(--leu-font-regular); - --group-font-black: var(--leu-font-black); - - font-family: var(--group-font-regular); - } - - .fieldset { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - gap: 0.5rem 1rem; - - border: none; - padding: 0; - } - - .fieldset--vertical { - flex-direction: column; - gap: 1rem; - } - - .legend { - font-family: var(--group-font-black); - font-size: 1.125rem; - line-height: 1.5; - - margin-bottom: 0.5rem; - } - ` + static styles = styles static properties = { orientation: { type: String, reflect: true }, diff --git a/src/components/radio/radio-group.css b/src/components/radio/radio-group.css new file mode 100644 index 00000000..0f081b1c --- /dev/null +++ b/src/components/radio/radio-group.css @@ -0,0 +1,29 @@ +:host { + --group-font-regular: var(--leu-font-regular); + --group-font-black: var(--leu-font-black); + + font-family: var(--group-font-regular); +} + +.fieldset { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + gap: 0.5rem 1rem; + + border: none; + padding: 0; +} + +.fieldset--vertical { + flex-direction: column; + gap: 1rem; +} + +.legend { + font-family: var(--group-font-black); + font-size: 1.125rem; + line-height: 1.5; + + margin-bottom: 0.5rem; +} diff --git a/src/components/table/Table.js b/src/components/table/Table.js index 4fd781ca..74704de1 100644 --- a/src/components/table/Table.js +++ b/src/components/table/Table.js @@ -1,4 +1,4 @@ -import { html, css, LitElement, nothing } from "lit" +import { html, LitElement, nothing } from "lit" import { classMap } from "lit/directives/class-map.js" import { styleMap } from "lit/directives/style-map.js" import { createRef, ref } from "lit/directives/ref.js" @@ -6,97 +6,13 @@ import { Icon } from "../icon/icon.js" import { defineElement } from "../../lib/defineElement.js" import { definePaginationElements } from "../pagination/Pagination.js" +import styles from "./table.css" + /** * @tagname leu-table */ export class LeuTable extends LitElement { - static styles = css` - :host { - position: relative; - display: block; - } - div.scroll { - display: inline-block; - width: 100%; - overflow: auto; - } - div.shadow { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 1; - } - div.pagination { - height: calc(100% - 66px); - } - table { - width: 100%; - border-spacing: 0; - color: rgb(0 0 0 / 60%); - font-size: 16px; - font-family: var(--leu-font-regular); - line-height: 1.5; - } - td { - padding: 12px; - } - th { - padding: 16px 16px 8px; - text-align: left; - font-size: 12px; - font-weight: normal; - font-family: var(--leu-font-black); - background: var(--table-even-row-bg); - } - td:first-child, - th:first-child { - left: 0; - background: inherit; - z-index: 1; - } - tr { - background: #fff; - } - tbody tr:nth-child(odd) { - background: var(--leu-color-black-5); - } - button { - background: none; - cursor: pointer; - line-height: 1.5; - padding: 0; - border: 0; - width: 100%; - display: flex; - align-items: flex-center; - font-size: inherit; - font-family: inherit; - } - thead svg { - display: inline-block; - color: var(--leu-color-accent-blue); - padding: 0; - } - - table.sticky td:first-child, - table.sticky th:first-child { - position: sticky; - } - div.shadow-left table.sticky td:first-child, - div.shadow-left table.sticky th:first-child { - box-shadow: 0 0 5px rgb(0 0 0 / 50%); - clip-path: inset(0 -15px 0 0); - } - div.shadow-left { - box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%); - } - div.shadow-right { - box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%); - } - ` + static styles = styles static properties = { columns: { type: Array }, diff --git a/src/components/table/table.css b/src/components/table/table.css new file mode 100644 index 00000000..ea0cd29e --- /dev/null +++ b/src/components/table/table.css @@ -0,0 +1,99 @@ +:host { + position: relative; + display: block; +} + +div.scroll { + display: inline-block; + width: 100%; + overflow: auto; +} + +div.shadow { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} + +div.pagination { + height: calc(100% - 66px); +} + +table { + width: 100%; + border-spacing: 0; + color: rgb(0 0 0 / 60%); + font-size: 16px; + font-family: var(--leu-font-regular); + line-height: 1.5; +} + +td { + padding: 12px; +} + +th { + padding: 16px 16px 8px; + text-align: left; + font-size: 12px; + font-weight: normal; + font-family: var(--leu-font-black); + background: var(--table-even-row-bg); +} + +td:first-child, +th:first-child { + left: 0; + background: inherit; + z-index: 1; +} + +tr { + background: #fff; +} + +tbody tr:nth-child(odd) { + background: var(--leu-color-black-5); +} + +button { + background: none; + cursor: pointer; + line-height: 1.5; + padding: 0; + border: 0; + width: 100%; + display: flex; + align-items: flex-center; + font-size: inherit; + font-family: inherit; +} + +thead svg { + display: inline-block; + color: var(--leu-color-accent-blue); + padding: 0; +} + +table.sticky td:first-child, +table.sticky th:first-child { + position: sticky; +} + +div.shadow-left table.sticky td:first-child, +div.shadow-left table.sticky th:first-child { + box-shadow: 0 0 5px rgb(0 0 0 / 50%); + clip-path: inset(0 -15px 0 0); +} + +div.shadow-left { + box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%); +} + +div.shadow-right { + box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%); +}