Settings
Borders
/path/to/floncss/settings/borders.css
サイトで利用する共通の罫線関連の変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
1:root {
2 /**
3 * border default color
4 *
5 * @example css
6 * .selector {
7 * border-color: var(--border-default-color);
8 * }
9 */
10 --border-default-color: var(--color-300);
11
12 /**
13 * border default style
14 *
15 * @example css
16 * .selector {
17 * border-style: var(--border-default-style);
18 * }
19 */
20 --border-default-style: solid;
21
22 /**
23 * border width
24 *
25 * @example css
26 * .selector {
27 * border-width: var(--border-width-base);
28 * }
29 */
30 --border-width-base: 1px;
31 --border-width-xl: 8px;
32 --border-width-lg: 4px;
33 --border-width-md: 2px;
34 --border-width-sm: 1px;
35
36 /**
37 * border radius
38 *
39 * @example css
40 * .selector {
41 * border-radius: var(--radius-md);
42 * }
43 */
44 --radius-base: 4px;
45 --radius-xl: 24px;
46 --radius-lg: 16px;
47 --radius-md: 8px;
48 --radius-sm: 2px;
49}Useage
utility class
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>css
1.selector {
2 border-width: var(--border-width-base);
3 border-style: var(--border-style-base);
4 border-color: var(--border-default-color);
5 border-radius: var(--radius-md);
6}