No notes defined.

<div class="uol-col-container uol-example-col-container uol-col-debug">
  <div class="uol-col-xl-12">
    <div class="uol-example-col-item">
      <p>uol-col-xl-12</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
      <p>uol-col-xl-6</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
      <p>uol-col-xl-6</p>
    </div>
  </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
  <div class="uol-col-12">
    <div class="uol-example-col-item">
      <p>uol-col-12</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
      <p>uol-col-xl-6</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
        <p>uol-col-xl-6</p>
      </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
        <p>uol-col-xl-4</p>
      </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
      <p>uol-col-xl-4</p>
    </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
        <p>uol-col-xl-4</p>
      </div>
  </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
  <div class="uol-col-12">
    <div class="uol-example-col-item">
      <p>uol-col-12</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
      <p>uol-col-xl-6</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
        <p>uol-col-xl-6</p>
      </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
        <p>uol-col-xl-3</p>
      </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
        <p>uol-col-xl-3</p>
      </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
  <div class="uol-col-12">
    <div class="uol-example-col-item">
      <p>uol-col-12</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
      <p>uol-col-xl-6</p>
    </div>
  </div>
  <div class="uol-col-xl-6">
    <div class="uol-example-col-item">
        <p>uol-col-xl-6</p>
      </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
      <p>uol-col-xl-4</p>
    </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
        <p>uol-col-xl-4</p>
      </div>
  </div>
  <div class="uol-col-xl-4">
    <div class="uol-example-col-item">
      <p>uol-col-xl-4</p>
    </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
  <div class="uol-col-xl-3">
    <div class="uol-example-col-item">
      <p>uol-col-xl-3</p>
    </div>
  </div>
</div>
<div class="uol-col-container uol-example-col-container uol-col-debug">
    <div class="uol-col-xl-12">
        <div class="uol-example-col-item">
            <p>uol-col-xl-12</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
    <div class="uol-col-12">
        <div class="uol-example-col-item">
            <p>uol-col-12</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
    <div class="uol-col-12">
        <div class="uol-example-col-item">
            <p>uol-col-12</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
</div>

<div class="uol-example-col-container uol-col-container uol-col-debug">
    <div class="uol-col-12">
        <div class="uol-example-col-item">
            <p>uol-col-12</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-6">
        <div class="uol-example-col-item">
            <p>uol-col-xl-6</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
    <div class="uol-col-xl-4">
        <div class="uol-example-col-item">
            <p>uol-col-xl-4</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
    <div class="uol-col-xl-3">
        <div class="uol-example-col-item">
            <p>uol-col-xl-3</p>
        </div>
    </div>
</div>
  • Content:
    $col-count: 12;
    $col-gutter-s: $spacing-4;
    $col-gutter-m: $spacing-4;
    $col-gutter-l: $spacing-5;
    $col-gutter-xl: $spacing-6;
    $col-debug-color: #fce5f0;
    
    .uol-col-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: #{$col-gutter-s / 2};
    
      @include media(">=uol-media-l") {
        padding: #{$col-gutter-l / 2};
      }
      @include media(">=uol-media-xl") {
        padding: #{$col-gutter-xl / 2};
      }
    
      > [class^="uol-col-"],
      .uol-col {
        flex-basis: 100%;
        width: 100%;
    
        @include media(">=uol-media-xs") {
          flex-basis: calc(100% - #{$col-gutter-s});
          width: calc(100% - #{$col-gutter-s});
          padding: #{$col-gutter-s / 2};
        }
    
        @include media(">=uol-media-l") {
          padding: #{$col-gutter-l / 2};
        }
    
        @include media(">=uol-media-xl") {
          padding: #{$col-gutter-xl / 2};
        }
      }
    
      [class*="uol-col-"] & {
    
        @include media(">=uol-media-xs") {
          margin: -#{$col-gutter-s};
        }
    
        @include media(">=uol-media-l") {
          margin: -#{$col-gutter-l};
        }
    
        @include media(">=uol-media-xl") {
          margin: -#{$col-gutter-xl};
        }
      }
    }
    
      .uol-col-container--no-padding {
        padding: 0;
    
        > [class^="uol-col-"],
        .uol-col {
          flex-basis: 100%;
          max-width: 100%;
          padding: 0;
    
          @include media(">=uol-media-xs") {
            padding: 0;
          }
    
          @include media(">=uol-media-l") {
            padding: 0;
          }
    
          @include media(">=uol-media-xl") {
            padding: 0;
          }
        }
      }
    
    // col
    @for $i from 1 through $col-count {
    
      $width: ($i / $col-count) * 100 + "%";
    
      .uol-col-#{$i} {
    
        @include media(">=uol-media-xs") {
          flex-basis: calc(#{$width} - #{$col-gutter-s});
          max-width: calc(#{$width} - #{$col-gutter-s});
        }
    
        @include media(">=uol-media-l") {
          flex-basis: calc(#{$width} - #{$col-gutter-l});
          max-width: calc(#{$width} - #{$col-gutter-l});
        }
    
        @include media(">=uol-media-xl") {
          flex-basis: calc(#{$width} - #{$col-gutter-xl});
          max-width: calc(#{$width} - #{$col-gutter-xl});
        }
    
        .uol-col-container--no-padding & {
          flex-basis: #{$width};
          max-width: #{$width};
        }
      }
    }
    
    // col-s
    @for $i from 1 through $col-count {
    
      $width: ($i / $col-count) * 100 + "%";
    
      .uol-col-s-#{$i} {
    
        @include media(">=uol-media-s") {
          flex-basis: calc(#{$width} - #{$col-gutter-s});
          max-width: calc(#{$width} - #{$col-gutter-s});
        }
    
        @include media(">=uol-media-l") {
          flex-basis: calc(#{$width} - #{$col-gutter-l});
          max-width: calc(#{$width} - #{$col-gutter-l});
        }
    
        @include media(">=uol-media-xl") {
          flex-basis: calc(#{$width} - #{$col-gutter-xl});
          max-width: calc(#{$width} - #{$col-gutter-xl});
        }
      }
    }
    
    // col-m
    @for $i from 1 through $col-count {
    
      $width: ($i / $col-count) * 100 + "%";
    
      .uol-col-m-#{$i} {
    
        @include media(">=uol-media-m") {
          flex-basis: calc(#{$width} - #{$col-gutter-s});
          max-width: calc(#{$width} - #{$col-gutter-s});
        }
    
        @include media(">=uol-media-l") {
          flex-basis: calc(#{$width} - #{$col-gutter-l});
          max-width: calc(#{$width} - #{$col-gutter-l});
        }
    
        @include media(">=uol-media-xl") {
          flex-basis: calc(#{$width} - #{$col-gutter-xl});
          max-width: calc(#{$width} - #{$col-gutter-xl});
        }
      }
    }
    
    // col-l
    @for $i from 1 through $col-count {
    
      $width: ($i / $col-count) * 100 + "%";
    
      .uol-col-l-#{$i} {
    
        @include media(">=uol-media-l") {
          flex-basis: calc(#{$width} - #{$col-gutter-l});
          max-width: calc(#{$width} - #{$col-gutter-l});
        }
    
        @include media(">=uol-media-xl") {
          flex-basis: calc(#{$width} - #{$col-gutter-xl});
          max-width: calc(#{$width} - #{$col-gutter-xl});
        }
      }
    }
    
    // col-xl
    @for $i from 1 through $col-count {
    
      $width: ($i / $col-count) * 100 + "%";
    
      .uol-col-xl-#{$i} {
    
        @include media(">=uol-media-xl") {
          flex-basis: calc(#{$width} - #{$col-gutter-xl});
          max-width: calc(#{$width} - #{$col-gutter-xl});
        }
      }
    }
    
    // Demo styling
    .uol-example-col-container {
      border: 1px solid red;
      margin-bottom: $col-gutter-s;
    
      @include media(">=uol-media-l") {
        margin-bottom: $col-gutter-l;
      }
    
      @include media(">=uol-media-xl") {
        margin-bottom: $col-gutter-xl;
      }
    }
    
    .uol-example-col-item {
      position: relative;
      background: rgba(#c1e0fe, 0.7);
      box-sizing: border-box;
      border: 1px solid $color-blue--bright;
      height: 4rem;
    
      p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
      }
    }
    
    .uol-text-debug {
      p, ul, h2, h3, h4, h5, h6, table {
        border: 1px solid #ccc;
      }
    }
    
    .uol-col-debug {
      position: relative;
    
      &::before {
    
        @include media(">=uol-media-xs") {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin-right: auto;
          margin-left: auto;
          z-index: -1000;
          pointer-events: none;
          width: calc(100% - (2 * #{$col-gutter-s}));
          background-image:
            repeating-linear-gradient(
              to right,
              #{$col-debug-color},
              #{$col-debug-color} calc((100% / #{$col-count}) - #{$col-gutter-s}),
              transparent calc((100% / #{$col-count}) - #{$col-gutter-s}),
              transparent calc(100% / #{$col-count})
            );
          background-size: calc(100% + #{$col-gutter-s}) 100%;
        }
    
        @include media(">=uol-media-l") {
          width: calc(100% - (2 * #{$col-gutter-l}));
          background-image:
            repeating-linear-gradient(
              to right,
              #{$col-debug-color},
              #{$col-debug-color} calc((100% / #{$col-count}) - #{$col-gutter-l}),
              transparent calc((100% / #{$col-count}) - #{$col-gutter-l}),
              transparent calc(100% / #{$col-count})
            );
          background-size: calc(100% + #{$col-gutter-l}) 100%;
        }
    
        @include media(">=uol-media-xl") {
          width: calc(100% - (2 * #{$col-gutter-xl}));
          background-image:
            repeating-linear-gradient(
              to right,
              #{$col-debug-color},
              #{$col-debug-color} calc((100% / #{$col-count}) - #{$col-gutter-xl}),
              transparent calc((100% / #{$col-count}) - #{$col-gutter-xl}),
              transparent calc(100% / #{$col-count})
            );
          background-size: calc(100% + #{$col-gutter-xl}) 100%;
        }
      }
    }
    
  • URL: /components/raw/uol-col/_columns.scss
  • Filesystem Path: src/library/01-foundations/02-columns/_columns.scss
  • Size: 6.4 KB
/* No context defined. */