Utilities
Borders
/path/to/floncss/trumps/borders/borders.css
罫線を制御するためのutility classです。
| Class | Properties | Description |
|---|---|---|
| border | ||
| border: var(--border-width-base) var(--border-default-style) var(--border-default-color); | ||
| border-top: var(--border-width-base) var(--border-default-style) var(--border-default-color); | ||
| border-right: var(--border-width-base) var(--border-default-style) var(--border-default-color); | ||
| border-bottom: var(--border-width-base) var(--border-default-style) var(--border-default-color); | ||
| border-left: var(--border-width-base) var(--border-default-style) var(--border-default-color); | ||
| border width | ||
| border-width: var(--border-width-base); | ||
| border-width: var(--border-width-xl); | ||
| border-width: var(--border-width-lg); | ||
| border-width: var(--border-width-md); | ||
| border-width: var(--border-width-sm); | ||
| border style | ||
| border-style: solid; | ||
| border-style: dotted; | ||
| border-style: dashed; | ||
| border color - main colors | ||
| border-color: var(--color-primary); | ||
| border-color: var(--color-primary-light); | ||
| border-color: var(--color-primary-dark); | ||
| border-color: var(--color-secondary); | ||
| border-color: var(--color-secondary-light); | ||
| border-color: var(--color-secondary-dark); | ||
| border-color: var(--color-tertiary); | ||
| border-color: var(--color-tertiary-light); | ||
| border-color: var(--color-tertiary-dark); | ||
| border-color: var(--color-quaternary); | ||
| border-color: var(--color-quaternary-light); | ||
| border-color: var(--color-quaternary-dark); | ||
| border color - neutral colors | ||
| border-color: var(--color-900); | ||
| border-color: var(--color-800); | ||
| border-color: var(--color-700); | ||
| border-color: var(--color-600); | ||
| border-color: var(--color-500); | ||
| border-color: var(--color-400); | ||
| border-color: var(--color-300); | ||
| border-color: var(--color-200); | ||
| border-color: var(--color-100); | ||
| border-color: var(--color-000); | ||
| border color - other colors | ||
| border-color: var(--color-red); | ||
| border-color: var(--color-red-light); | ||
| border-color: var(--color-red-dark); | ||
| border-color: var(--color-green); | ||
| border-color: var(--color-green-light); | ||
| border-color: var(--color-green-dark); | ||
| border-color: var(--color-blue); | ||
| border-color: var(--color-blue-light); | ||
| border-color: var(--color-blue-dark); | ||
| border radius | ||
| border-radius: 0; | ||
| border-radius: var(--radius-base); | ||
| border-radius: var(--radius-xl); | ||
| border-radius: var(--radius-lg); | ||
| border-radius: var(--radius-md); | ||
| border-radius: var(--radius-sm); | ||
Useage
- border-color:primary
- border-color:primary-dark
- border-color:primary-light
- border-color:secondary
- border-color:secondary-dark
- border-color:secondary-light
- border-color:tertiary
- border-color:tertiary-dark
- border-color:tertiary-light
- border-color:quaternary
- border-color:quaternary-dark
- border-color:quaternary-light
- border-color:900
- border-color:800
- border-color:700
- border-color:600
- border-color:500
- border-color:400
- border-color:300
- border-color:200
- border-color:100
- border-color:000
- border-color:red
- border-color:red-dark
- border-color:red-light
- border-color:green
- border-color:green-dark
- border-color:green-light
- border-color:blue
- border-color:blue-dark
- border-color:blue-light
1<div class="border border-color:primary">text...</div>
2<div class="border border-width:md">text...</div>
3<div class="border border-style:dotted radius">text...</div>
4...Settings
各種値については "settings/borders.css" で定義します。
Learn more