border.md 3.3 KB

Border

Estandarizamos los bordes que se pueden utilizar en botones, tarjetas, pop-ups y otros componentes.

Border

Hay pocos estilos de borde para elegir.

Name Thickness Demo
Solid 1px
Dashed 2px

Radius

Hay pocos estilos de radio para elegir.

<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>

<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div 
  class="radius" 
  :style="{ borderRadius: borderRadiusSmall }"
></div>

<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div 
  class="radius"
  :style="{ borderRadius: borderRadiusBase }"
></div>

<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>

Shadow

Hay pocos estilos de sombra para elegir.

<div class="demo-shadow" :style="{ boxShadow: boxShadowBase }"

Basic Shadow box-shadow: {{boxShadowBase}}

<div class="demo-shadow" :style="{ boxShadow: boxShadowLight }"

Light Shadow box-shadow: {{boxShadowLight}}