@react-cupertino-ui/reaction-picker 2.0.3 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +55 -0
- package/dist/index.scss +45 -0
- package/dist/styles/mixins/_animations.scss +21 -0
- package/dist/styles/mixins/_glass.scss +76 -0
- package/package.json +1 -1
package/dist/index.css
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.react-cupertino-ui-reaction-picker {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: 0.25rem;
|
|
5
|
+
padding: 0.5rem 0.75rem;
|
|
6
|
+
border-radius: 999px;
|
|
7
|
+
background: rgba(255, 255, 255, var(--glass-opacity, 0.7));
|
|
8
|
+
backdrop-filter: blur(var(--glass-blur, 40px)) saturate(var(--glass-saturation, 180%));
|
|
9
|
+
-webkit-backdrop-filter: blur(var(--glass-blur, 40px)) saturate(var(--glass-saturation, 180%));
|
|
10
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
|
|
11
|
+
box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
|
|
12
|
+
position: relative;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
.react-cupertino-ui-reaction-picker::before {
|
|
16
|
+
content: "";
|
|
17
|
+
position: absolute;
|
|
18
|
+
inset: 0;
|
|
19
|
+
background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
|
|
20
|
+
border-radius: inherit;
|
|
21
|
+
opacity: var(--glass-highlight-opacity, 0.95);
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
mix-blend-mode: screen;
|
|
24
|
+
}
|
|
25
|
+
.react-cupertino-ui-reaction-picker button {
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
width: 2.25rem;
|
|
30
|
+
height: 2.25rem;
|
|
31
|
+
padding: 0;
|
|
32
|
+
border: none;
|
|
33
|
+
background: transparent;
|
|
34
|
+
border-radius: 999px;
|
|
35
|
+
font-size: 1.5rem;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
transition: transform 120ms ease, background-color 120ms ease;
|
|
38
|
+
}
|
|
39
|
+
.react-cupertino-ui-reaction-picker button:hover {
|
|
40
|
+
background: rgba(0, 0, 0, 0.05);
|
|
41
|
+
transform: scale(1.15);
|
|
42
|
+
}
|
|
43
|
+
.react-cupertino-ui-reaction-picker button:active {
|
|
44
|
+
transform: scale(0.95);
|
|
45
|
+
}
|
|
46
|
+
.react-cupertino-ui-reaction-picker button:focus-visible {
|
|
47
|
+
outline: none;
|
|
48
|
+
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (prefers-reduced-motion: reduce) {
|
|
52
|
+
.react-cupertino-ui-reaction-picker button {
|
|
53
|
+
transition-duration: 0ms;
|
|
54
|
+
}
|
|
55
|
+
}
|
package/dist/index.scss
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@use "./styles/mixins/glass" as glass;
|
|
2
|
+
|
|
3
|
+
.react-cupertino-ui-reaction-picker {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 0.25rem;
|
|
7
|
+
padding: 0.5rem 0.75rem;
|
|
8
|
+
border-radius: 999px;
|
|
9
|
+
@include glass.glass-panel(light);
|
|
10
|
+
|
|
11
|
+
button {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
width: 2.25rem;
|
|
16
|
+
height: 2.25rem;
|
|
17
|
+
padding: 0;
|
|
18
|
+
border: none;
|
|
19
|
+
background: transparent;
|
|
20
|
+
border-radius: 999px;
|
|
21
|
+
font-size: 1.5rem;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
transition: transform 120ms ease, background-color 120ms ease;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
background: rgba(0, 0, 0, 0.05);
|
|
27
|
+
transform: scale(1.15);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:active {
|
|
31
|
+
transform: scale(0.95);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:focus-visible {
|
|
35
|
+
outline: none;
|
|
36
|
+
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@media (prefers-reduced-motion: reduce) {
|
|
42
|
+
.react-cupertino-ui-reaction-picker button {
|
|
43
|
+
transition-duration: 0ms;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@mixin spring-transition($property: all, $duration: var(--spring-duration, 500ms)) {
|
|
2
|
+
transition-property: $property;
|
|
3
|
+
transition-duration: $duration;
|
|
4
|
+
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@mixin pressable($scale: 0.97) {
|
|
8
|
+
will-change: transform;
|
|
9
|
+
transition: transform var(--pressable-duration, 220ms)
|
|
10
|
+
cubic-bezier(0.2, 0, 0.2, 1),
|
|
11
|
+
filter var(--pressable-duration, 220ms) cubic-bezier(0.2, 0, 0.2, 1);
|
|
12
|
+
|
|
13
|
+
&:active {
|
|
14
|
+
transform: scale($scale);
|
|
15
|
+
filter: brightness(0.98);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin elevate($shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12))) {
|
|
20
|
+
box-shadow: $shadow;
|
|
21
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
$glass-default-blur: var(--glass-blur, 40px);
|
|
2
|
+
$glass-default-saturation: var(--glass-saturation, 180%);
|
|
3
|
+
$glass-light-border: var(--glass-border, rgba(255, 255, 255, 0.18));
|
|
4
|
+
$glass-dark-border: var(--glass-border-dark, rgba(255, 255, 255, 0.12));
|
|
5
|
+
$glass-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
|
|
6
|
+
$glass-highlight: var(
|
|
7
|
+
--glass-highlight,
|
|
8
|
+
linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%)
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
@mixin glass-panel($mode: light, $blur: $glass-default-blur, $opacity: null) {
|
|
12
|
+
$surface-opacity: $opacity;
|
|
13
|
+
$background: null;
|
|
14
|
+
$border-color: null;
|
|
15
|
+
|
|
16
|
+
@if $mode == dark {
|
|
17
|
+
$bg-opacity: $surface-opacity;
|
|
18
|
+
@if $surface-opacity == null {
|
|
19
|
+
$bg-opacity: var(--glass-opacity-dark, 0.45);
|
|
20
|
+
}
|
|
21
|
+
$background: rgba(16, 16, 16, $bg-opacity);
|
|
22
|
+
$border-color: $glass-dark-border;
|
|
23
|
+
} @else {
|
|
24
|
+
$bg-opacity: $surface-opacity;
|
|
25
|
+
@if $surface-opacity == null {
|
|
26
|
+
$bg-opacity: var(--glass-opacity, 0.7);
|
|
27
|
+
}
|
|
28
|
+
$background: rgba(255, 255, 255, $bg-opacity);
|
|
29
|
+
$border-color: $glass-light-border;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
background: $background;
|
|
33
|
+
backdrop-filter: blur($blur) saturate($glass-default-saturation);
|
|
34
|
+
-webkit-backdrop-filter: blur($blur) saturate($glass-default-saturation);
|
|
35
|
+
border: 1px solid $border-color;
|
|
36
|
+
box-shadow: $glass-shadow;
|
|
37
|
+
position: relative;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
|
|
40
|
+
&::before {
|
|
41
|
+
content: "";
|
|
42
|
+
position: absolute;
|
|
43
|
+
inset: 0;
|
|
44
|
+
background: $glass-highlight;
|
|
45
|
+
border-radius: inherit;
|
|
46
|
+
opacity: var(--glass-highlight-opacity, 0.95);
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
mix-blend-mode: screen;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@mixin glass-border($mode: light) {
|
|
53
|
+
$border-color: $glass-light-border;
|
|
54
|
+
@if $mode == dark {
|
|
55
|
+
$border-color: $glass-dark-border;
|
|
56
|
+
}
|
|
57
|
+
border: 1px solid $border-color;
|
|
58
|
+
box-shadow: $glass-shadow;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@mixin glass-refraction($angle: 135deg) {
|
|
62
|
+
&::after {
|
|
63
|
+
content: "";
|
|
64
|
+
position: absolute;
|
|
65
|
+
inset: 0;
|
|
66
|
+
background: linear-gradient(
|
|
67
|
+
$angle,
|
|
68
|
+
rgba(255, 255, 255, 0.3) 0%,
|
|
69
|
+
rgba(255, 255, 255, 0.1) 28%,
|
|
70
|
+
transparent 60%
|
|
71
|
+
);
|
|
72
|
+
border-radius: inherit;
|
|
73
|
+
pointer-events: none;
|
|
74
|
+
mix-blend-mode: soft-light;
|
|
75
|
+
}
|
|
76
|
+
}
|