From abe03cef3f691f6e56faee991cd2da9c45244279 Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Sat, 20 Jul 2024 11:56:31 +0200 Subject: [PATCH] Refactor styles to match new CSS nesting behavior This commit refactors SCSS to resolve deprecation warnings related to mixed declaration after nested rules. Sass is changing how it processes declarations that appear after nested rules to align with CSS standards. Previously, Sass would hoist declarations to avoid duplicating selectors, However, this behavior will soon change to make declarations apply in the order they appear, as per CSS standards. --- src/presentation/assets/styles/_mixins.scss | 10 +++++----- src/presentation/components/App.vue | 6 ++++-- .../components/Code/CodeButtons/IconButton.vue | 4 ++-- .../RecommendationDocumentation.vue | 3 ++- .../Menu/Revert/RevertStatusDocumentation.vue | 4 +++- .../components/Scripts/Slider/SliderHandle.vue | 17 +++++++++++------ .../Documentation/DocumentableNode.vue | 11 +++++++---- .../Tree/TreeView/Node/HierarchicalTreeNode.vue | 6 +++--- .../components/Shared/TooltipWrapper.vue | 6 +++--- .../components/TheFooter/TheFooter.vue | 4 +++- 10 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss index 20211bc2..6a14e527 100644 --- a/src/presentation/assets/styles/_mixins.scss +++ b/src/presentation/assets/styles/_mixins.scss @@ -29,9 +29,9 @@ for interactive elements during hover or touch interactions. */ @mixin clickable($cursor: 'pointer') { - cursor: #{$cursor}; user-select: none; -webkit-tap-highlight-color: transparent; // Removes blue tap highlight + cursor: #{$cursor}; } @mixin fade-transition($name) { @@ -120,13 +120,13 @@ } @mixin set-property-ch-value-with-fallback($property, $value-in-ch) { - @supports (width: 1ch) { - #{$property}: #{$value-in-ch}ch; - } - // For browsers that does not support `ch` unit (e.g., Opera Mini): + // For browsers that do not support `ch` unit (e.g., Opera Mini): $estimated-width-per-character-in-em: calc(1em / 2); // 1 character is approximately half the font size $calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch}); #{$property}: $calculated-width-in-em; + @supports (width: 1ch) { + #{$property}: #{$value-in-ch}ch; // Override `em` value if `ch` is supported. + } } @mixin base-font-style { diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue index 8d05b1e7..eca628e7 100644 --- a/src/presentation/components/App.vue +++ b/src/presentation/components/App.vue @@ -78,15 +78,17 @@ function getOptionalDevToolkitComponent(): Component | undefined { margin-right: auto; margin-left: auto; max-width: 1600px; + .app__wrapper { + display:flex; + flex-direction: column; + background-color: $color-surface; color: $color-on-surface; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); @include responsive-spacing; - display:flex; - flex-direction: column; .app__row { margin-bottom: $spacing-absolute-large; } diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue index 82764fa2..0701495a 100644 --- a/src/presentation/components/Code/CodeButtons/IconButton.vue +++ b/src/presentation/components/Code/CodeButtons/IconButton.vue @@ -79,12 +79,12 @@ export default defineComponent({ box-shadow: 0 3px 9px $color-primary-darkest; border-radius: 4px; + @include clickable; + .button__icon { font-size: $font-size-absolute-x-large; } - @include clickable; - @include hover-or-touch { background: $color-surface; box-shadow: 0px 2px 10px 5px $color-secondary; diff --git a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue index 95a142b4..9daff501 100644 --- a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue +++ b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue @@ -110,8 +110,9 @@ export default defineComponent({ @include apply-icon-color($color-danger); } .recommendation { + align-items: center; + @include horizontal-stack; @include apply-icon-color($color-caution); - align-items: center; } diff --git a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue index dfcf6b25..bdb8450c 100644 --- a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue +++ b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue @@ -68,9 +68,11 @@ export default defineComponent({ @include horizontal-stack; @include apply-icon-color($color-caution); } + .description { + align-items: center; + @include horizontal-stack; @include apply-icon-color($color-success); - align-items: center; } diff --git a/src/presentation/components/Scripts/Slider/SliderHandle.vue b/src/presentation/components/Scripts/Slider/SliderHandle.vue index e2c1b98f..a6c9a2a7 100644 --- a/src/presentation/components/Scripts/Slider/SliderHandle.vue +++ b/src/presentation/components/Scripts/Slider/SliderHandle.vue @@ -58,8 +58,19 @@ $color-hover : $color-primary; $cursor : v-bind(cursorCssValue); .handle { + cursor: $cursor; + @include reset-button; + + display: flex; + flex-direction: column; + align-items: center; + + margin-right: $spacing-absolute-small; + margin-left: $spacing-absolute-small; + @include clickable($cursor: $cursor); + @include hover-or-touch { .line { background: $color-hover; @@ -68,11 +79,7 @@ $cursor : v-bind(cursorCssValue); color: $color-hover; } } - cursor: $cursor; - display: flex; - flex-direction: column; - align-items: center; .line { flex: 1; background: $color; @@ -81,7 +88,5 @@ $cursor : v-bind(cursorCssValue); .icon { color: $color; } - margin-right: $spacing-absolute-small; - margin-left: $spacing-absolute-small; } diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue index d080f025..a5de5e34 100644 --- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue +++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue @@ -78,17 +78,20 @@ export default defineComponent({ } } .docs { + color: $color-on-primary; background: $color-primary-darkest; + margin-left: $spacing-absolute-small; margin-top: $spacing-relative-x-small; - color: $color-on-primary; - text-transform: none; padding: $spacing-absolute-medium; + + text-transform: none; + cursor: auto; + user-select: text; + &-collapsed { display: none; } - cursor: auto; - user-select: text; } } diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue index 36084749..9f8cd3ec 100644 --- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue +++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue @@ -133,14 +133,14 @@ export default defineComponent({ .expansible-node { display: flex; flex-direction: row; + + align-items: center; + .leaf-node { flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text. overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) } - flex-direction: row; - align-items: center; - .expand-collapse-caret { $caret-size: 24px; $padding-right: $spacing-absolute-small; diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue index e44b43f5..2c89e354 100644 --- a/src/presentation/components/Shared/TooltipWrapper.vue +++ b/src/presentation/components/Shared/TooltipWrapper.vue @@ -220,9 +220,6 @@ $color-tooltip-background: $color-primary-darkest; } .tooltip__overlay { - @include set-visibility(false); - @include fixed-fullscreen; - /* The z-index is set for both visible and invisible states to ensure it maintains its stacking order above other elements during transitions. This approach prevents the tooltip from falling behind other @@ -235,6 +232,9 @@ $color-tooltip-background: $color-primary-darkest; This prevents unintentional layout issues or overflow. */ white-space: normal; + + @include set-visibility(false); + @include fixed-fullscreen; } .tooltip__trigger { diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue index f6643ee9..36b96c75 100644 --- a/src/presentation/components/TheFooter/TheFooter.vue +++ b/src/presentation/components/TheFooter/TheFooter.vue @@ -116,6 +116,8 @@ export default defineComponent({ } &__section { display: flex; + flex-wrap: wrap; + @media screen and (max-width: $media-screen-big-width) { justify-content: space-around; width: 100%; @@ -124,7 +126,7 @@ export default defineComponent({ margin-top: $spacing-relative-small; } } - flex-wrap: wrap; + &__item:not(:first-child) { &::before { content: "|";