Skip to content

Commit d8f4e51

Browse files
jackdomleo7jackdomleo7
authored
Merge pull request #92 from jackdomleo7/89_offset
2 parents 6b18dfc + d462960 commit d8f4e51

8 files changed

Lines changed: 758 additions & 631 deletions

File tree

‎cooltipz.css‎

Lines changed: 83 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎cooltipz.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 611 additions & 581 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cooltipz-css",
3-
"version": "2.2.2",
3+
"version": "2.3.0",
44
"description": "Cooltipz.css is a pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use",
55
"scripts": {
66
"build": "npm run lint:fix && concurrently \"sass --no-source-map src/cooltipz.scss ./cooltipz.min.css --style=compressed\" \"sass --no-source-map src/cooltipz.scss ./cooltipz.css --style=expanded\" && concurrently \"npx postcss cooltipz.min.css --use autoprefixer cssnano --replace --no-map\" \"npx postcss cooltipz.css --use autoprefixer --replace --no-map\"",
@@ -50,15 +50,15 @@
5050
"style": "cooltipz.min.css",
5151
"devDependencies": {
5252
"autoprefixer": "^10.4.14",
53-
"concurrently": "^7.6.0",
54-
"cssnano": "^5.1.15",
53+
"concurrently": "^8.2.0",
54+
"cssnano": "^6.0.1",
5555
"git-branch-is": "^4.0.0",
5656
"is-git-status-clean": "^1.0.0",
57-
"postcss": "^8.4.21",
57+
"postcss": "^8.4.27",
5858
"postcss-cli": "^10.1.0",
59-
"sass": "^1.60.0",
60-
"stylelint": "^15.3.0",
61-
"stylelint-config-standard-scss": "^7.0.1"
59+
"sass": "^1.64.2",
60+
"stylelint": "^15.10.2",
61+
"stylelint-config-standard-scss": "^10.0.0"
6262
},
6363
"peerDependencies": {
6464
"sass": "1.x"

‎src/_directions.scss‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
1010
&.cooltipz--top {
1111
&::after {
1212
margin-bottom: $cooltipz-margin;
13+
transform: translate(-50%, var(--cooltipz-slide, #{$cooltipz-slide}));
1314
}
1415

1516
&::before {
1617
@extend %arrow-down;
18+
19+
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})), var(--cooltipz-slide, #{$cooltipz-slide}));
1720
}
1821

1922
&::after,
2023
&::before {
2124
bottom: $cooltipz-y-direction-position;
2225
left: 50%;
23-
transform: translate(-50%, var(--cooltipz-slide, #{$cooltipz-slide}));
2426
transform-origin: top;
2527
}
2628

2729
&:hover,
2830
&:focus,
2931
&[data-cooltipz-visible],
3032
&.cooltipz--visible {
31-
&::after,
3233
&::before {
34+
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})), 0);
35+
}
36+
37+
&::after {
3338
transform: translate(-50%, 0);
3439
}
3540
}
@@ -42,27 +47,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
4247
&::after {
4348
left: 0;
4449
margin-bottom: $cooltipz-margin;
50+
transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
4551
}
4652

4753
&::before {
4854
@extend %arrow-down;
4955

5056
left: $cooltipz-corner-direction-position;
57+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), var(--cooltipz-slide, #{$cooltipz-slide}));
5158
}
5259

5360
&::after,
5461
&::before {
5562
bottom: $cooltipz-y-direction-position;
56-
transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
5763
transform-origin: top;
5864
}
5965

6066
&:hover,
6167
&:focus,
6268
&[data-cooltipz-visible],
6369
&.cooltipz--visible {
64-
&::after,
6570
&::before {
71+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), 0);
72+
}
73+
74+
&::after {
6675
transform: translate(0);
6776
}
6877
}
@@ -75,27 +84,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
7584
&::after {
7685
margin-bottom: $cooltipz-margin;
7786
right: 0;
87+
transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
7888
}
7989

8090
&::before {
8191
@extend %arrow-down;
8292

8393
right: $cooltipz-corner-direction-position;
94+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), var(--cooltipz-slide, #{$cooltipz-slide}));
8495
}
8596

8697
&::after,
8798
&::before {
8899
bottom: $cooltipz-y-direction-position;
89-
transform: translate(0, var(--cooltipz-slide, #{$cooltipz-slide}));
90100
transform-origin: top;
91101
}
92102

93103
&:hover,
94104
&:focus,
95105
&[data-cooltipz-visible],
96106
&.cooltipz--visible {
97-
&::after,
98107
&::before {
108+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), 0);
109+
}
110+
111+
&::after {
99112
transform: translate(0);
100113
}
101114
}
@@ -107,26 +120,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
107120
&.cooltipz--bottom {
108121
&::after {
109122
margin-top: $cooltipz-margin;
123+
transform: translate(-50%, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
110124
}
111125

112126
&::before {
113127
@extend %arrow-up;
128+
129+
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})), calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
114130
}
115131

116132
&::after,
117133
&::before {
118134
left: 50%;
119135
top: $cooltipz-y-direction-position;
120-
transform: translate(-50%, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
121136
transform-origin: bottom;
122137
}
123138

124139
&:hover,
125140
&:focus,
126141
&[data-cooltipz-visible],
127142
&.cooltipz--visible {
128-
&::after,
129143
&::before {
144+
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})), 0);
145+
}
146+
147+
&::after {
130148
transform: translate(-50%, 0);
131149
}
132150
}
@@ -139,27 +157,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
139157
&::after {
140158
left: 0;
141159
margin-top: $cooltipz-margin;
160+
transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
142161
}
143162

144163
&::before {
145164
@extend %arrow-up;
146165

147166
left: $cooltipz-corner-direction-position;
167+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
148168
}
149169

150170
&::after,
151171
&::before {
152172
top: $cooltipz-y-direction-position;
153-
transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
154173
transform-origin: bottom;
155174
}
156175

157176
&:hover,
158177
&:focus,
159178
&[data-cooltipz-visible],
160179
&.cooltipz--visible {
161-
&::after,
162180
&::before {
181+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), 0);
182+
}
183+
184+
&::after {
163185
transform: translate(0);
164186
}
165187
}
@@ -172,27 +194,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
172194
&::after {
173195
margin-top: $cooltipz-margin;
174196
right: 0;
197+
transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
175198
}
176199

177200
&::before {
178201
@extend %arrow-up;
179202

180203
right: $cooltipz-corner-direction-position;
204+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
181205
}
182206

183207
&::after,
184208
&::before {
185209
top: $cooltipz-y-direction-position;
186-
transform: translate(0, calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1));
187210
transform-origin: bottom;
188211
}
189212

190213
&:hover,
191214
&:focus,
192215
&[data-cooltipz-visible],
193216
&.cooltipz--visible {
194-
&::after,
195217
&::before {
218+
transform: translate(var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset}), 0);
219+
}
220+
221+
&::after {
196222
transform: translate(0);
197223
}
198224
}
@@ -204,26 +230,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
204230
&.cooltipz--left {
205231
&::after {
206232
margin-right: $cooltipz-margin;
233+
transform: translate(var(--cooltipz-slide, #{$cooltipz-slide}), -50%);
207234
}
208235

209236
&::before {
210237
@extend %arrow-right;
238+
239+
transform: translate(var(--cooltipz-slide, #{$cooltipz-slide}), calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})));
211240
}
212241

213242
&::after,
214243
&::before {
215244
right: $cooltipz-y-direction-position;
216245
top: 50%;
217-
transform: translate(var(--cooltipz-slide, #{$cooltipz-slide}), -50%);
218246
transform-origin: left;
219247
}
220248

221249
&:hover,
222250
&:focus,
223251
&[data-cooltipz-visible],
224252
&.cooltipz--visible {
225-
&::after,
226253
&::before {
254+
transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})));
255+
}
256+
257+
&::after {
227258
transform: translate(0, -50%);
228259
}
229260
}
@@ -235,26 +266,31 @@ $cooltipz-y-direction-position: calc(100% - (var(--cooltipz-arrow-size, #{$coolt
235266
&.cooltipz--right {
236267
&::after {
237268
margin-left: $cooltipz-margin;
269+
transform: translate(calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1), -50%);
238270
}
239271

240272
&::before {
241273
@extend %arrow-left;
274+
275+
transform: translate(calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1), calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})));
242276
}
243277

244278
&::after,
245279
&::before {
246280
left: $cooltipz-y-direction-position;
247281
top: 50%;
248-
transform: translate(calc(var(--cooltipz-slide, #{$cooltipz-slide}) * -1), -50%);
249282
transform-origin: right;
250283
}
251284

252285
&:hover,
253286
&:focus,
254287
&[data-cooltipz-visible],
255288
&.cooltipz--visible {
256-
&::after,
257289
&::before {
290+
transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, #{$cooltipz-arrow-offset})));
291+
}
292+
293+
&::after {
258294
transform: translate(0, -50%);
259295
}
260296
}

‎src/_license.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/*! Cooltipz.css v2.2.2 | MIT License | github.com/jackdomleo7/Cooltipz.css */
1+
/*! Cooltipz.css v2.3.0 | MIT License | github.com/jackdomleo7/Cooltipz.css */

‎src/variables/_css.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
--cooltipz-medium: #{$cooltipz-medium};
1717
--cooltipz-large: #{$cooltipz-large};
1818
--cooltipz-arrow-size: #{$cooltipz-arrow-size};
19+
--cooltipz-arrow-offset: #{$cooltipz-arrow-offset};
1920
--cooltipz-delay-show: #{$cooltipz-delay-show};
2021
--cooltipz-delay-hide: #{$cooltipz-delay-hide};
2122
}

‎src/variables/_scss.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ $cooltipz-small: 6.25rem !default;
1313
$cooltipz-medium: 12.5rem !default;
1414
$cooltipz-large: 18.75rem !default;
1515
$cooltipz-arrow-size: 0.3125rem !default;
16+
/* stylelint-disable-next-line length-zero-no-unit */
17+
$cooltipz-arrow-offset: 0px !default;
1618
$cooltipz-delay-show: 0s !default;
1719
$cooltipz-delay-hide: 0s !default;
1820
$cooltipz-attribute: "aria-label" !default;

0 commit comments

Comments
 (0)