-
Notifications
You must be signed in to change notification settings - Fork 1
/
holder.ftd
198 lines (144 loc) · 5.01 KB
/
holder.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
-- import: fastn-community.github.io/bling/collapse
-- site-doc.doc-home: Holder
site-title: Bling
show-tabs: false
github-url: https://github.com/fastn-community/bling
current-package: fastn-community.github.io/bling
The triangle bubble holder web component provides an attractive and
attention-grabbing way to present quotes or important text within a web page.
It enhances the visual appeal and readability of the content while providing a
clear visual indication of the quoted content.
-- site-doc.header: Example
-- site-doc.output:
-- triangular: A Triangle Quote Component
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
-- cb.code:
lang: java
if (condition) {
// code block
statement1;
statement2;
// ...
}
-- end: triangular
-- site-doc.header: How to use
-- cb.code: Add `bling` dependency into your FASTN.ftd
lang: ftd
\-- fastn.dependency: fastn-community.github.io/bling
-- cb.code: import `holder` inside your `.ftd` file
lang: ftd
\-- import: fastn-community.github.io/bling/holder
-- cb.code: Add `-- triangular` holder inside your `.ftd` file
lang: ftd
\-- holder.triangular: A Triangle Quote Component
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
\-- cb.code:
lang: java
if (condition) {
// code block
statement1;
statement2;
// ...
}
\-- collapse.collapse: Lorem ipsum dolor
info-right: Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
\-- end: holder.triangular
-- site-doc.header: Properties:
Below are details of all properties of `triangular` component.
-- site-doc.component-property: `title`
type: Caption (`optional`)
It's used to title to the `triangular` component.
-- site-doc.component-property: `body`
type: Body (`optional`)
It's used to add body content to `triangular` component.
-- site-doc.component-property: `make-odd`
type: Boolean (`optional`, default: `false`)
If you want to show multiple `triangular` component one after another add
`make-odd` property value to `true` which will remove background colors and all
`triangular` component with `make-odd` will be seen as a part of every
triangular component.
Try adding multiple `triangular` components one after another and add this
property value as `true` to odd positioned `triangular` component.
-- end: site-doc.doc-home
-- component triangular:
optional caption title:
optional body body:
boolean make-odd: false
children trangle-wrap:
-- ftd.column:
width: auto
width if { ftd.device == "mobile" }: fill-container
align-self: center
margin-top.px if { !triangular.make-odd }: 24
margin-bottom.px if { !triangular.make-odd }: 54
background.solid: $inherited.colors.border
background.solid if { triangular.make-odd }: $inherited.colors.background.base
padding-top.px: 56
padding-top.px if { triangular.make-odd }: 0
padding-bottom.px: 32
padding-bottom.px if { triangular.make-odd }: 0
padding-horizontal.px: 24
-- ftd.row:
if: { !triangular.make-odd }
width.fixed.px: 0
height.fixed.px: 0
border-top-width.px: 50
border-left-width.px: 60
border-right-width.px: 60
border-top-width.px if { ftd.device == "mobile" }: 35
border-left-width.px if { ftd.device == "mobile" }: 42
border-right-width.px if { ftd.device == "mobile" }: 42
border-top-color: $inherited.colors.background.step-1
border-bottom-color: $inherited.colors.border
border-left-color: $inherited.colors.border
border-right-color: $inherited.colors.border
anchor: parent
left.px: 50
top.px: 0
z-index: 0
-- end: ftd.row
-- ftd.text: $triangular.title
if: { triangular.title != NULL }
padding-vertical.px: 16
color: $inherited.colors.text
role: $inherited.types.heading-medium
width: fill-container
-- ftd.text:
if: { triangular.body != NULL }
color: $inherited.colors.text
role: $inherited.types.copy-regular
width: fill-container
$triangular.body
-- ftd.row:
if: { !triangular.make-odd }
width.fixed.px: 0
height.fixed.px: 0
border-top-width.px if { ftd.device != "mobile" }: 50
border-left-width.px if { ftd.device != "mobile" }: 60
border-right-width.px if { ftd.device != "mobile" }: 60
border-top-width.px if { ftd.device == "mobile" }: 35
border-left-width.px if { ftd.device == "mobile" }: 42
border-right-width.px if { ftd.device == "mobile" }: 42
border-top-color: $inherited.colors.border
border-bottom-color: $inherited.colors.background.step-1
border-left-color: $inherited.colors.background.step-1
border-right-color: $inherited.colors.background.step-1
anchor: parent
right.px: 50
bottom.px: -50
bottom.px if { ftd.device == "mobile" }: -35
z-index: 0
-- end: ftd.row
-- ftd.column:
width: fill-container
children: $triangular.trangle-wrap
-- end: ftd.column
-- end: ftd.column
-- end: triangular