Web Toolkit

image/svg+xml GitHub

Borders: Default 

<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.