@ship-ui/core 0.15.25 → 0.15.28
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/fesm2022/ship-ui-core.mjs +26 -13
- package/fesm2022/ship-ui-core.mjs.map +1 -1
- package/index.d.ts +3 -1
- package/package.json +1 -1
- package/styles/components/ship-button-group.component.scss +62 -10
- package/styles/components/ship-tabs.component.scss +30 -3
- package/styles/components/ship-tooltip.component.scss +7 -3
- package/styles/core/helpers/mixins/scroll-shadows.scss +44 -0
- package/styles/helpers.scss +1 -0
package/index.d.ts
CHANGED
|
@@ -223,6 +223,7 @@ declare class ShipBlueprintComponent implements AfterViewInit, OnDestroy {
|
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
declare class ShipButtonGroupComponent {
|
|
226
|
+
id: string;
|
|
226
227
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButtonGroupComponent, never>;
|
|
227
228
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipButtonGroupComponent, "sh-button-group", never, {}, {}, never, ["*"], true, never>;
|
|
228
229
|
}
|
|
@@ -757,6 +758,7 @@ declare class ShipTableComponent {
|
|
|
757
758
|
}
|
|
758
759
|
|
|
759
760
|
declare class ShipTabsComponent {
|
|
761
|
+
id: string;
|
|
760
762
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTabsComponent, never>;
|
|
761
763
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTabsComponent, "sh-tabs", never, {}, {}, never, ["*"], true, never>;
|
|
762
764
|
}
|
|
@@ -843,7 +845,7 @@ declare class ShipTooltipWrapper {
|
|
|
843
845
|
readonly SUPPORTS_ANCHOR: boolean;
|
|
844
846
|
isBelow: _angular_core.WritableSignal<boolean>;
|
|
845
847
|
openEffect: _angular_core.EffectRef;
|
|
846
|
-
|
|
848
|
+
ngAfterViewInit(): void;
|
|
847
849
|
ngOnDestroy(): void;
|
|
848
850
|
private calculateTooltipPosition;
|
|
849
851
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTooltipWrapper, never>;
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ $shipButtonGroup: true !default;
|
|
|
4
4
|
@if $shipButtonGroup == true {
|
|
5
5
|
sh-button-group {
|
|
6
6
|
--btng-bg: var(--base-1);
|
|
7
|
+
--btng-item-bg: var(--base-3);
|
|
7
8
|
--btng-c: var(--base-12);
|
|
8
9
|
--btng-ic: var(--base-12);
|
|
9
10
|
--btng-bc: var(--base-4);
|
|
@@ -16,6 +17,7 @@ $shipButtonGroup: true !default;
|
|
|
16
17
|
border: 1px solid var(--btng-bc);
|
|
17
18
|
border-radius: var(--btng-s);
|
|
18
19
|
height: var(--btng-h);
|
|
20
|
+
background: var(--btng-bg);
|
|
19
21
|
overflow: hidden;
|
|
20
22
|
|
|
21
23
|
&.small {
|
|
@@ -25,8 +27,9 @@ $shipButtonGroup: true !default;
|
|
|
25
27
|
|
|
26
28
|
&.type-b {
|
|
27
29
|
--btng-bg: var(--base-3);
|
|
30
|
+
--btng-item-bg: var(--base-1);
|
|
31
|
+
--btng-s-a: var(--shape-2);
|
|
28
32
|
|
|
29
|
-
background: var(--base-3);
|
|
30
33
|
padding: p2r(3);
|
|
31
34
|
gap: p2r(4);
|
|
32
35
|
border: 0;
|
|
@@ -35,16 +38,22 @@ $shipButtonGroup: true !default;
|
|
|
35
38
|
border-radius: p2r(6);
|
|
36
39
|
border: 0;
|
|
37
40
|
|
|
41
|
+
@supports not (anchor-name: --anchor) {
|
|
42
|
+
--btng-item-bg: var(--base-3);
|
|
43
|
+
}
|
|
44
|
+
|
|
38
45
|
&:hover {
|
|
39
46
|
--btng-bg: var(--base-2);
|
|
40
|
-
|
|
41
|
-
box-shadow: var(--box-shadow-10);
|
|
42
47
|
}
|
|
43
48
|
|
|
49
|
+
&:hover,
|
|
44
50
|
&.active {
|
|
45
51
|
--btng-bg: var(--base-1);
|
|
46
|
-
|
|
47
52
|
box-shadow: var(--box-shadow-10);
|
|
53
|
+
|
|
54
|
+
@supports not (anchor-name: --anchor) {
|
|
55
|
+
--btng-item-bg: var(--base-1);
|
|
56
|
+
}
|
|
48
57
|
}
|
|
49
58
|
}
|
|
50
59
|
}
|
|
@@ -68,7 +77,7 @@ $shipButtonGroup: true !default;
|
|
|
68
77
|
overflow: visible;
|
|
69
78
|
vertical-align: middle;
|
|
70
79
|
white-space: nowrap;
|
|
71
|
-
background:
|
|
80
|
+
background: transparent;
|
|
72
81
|
color: var(--btng-c);
|
|
73
82
|
font: var(--btng-f);
|
|
74
83
|
border-left: 1px solid var(--btng-bc);
|
|
@@ -85,11 +94,54 @@ $shipButtonGroup: true !default;
|
|
|
85
94
|
border-left: 0;
|
|
86
95
|
}
|
|
87
96
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
97
|
+
@supports not (anchor-name: --anchor) {
|
|
98
|
+
--btng-item-bg: var(--base-1);
|
|
99
|
+
background: var(--btng-item-bg);
|
|
100
|
+
|
|
101
|
+
&:hover,
|
|
102
|
+
&.active {
|
|
103
|
+
--btng-c: var(--base-12);
|
|
104
|
+
--btng-ic: var(--base-12);
|
|
105
|
+
--btng-bg: var(--base-3);
|
|
106
|
+
--btng-item-bg: var(--base-3);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@supports (anchor-name: --anchor) {
|
|
111
|
+
z-index: 1;
|
|
112
|
+
&.active {
|
|
113
|
+
position: relative;
|
|
114
|
+
anchor-name: var(--btng-id);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@supports (anchor-name: --anchor) {
|
|
120
|
+
&:after {
|
|
121
|
+
content: '';
|
|
122
|
+
background: var(--btng-item-bg);
|
|
123
|
+
pointer-events: none;
|
|
124
|
+
position: absolute;
|
|
125
|
+
z-index: 0;
|
|
126
|
+
top: anchor(top);
|
|
127
|
+
bottom: anchor(bottom);
|
|
128
|
+
left: anchor(left);
|
|
129
|
+
right: anchor(right);
|
|
130
|
+
position-anchor: var(--btng-id);
|
|
131
|
+
transition: all 0.175s ease-out;
|
|
132
|
+
border-radius: var(--btng-s-a);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&:not(.type-b):has(button:first-child.active) {
|
|
136
|
+
&:after {
|
|
137
|
+
--btng-s-a: #{p2r(4 0 0 4)};
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&:not(.type-b):has(button:last-child.active) {
|
|
142
|
+
&:after {
|
|
143
|
+
--btng-s-a: #{p2r(0 4 4 0)};
|
|
144
|
+
}
|
|
93
145
|
}
|
|
94
146
|
}
|
|
95
147
|
}
|
|
@@ -49,8 +49,15 @@ $shipTabs: true !default;
|
|
|
49
49
|
&.active {
|
|
50
50
|
color: var(--tabs-c-active);
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
@supports (anchor-name: --anchor) {
|
|
53
|
+
position: relative;
|
|
54
|
+
anchor-name: var(--tabs-id);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@supports not (anchor-name: --anchor) {
|
|
58
|
+
&::after {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
54
61
|
}
|
|
55
62
|
}
|
|
56
63
|
|
|
@@ -58,11 +65,31 @@ $shipTabs: true !default;
|
|
|
58
65
|
content: '';
|
|
59
66
|
display: none;
|
|
60
67
|
width: 100%;
|
|
61
|
-
height:
|
|
68
|
+
height: p2r(2);
|
|
62
69
|
background: var(--tabs-sel-bg);
|
|
63
70
|
position: absolute;
|
|
64
71
|
left: 0;
|
|
65
72
|
bottom: 0;
|
|
73
|
+
|
|
74
|
+
@supports (anchor-name: --anchor) {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@supports (anchor-name: --anchor) {
|
|
81
|
+
&:after {
|
|
82
|
+
content: '';
|
|
83
|
+
background: var(--tabs-sel-bg);
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
position: absolute;
|
|
86
|
+
z-index: 10;
|
|
87
|
+
height: p2r(2);
|
|
88
|
+
bottom: anchor(bottom);
|
|
89
|
+
left: anchor(left);
|
|
90
|
+
right: anchor(right);
|
|
91
|
+
position-anchor: var(--tabs-id);
|
|
92
|
+
transition: all 0.175s ease-out;
|
|
66
93
|
}
|
|
67
94
|
}
|
|
68
95
|
|
|
@@ -7,6 +7,7 @@ $shipTooltip: true !default;
|
|
|
7
7
|
z-index: 0;
|
|
8
8
|
visibility: visible;
|
|
9
9
|
}
|
|
10
|
+
|
|
10
11
|
@if $shipTooltip == true {
|
|
11
12
|
.tooltip {
|
|
12
13
|
position: relative;
|
|
@@ -52,7 +53,10 @@ $shipTooltip: true !default;
|
|
|
52
53
|
|
|
53
54
|
+ ship-tooltip-wrapper {
|
|
54
55
|
z-index: 1;
|
|
55
|
-
|
|
56
|
+
|
|
57
|
+
@supports (anchor-name: --anchor) {
|
|
58
|
+
transform: translateY(0) scaleY(1) scaleX(1);
|
|
59
|
+
}
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
}
|
|
@@ -65,7 +69,6 @@ $shipTooltip: true !default;
|
|
|
65
69
|
|
|
66
70
|
position: fixed;
|
|
67
71
|
padding: p2r(0 0 12);
|
|
68
|
-
transform: translateY(50%) scaleY(0) scaleX(0.8);
|
|
69
72
|
|
|
70
73
|
font: var(--paragraph-30);
|
|
71
74
|
width: max-content;
|
|
@@ -74,9 +77,10 @@ $shipTooltip: true !default;
|
|
|
74
77
|
margin: initial;
|
|
75
78
|
background: transparent;
|
|
76
79
|
border: 0;
|
|
77
|
-
transition: transform 125ms linear;
|
|
78
80
|
|
|
79
81
|
@supports (anchor-name: --anchor) {
|
|
82
|
+
transform: translateY(50%) scaleY(0) scaleX(0.8);
|
|
83
|
+
transition: transform 125ms linear;
|
|
80
84
|
inset: unset;
|
|
81
85
|
justify-self: anchor-center;
|
|
82
86
|
bottom: anchor(top);
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@use 'sass:list' as list;
|
|
2
|
+
@use 'sass:map' as map;
|
|
3
|
+
|
|
4
|
+
@mixin scroll-shadows($options) {
|
|
5
|
+
$background: map.get($options, 'background');
|
|
6
|
+
$colorFrom: map.get($options, 'colorFrom');
|
|
7
|
+
$colorTo: map.get($options, 'colorTo');
|
|
8
|
+
$size: map.get($options, 'size');
|
|
9
|
+
$fadeInSize: map.get($options, 'fadeInSize');
|
|
10
|
+
|
|
11
|
+
@if $background == null {
|
|
12
|
+
$background: var(--base1);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@if $colorFrom == null {
|
|
16
|
+
$colorFrom: rgb(from var(--base-12) r g b / 10%);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@if $colorTo == null {
|
|
20
|
+
$colorTo: rgb(from var(--base-12) r g b / 0%);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@if $size == null {
|
|
24
|
+
$size: p2r(14);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@if $fadeInSize == null {
|
|
28
|
+
$fadeInSize: p2r(40);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
background:
|
|
32
|
+
linear-gradient($background 30%, rgba(255, 255, 255, 0)) center top,
|
|
33
|
+
linear-gradient(rgba(255, 255, 255, 0), $background 70%) center bottom,
|
|
34
|
+
radial-gradient(farthest-side at 50% 0, $colorFrom, $colorTo) center top,
|
|
35
|
+
radial-gradient(farthest-side at 50% 100%, $colorFrom, $colorTo) center bottom;
|
|
36
|
+
|
|
37
|
+
background-repeat: no-repeat;
|
|
38
|
+
background-size:
|
|
39
|
+
100% $fadeInSize,
|
|
40
|
+
100% $fadeInSize,
|
|
41
|
+
100% $size,
|
|
42
|
+
100% $size;
|
|
43
|
+
background-attachment: local, local, scroll, scroll;
|
|
44
|
+
}
|
package/styles/helpers.scss
CHANGED