From 106562cb125273db7cde17cee28895b2d38cf19a Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Wed, 21 Feb 2024 21:23:38 +0100 Subject: [PATCH] Configure CSS linter `stylelint` (#327) --- .pre-commit-config.yaml | 10 ++++ .stylelintrc | 13 +++++ ..._li_nguyen_apply_alphabetical_css_order.md | 48 +++++++++++++++++++ vizro-ai/docs/stylesheets/extra.css | 16 +++---- ..._li_nguyen_apply_alphabetical_css_order.md | 48 +++++++++++++++++++ vizro-core/docs/stylesheets/extra.css | 20 ++++---- .../examples/_dev/assets/css/custom.css | 2 +- .../examples/demo/assets/css/custom.css | 6 +-- .../examples/features/assets/css/custom.css | 2 +- vizro-core/src/vizro/static/css/accordion.css | 16 +++---- vizro-core/src/vizro/static/css/checklist.css | 4 +- vizro-core/src/vizro/static/css/collapse.css | 6 ++- vizro-core/src/vizro/static/css/container.css | 2 +- vizro-core/src/vizro/static/css/dropdown.css | 24 +++++----- vizro-core/src/vizro/static/css/index.css | 6 +-- vizro-core/src/vizro/static/css/layout.css | 29 ++++++----- .../src/vizro/static/css/radio_item.css | 4 +- vizro-core/src/vizro/static/css/selectors.css | 1 + vizro-core/src/vizro/static/css/slider.css | 11 +++-- vizro-core/src/vizro/static/css/table.css | 3 +- vizro-core/src/vizro/static/css/toggle.css | 16 +++---- .../src/vizro/static/css/token_names.css | 2 +- .../src/vizro/static/css/typography.css | 2 +- .../src/vizro/static/css/user_input.css | 12 ++--- 24 files changed, 217 insertions(+), 86 deletions(-) create mode 100644 .stylelintrc create mode 100644 vizro-ai/changelog.d/20240221_181059_huong_li_nguyen_apply_alphabetical_css_order.md create mode 100644 vizro-core/changelog.d/20240221_180436_huong_li_nguyen_apply_alphabetical_css_order.md diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 8a7ceddc6..94adf0179 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -88,6 +88,16 @@ repos: entry: gitleaks detect --verbose --redact --baseline-path .gitleaks-report.json language: golang + - repo: https://github.com/awebdeveloper/pre-commit-stylelint + rev: "0.0.2" + hooks: + - id: stylelint + additional_dependencies: + - stylelint@16.2.1 + - stylelint-config-standard@36.0.0 + - stylelint-order@4.1.0 + args: ["--fix"] + # Configuration for https://pre-commit.ci/. ci: autoupdate_schedule: monthly diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 000000000..7075ac01f --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,13 @@ +{ + "extends": "stylelint-config-standard", + "plugins": ["stylelint-order"], + "rules": { + "order/properties-alphabetical-order": true, + "selector-class-pattern": null, + "custom-property-pattern": null, + "color-function-notation": "legacy", + "alpha-value-notation": "number", + "color-hex-length": "long", + "selector-not-notation": null + } +} diff --git a/vizro-ai/changelog.d/20240221_181059_huong_li_nguyen_apply_alphabetical_css_order.md b/vizro-ai/changelog.d/20240221_181059_huong_li_nguyen_apply_alphabetical_css_order.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-ai/changelog.d/20240221_181059_huong_li_nguyen_apply_alphabetical_css_order.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-ai/docs/stylesheets/extra.css b/vizro-ai/docs/stylesheets/extra.css index 5e48e8347..7cc000719 100644 --- a/vizro-ai/docs/stylesheets/extra.css +++ b/vizro-ai/docs/stylesheets/extra.css @@ -1,28 +1,28 @@ .card-section-wrapper { - display: flex; align-items: center; + display: flex; } .responsive-grid { display: grid; - width: 100%; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - grid-auto-rows: auto; gap: 1.5rem; + grid-auto-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + width: 100%; } .card-section-wrapper .responsive-grid a { - text-decoration: none; - transition: none; background: none; - padding: 0; color: black; + padding: 0; + text-decoration: none; + transition: none; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - transition: 0.3s; height: 100%; + transition: 0.3s; } .card:hover { diff --git a/vizro-core/changelog.d/20240221_180436_huong_li_nguyen_apply_alphabetical_css_order.md b/vizro-core/changelog.d/20240221_180436_huong_li_nguyen_apply_alphabetical_css_order.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240221_180436_huong_li_nguyen_apply_alphabetical_css_order.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/stylesheets/extra.css b/vizro-core/docs/stylesheets/extra.css index 928e43e42..5e73b7fc5 100644 --- a/vizro-core/docs/stylesheets/extra.css +++ b/vizro-core/docs/stylesheets/extra.css @@ -1,28 +1,28 @@ .card-section-wrapper { - display: flex; align-items: center; + display: flex; } .responsive-grid { display: grid; - width: 100%; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - grid-auto-rows: auto; gap: 1.5rem; + grid-auto-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + width: 100%; } .card-section-wrapper .responsive-grid a { - text-decoration: none; - transition: none; background: none; - padding: 0; color: black; + padding: 0; + text-decoration: none; + transition: none; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - transition: 0.3s; height: 100%; + transition: 0.3s; } .card:hover { @@ -45,18 +45,20 @@ td:not([class]):not(:last-child) { :root { --md-admonition-icon--details: url('data:image/svg+xml;charset=utf-8,'); } + .md-typeset .admonition.details, .md-typeset details.details { border-color: rgb(158, 158, 158); } + .md-typeset .details > .admonition-title, .md-typeset .details > summary { background-color: rgba(245, 245, 245, 0.3); opacity: 0.5; } + .md-typeset .details > .admonition-title::before, .md-typeset .details > summary::before { background-color: rgb(3, 3, 3); - -webkit-mask-image: var(--md-admonition-icon--details); mask-image: var(--md-admonition-icon--details); } diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 6859f4d3e..a993dd77f 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -1,4 +1,4 @@ #logo { - margin-left: -8px; height: 40px; + margin-left: -8px; } diff --git a/vizro-core/examples/demo/assets/css/custom.css b/vizro-core/examples/demo/assets/css/custom.css index 4cc69c059..b1cfc7f41 100644 --- a/vizro-core/examples/demo/assets/css/custom.css +++ b/vizro-core/examples/demo/assets/css/custom.css @@ -1,11 +1,11 @@ img[src*="#my-image"] { - width: 100px; - height: 100px; float: left; + height: 100px; margin: 10px 25px; + width: 100px; } #logo { - margin-left: -8px; height: 40px; + margin-left: -8px; } diff --git a/vizro-core/examples/features/assets/css/custom.css b/vizro-core/examples/features/assets/css/custom.css index 6859f4d3e..a993dd77f 100644 --- a/vizro-core/examples/features/assets/css/custom.css +++ b/vizro-core/examples/features/assets/css/custom.css @@ -1,4 +1,4 @@ #logo { - margin-left: -8px; height: 40px; + margin-left: -8px; } diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css index 5cb7b1861..6473073e6 100644 --- a/vizro-core/src/vizro/static/css/accordion.css +++ b/vizro-core/src/vizro/static/css/accordion.css @@ -1,4 +1,4 @@ -/* media queries necessary for opening and closing accordion*/ +/* media queries necessary for opening and closing accordion */ @media (prefers-reduced-motion: reduce) { .fade { transition: none; @@ -51,13 +51,6 @@ color: var(--text-primary); } -.accordion-button:not(.collapsed)::after { - background-position: left; - font-size: 16px; - font-weight: 600; - transform: scaleX(1.3) rotate(180deg); -} - .accordion-button::after { background-repeat: no-repeat; content: "\2304"; @@ -72,6 +65,13 @@ transition: transform 0.3s ease-in-out; } +.accordion-button:not(.collapsed)::after { + background-position: left; + font-size: 16px; + font-weight: 600; + transform: scaleX(1.3) rotate(180deg); +} + .accordion-header { font-size: var(--text-size-02); } diff --git a/vizro-core/src/vizro/static/css/checklist.css b/vizro-core/src/vizro/static/css/checklist.css index 166e9bf26..68cbd1822 100644 --- a/vizro-core/src/vizro/static/css/checklist.css +++ b/vizro-core/src/vizro/static/css/checklist.css @@ -1,6 +1,6 @@ input[type="checkbox" i] { align-items: center; - -webkit-appearance: none; + appearance: none; border: 1px solid var(--text-secondary); display: inline-flex; height: 16px; @@ -9,7 +9,7 @@ input[type="checkbox" i] { width: 16px; } -input[type="checkbox"]:checked:before { +input[type="checkbox"]:checked::before { color: var(--text-primary); content: "✓"; display: flex; diff --git a/vizro-core/src/vizro/static/css/collapse.css b/vizro-core/src/vizro/static/css/collapse.css index a26aff483..3d84d4b69 100644 --- a/vizro-core/src/vizro/static/css/collapse.css +++ b/vizro-core/src/vizro/static/css/collapse.css @@ -3,6 +3,7 @@ transition: none; } } + .fade:not(.show) { opacity: 0; } @@ -16,16 +17,19 @@ overflow: hidden; transition: height 0.35s ease; } + @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } + .collapsing.collapse-horizontal { - width: 0; height: auto; transition: width 0.35s ease; + width: 0; } + @media (prefers-reduced-motion: reduce) { .collapsing.collapse-horizontal { transition: none; diff --git a/vizro-core/src/vizro/static/css/container.css b/vizro-core/src/vizro/static/css/container.css index 5d55ea124..6fe15633f 100644 --- a/vizro-core/src/vizro/static/css/container.css +++ b/vizro-core/src/vizro/static/css/container.css @@ -1,5 +1,5 @@ .page-component-container { - height: 100%; display: flex; flex-direction: column; + height: 100%; } diff --git a/vizro-core/src/vizro/static/css/dropdown.css b/vizro-core/src/vizro/static/css/dropdown.css index 7a6c02e1b..83f53a5f2 100644 --- a/vizro-core/src/vizro/static/css/dropdown.css +++ b/vizro-core/src/vizro/static/css/dropdown.css @@ -47,6 +47,10 @@ margin-left: unset; } +.Select-input > input { + padding: 0 !important; /* Required so tags don't jump caused by adding table */ +} + #page-container.Select-input > input { height: 100%; padding: 0; @@ -72,7 +76,7 @@ ) !important; /* Required so text color don't change caused by adding table */ } -/* Tags ---------------------------*/ +/* Tags --------------------------- */ #page-container .Select--multi .Select-value { background-color: var(--tags-bg-color); border: 0; @@ -96,9 +100,9 @@ /* Tag: Cross */ #page-container .Select--multi .Select-value-icon { - color: var(--text-secondary); background: inherit; border: none; + color: var(--text-secondary); line-height: inherit; margin: 0; padding: 0; @@ -116,6 +120,11 @@ width: 16px; } +#nav-panel a { + font-weight: var(--text-weight-regular); + line-height: var(--text-size-07); +} + /* Page Selector Dropdown */ #page-container .dash-dropdown @@ -130,14 +139,9 @@ width: 100%; } -#nav-panel a { - font-weight: var(--text-weight-regular); - line-height: var(--text-size-07); -} - #page-container .Select--multi .Select-clear-zone { - width: 16px; color: var(--text-secondary); + width: 16px; } /** spacing for tag elements only when elements are present inside @@ -148,7 +152,3 @@ wrapper **/ gap: 4px; padding: 4px 8px; } - -.Select-input > input { - padding: 0 !important; /* Required so tags don't jump caused by adding table */ -} diff --git a/vizro-core/src/vizro/static/css/index.css b/vizro-core/src/vizro/static/css/index.css index 92440cb85..e493cbb3c 100644 --- a/vizro-core/src/vizro/static/css/index.css +++ b/vizro-core/src/vizro/static/css/index.css @@ -1,17 +1,17 @@ @font-face { - font-family: "Inter"; + font-family: Inter; src: url("./fonts/inter-variable-font.ttf") format("truetype"); } @font-face { - font-family: "RobotoMono"; + font-family: RobotoMono; src: url("./fonts/roboto-mono-variable-font.ttf") format("truetype"); } * { border: 0; box-sizing: border-box; - font-family: Inter, Sans-Serif, Arial, serif; + font-family: Inter, sans-serif, Arial, serif; letter-spacing: 0; margin: 0; text-decoration: none; diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index adef56151..0b3b9fa85 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -45,11 +45,11 @@ background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - justify-content: space-between; height: 64px; + justify-content: space-between; + min-height: 0; padding: 0 32px; width: 100%; - min-height: 0; } #page-header:not(:empty) { @@ -62,8 +62,8 @@ .grid-layout { display: grid; - width: 100%; height: 100%; + width: 100%; } #nav-panel { @@ -81,7 +81,7 @@ display: flex; flex-direction: column; gap: var(--spacing-06); - padding: 4px 0 24px 0; + padding: 4px 0 24px; } #control-panel:not(:empty) { @@ -145,6 +145,7 @@ div.dashboard_container .custom-tooltip { .icon-button.btn.btn-primary.active .material-symbols-outlined { color: var(--text-active); } + .loading-container { height: 100%; width: 100%; @@ -155,7 +156,7 @@ div.dashboard_container .custom-tooltip { border-radius: 0; box-shadow: var(--box-shadow-elevation-tooltip-hover); color: var(--tooltip-text-primary); - filter: drop-shadow(0px 2px 2px #141721); + filter: drop-shadow(0 2px 2px #141721); font-size: var(--text-size-01); font-weight: var(--text-weight-light); letter-spacing: var(--letter-spacing-help-text); @@ -203,11 +204,11 @@ div.dashboard_container .custom-tooltip { } #collapse-icon.material-symbols-outlined { - position: absolute; + background-color: var(--tooltip-bg-color); border-radius: 50%; - cursor: pointer; color: var(--text-disabled); - background-color: var(--tooltip-bg-color); + cursor: pointer; + position: absolute; } #collapse-icon.material-symbols-outlined:hover { @@ -215,21 +216,23 @@ div.dashboard_container .custom-tooltip { } .collapse-button-tooltip { + height: 24px; + left: -12px; position: relative; top: 36px; - left: -12px; - height: 24px; width: 0 !important; } /* Note: This is only meant as a quick-fix to improve some of the mobile layouts. */ + /* Long-term wise this should be replaced by refactoring our CSS code and components to be mobile-compatible. */ + /* Applies to device size x-small and small */ -@media (max-width: 576px) { +@media (width <= 576px) { .grid-layout { display: flex; - flex-direction: column; flex: 1; + flex-direction: column; } .collapse-button-tooltip { @@ -249,7 +252,7 @@ div.dashboard_container .custom-tooltip { } } -@media (max-height: 576px) { +@media (height <= 576px) { .collapse-button-tooltip { top: 28px; } diff --git a/vizro-core/src/vizro/static/css/radio_item.css b/vizro-core/src/vizro/static/css/radio_item.css index 65b82119f..d9231ad38 100644 --- a/vizro-core/src/vizro/static/css/radio_item.css +++ b/vizro-core/src/vizro/static/css/radio_item.css @@ -1,5 +1,5 @@ input[type="radio" i] { - -webkit-appearance: none; + appearance: none; border: 1px solid var(--text-secondary); border-radius: 50%; height: 16px; @@ -17,7 +17,7 @@ input[type="radio"]:focus { box-shadow: 0 0 0 2px var(--text-secondary); } -input[type="radio"]:checked:before { +input[type="radio"]:checked::before { background-color: var(--text-primary); border-radius: 50%; content: ""; diff --git a/vizro-core/src/vizro/static/css/selectors.css b/vizro-core/src/vizro/static/css/selectors.css index 7840ce6ef..876e40d85 100644 --- a/vizro-core/src/vizro/static/css/selectors.css +++ b/vizro-core/src/vizro/static/css/selectors.css @@ -10,6 +10,7 @@ } /* TODO: Consolidate gaps between all the containers. Check latest Figma design. */ + /* Eventually remove the need for all the different containers afterwards. */ .selector_container, .selector_dropdown_container, diff --git a/vizro-core/src/vizro/static/css/slider.css b/vizro-core/src/vizro/static/css/slider.css index 21254daa4..381111841 100644 --- a/vizro-core/src/vizro/static/css/slider.css +++ b/vizro-core/src/vizro/static/css/slider.css @@ -1,7 +1,7 @@ .rc-slider { flex: auto; height: 24px; - margin: 4px -12px 0 -12px; + margin: 4px -12px 0; } .rc-slider-rail, @@ -35,7 +35,7 @@ border-color: var(--fill-on-active); border-radius: 100%; height: 16px; - margin: -8px 0 0 0; + margin: -8px 0 0; position: absolute; width: 16px; } @@ -86,11 +86,12 @@ } .range_slider_control_no_space { - margin: 2px 8px -4px 0px; - padding: 0 30px 25px 30px !important; + margin: 2px 8px -4px 0; + padding: 0 30px 25px !important; } + .range_slider_control { - padding: 0 30px 25px 30px !important; + padding: 0 30px 25px !important; } .slider_input_field_left, diff --git a/vizro-core/src/vizro/static/css/table.css b/vizro-core/src/vizro/static/css/table.css index 91c65783b..d31f60fb4 100644 --- a/vizro-core/src/vizro/static/css/table.css +++ b/vizro-core/src/vizro/static/css/table.css @@ -22,6 +22,7 @@ .dash-spreadsheet-inner table { --hover: var(--main-container-bg-color); + width: 100%; } @@ -47,8 +48,8 @@ } #right-side .dash-table-container .previous-next-container { - padding: 4px 0; font-size: 14px; + padding: 4px 0; } .table-container { diff --git a/vizro-core/src/vizro/static/css/toggle.css b/vizro-core/src/vizro/static/css/toggle.css index 8671f947e..9fc650ff2 100644 --- a/vizro-core/src/vizro/static/css/toggle.css +++ b/vizro-core/src/vizro/static/css/toggle.css @@ -3,12 +3,12 @@ } #page-container .mantine-Switch-track { - min-width: 32px; - width: 32px; - height: 16px; background-color: var(--fill-subtle); - border-radius: 16px; border: 1px solid var(--border-enabled); + border-radius: 16px; + height: 16px; + min-width: 32px; + width: 32px; } #page-container .mantine-Switch-track:focus { @@ -20,21 +20,21 @@ } #page-container .mantine-Switch-trackLabel { + height: 16px; margin: 0; width: 32px; - height: 16px; } #page-container .mantine-Switch-thumb { + background-color: var(--fill-medium-emphasis); border: none; - width: 10px; height: 10px; - background-color: var(--fill-medium-emphasis); + width: 10px; } #page-container input:checked + * > .mantine-11dx59s { - left: calc(100% - 12px); background: var(--text-contrast-primary); + left: calc(100% - 12px); } #page-container input:checked + * > .mantine-69c9zd { diff --git a/vizro-core/src/vizro/static/css/token_names.css b/vizro-core/src/vizro/static/css/token_names.css index bf1db857d..0b8acbeb3 100644 --- a/vizro-core/src/vizro/static/css/token_names.css +++ b/vizro-core/src/vizro/static/css/token_names.css @@ -28,7 +28,7 @@ --text-dark-mode-placeholder: rgba(255, 255, 255, 0.38); --text-dark-mode-primary: rgba(255, 255, 255, 0.88); --text-dark-mode-secondary: rgba(255, 255, 255, 0.6); - --border-dark-mode-selected: #fff; + --border-dark-mode-selected: #ffffff; --fill-dark-mode-subtle: rgba(255, 255, 255, 0.1); --border-dark-mode-subtle-alpha-01: rgba(255, 255, 255, 0.1); --status-dark-mode-success: rgba(64, 216, 110, 1); diff --git a/vizro-core/src/vizro/static/css/typography.css b/vizro-core/src/vizro/static/css/typography.css index 2a77a47f8..d92cf4861 100644 --- a/vizro-core/src/vizro/static/css/typography.css +++ b/vizro-core/src/vizro/static/css/typography.css @@ -107,7 +107,7 @@ code, background: var(--surfaces-bg-card); border-radius: 2px; color: var(--text-primary); - font-family: RobotoMono, Inter, Sans-Serif, Arial, serif; + font-family: RobotoMono, Inter, sans-serif, Arial, serif; font-size: var(--text-size-01); font-weight: var(--text-weight-regular); line-height: var(--text-size-03); diff --git a/vizro-core/src/vizro/static/css/user_input.css b/vizro-core/src/vizro/static/css/user_input.css index a8f540616..1ca81ba68 100644 --- a/vizro-core/src/vizro/static/css/user_input.css +++ b/vizro-core/src/vizro/static/css/user_input.css @@ -10,6 +10,10 @@ textarea { text-overflow: ellipsis; } +textarea { + padding: var(--spacing-03) var(--spacing-03) var(--spacing-04); +} + .user_input { gap: var(--spacing-02); height: 32px; @@ -25,10 +29,6 @@ textarea:enabled { color: var(--text-primary); } -textarea { - padding: var(--spacing-03) var(--spacing-03) var(--spacing-04); -} - .user_input:hover, textarea:hover { background: var(--field-hover); @@ -43,7 +43,7 @@ textarea:focus { outline: none; } -/* Should be replaced by a custom icon at some point*/ +/* Should be replaced by a custom icon at some point */ input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; + appearance: none; }