@c8y/style 1023.14.33 → 1023.14.36

package/styles/mixins/_grid-framework.scss

@@ -0,0 +1,104 @@
+@use "../../variables/index" as *;
+
+@use "sass:math";
+@use "sass:string";
+// Framework grid generation
+
+// Used only by Bootstrap to generate the correct number of grid classes given any value of `$grid-columns`.
+
+// Helper mixins for make-grid-columns
+@mixin col-helper($index, $list: null) {
+  @if $list == null {
+    // initial - one parameter
+    $item: string.unquote('.col-xs-#{$index}, .col-sm-#{$index}, .col-md-#{$index}, .col-lg-#{$index}');
+    @include col-helper(($index + 1), $item);
+  } @else if $index <= $grid-columns {
+    // general
+    $item: string.unquote('.col-xs-#{$index}, .col-sm-#{$index}, .col-md-#{$index}, .col-lg-#{$index}');
+    @include col-helper(($index + 1), string.unquote('#{$list}, #{$item}'));
+  } @else {
+    // terminal
+    #{$list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      // Inner gutter via padding
+      padding-left: calc($grid-gutter-width * 0.5);
+      padding-right: calc($grid-gutter-width * 0.5);
+    }
+  }
+}
+
+@mixin make-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  @include col-helper(1); // kickstart it
+}
+
+// Helper mixins for float-grid-columns
+@mixin float-col-helper($class, $index, $list: null) {
+  @if $list == null {
+    // initial - one parameter
+    $item: string.unquote('.col-#{$class}-#{$index}');
+    @include float-col-helper($class, ($index + 1), $item);
+  } @else if $index <= $grid-columns {
+    // general
+    $item: string.unquote('.col-#{$class}-#{$index}');
+    @include float-col-helper($class, ($index + 1), string.unquote('#{$list}, #{$item}'));
+  } @else {
+    // terminal
+    #{$list} {
+      float: left;
+    }
+  }
+}
+
+@mixin float-grid-columns($class) {
+  @include float-col-helper($class, 1); // kickstart it
+}
+
+@mixin calc-grid-column($index, $class, $type) {
+  @if $type == width and $index > 0 {
+    .col-#{$class}-#{$index} {
+      width: math.percentage(math.div($index, $grid-columns));
+    }
+  } @else if $type == push and $index > 0 {
+    .col-#{$class}-push-#{$index} {
+      left: math.percentage(math.div($index, $grid-columns));
+    }
+  } @else if $type == push and $index == 0 {
+    .col-#{$class}-push-0 {
+      left: auto;
+    }
+  } @else if $type == pull and $index > 0 {
+    .col-#{$class}-pull-#{$index} {
+      right: math.percentage(math.div($index, $grid-columns));
+    }
+  } @else if $type == pull and $index == 0 {
+    .col-#{$class}-pull-0 {
+      right: auto;
+    }
+  } @else if $type == offset {
+    .col-#{$class}-offset-#{$index} {
+      margin-left: math.percentage(math.div($index, $grid-columns));
+    }
+  }
+}
+
+// Basic looping in SASS
+@mixin loop-grid-columns($index, $class, $type) {
+  @if $index >= 0 {
+    @include calc-grid-column($index, $class, $type);
+    // next iteration
+    @include loop-grid-columns(($index - 1), $class, $type);
+  }
+}
+
+// Create grid for specific class
+@mixin make-grid($class) {
+  @include float-grid-columns($class);
+  @include loop-grid-columns($grid-columns, $class, width);
+  // Removed unused Bootstrap 3 grid utilities (push/pull/offset) - verified 0 usages
+  // @include loop-grid-columns($grid-columns, $class, pull);
+  // @include loop-grid-columns($grid-columns, $class, push);
+  // @include loop-grid-columns($grid-columns, $class, offset);
+}

package/styles/mixins/_grid.scss

@@ -0,0 +1,126 @@
+@use "sass:math";
+@use "../../variables/index" as *;
+@use "clearfix";
+
+// Grid system
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: calc($gutter / 2);
+  padding-left: calc($gutter / 2);
+
+  @include clearfix.clearfix();
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+  margin-right: calc($gutter * -0.5);
+  margin-left: calc($gutter * -0.5);
+
+  @include clearfix.clearfix();
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  float: left;
+  padding-right: math.div($gutter, 2);
+  padding-left: math.div($gutter, 2);
+  min-height: 1px;
+  width: math.percentage(math.div($columns, $grid-columns));
+}
+@mixin make-xs-column-offset($columns) {
+  margin-left: math.percentage(math.div($columns, $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+  left: math.percentage(math.div($columns, $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+  right: math.percentage(math.div($columns, $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  padding-right: math.div($gutter, 2);
+  padding-left: math.div($gutter, 2);
+  min-height: 1px;
+
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    width: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-sm-min) {
+    margin-left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-sm-min) {
+    left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-sm-min) {
+    right: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  padding-right: math.div($gutter, 2);
+  padding-left: math.div($gutter, 2);
+  min-height: 1px;
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+    width: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-md-min) {
+    margin-left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-md-min) {
+    left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-md-min) {
+    right: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  padding-right: math.div($gutter, 2);
+  padding-left: math.div($gutter, 2);
+  min-height: 1px;
+
+  @media (min-width: $screen-lg-min) {
+    float: left;
+    width: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-lg-min) {
+    margin-left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-lg-min) {
+    left: math.percentage(math.div($columns, $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-lg-min) {
+    right: math.percentage(math.div($columns, $grid-columns));
+  }
+}

package/styles/mixins/_hide-scrollbars.scss

@@ -0,0 +1,10 @@
+@use "../../variables/index" as *;
+
+.hide-scrollbars {
+  overflow: -moz-scrollbars-none; // Firefox
+
+  -ms-overflow-style: none; // IE 10+
+  &::-webkit-scrollbar {
+    display: none; // Safari and Chrome
+  }
+}

package/styles/mixins/_hide-text.scss

@@ -0,0 +1,24 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+// CSS image replacement
+
+// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (will be removed in v4)
+@mixin hide-text() {
+  border: 0;
+  background-color: transparent;
+  color: transparent;
+  text-shadow: none;
+  font: string.unquote('0/0') a;
+}
+
+// New mixin to use as of v3.0.1
+@mixin text-hide() {
+  @include hide-text();
+}

package/styles/mixins/_icon-base.scss

@@ -0,0 +1,30 @@
+@use "../../variables/index" as *;
+
+// Icon font base styles
+// These mixins replace @extend for better performance
+
+@mixin 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;
+}
+
+@mixin 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/_image.scss

@@ -0,0 +1,26 @@
+@use "../../variables/index" as *;
+
+// Responsive image
+// Keep images from scaling beyond the width of their parents.
+@mixin img-responsive($display: block) {
+  display: $display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+// Retina image
+// Short retina mixin for setting background-image and -size. Note that the
+// spelling of `min--moz-device-pixel-ratio` is intentional.
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+  background-image: url('#{$file-1x}');
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    background-image: url('#{$file-2x}');
+    background-size: $width-1x $height-1x;
+  }
+}

package/styles/mixins/_index.scss

@@ -0,0 +1,48 @@
+@use "../../variables/index" as *;
+
+// Utilities
+@import 'hide-text';
+@import 'opacity';
+@import 'image';
+/* Remove after Codex launch. will be replaced by Tag */
+@import 'labels';
+@import 'tag';
+@import 'reset-filter';
+@import 'resize';
+@import 'responsive-visibility';
+@import 'size';
+@import 'tab-focus';
+@import 'reset-text';
+@import 'text-emphasis';
+@import 'text-overflow';
+@import 'vendor-prefixes';
+@import 'color-mixins';
+@import 'animation';
+
+// Components
+@import 'buttons';
+@import 'alert-variant';
+@import 'panels';
+@import 'pagination';
+@import 'list-group';
+@import 'nav-divider';
+@import 'forms';
+@import 'progress-bar';
+@import 'table-row';
+@import 'c8y-scrollbar';
+
+// Skins
+@import 'background-variant';
+@import 'border-radius';
+@import 'gradients';
+
+// Layout
+@import 'clearfix';
+@import 'center-block';
+@import 'nav-vertical-align';
+@import 'grid-framework';
+@import 'grid';
+@import 'hide-scrollbars';
+@import 'shadows-helper';
+@import 'element-queries';
+@import 'create-grid';

package/styles/mixins/_labels.scss

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

package/styles/mixins/_list-group.scss

@@ -0,0 +1,32 @@
+@use "../../variables/index" as *;
+
+@use "color-mixins";
+
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background!important;
+  }
+
+  a.list-group-item-#{$state},
+  button.list-group-item-#{$state} {
+    color: $color;
+
+    .list-group-item-heading {
+      color: inherit;
+    }
+
+    &:hover,
+    &:focus {
+      color: $color;
+      @include color-mixins.brightness(0.9);
+    }
+    &.active,
+    &.active:hover,
+    &.active:focus {
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
+    }
+  }
+}

package/styles/mixins/_nav-divider.scss

@@ -0,0 +1,8 @@
+@use "../../variables/index" as *;
+
+@mixin nav-divider($color) {
+  overflow: hidden;
+  margin: calc($line-height-computed / 2 - 1) 0;
+  height: 1px;
+  background-color: $color;
+}

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

@@ -0,0 +1,9 @@
+@use "../../variables/index" as *;
+
+// 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.
+
+@mixin navbar-vertical-align($element-height) {
+  margin-top: calc(($navbar-height - $element-height) / 2);
+  margin-bottom: calc(($navbar-height - $element-height) / 2);
+}

package/styles/mixins/_opacity.scss

@@ -0,0 +1,9 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: string.unquote('alpha(opacity=#{$opacity-ie})');
+}

package/styles/mixins/_pagination.scss

@@ -0,0 +1,26 @@
+@use "../../variables/index" as *;
+
+@use "border-radius";
+
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: $padding-vertical $padding-horizontal;
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+    &:first-child {
+      > a,
+      > span {
+        @include border-radius.border-left-radius($border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        @include border-radius.border-right-radius($border-radius);
+      }
+    }
+  }
+}

package/styles/mixins/_panels.scss

@@ -0,0 +1,25 @@
+@use "../../variables/index" as *;
+
+@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
+  border-color: $border;
+
+  & > .panel-heading {
+    border-color: $heading-border;
+    background-color: $heading-bg-color;
+    background-image: none;
+    color: $heading-text-color;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: $border;
+    }
+    .badge {
+      background-color: $heading-text-color;
+      color: $heading-bg-color;
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse > .panel-body {
+      border-bottom-color: $border;
+    }
+  }
+}

package/styles/mixins/_progress-bar.scss

@@ -0,0 +1,12 @@
+@use "../../variables/index" as *;
+
+@use "gradients";
+
+@mixin progress-bar-variant($color) {
+  background-color: $color;
+
+  // Deprecated parent class requirement as of v3.2.0
+  .progress-striped & {
+    @include gradients.gradient-striped();
+  }
+}

package/styles/mixins/_reset-filter.scss

@@ -0,0 +1,9 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+// Reset filters for IE
+// When you need to remove a gradient background, do not forget to use this to reset the IE filter for IE9 and below.
+
+@mixin reset-filter() {
+  filter: string.unquote('progid:DXImageTransform.Microsoft.gradient(enabled = false)');
+}

package/styles/mixins/_reset-text.scss

@@ -0,0 +1,21 @@
+@use "../../variables/index" as *;
+
+@mixin reset-text() {
+  text-align: left; // Fallback for where `start` is not supported
+  text-align: flex-start;
+  text-decoration: none;
+  text-transform: none;
+  text-shadow: none;
+  white-space: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  word-break: normal;
+  letter-spacing: normal;
+  font-weight: normal;
+  // We deliberately do NOT reset font-size.
+  font-style: normal;
+  font-family: $font-family-base-css-var;
+  line-height: $line-height-base;
+
+  line-break: auto;
+}

package/styles/mixins/_resize.scss

@@ -0,0 +1,6 @@
+@use "../../variables/index" as *;
+
+@mixin resizable($direction) {
+  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
+}

package/styles/mixins/_responsive-visibility.scss

@@ -0,0 +1,21 @@
+@use "../../variables/index" as *;
+
+// More easily include all the states for responsive-utilities.less.
+
+@mixin responsive-visibility() {
+  display: block !important;
+  &table {
+    display: table !important;
+  }
+  &tr {
+    display: table-row !important;
+  }
+  &th,
+  &td {
+    display: table-cell !important;
+  }
+}
+
+@mixin responsive-invisibility() {
+  display: none !important;
+}

package/styles/mixins/_shadows-helper.scss

@@ -0,0 +1,40 @@
+@use "../../variables/index" as *;
+
+@mixin boxShadowHelper($level: sm, $direction: none) {
+  @if $level == sm {
+    //cards
+    box-shadow: $elevation-sm;
+    @if $direction == border {
+      box-shadow: $elevation-sm, var(--c8y-elevation-border);
+    }
+  } @else if $level == md {
+    // right-drawer
+    box-shadow: $elevation-md-bottom;
+    @if $direction == right {
+      box-shadow: $elevation-md-right;
+    }
+    @if $direction == left {
+      box-shadow: $elevation-md-left;
+    }
+    @if $direction == top {
+      box-shadow: $elevation-md-top;
+    }
+  } @else if $level == lg {
+    box-shadow: $elevation-lg;
+    @if $direction == right {
+      // dropdown inside raised components
+      box-shadow: $elevation-lg-right;
+    }
+  } @else if $level == hover {
+    // card hover
+    box-shadow: $elevation-hover;
+  }
+}
+
+// borders
+@mixin shadow-border($pos, $color) {
+  box-shadow: inset 0 $pos 0 0 $color;
+}
+.shadow-scroll {
+  box-shadow: 0 2px 3px rgba(black, 0.1);
+}