-
Notifications
You must be signed in to change notification settings - Fork 75
/
calcite-tip-manager.scss
120 lines (104 loc) · 1.94 KB
/
calcite-tip-manager.scss
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
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tip-manager-height: the maximum height of the tip-manager
* @prop --calcite-tip-max-width: the maximum width of a slotted tip within tip-manager
*/
:host {
@apply block
box-border
bg-foreground-1
text-color-2
text--1h;
* {
@apply box-border;
}
--calcite-tip-manager-height: 19vh;
}
:host([closed]) {
@apply hidden;
}
@import "../../assets/styles/header";
.header {
@apply border-0
border-b
border-solid
border-color-3
py-0;
padding-inline-end: theme("padding.0");
padding-inline-start: theme("padding.4");
h2.heading {
@apply font-bold
text-color-1
text-1h
p-0;
}
}
.container {
@apply overflow-hidden
relative
focus-base;
min-height: 150px;
&:focus {
@apply focus-outset;
}
}
.tip-container {
@apply overflow-auto
flex
justify-center
items-start
focus-base
mt-px;
animation-name: none;
animation-duration: var(--calcite-internal-animation-timing);
height: var(--calcite-tip-manager-height);
&:focus {
@apply focus-outset;
}
}
::slotted(calcite-tip) {
@apply border-none p-3;
max-width: var(--calcite-tip-max-width);
}
.tip-container--advancing {
animation-name: tip-advance;
}
.tip-container--retreating {
animation-name: tip-retreat;
}
/* Pagination Styles*/
.pagination {
@apply flex
items-center
justify-center
pt-3
pb-2
px-0;
}
.page-position {
@apply text--2h my-0 mx-2;
}
/* @keyframes*/
@keyframes tip-advance {
0% {
@apply opacity-0;
transform: translate3d(50px, 0, 0) scale(0.99);
}
100% {
@apply opacity-100;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes tip-retreat {
0% {
@apply opacity-0;
transform: translate3d(-50px, 0, 0) scale(0.99);
}
100% {
@apply opacity-100;
transform: translate3d(0, 0, 0) scale(1);
}
}