@c8y/style/styles/utilities.less

Styles for Cumulocity IoT applications

// Main utility classes

@import 'utilities/_caret.less';
@import 'utilities/_text-utils.less';
@import 'utilities/_contextual-colors.less';
@import 'utilities/_display.less';
@import 'utilities/_quickfloats.less';
@import 'utilities/_margins-paddings.less';
// Using the grid - mixins/
@import 'utilities/_flex-containers.less';
@import 'utilities/_flex-items.less';

@import 'utilities/_position.less';
@import 'utilities/_overflows.less';
@import 'utilities/_separators.less';
@import 'utilities/_borders.less';
@import 'utilities/_elevation.less';
@import 'utilities/_icon-utils.less';
@import 'utilities/_container-queries.less';



// Max width
.max-width-unset {
  max-width: unset !important;
}
.max-width-inherit {
  max-width: inherit !important;
}
.max-width-100 {
  max-width: 100% !important;
}
.max-width-fit {
  max-width: fit-content !important;
}

// Min width
.min-width-unset {
  min-width: unset !important;
}
.min-width-100 {
  min-width: 100% !important;
}
.min-width-0{
  min-width: 0;
}
.min-width-fit {
  min-width: fit-content !important;
}


// min-height
.min-height-unset,
.no-min-height{
  min-height: unset !important;
}

.min-height-fit {
  min-height: fit-content !important;
}

.fit-min-h,
.min-height-100 {
  min-height: 100% !important;
}

.min-height-0{
  min-height: 0;
}

// width

.fit-w {
  width: 100% !important;
}

// height

.fit-h {
  height: 100% !important;
}

.fit-h--md{
  @media (min-width: @screen-md-min){
    height: 100% !important;
  }
}

.fit-h-20 {
  height: 20px !important;
}

// Sticky header
.sticky-header-top-0 {
  position: sticky !important;
  top: 0 !important;
  background: inherit;
}

.sticky-right{
  position: sticky!important;
  right:0;
  background: inherit;
  margin-bottom: 1px;
}

// Transitions
.transition-bg {
  transition: background 0.25s ease;
}

/* List density
* display density utilities
* display density low = padding 8px
* display density low = padding 0
* use one or the other by adding either .dd-low or .dd-high on a parent wrapper
*/
.use-display-density {
  padding: @margin-8 0;
  transition: padding 0.25s ease;
  .card &,
  .modal & {
    padding: 0;
  }
  .dd-high & {
    padding: 0;
  }
  &[ng-reflect-collapsed='false'] {
    .dd-low & {
      padding-bottom: 0;
      .collapse {
        margin-top: 1rem;
      }
    }
  }
}

[ng-click],
.pointer {
  cursor: pointer !important;
  &.no-cursor,
  .no-cursor {
    cursor: auto !important;
  }
}

.no-pointer {
  pointer-events: none !important;
}

.pointer-all{
  pointer-events: all !important;
}

// remove display from transclude elements
[ng-transclude].ng-scope {
  display: contents;
}