@c8y/style 1023.17.19 → 1023.22.2

package/styles/mixins/_size.scss

@@ -0,0 +1,109 @@
+@use "../../variables/index" as *;
+
+@mixin size($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+@mixin square($size) {
+  @include size($size, $size);
+}
+
+/* build utilities class
+  * $prop - property, i.e. margin, padding
+  * $prefix - for class name, i.e. m, p
+  * $basesize - unit for increasing sizes, defauts to 8
+  * $range - amount of classes built
+*/
+
+@mixin createSizeClasses($value, $prop, $prefix, $basesize: 8) {
+
+  @if $value >= 0 {
+  $val: ($value * $basesize);
+  .#{$prefix}-t-#{$val} {
+    #{$prop}-top: ($val * 1px)!important;
+  }
+  .#{$prefix}-r-#{$val} {
+    #{$prop}-right: ($val * 1px)!important;
+  }
+  .#{$prefix}-b-#{$val} {
+    #{$prop}-bottom: ($val * 1px)!important;
+  }
+  .#{$prefix}-l-#{$val} {
+    #{$prop}-left: ($val * 1px)!important;
+  }
+  .#{$prefix}-#{$val} {
+    #{$prop}: ($val * 1px)!important;
+  }
+  
+  @media (max-width: $screen-xs-max) {
+    .#{$prefix}-t-xs-#{$val} {
+      #{$prop}-top: ($val * 1px)!important;
+    }
+    .#{$prefix}-r-xs-#{$val} {
+      #{$prop}-right: ($val * 1px)!important;
+    }
+    .#{$prefix}-b-xs-#{$val} {
+      #{$prop}-bottom: ($val * 1px)!important;
+    }
+    .#{$prefix}-l-xs-#{$val} {
+      #{$prop}-left: ($val * 1px)!important;
+    }
+    .#{$prefix}-xs-#{$val} {
+      #{$prop}: ($val * 1px)!important;
+    }
+  }
+  @media (min-width: $screen-sm-min) {
+    .#{$prefix}-t-sm-#{$val} {
+      #{$prop}-top: ($val * 1px)!important;
+    }
+    .#{$prefix}-r-sm-#{$val} {
+      #{$prop}-right: ($val * 1px)!important;
+    }
+    .#{$prefix}-b-sm-#{$val} {
+      #{$prop}-bottom: ($val * 1px)!important;
+    }
+    .#{$prefix}-l-sm-#{$val} {
+      #{$prop}-left: ($val * 1px)!important;
+    }
+    .#{$prefix}-sm-#{$val} {
+      #{$prop}: ($val * 1px)!important;
+    }
+  }
+  @media (min-width: $screen-md-min) {
+    .#{$prefix}-t-md-#{$val} {
+      #{$prop}-top: ($val * 1px)!important;
+    }
+    .#{$prefix}-r-md-#{$val} {
+      #{$prop}-right: ($val * 1px)!important;
+    }
+    .#{$prefix}-b-md-#{$val} {
+      #{$prop}-bottom: ($val * 1px)!important;
+    }
+    .#{$prefix}-l-md-#{$val} {
+      #{$prop}-left: ($val * 1px)!important;
+    }
+    .#{$prefix}-md-#{$val} {
+      #{$prop}: ($val * 1px)!important;
+    }
+  }
+  @media (min-width: $screen-lg-min) {
+    .#{$prefix}-t-lg-#{$val} {
+      #{$prop}-top: ($val * 1px)!important;
+    }
+    .#{$prefix}-r-lg-#{$val} {
+      #{$prop}-right: ($val * 1px)!important;
+    }
+    .#{$prefix}-b-lg-#{$val} {
+      #{$prop}-bottom: ($val * 1px)!important;
+    }
+    .#{$prefix}-l-lg-#{$val} {
+      #{$prop}-left: ($val * 1px)!important;
+    }
+    .#{$prefix}-lg-#{$val} {
+      #{$prop}: ($val * 1px)!important;
+    }
+  }
+  @include createSizeClasses(($value - 1),$prop,$prefix,$basesize);
+}
+  }

package/styles/mixins/_tab-focus.scss

@@ -0,0 +1,20 @@
+@use "../../variables/index" as *;
+// WebKit-style focus
+
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 2px auto $component-color-focus;
+  outline-offset: 0;
+}
+
+@mixin c8y-focus() {
+  outline: 2px solid $component-color-focus;
+  border-radius: $component-border-radius-focus;
+}
+@mixin c8y-focus-inset() {
+  outline: 2px solid $component-color-focus;
+  outline-offset: -2px;
+  border-radius: $component-border-radius-focus !important;
+}

package/styles/mixins/_table-row.scss

@@ -0,0 +1,30 @@
+@use "../../variables/index" as *;
+
+@use "color-mixins";
+
+@mixin table-row-variant($state, $background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.#{$state},
+    > th.#{$state},
+    &.#{$state} > td,
+    &.#{$state} > th {
+      background-color: $background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.#{$state}:hover,
+    > th.#{$state}:hover,
+    &.#{$state}:hover > td,
+    &:hover > .#{$state},
+    &.#{$state}:hover > th {
+      @include color-mixins.darken($background, 0.05);
+    }
+  }
+}

package/styles/mixins/_tag.scss

@@ -0,0 +1,14 @@
+@use "../../variables/index" as *;
+
+@use "color-mixins";
+
+@mixin tag--variant($color) {
+  background-color: $color;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      @include color-mixins.brightness(0.9);
+    }
+  }
+}

package/styles/mixins/_text-emphasis.scss

@@ -0,0 +1,19 @@
+@use "../../variables/index" as *;
+
+@use "color-mixins";
+
+@mixin text-emphasis-variant($color) {
+  color: $color!important;
+
+  @at-root {
+    a#{&}:hover,
+    a#{&}:focus {
+      @include color-mixins.brightness(0.8);
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'],
+      .c8y-icon {
+        text-decoration: none;
+      }
+    }
+  }
+}

package/styles/mixins/_text-overflow.scss

@@ -0,0 +1,10 @@
+@use "../../variables/index" as *;
+
+// Text overflow
+// Requires inline-block or block for proper styling
+
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/styles/mixins/_vendor-prefixes.scss

@@ -0,0 +1,149 @@
+@use "../../variables/index" as *;
+
+// Vendor prefixes are now handled automatically by Autoprefixer.
+// These mixins remain for backward compatibility but no longer add vendor prefixes.
+
+// Animations
+@mixin animation($animation) {
+  animation: $animation;
+}
+@mixin animation-name($name) {
+  animation-name: $name;
+}
+@mixin animation-duration($duration) {
+  animation-duration: $duration;
+}
+@mixin animation-timing-function($timing-function) {
+  animation-timing-function: $timing-function;
+}
+@mixin animation-delay($delay) {
+  animation-delay: $delay;
+}
+@mixin animation-iteration-count($iteration-count) {
+  animation-iteration-count: $iteration-count;
+}
+@mixin animation-direction($direction) {
+  animation-direction: $direction;
+}
+@mixin animation-fill-mode($fill-mode) {
+  animation-fill-mode: $fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+@mixin backface-visibility($visibility) {
+  backface-visibility: $visibility;
+}
+
+// Drop shadows
+@mixin box-shadow($shadow) {
+  box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+  column-count: $column-count;
+  column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+  overflow-wrap: break-word;
+  hyphens: $mode;
+}
+
+// Placeholder text
+@mixin placeholder($color: $form-control-placeholder-color) {
+  // Firefox
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // Override Firefox's unusual default opacity,see https://github.com/twbs/bootstrap/pull/11526
+    font-style: italic;
+  }
+  &:-ms-input-placeholder { 
+    color: $color;
+    font-style: italic;
+   } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { 
+    color: $color;
+    font-style: italic;
+   } // Safari and Chrome
+}
+
+// Transformations
+@mixin scale($ratioX, $ratioY: null) {
+  @if $ratioY {
+    transform: scale($ratioX, $ratioY);
+  } @else {
+    transform: scale($ratioX);
+  }
+}
+@mixin scaleX($ratio) {
+  transform: scaleX($ratio);
+}
+@mixin scaleY($ratio) {
+  transform: scaleY($ratio);
+}
+@mixin skew($x, $y) {
+  transform: skewX($x) skewY($y);
+}
+@mixin translate($x:0, $y:0) {
+  transform: translate($x, $y);
+}
+@mixin translate3d($x, $y, $z) {
+  transform: translate3d($x, $y, $z);
+}
+@mixin rotate($degrees) {
+  transform: rotate($degrees);
+}
+@mixin rotateX($degrees) {
+  transform: rotateX($degrees);
+}
+@mixin rotateY($degrees) {
+  transform: rotateY($degrees);
+}
+@mixin perspective($perspective) {
+  perspective: $perspective;
+}
+@mixin perspective-origin($perspective) {
+  perspective-origin: $perspective;
+}
+@mixin transform-origin($origin) {
+  transform-origin: $origin;
+}
+
+// Transitions
+@mixin transition($transition) {
+  transition: $transition;
+}
+@mixin transition-property($transition-property) {
+  transition-property: $transition-property;
+}
+@mixin transition-delay($transition-delay) {
+  transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration) {
+  transition-duration: $transition-duration;
+}
+@mixin transition-timing-function($timing-function) {
+  transition-timing-function: $timing-function;
+}
+@mixin transition-transform($transition) {
+  transition: transform $transition;
+}
+
+// User select for selecting text on the page
+@mixin user-select($select) {
+  user-select: $select;
+}
+
+@mixin filter($filter) {
+  filter: $filter;
+}

package/styles/mixins/vendor-prefixes.less

@@ -1,39 +1,30 @@
-// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
-// Autoprefixer in our Gruntfile. They will be removed in v4.
+// Vendor prefixes are now handled automatically by Autoprefixer.
+// These mixins remain for backward compatibility but no longer add vendor prefixes.
 
 // Animations
 .animation(@animation) {
-  -webkit-animation: @animation;
-       -o-animation: @animation;
-          animation: @animation;
+  animation: @animation;
 }
 .animation-name(@name) {
-  -webkit-animation-name: @name;
-          animation-name: @name;
+  animation-name: @name;
 }
 .animation-duration(@duration) {
-  -webkit-animation-duration: @duration;
-          animation-duration: @duration;
+  animation-duration: @duration;
 }
 .animation-timing-function(@timing-function) {
-  -webkit-animation-timing-function: @timing-function;
-          animation-timing-function: @timing-function;
+  animation-timing-function: @timing-function;
 }
 .animation-delay(@delay) {
-  -webkit-animation-delay: @delay;
-          animation-delay: @delay;
+  animation-delay: @delay;
 }
 .animation-iteration-count(@iteration-count) {
-  -webkit-animation-iteration-count: @iteration-count;
-          animation-iteration-count: @iteration-count;
+  animation-iteration-count: @iteration-count;
 }
 .animation-direction(@direction) {
-  -webkit-animation-direction: @direction;
-          animation-direction: @direction;
+  animation-direction: @direction;
 }
 .animation-fill-mode(@fill-mode) {
-  -webkit-animation-fill-mode: @fill-mode;
-          animation-fill-mode: @fill-mode;
+  animation-fill-mode: @fill-mode;
 }
 
 // Backface visibility
@@ -41,44 +32,29 @@
 // Default value is `visible`, but can be changed to `hidden`
 
 .backface-visibility(@visibility){
-  -webkit-backface-visibility: @visibility;
-     -moz-backface-visibility: @visibility;
-          backface-visibility: @visibility;
+  backface-visibility: @visibility;
 }
 
 // Drop shadows
-// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
-// supported browsers that have box shadow capabilities now support it.
 .box-shadow(@shadow) {
-  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
-          box-shadow: @shadow;
+  box-shadow: @shadow;
 }
 
 // Box sizing
 .box-sizing(@boxmodel) {
-  -webkit-box-sizing: @boxmodel;
-     -moz-box-sizing: @boxmodel;
-          box-sizing: @boxmodel;
+  box-sizing: @boxmodel;
 }
 
 // CSS3 Content Columns
 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
-  -webkit-column-count: @column-count;
-     -moz-column-count: @column-count;
-          column-count: @column-count;
-  -webkit-column-gap: @column-gap;
-     -moz-column-gap: @column-gap;
-          column-gap: @column-gap;
+  column-count: @column-count;
+  column-gap: @column-gap;
 }
 
 // Optional hyphenation
 .hyphens(@mode: auto) {
   overflow-wrap: break-word;
-  -webkit-hyphens: @mode;
-     -moz-hyphens: @mode;
-      -ms-hyphens: @mode; // IE10+
-       -o-hyphens: @mode;
-          hyphens: @mode;
+  hyphens: @mode;
 }
 
 // Placeholder text
@@ -101,121 +77,70 @@
 
 // Transformations
 .scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-      -ms-transform: scale(@ratio); // IE9 only
-       -o-transform: scale(@ratio);
-          transform: scale(@ratio);
+  transform: scale(@ratio);
 }
 .scale(@ratioX; @ratioY) {
-  -webkit-transform: scale(@ratioX, @ratioY);
-      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
-       -o-transform: scale(@ratioX, @ratioY);
-          transform: scale(@ratioX, @ratioY);
+  transform: scale(@ratioX, @ratioY);
 }
 .scaleX(@ratio) {
-  -webkit-transform: scaleX(@ratio);
-      -ms-transform: scaleX(@ratio); // IE9 only
-       -o-transform: scaleX(@ratio);
-          transform: scaleX(@ratio);
+  transform: scaleX(@ratio);
 }
 .scaleY(@ratio) {
-  -webkit-transform: scaleY(@ratio);
-      -ms-transform: scaleY(@ratio); // IE9 only
-       -o-transform: scaleY(@ratio);
-          transform: scaleY(@ratio);
+  transform: scaleY(@ratio);
 }
 .skew(@x; @y) {
-  -webkit-transform: skewX(@x) skewY(@y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-       -o-transform: skewX(@x) skewY(@y);
-          transform: skewX(@x) skewY(@y);
+  transform: skewX(@x) skewY(@y);
 }
 .translate(@x:0, @y:0) {
-  -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9 only
-       -o-transform: translate(@x, @y);
-          transform: translate(@x, @y);
+  transform: translate(@x, @y);
 }
 .translate3d(@x; @y; @z) {
-  -webkit-transform: translate3d(@x, @y, @z);
-          transform: translate3d(@x, @y, @z);
+  transform: translate3d(@x, @y, @z);
 }
 .rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9 only
-       -o-transform: rotate(@degrees);
-          transform: rotate(@degrees);
+  transform: rotate(@degrees);
 }
 .rotateX(@degrees) {
-  -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9 only
-       -o-transform: rotateX(@degrees);
-          transform: rotateX(@degrees);
+  transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
-  -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9 only
-       -o-transform: rotateY(@degrees);
-          transform: rotateY(@degrees);
+  transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
-  -webkit-perspective: @perspective;
-     -moz-perspective: @perspective;
-          perspective: @perspective;
+  perspective: @perspective;
 }
 .perspective-origin(@perspective) {
-  -webkit-perspective-origin: @perspective;
-     -moz-perspective-origin: @perspective;
-          perspective-origin: @perspective;
+  perspective-origin: @perspective;
 }
 .transform-origin(@origin) {
-  -webkit-transform-origin: @origin;
-     -moz-transform-origin: @origin;
-      -ms-transform-origin: @origin; // IE9 only
-          transform-origin: @origin;
+  transform-origin: @origin;
 }
 
 // Transitions
 .transition(@transition) {
-  -webkit-transition: @transition;
-       -o-transition: @transition;
-          transition: @transition;
+  transition: @transition;
 }
 .transition-property(@transition-property) {
-  -webkit-transition-property: @transition-property;
-          transition-property: @transition-property;
+  transition-property: @transition-property;
 }
 .transition-delay(@transition-delay) {
-  -webkit-transition-delay: @transition-delay;
-          transition-delay: @transition-delay;
+  transition-delay: @transition-delay;
 }
 .transition-duration(@transition-duration) {
-  -webkit-transition-duration: @transition-duration;
-          transition-duration: @transition-duration;
+  transition-duration: @transition-duration;
 }
 .transition-timing-function(@timing-function) {
-  -webkit-transition-timing-function: @timing-function;
-          transition-timing-function: @timing-function;
+  transition-timing-function: @timing-function;
 }
 .transition-transform(@transition) {
-  -webkit-transition: -webkit-transform @transition;
-     -moz-transition: -moz-transform @transition;
-       -o-transition: -o-transform @transition;
-          transition: transform @transition;
+  transition: transform @transition;
 }
 
 // User select for selecting text on the page
 .user-select(@select) {
-  -webkit-user-select: @select;
-     -moz-user-select: @select;
-      -ms-user-select: @select; // IE10+
-          user-select: @select;
+  user-select: @select;
 }
 
 .filter(@filter) {
-  -webkit-filter: @filter;
-     -moz-filter: @filter;
-      -ms-filter: @filter;
-       -o-filter: @filter;
-          filter: @filter;
+  filter: @filter;
 }

package/styles/utilities/_borders.less

@@ -118,18 +118,9 @@
 }
 
 
-.b-r-8 {
-  border-radius: @margin-8 !important;
-}
+// Removed unused border-radius utilities - verified 0 usages:
+// .b-r-8, .b-r-24, .b-r-32, .b-r-40
+
 .b-r-16 {
   border-radius: @margin-16 !important;
 }
-.b-r-24 {
-  border-radius: @margin-24 !important;
-}
-.b-r-32 {
-  border-radius: @margin-32 !important;
-}
-.b-r-40 {
-  border-radius: @margin-40 !important;
-}