dots

by Marcos Moitas

HTML

<div class="carousel-dots">
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

SCSS

.carousel-dots {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;

  .dot {
    width: 16px; //Use function grid-rows(2)
    height: 16px; //Use function grid-rows(2)
    background: #D3DDE3; //Use var $base-color-slategray--lighter
    margin-right: 16px; //Use function grid-rows(2)
    border-radius: 100px;

    &:last-child {
      margin-right: 0;
    }
  }
 
  .active {
    background: #78C3FC; //Use var $brand-color-brand--light-blue
  }
}