.u-empty-section

scss
.u-empty-section {
  @include media-breakpoint-down('tablet-landscape') {
    display: none;
  }
}

clase de ayuda para secciones vacias dentro del layout

Example

html
<div class="u-empty-section"></div>

.u-hidden-desktop

scss
.u-hidden-desktop {
  @include media-breakpoint-up('tablet-landscape') {
    display: none !important;
  }
}

.u-wrapper--relative-table-up

scss
.u-wrapper {
  @include modifier('relative-tablet-up') {
    position: unset;

    @include media-breakpoint-up('tablet') {
      position: relative;
    }
  }
}

Este wrapper genera una posición relativa para los breakpoints superiores a tablet

.u-scrolling-content

scss
.u-scrolling-content {
  box-sizing: border-box;
  height: 80%;
  overflow: scroll;
  padding-top: 4px;
}

Utilitiy class for content with scroll

Example

html
<div class="u-scrolling-content">
  <!-- some scrolleable content -->
</div>

.u-scroll-x

scss
.u-scroll-x {
  overflow-x: scroll;
}

Utilitiy class for content with x scroll

Example

html
<div class="u-scroll-x">
  <!-- some x scrolleable content -->
</div>

.u-scroll-y

scss
.u-scroll-y {
  overflow-y: scroll;
}

Utilitiy class for content with y scroll

Example

html
<div class="u-scroll-y">
  <!-- some y scrolleable content -->
</div>

.u-text-ellipsis

scss
.u-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Utilitiy class for text content using ellipsis

Example

html
<div class="u-text-ellipsis">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, proin consequat posuere taciti interdum nunc fermentum primis, convallis ultricies parturient metus non ad. Mollis maecenas eget quisque massa hac id, tincidunt curabitur velit hendrerit eleifend magna, fringilla ullamcorper tempus ultrices ultricies. Himenaeos donec rhoncus suspendisse pellentesque montes risus fames ultrices viverra, praesent habitant vivamus nisi nulla imperdiet nunc vel tellus varius, elementum cursus blandit purus diam laoreet bibendum id.
</div>