.u-sound-wave

scss
.u-sound-wave {
  height: 4px;
  position: relative;
  width: 54px;

  @include modifier('animate') {
    span {
      animation: simple-wave 1.5s  infinite ease-in-out;
    }
  }

  span {
    background: use-color('complementario', 'light');
    bottom: 0;
    display: block;
    height: 5px;
    position: absolute;
    width: 9px;

    @include if-block-has-modifier('c-audio-message', 'active') {
      animation: simple-wave 1.5s  infinite ease-in-out;
    }

    &:nth-child(2) {
      animation-delay: 0.2s;
      left: 11px;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
      left: 22px;
    }

    &:nth-child(4) {
      animation-delay: 0.6s;
      left: 33px;
    }
    
    &:nth-child(5) {
      animation-delay: 0.8s;
      left: 44px;
    }
  }
}

simple wave using in audio-message examples

modifiers

  • u-sound-wave--animate: start animation.

Example

html
<div class="u-example-padding">

<div class="u-sound-wave u-sound-wave--animate">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

</div>

.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: 100%;
  // margin-bottom: 90px;
  overflow: scroll;
  overflow-x: hidden;
  padding-top: 4px;

  @include modifier('y') {
    overflow-x: visible;
    overflow-y: auto;
  }

  @include modifier('with-paddings') {
    padding: 16px 16px 0;
  }
}

Utilitiy class for content with scroll

Examples

html
<div class="u-scrolling-content">
  <!-- some scrolleable content -->
</div>
html y
<div class="u-scrolling-content u-scrolling-content--y">
  <!-- 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>

.u-max-height-570

scss
.u-max-height-570 {
  max-height: 570px;
}

Utilitiy class for max height of 570px

Example

html
<div class="u-max-height-570">
  <!-- some scrolleable content -->
</div>

.u-flex-wrapper

scss
.u-flex-wrapper {
  display: flex;

  @include element('item') {
    &:not(:last-child) {
      margin-right: 8%;
    }
  }
}

Utilitiy class for content with flex, each item has 8% right margin (excep the last one)

Example

html
<div class="u-flex-wrapper">
  <div class="u-flex-wrapper__item"></div>
  <div class="u-flex-wrapper__item"></div>
</div>