From 847d422788cc6970ef62c82243a9d716dbdc9a9f Mon Sep 17 00:00:00 2001 From: mmoravek Date: Sun, 10 Nov 2024 15:53:17 +0100 Subject: [PATCH] chore: update theme --- index.html | 2 +- src/App.vue | 1 + src/assets/scss/components/_datepicker.scss | 29 +++++++++++----- src/assets/scss/components/_dropdown.scss | 22 +++++------- src/assets/scss/components/_input.scss | 10 ++++++ src/assets/scss/components/_menu.scss | 19 ++++++++++- src/assets/scss/components/_modal.scss | 4 +++ src/assets/scss/components/_steps.scss | 38 ++++++++++----------- src/assets/scss/components/_tabs.scss | 8 ++++- src/plugins/theme.ts | 11 ++++-- stylelint.config.mjs | 1 + 11 files changed, 99 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 11603f8..5912450 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/App.vue b/src/App.vue index d78ce1e..54dd89b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,6 +36,7 @@ import components from "@/components"; main { flex-grow: 1; + width: 100%; height: 100vh; padding: 2rem; padding-bottom: 6rem; diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss index 7887011..2ee132a 100644 --- a/src/assets/scss/components/_datepicker.scss +++ b/src/assets/scss/components/_datepicker.scss @@ -56,15 +56,25 @@ $datepicker-event-background-color: css.getVar("grey-light") !default; } } - // unset opacity when dropdow is disabled - .dropdown { + // dropdown override + .dropdown, + &.dropdown { + // unset opacity when dropdow is disabled &.is-disabled { opacity: 1; } - } - .dropdown-item { - font-size: inherit; + .dropdown-menu { + .dropdown-item { + @include css.register-vars( + ( + "dropdown-item-background-l-delta": "transparent", + ) + ); + font-size: inherit; + padding-inline-end: 1rem; + } + } } .datepicker-header { @@ -72,9 +82,12 @@ $datepicker-event-background-color: css.getVar("grey-light") !default; margin-bottom: 0.875rem; border-bottom: 1px solid css.getVar("grey-lighter"); - .pagination-previous, - .pagination-next { - border-width: css.getVar("button-border-width"); + .pagination { + button.pagination-previous, + button.pagination-next { + border-width: css.getVar("button-border-width"); + border-radius: css.getVar("control-radius"); + } } } diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss index 1608182..0423882 100644 --- a/src/assets/scss/components/_dropdown.scss +++ b/src/assets/scss/components/_dropdown.scss @@ -2,6 +2,8 @@ @use "bulma/sass/utilities/css-variables" as css; @use "bulma/sass/utilities/mixins" as mixins; +@use "bulma/sass/components/dropdown" as dropodown; + /* @docs */ $dropdown-mobile-breakpoint: vars.$desktop !default; $dropdown-background-background-color: hsla( @@ -43,6 +45,10 @@ $dropdown-z: 40 !default; } .dropdown-item { + @extend a; + + cursor: pointer; + &.is-disabled { cursor: not-allowed; opacity: css.getVar("dropdown-disabled-opacity"); @@ -85,6 +91,7 @@ $dropdown-z: 40 !default; position: static; display: inline-block; padding: 0; + overflow: auto; } // position classes @@ -174,23 +181,10 @@ $dropdown-z: 40 !default; overflow-y: auto; z-index: calc(css.getVar("dropdown-z") + 10); - > .dropdown-item, - > .has-link a { + > .dropdown-item { padding: 1rem 1.5rem; } } } } - - // polyfills for other stuff - - .dropdown-menu .has-link a { - @extend .dropdown-item; - padding-right: 3rem; - white-space: nowrap; - } - - .navbar-item { - height: 100%; - } } diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss index 0146f0e..9a290cd 100644 --- a/src/assets/scss/components/_input.scss +++ b/src/assets/scss/components/_input.scss @@ -1,7 +1,17 @@ +@use "utils/variables" as var; + .control { display: inline-block; &.is-expanded { width: 100%; } + + > .icon { + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + font-size: #{$value}; + } + } + } } diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss index b151f3f..c8e7de7 100644 --- a/src/assets/scss/components/_menu.scss +++ b/src/assets/scss/components/_menu.scss @@ -1 +1,18 @@ -// nothing todo here +@use "bulma/sass/utilities/css-variables" as css; + +.menu { + .menu-item { + &.is-disabled { + // --#{$prefix}menu-item-bg: var(--#{$prefix}menu-item-disabled-bg); + // --#{$prefix}menu-item-color: var( + // --#{$prefix}menu-item-disabled-color + // ); + + @include css.register-vars( + ( + "menu-item-background-l-delta": -10%, + ) + ); + } + } +} diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 2e60b71..e8e915b 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -6,4 +6,8 @@ max-height: 100vh; margin: 0; } + + .modal-content { + width: auto; + } } diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss index da44cab..c0989c9 100644 --- a/src/assets/scss/components/_steps.scss +++ b/src/assets/scss/components/_steps.scss @@ -22,32 +22,32 @@ $steps-vertical-padding: 1em 0 !default; /* @docs */ .steps-wrapper { - .steps { - @include css.register-vars( - ( - "steps-size": #{var.$size-normal}, - "steps-divider-height": #{$steps-divider-height}, - "steps-details-background-color": #{$steps-details-background-color}, - ) - ); + @include css.register-vars( + ( + "steps-size": #{var.$size-normal}, + "steps-divider-height": #{$steps-divider-height}, + "steps-details-background-color": #{$steps-details-background-color}, + ) + ); + + // sizes + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + @include css.register-vars( + ( + "steps-size": #{$value}, + ) + ); + } + } + .steps { display: flex; flex-wrap: wrap; font-size: css.getVar("steps-size"); min-height: calc(css.getVar("steps-size") * 2); list-style: none; - // sizes - @each $name, $value in var.$sizes-map { - &.is-#{$name} { - @include css.register-vars( - ( - "steps-size": #{$value}, - ) - ); - } - } - &.is-animated { .step { &:not(:first-child), diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss index 15129c4..1eec117 100644 --- a/src/assets/scss/components/_tabs.scss +++ b/src/assets/scss/components/_tabs.scss @@ -276,7 +276,7 @@ $tabs-toggle-link-focus-border-color: css.getVar( } } - .tab-content { + .tabs-content { position: relative; overflow: visible; display: flex; @@ -300,6 +300,7 @@ $tabs-toggle-link-focus-border-color: css.getVar( &.is-fullwidth { width: 100%; + .tab, .tab-link { width: 100%; } @@ -318,9 +319,14 @@ $tabs-toggle-link-focus-border-color: css.getVar( flex-wrap: wrap; .tabs { + flex-grow: 0; flex-direction: column; border-bottom-color: transparent !important; + .tab-link { + width: 100%; + } + &:not(.is-boxed) { .tab:not(:has(+ .tab .tab-link.is-active)) .tab-link { border-bottom-color: css.getVar("tabs-border-bottom-color"); diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts index dd85270..f8d9480 100644 --- a/src/plugins/theme.ts +++ b/src/plugins/theme.ts @@ -109,8 +109,10 @@ const bulmaConfig: OrugaOptions = { override: true, rootClass: "taginput control", containerClass: "taginput-container", - itemClass: "tag", closeClass: "delete is-small", + itemClass: "tag", + variantClass: "is-", + expandedClass: "is-expanded", }, pagination: { override: true, @@ -264,6 +266,10 @@ const bulmaConfig: OrugaOptions = { rootClass: "menu", listClass: "menu-list", listLabelClass: "menu-label", + itemButtonClass: "menu-item", + itemButtonActiveClass: "is-active", + itemButtonDisabledClass: "is-disabled", + itemSubmenuClass: "submenu", }, skeleton: { override: true, @@ -288,7 +294,6 @@ const bulmaConfig: OrugaOptions = { }, dropdown: { override: true, - itemTag: "a", rootClass: "dropdown", triggerClass: "dropdown-trigger", menuClass: "dropdown-content dropdown-menu", @@ -395,12 +400,14 @@ const bulmaConfig: OrugaOptions = { reduceClass: "is-mini", inlineClass: "is-inline", mobileClass: "is-", + scrollClipClass: "is-clipped", }, loading: { fullPageClass: "is-full-page", overlayClass: "loading-overlay", iconClass: "icon", rootClass: "loading", + scrollClipClass: "is-clipped", }, carousel: { override: true, diff --git a/stylelint.config.mjs b/stylelint.config.mjs index c094ac7..a796151 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -7,6 +7,7 @@ export default { plugins: ["stylelint-prettier", "stylelint-scss"], ignoreFiles: ["**/.*", "**/dist"], rules: { + "scss/operator-no-newline-after": [true, { severity: "warning" }], "scss/at-extend-no-missing-placeholder": null, "no-duplicate-selectors": [true, { severity: "warning" }], "no-descending-specificity": [true, { severity: "warning" }],