<div class="Prose u-layout-prose u-padding-r-all">
    <h2>u-borderAlt</h2>
    <p>
        La classe u-borderAlt è utilizzata per evitare il "collasso" dei bordi durante la ridisposizione adattiva dei box della griglia.
    </p>
    <p>
        È possibile visualizzare l'effetto ridimensionando la viewport.
    </p>
</div>

<div class="Grid u-padding-r-all">
    <div class="Grid-cell u-text-s u-color-50 u-borderAlt u-sizeFull u-md-size1of2 u-lg-size1of2">
        <div class="u-padding-all-l">
            <h2 class="u-text-h5">
                u-borderAlt
            </h2>
        </div>
    </div>
    <div class="Grid-cell u-text-s u-color-50 u-borderAlt u-sizeFull u-md-size1of2 u-lg-size1of2">
        <div class="u-padding-all-l">
            <h2 class="u-text-h5">
                u-borderAlt
            </h2>
        </div>
    </div>
</div>

<br>
  • 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; }
    
    /*
     *	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-borderFocus:focus {
      box-shadow: 0 0 0 3px var(--Border-focus-color) inset !important;
      outline: none;
    }
    
    .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.8 KB

There are no notes for this item.