@plangrid/structure/modules/border.css

CSS structure library

/* Deprecated. See README.md#border-radius */
.rounded { border-radius: var(--radii-medium) }
.rounded-top { border-radius: var(--radii-medium) var(--radii-medium) 0 0 }
.rounded-right { border-radius: 0 var(--radii-medium) var(--radii-medium) 0 }
.rounded-bottom { border-radius: 0 0 var(--radii-medium) var(--radii-medium) }
.rounded-left { border-radius: var(--radii-medium) 0 0 var(--radii-medium) }
.rounded-stack:first-child { border-top-left-radius: var(--radii-medium); border-top-right-radius: var(--radii-medium) }
.rounded-stack:last-child { border-bottom-left-radius: var(--radii-medium); border-bottom-right-radius: var(--radii-medium) }
.rounded-shelf:first-child { border-top-left-radius: var(--radii-medium); border-bottom-left-radius: var(--radii-medium) }
.rounded-shelf:last-child { border-top-right-radius: var(--radii-medium); border-bottom-right-radius: var(--radii-medium) }

/* Recommended. Our design system corner radii. Round to the nearest one */
.round-small { border-radius: var(--radii-small) }
.round-medium { border-radius: var(--radii-medium) }
.round-large { border-radius: var(--radii-large) }
.round-circle { border-radius: 50% }

/* Recommended. Use these for sharpening any side */
.sharp-top { border-top-left-radius: 0; border-top-right-radius: 0 }
.sharp-left { border-top-left-radius: 0; border-bottom-left-radius: 0 }
.sharp-right { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.sharp-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.sharp-stack:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0 }
.sharp-stack:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.sharp-shelf:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0 }
.sharp-shelf:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0 }

/* Deprecated. See README.md#border */
.border { border-style: solid; border-width: 1px }
.border-top { border-top-style: solid; border-top-width: 1px }
.border-right { border-right-style: solid; border-right-width: 1px }
.border-bottom { border-bottom-style: solid; border-bottom-width: 1px }
.border-left { border-left-style: solid; border-left-width: 1px }

/* Recommended =) */
.border-none { border-style: none }
.border-dashed { border-style: dashed }
.border-solid { border-style: solid }
.border-hidden { border-style: hidden }

/* Per-side classes override all-around ones */
.bt-none { border-top-style: none }
.bl-none { border-left-style: none }
.br-none { border-right-style: none }
.bb-none { border-bottom-style: none }

.bt-dashed { border-top-style: dashed }
.bl-dashed { border-left-style: dashed }
.br-dashed { border-right-style: dashed }
.bb-dashed { border-bottom-style: dashed }

.bt-solid { border-top-style: solid }
.bl-solid { border-left-style: solid }
.br-solid { border-right-style: solid }
.bb-solid { border-bottom-style: solid }

.bt-hidden { border-top-style: hidden }
.bl-hidden { border-left-style: hidden }
.br-hidden { border-right-style: hidden }
.bb-hidden { border-bottom-style: hidden }

/* Our standard border size */
.border-1px { border-width: 1px }

/* Useful for border unions */
.meld-stack:not(:first-child) { border-top-width: 0 }
.meld-shelf:not(:first-child) { border-left-width: 0 }
.weld-stack:not(:last-child) { border-bottom-width: 0 }
.weld-shelf:not(:last-child) { border-right-width: 0 }