chore: update theme

oruga-ui · Nov 10, 2024 · 847d422 · 847d422
1 parent 7a20024
commit 847d422
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="theme-light">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />

diff --git 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
@@ -56,25 +56,38 @@ $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 {
         padding-bottom: 0.875rem;
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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" }],