generated from fastn-stack/fastn-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlib.ftd
108 lines (96 loc) · 2.64 KB
/
lib.ftd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
-- component button:
caption title:
string button1:
string link1:
boolean $is-hover-1: false
string button2:
string link2:
boolean $is-hover-2: false
string button3:
string link3:
boolean $is-hover-3: false
string button4:
string link4:
boolean $is-hover-4: false
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
optional ftd.shadow hover-shadow:
optional ftd.responsive-type role:
-- ftd.row:
width: fill-container
align-content: center
spacing.fixed.px: 40
-- ftd.text: $button.button1
role: $inherited.types.heading-hero
border-width.px: 2
padding.px: 10
border-radius.px: 6
style: bold
text-align: center
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow if { button.is-hover-1 } : $button.hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover-1, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover-1, v = false)
link: $button.link1
-- ftd.text: $button.button2
role: $inherited.types.heading-large
border-width.px: 2
padding.px: 10
border-radius.px: 6
style: bold
text-align: center
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow if { button.is-hover-2 } : $button.hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover-2, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover-2, v = false)
link: $button.link2
-- ftd.text: $button.button3
role: $inherited.types.heading-medium
border-width.px: 2
padding.px: 10
border-radius.px: 6
style: bold
text-align: center
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow if { button.is-hover-3 } : $button.hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover-3, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover-3, v = false)
link: $button.link3
-- ftd.text: $button.button4
role: $inherited.types.heading-small
border-width.px: 2
padding.px: 10
border-radius.px: 6
style: bold
text-align: center
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow if { button.is-hover-4 } : $button.hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover-4, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover-4, v = false)
link: $button.link4
-- end: ftd.row
-- end: button
-- ftd.color monochrome-dark:
light: black
dark: white
-- ftd.color monochrome-light:
light: white
dark: black
-- ftd.color shadow-color:
light: #cae9ee
dark: #e4b0ac
-- ftd.shadow s:
color: $shadow-color
x-offset.px: 0
y-offset.px: 0
blur.px: 50
spread.px: 7