<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-top-xxs u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-top-xxs
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-top-m u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-top-m
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-top-l u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-top-l
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-right-xxs u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-right-xxs
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-right-m u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-right-m
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-right-l u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-right-l
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-bottom-xxs u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-bottom-xxs
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-bottom-m u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-bottom-m
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-bottom-l u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-bottom-l
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-left-xxs u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-left-xxs
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-left-m u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-left-m
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-left-l u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-left-l
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-all-xxs u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-all-xxs
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-all-m u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-all-m
        </h2>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-size1of3 u-padding-all-l">
    <div class="u-border-all-l u-color-teal u-padding-all-l">
        <h2 class="u-text-h5">
            u-border-all-l
        </h2>
    </div>
</div>
  • Content:
    /** @define utilities; */
    
    :root {
      --Border-size-unit: 0.1rem;
      --Border-focus-color: #ff8c00;
      --Border-soft-focus-color: #00c5ca;
    }
    
    .u-border-top-xxs { border-top: var(--Border-size-unit) solid currentColor !important; }
    .u-border-right-xxs { border-right: var(--Border-size-unit) solid currentColor !important; }
    .u-border-bottom-xxs { border-bottom: var(--Border-size-unit) solid currentColor !important; }
    .u-border-left-xxs { border-left: var(--Border-size-unit) solid currentColor !important; }
    .u-border-all-xxs { border: var(--Border-size-unit) solid currentColor !important; }
    
    .u-border-top-xs { border-top: calc(2 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-right-xs { border-right: calc(2 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-bottom-xs { border-bottom: calc(2 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-left-xs { border-left: calc(2 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-all-xs { border: calc(2 * var(--Border-size-unit)) solid currentColor !important; }
    
    .u-border-top-m { border-top: calc(10 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-right-m { border-right: calc(10 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-bottom-m { border-bottom: calc(10 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-left-m { border-left: calc(10 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-all-m { border: calc(10 * var(--Border-size-unit)) solid currentColor !important; }
    
    .u-border-top-l { border-top: calc(15 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-right-l { border-right: calc(15 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-bottom-l { border-bottom: calc(15 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-left-l { border-left: calc(15 * var(--Border-size-unit)) solid currentColor !important; }
    .u-border-all-l { border: calc(15 * var(--Border-size-unit)) solid currentColor !important; }
    
    .u-border-top-none { border-top: none !important; }
    .u-border-right-none { border-right: none !important; }
    .u-border-bottom-none { border-bottom: none !important; }
    .u-border-left-none { border-left: none !important; }
    .u-border-all-none { border: none !important; }
    
    /*
     *	Border for responsive cell
     *	see http://codepen.io/Hawkun/pen/rsIEp
     */
    
    .u-borderAlt {
      box-shadow:
        0.1em 0 0 0 currentColor,
        0 0.1em 0 0 currentColor,
        0.1em 0.1em 0 0 currentColor,
        0.1em 0 0 0 currentColor inset,
        0 0.1em 0 0 currentColor inset;
      padding: 0.1em;
    }
    
    .u-border-none {
      border: none !important;
    }
    
    .u-borderHideFocus:focus {
      box-shadow: none !important;
      outline: none !important;
    }
    
    .u-borderSoftFocus:focus {
      box-shadow: 0 0 3px 3px color(var(--Border-soft-focus-color) a(70%)) inset !important;
      outline: none !important;
    }
    
  • URL: /components/raw/borders/index.css
  • Filesystem Path: src/utils/borders/index.css
  • Size: 2.9 KB

There are no notes for this item.