Box shadow

Box shadow atomic classes allow you to change an element’s box shadow quickly.

Classes

Class	Output	Hover?	Focus?
`.bs-none`	`box-shadow: none;`
`.bs-sm`	`box-shadow: 0 @su2 @su8 fade(@black-700, 10%);`
`.bs-md`	`box-shadow: 0 @su4 @su8 fade(@black-700, 20%);`
`.bs-lg`	`box-shadow: 0 @su4 @su12 fade(@black-800, 20%);`
`.bs-i-sm`	`box-shadow: inset 0 @su2/2 @su8 0 fade(@black-700, 10%);`
`.bs-i-md`	`box-shadow: inset 0 @su2/2 @su8 0 fade(@black-700, 20%);`
`.bs-i-lg`	`box-shadow: inset 0 @su2/2 @su12 0 fade(@black-800, 20%);`
`.bs-ring`	`box-shadow: 0 0 0 @su4 fade(@blue-500, 15%);`

Examples

<div class="bs-sm">…</div>
<div class="bs-md">…</div>
<div class="bs-lg">…</div>
<div class="bs-i-sm">…</div>
<div class="bs-i-md">…</div>
<div class="bs-i-lg">…</div>

.bs-sm

.bs-md

.bs-lg

.bs-i-sm

.bs-i-md

.bs-i-lg

.bs-ring