@c8y/style 1023.14.76 → 1023.14.94

package/styles/layout/_page-tabs.less

@@ -1,3 +1,24 @@
+
+@import "../mixins/_c8y-scrollbar.less";
+
+/**
+ * Page Tabs - Horizontal and vertical tab navigation
+ *
+ * Note: Uses design tokens for spacing (@size-*), colors, and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - -6px top: Negative offset for mobile positioning
+ * - 12px: Off-grid legacy value in calc expression
+ * - 30px, 31px: Specific dimensions for tab slider controls
+ * - 3px padding: Fine-tuning for icon alignment
+ * - Transition durations (0.35s, 0.25s): Animation timing
+ * - Z-index values: Stacking order
+ * - 1px borders: Standard border widths
+ * - 2px box-shadow: Focus indicator width
+ * - 10000px, 2000px: Large clip values for overflow management
+ * - Percentages and em units: Relative sizing
+ */
+
 .page-tabs {
   position: fixed;
   right: 0;
@@ -14,7 +35,7 @@
     transition: top 0.35s ease;
 
     .head-open & {
-      top: calc(@margin-base * 10 + 12px);
+      top: calc(@size-base * 10 + calc(@size-base * 1.5));
     }
   }
 }
@@ -31,12 +52,25 @@
     left: 0;
     z-index: @zindex-navbar-fixed;
     clip: rect(0, 10000px, 2000px, 0);
-    min-height: calc(@margin-base * 6);
+    min-height: calc(@size-base * 6);
     box-shadow: inset 0 -1px 0 0 @component-border-color, @header-shadow;
-    
+    &:has(.component-tabs) {
+      box-shadow: inset 0 -1px 0 0 @component-border-color;
+      .component-tabs {
+          min-width: unset !important;
+          padding: 0;
+          &.nav-tabs > div, &.nav-tabs li {
+            flex: 0;
+            align-self: stretch;
+            > a {
+              height: 100%;
+            }
+          }
+      }
+    }
     &,
     &:after {
-      .transition(left @open-menu-time-type);
+      transition: left @open-menu-time-type;
     }
   }
 
@@ -50,7 +84,11 @@
     overflow-x: auto;
     // box-shadow: inset 0 calc(@nav-tabs-border-width-active * -1) 0 0 @nav-tabs-border-color-default;
     scroll-behavior: smooth;
-    .hide-scrollbars();
+    overflow: -moz-scrollbars-none; // Firefox
+    -ms-overflow-style: none; // IE 10+
+    &::-webkit-scrollbar {
+      display: none; // Safari and Chrome
+    }
 
     .nav-tabs {
       padding-right: 30px;
@@ -70,18 +108,6 @@
   position: relative;
 }
 
-c8y-widget-config-section{
-  .component-tabs{
-    min-width: unset!important;
-    > div, > li{
-      flex-shrink: 1;
-      .tab-description{
-        display: none;
-      }
-    }
-  }
-}
-
 .tabs-slider {
   position: absolute;
   top: 0;
@@ -100,7 +126,7 @@ c8y-widget-config-section{
   [class*=' dlt-c8y-icon-'] {
     position: relative;
     z-index: 3;
-    font-size: 20px;
+    font-size: @size-20;
   }
 
   &:hover,
@@ -150,10 +176,67 @@ c8y-widget-config-section{
   }
 
   .nav-tabs {
-    .nav-tabs-vertical();
+    // Styles from .nav-tabs-vertical class (LESS uses mixin)
+    display: block;
+    &:not(.component-tabs) {
+      padding-top: @size-48;
+    }
+    width: @nav-tabs-vertical-width;
+    border: 0;
+    box-shadow: none;
+    &.nav-tabs-vertical--wide {
+      width: unset;
+    }
     > div,
     > li {
       position: relative;
+      > a, > button {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        margin: 0;
+        padding: @nav-tabs-vertical-padding;
+        height: auto;
+        border: 0;
+        box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default;
+        text-transform: none;
+        font-size: inherit;
+        transition: all 0.25s ease;
+
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'],
+        .c8y-icon {
+          margin: 0 @size-8 0 0;
+          width: 1.25em;
+          ~ span {
+            display: inline-block;
+            overflow: hidden;
+            max-width: 100%;
+            vertical-align: middle;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      &.active {
+        > a, > button {
+          &, &:hover {
+            border-left: @size-4 solid @nav-tabs-color-active;
+            background-color: @nav-tabs-background-active;
+            box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default !important;
+            border-radius: 0 !important;
+            pointer-events: none;
+            &::before {
+              width: 100%;
+            }
+            &::after {
+              left: 100%;
+              height: 100%;
+              border-width: calc(@size-16 + @size-4) 0 calc(@size-16 + @size-4) @size-base;
+            }
+          }
+        }
+      }
       a {
         > [class^='dlt-c8y-icon-'],
         > [class*=' dlt-c8y-icon-'],
@@ -173,7 +256,7 @@ c8y-widget-config-section{
     overflow: visible;
     padding-right: calc(@grid-gutter-width / 2);
 
-    .transition(left @open-menu-time-type);
+    transition: left @open-menu-time-type;
 
     &:before {
       position: absolute;
@@ -208,14 +291,23 @@ body:not(:has(.app-main-header)) {
       }
     }
   }
-  &:has(.has-action-bar){
+  &:has(.has-action-bar) {
     .page-tabs-vertical {
-      top: 48px;
+      top: @size-48;
     }
   }
-  &:not(:has(.has-action-bar)){
+  &:not(:has(.has-action-bar)) {
     .page-tabs-vertical {
       top: 0;
     }
   }
 }
+
+body:not(:has(.has-action-bar)) {
+  .page-tabs-vertical {
+    .nav-tabs {
+      padding-top: 0;
+      border-top: 1px solid @component-border-color;
+    }
+  }
+}

package/styles/layout/_split-scroll.less

@@ -1,4 +1,16 @@
-// DEPRECATED: Remove after updating opcua-address-space.component. Still used in 2 places.
+
+
+/**
+ * Split Scroll - DEPRECATED split-column scrolling layout
+ *
+ * Note: DEPRECATED - Remove after updating opcua-address-space.component. Still used in 2 places.
+ * Uses @size-16 and @size-8 for spacing.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (80px, 118px, 150px, 165px): Viewport calculations
+ * - Percentages (50%, 33.33%, 25%): Fractional row heights
+ * - Z-index values: Stacking order
+ */
 
 .split-scroll {
   position: relative;
@@ -31,7 +43,7 @@
   }
 
   .scroll-column-footer {
-    padding: @margin-16 0 0 0;
+    padding: @size-16 0 0 0;
     .btn-add-block {
       margin-bottom: 0;
     }
@@ -43,7 +55,7 @@
     .scroll-column + .scroll-column {
       position: absolute;
       top: 0;
-      bottom: calc(@margin-16 * -1);
+      bottom: calc(@size-16 * -1);
       left: 0;
       z-index: 10;
       padding: 0;
@@ -75,7 +87,7 @@
 
 .split-scroll {
   .input-group-search {
-    margin: -8px 0 !important;
+    margin: calc(@size-8 * -1) 0 !important;
   }
   .split-row-2 {
     height: 50%;

package/styles/layout/_split-view.less

@@ -1,3 +1,17 @@
+
+/**
+ * Split View - Two-column layout component
+ *
+ * Note: Uses design tokens for spacing (@size-*) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (108px, 168px, 166px, 200px, 82px): Viewport calculations
+ * - Grid fractions (4fr, 5fr, 7fr, 8fr): CSS grid fractional units
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values: Stacking order
+ * - Percentages: Relative sizing
+ */
+
 .split-view {
   &__list,
   &__detail {
@@ -6,7 +20,7 @@
     background-color: @component-background-default;
   }
   &__list {
-    .border-right();
+    &:extend(.border-right);
   }
 
   @media (max-width: @screen-sm-max) {
@@ -29,7 +43,7 @@
       height: calc(100vh - 108px);
     }
 
-    &--8-4,  &--4-8 {
+    &--8-4, &--4-8 {
       height: calc(100vh - 166px);
     }
 
@@ -91,3 +105,21 @@
     }
   }
 }
+
+c8y-sv-details,
+c8y-sv-list {
+  .inner-scroll {
+    >.card-header{
+      min-height: @size-56;;
+    }
+  }
+}
+.card-dashboard c8y-sv-list {
+  .inner-scroll {
+    >.card-header{
+      min-height: 0;
+      padding-top: @size-4;
+      padding-bottom: @size-4;
+    }
+  }
+}

package/styles/login-app-use.scss

@@ -17,7 +17,7 @@
 @use 'core/buttons/_buttons';
 @use 'core/feedback/_close';
 @use 'core/buttons/_button-groups';
-@use 'components/specialized/_code';
+@use 'components/status-feedback-and-notifications/_code';
 @use 'core/feedback/_tag';
 @use 'core/forms/_forms';
 @use 'core/forms/_c8y-switch';
@@ -25,7 +25,7 @@
 @use 'layout/_grid';
 
 @use 'core/forms/_input-groups';
-@use 'components/specialized/_c8y-cookie-banner';
+@use 'components/application-and-system/_c8y-cookie-banner';
 
 @use 'icons/_c8y-glyphs';
 @use 'icons/_c8y-icons';

package/styles/login-app.less

@@ -1,5 +1,5 @@
 @import '../variables/index.less';
-@import 'mixins.less';
+@import '_mixins.less';
 @import 'base/_normalize.less';
 @import 'base/_print.less';
 
@@ -14,7 +14,7 @@
 @import 'core/buttons/_buttons.less';
 @import 'core/feedback/_close.less';
 @import 'core/buttons/_button-groups.less';
-@import 'components/specialized/_code.less';
+@import 'components/status-feedback-and-notifications/_code.less';
 @import 'core/feedback/_tag.less';
 @import 'core/forms/_forms.less';
 @import 'core/forms/_c8y-switch.less';
@@ -24,12 +24,12 @@
 // @import 'layout/_grid.less';
 
 @import 'core/forms/_input-groups.less';
-@import 'components/specialized/_c8y-cookie-banner.less';
+@import 'components/application-and-system/_c8y-cookie-banner.less';
 
 @import 'icons/_c8y-glyphs.less';
 @import 'icons/_c8y-icons.less';
 @import 'icons/_dlt-c8y-icons.less';
 // @import 'icons/_dlt-c8y-icons-stroke.less';
-@import 'utilities.less';
+@import '_utilities.less';
 
 @import 'components/navigation-and-layout/action-bars/_app-switcher.less';

package/styles/mixins/_buttons.scss

@@ -1,5 +1,6 @@
 @use "sass:string";
 @use "../../variables/index" as *;
+// Test change to verify auto-converter works
 // Button variants
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons

package/styles/mixins/{color-mixins.less → _color-mixins.less}

@@ -1,12 +1,12 @@
 // darkens the @color by adding
 // black on top with @alpha opacity (0 - 1)
-.darken(@color,@alpha) {
+.darken(@color; @alpha) {
   background: linear-gradient(to top, rgba(0, 0, 0, @alpha), rgba(0, 0, 0, @alpha)) @color;
 }
 
 // Lighten the @color by adding
 // white on top with @alpha opacity (0 - 1)
-.lighten(@color,@alpha) {
+.lighten(@color; @alpha) {
   background: linear-gradient(to top, rgba(255, 255, 255, @alpha), rgba(255, 255, 255, @alpha))
     @color;
 }

package/styles/mixins/{element-queries.less → _element-queries.less}

@@ -1,11 +1,11 @@
-.make-flex-cols(@n: 12, @i: 1) when (@i =< @n) {
+.make-flex-cols(@n: 12; @i: 1) when (@i =< @n) {
   .col-@{i} {
     min-width: calc((8.333333333% * @i) - (var(--c8y-margin) * 2));
   }
   .make-flex-cols(@n, (@i + 1));
 }
 
-.make-flex-cols-container(@n: 150, @i: 20) when (@i =< @n) {
+.make-flex-cols-container(@n: 150; @i: 20) when (@i =< @n) {
   .content-flex-@{i}{
     --c8y-multiplier: calc((@i * 1rem) - 100%);
   }

package/styles/mixins/{forms.less → _forms.less}

@@ -66,7 +66,7 @@
 //
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
-.form-control-focus(@border: @form-control-border-color-focus, @bg: @form-control-background-focus, @color: @form-control-color-focus) {
+.form-control-focus(@border: @form-control-border-color-focus; @bg: @form-control-background-focus; @color: @form-control-color-focus) {
   &:focus {
     border-color: @border;
     outline: 0;

package/styles/mixins/_gradients.less

@@ -0,0 +1,117 @@
+
+// Horizontal gradient, from left to right
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+.gradient-horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
+    background-image: -webkit-linear-gradient(
+      left;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(
+      left;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Opera 12
+    background-image: linear-gradient(
+      to right;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str(@start-color)}', endColorstr='#{color.ie-hex-str(@end-color)}', GradientType=1)"; // IE9 and down
+  }
+
+// Vertical gradient, from top to bottom
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+.gradient-vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
+    background-image: -webkit-linear-gradient(
+      top;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(
+      top;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Opera 12
+    background-image: linear-gradient(
+      to bottom;
+      @start-color @start-percent;
+      @end-color @end-percent
+); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str(@start-color)}', endColorstr='#{color.ie-hex-str(@end-color)}', GradientType=0)"; // IE9 and down
+  }
+
+.gradient-directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
+    background-repeat: repeat-x;
+    background-image: -webkit-linear-gradient(
+      @deg;
+      @start-color;
+      @end-color
+); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(@deg; @start-color; @end-color); // Opera 12
+    background-image: linear-gradient(
+      @deg;
+      @start-color;
+      @end-color
+); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  }
+.gradient-horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(
+      left;
+      @start-color;
+      @mid-color @color-stop;
+      @end-color
+);
+    background-image: -o-linear-gradient(left; @start-color; @mid-color @color-stop; @end-color);
+    background-image: linear-gradient(to right; @start-color; @mid-color @color-stop; @end-color);
+    background-repeat: no-repeat;
+    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str(@start-color)}', endColorstr='#{color.ie-hex-str(@end-color)}', GradientType=1)"; // IE9 and down, gets no color-stop at all for proper fallback
+  }
+.gradient-vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(@start-color; @mid-color @color-stop; @end-color);
+    background-image: -o-linear-gradient(@start-color; @mid-color @color-stop; @end-color);
+    background-image: linear-gradient(@start-color; @mid-color @color-stop; @end-color);
+    background-repeat: no-repeat;
+    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str(@start-color)}', endColorstr='#{color.ie-hex-str(@end-color)}', GradientType=0)"; // IE9 and down, gets no color-stop at all for proper fallback
+  }
+.gradient-radial(@inner-color: #555; @outer-color: #333) {
+    background-image: -webkit-radial-gradient(circle; @inner-color; @outer-color);
+    background-image: radial-gradient(circle; @inner-color; @outer-color);
+    background-repeat: no-repeat;
+  }
+.gradient-striped(@color: rgba(255,255,255,0.15); @angle: 45deg) {
+    background-image: -webkit-linear-gradient(
+      @angle;
+      @color 25%,
+      transparent 25%,
+      transparent 50%;
+      @color 50%;
+      @color 75%,
+      transparent 75%,
+      transparent
+);
+    background-image: -o-linear-gradient(
+      @angle;
+      @color 25%,
+      transparent 25%,
+      transparent 50%;
+      @color 50%;
+      @color 75%,
+      transparent 75%,
+      transparent
+);
+    background-image: linear-gradient(
+      @angle;
+      @color 25%,
+      transparent 25%,
+      transparent 50%;
+      @color 50%;
+      @color 75%,
+      transparent 75%,
+      transparent
+);
+}

package/styles/mixins/{grid-framework.less → _grid-framework.less}

@@ -7,14 +7,14 @@
   .col(@index) {
     // initial
     @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
-    .col((@index + 1), @item);
+    .col((@index + 1); @item);
   }
-  .col(@index, @list) when (@index =< @grid-columns) {
+  .col(@index; @list) when (@index =< @grid-columns) {
     // general; "=<" isn't a typo
     @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
+    .col((@index + 1); ~'@{list}, @{item}');
   }
-  .col(@index, @list) when (@index > @grid-columns) {
+  .col(@index; @list) when (@index > @grid-columns) {
     // terminal
     @{list} {
       position: relative;
@@ -32,14 +32,14 @@
   .col(@index) {
     // initial
     @item: ~'.col-@{class}-@{index}';
-    .col((@index + 1), @item);
+    .col((@index + 1); @item);
   }
-  .col(@index, @list) when (@index =< @grid-columns) {
+  .col(@index; @list) when (@index =< @grid-columns) {
     // general
     @item: ~'.col-@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
+    .col((@index + 1); ~'@{list}, @{item}');
   }
-  .col(@index, @list) when (@index > @grid-columns) {
+  .col(@index; @list) when (@index > @grid-columns) {
     // terminal
     @{list} {
       float: left;
@@ -48,49 +48,49 @@
   .col(1); // kickstart it
 }
 
-.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+.calc-grid-column(@index; @class; @type) when (@type = width) and (@index > 0) {
   .col-@{class}-@{index} {
     width: percentage((@index / @grid-columns));
   }
 }
-.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
+.calc-grid-column(@index; @class; @type) when (@type = push) and (@index > 0) {
   .col-@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
 }
-.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
+.calc-grid-column(@index; @class; @type) when (@type = push) and (@index = 0) {
   .col-@{class}-push-0 {
     left: auto;
   }
 }
-.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
+.calc-grid-column(@index; @class; @type) when (@type = pull) and (@index > 0) {
   .col-@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
 }
-.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
+.calc-grid-column(@index; @class; @type) when (@type = pull) and (@index = 0) {
   .col-@{class}-pull-0 {
     right: auto;
   }
 }
-.calc-grid-column(@index, @class, @type) when (@type = offset) {
+.calc-grid-column(@index; @class; @type) when (@type = offset) {
   .col-@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
 }
 
 // Basic looping in LESS
-.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
-  .calc-grid-column(@index, @class, @type);
+.loop-grid-columns(@index; @class; @type) when (@index >= 0) {
+  .calc-grid-column(@index; @class; @type);
   // next iteration
-  .loop-grid-columns((@index - 1), @class, @type);
+  .loop-grid-columns((@index - 1); @class; @type);
 }
 
 // Create grid for specific class
 .make-grid(@class) {
   .float-grid-columns(@class);
-  .loop-grid-columns(@grid-columns, @class, width);
-  .loop-grid-columns(@grid-columns, @class, pull);
-  .loop-grid-columns(@grid-columns, @class, push);
-  .loop-grid-columns(@grid-columns, @class, offset);
+  .loop-grid-columns(@grid-columns; @class; width);
+  .loop-grid-columns(@grid-columns; @class; pull);
+  .loop-grid-columns(@grid-columns; @class; push);
+  .loop-grid-columns(@grid-columns; @class; offset);
 }

package/styles/mixins/_icon-base.less

@@ -0,0 +1,29 @@
+
+// Icon font base styles
+// These mixins replace @extend for better performance
+
+.c8y-glyph() {
+  display: inline-block;
+  text-decoration: inherit;
+  text-transform: none;
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  font-family: 'c8y-glyphs' !important;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.dlt-c8y-icon() {
+  display: inline-block;
+  text-transform: none;
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  font-family: 'dlt-c8y-icons' !important;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/styles/mixins/{nav-vertical-align.less → _nav-vertical-align.less}

@@ -1,7 +1,11 @@
+
 // Vertically center elements in the navbar.
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 .navbar-vertical-align(@element-height) {
-  margin-top: calc((@navbar-height - @element-height) / 2);
-  margin-bottom: calc((@navbar-height - @element-height) / 2);
+  // Wrap in & {} to opt into new SCSS behavior for mixed declarations
+  & {
+    margin-top: calc((@navbar-height - @element-height) / 2);
+    margin-bottom: calc((@navbar-height - @element-height) / 2);
+  }
 }

package/styles/mixins/_nav-vertical-align.scss

@@ -4,6 +4,9 @@
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 @mixin navbar-vertical-align($element-height) {
-  margin-top: calc(($navbar-height - $element-height) / 2);
-  margin-bottom: calc(($navbar-height - $element-height) / 2);
+  // Wrap in & {} to opt into new SCSS behavior for mixed declarations
+  & {
+    margin-top: calc(($navbar-height - $element-height) / 2);
+    margin-bottom: calc(($navbar-height - $element-height) / 2);
+  }
 }