UNPKG

soft-components

Version:

Simple soft flexible set of web components

78 lines • 3.07 kB
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
:host { /** @prop --sc-accordion-animation-duration: CSS animation duration value. e.g. 1s, 500ms - default: var(--sc-animation-duration, 0.2s) */ --sc-accordion-animation-duration: var(--sc-animation-duration, 0.2s); /** @prop --sc-accordion-animation-timing-function: CSS animation timing function. - default: var(--sc-animation-timing-function, ease-in-out) */ --sc-accordion-animation-timing-function: var( --sc-animation-timing-function, ease-in-out ); /** @prop --sc-accordion-item-heading-padding-x: Horizontal padding for item heading - default: calc(var(--sc-root-spacing, 8px) * 2) */ --sc-accordion-item-heading-padding-x: calc(var(--sc-root-spacing, 8px) * 2); --sc-accordion-item-heading-padding-x: calc(var(--sc-root-spacing, 0.5rem) * 2); /** @prop --sc-accordion-item-heading-padding-y: Vertical padding for item heading - default: calc(var(--sc-root-spacing, 8px) * 2) */ --sc-accordion-item-heading-padding-y: calc(var(--sc-root-spacing, 8px) * 2); --sc-accordion-item-heading-padding-y: calc(var(--sc-root-spacing, 0.5rem) * 2); /** @prop --sc-accordion-item-body-padding-x: Horizontal padding for inner content - default: calc(var(--sc-root-spacing, 8px) * 2) */ --sc-accordion-item-body-padding-x: calc(var(--sc-root-spacing, 8px) * 2); --sc-accordion-item-body-padding-x: calc(var(--sc-root-spacing, 0.5rem) * 2); /** @prop --sc-accordion-item-body-padding-y: Vertical padding for inner content - default: calc(var(--sc-root-spacing, 8px) * 2) */ --sc-accordion-item-body-padding-y: calc(var(--sc-root-spacing, 8px) * 2); --sc-accordion-item-body-padding-y: calc(var(--sc-root-spacing, 0.5rem) * 2); /** @prop --sc-accordion-item-body-max-height: Inner content max height. This values is also used for CSS animation - default: 100vh */ --sc-accordion-item-body-max-height: 100vh; /** @prop --sc-accordion-item-heading-text-color: Heading text colour - default: var(--sc-text-color, #333333) */ --sc-accordion-item-heading-text-color: var(--sc-text-color, #333333); /** @prop --sc-accordion-item-heading-bg-color: Heading background colour - default: var(--sc-bg-color, #f1f1f1) */ --sc-accordion-item-heading-bg-color: var(--sc-bg-color, #f1f1f1); /** @prop --sc-accordion-item-body-bg-color: Content background colour - default: var(--sc-bg-color, #f1f1f1) */ --sc-accordion-item-body-bg-color: var(--sc-bg-color, #f1f1f1); /** @prop --sc-accordion-item-heading-border-bottom: Bottom border applied to the heading element to better separate the heading and body, especially useful when content is scrollable. - default: 1px solid var(--sc-shadow-color, rgba(0, 0, 0, 0.2)) */ --sc-accordion-item-heading-border-bottom: 1px solid var(--sc-shadow-color, rgba(0, 0, 0, 0.2)); --sc-accordion-item-heading-border-bottom: 0.0625rem solid var(--sc-shadow-color, rgba(0, 0, 0, 0.2)); }