Skip to content

Commit 47a489a

Browse files
BF150BF150
committed
fixed classes (BEM)
added theme properties, so theme styles can still be overwritten in app fixed bwst
1 parent f5be670 commit 47a489a

File tree

9 files changed

+132
-124
lines changed

9 files changed

+132
-124
lines changed

‎packages/components/src/components/spin/cycle.scss‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88
}
99

10-
@keyframes prixClipFix {
10+
@keyframes growingCircle {
1111
0% {
1212
opacity: 0.5;
1313
border-color: #fff;
@@ -16,63 +16,59 @@
1616

1717
25% {
1818
opacity: 0.75;
19-
border-color: var(--kol-spin-color, #000);
19+
border-color: var(--kol-spin-color, var(--kol-theme-spin-color, #000));
2020
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
2121
}
2222

2323
50% {
2424
opacity: 1;
25-
border-color: var(--kol-spin-color, #000);
25+
border-color: var(--kol-spin-color, var(--kol-theme-spin-color, #000));
2626
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
2727
}
2828

2929
75% {
3030
opacity: 1;
31-
border-color: var(--kol-spin-color, #000);
31+
border-color: var(--kol-spin-color, var(--kol-theme-spin-color, #000));
3232
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
3333
}
3434

3535
100% {
3636
opacity: 0.1;
37-
border-color: var(--kol-spin-color, #000);
37+
border-color: var(--kol-spin-color, var(--kol-theme-spin-color, #000));
3838
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
3939
}
4040
}
4141

42-
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
43-
@media (prefers-reduced-motion) {
44-
.kol-spin__loader {
45-
animation-duration: 4s !important;
46-
47-
&::before {
48-
animation-duration: 6s !important;
49-
}
50-
}
51-
}
5242
.kol-spin {
53-
&__spinner {
54-
&--cycle {
55-
width: to-rem(var(--kol-spin-size, 48));
56-
height: to-rem(var(--kol-spin-size, 48));
57-
}
58-
}
59-
60-
&__loader {
61-
border-radius: 50%;
62-
display: block;
63-
position: relative;
64-
width: 100%;
65-
height: 100%;
66-
animation: 2s linear infinite rotate;
43+
&__spinner--cycle {
44+
width: to-rem(var(--kol-spin-size, 48));
45+
height: to-rem(var(--kol-spin-size, 48));
6746

68-
&::before {
47+
&__element {
6948
border-radius: 50%;
70-
position: absolute;
71-
inset: 0;
49+
display: block;
50+
position: relative;
51+
width: 100%;
52+
height: 100%;
53+
animation: 2s linear infinite rotate;
54+
55+
@media (prefers-reduced-motion) {
56+
animation-duration: 4s !important;
57+
}
58+
59+
&::before {
60+
border-radius: 50%;
61+
position: absolute;
62+
inset: 0;
63+
64+
content: '';
65+
animation: 3s linear infinite growingCircle;
66+
border: 5px solid var(--kol-spin-color, var(--kol-theme-spin-color, #333));
7267

73-
content: '';
74-
animation: 3s linear infinite prixClipFix;
75-
border: 5px solid var(--kol-spin-color, #333);
68+
@media (prefers-reduced-motion) {
69+
animation-duration: 6s !important;
70+
}
71+
}
7672
}
7773
}
7874
}

‎packages/components/src/components/spin/dot.scss‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,47 +38,42 @@
3838
}
3939
}
4040
.kol-spin {
41-
&__spinner {
41+
&__spinner--dot {
4242
--kol-spin-border-width: calc(var(--kol-spin-size, 13) / 10);
4343

44-
&-dot {
45-
width: to-rem(calc((var(--kol-spin-size, 13) * 3) + 2));
46-
height: to-rem(calc(var(--kol-spin-size, 13) + (var(--kol-spin-border-width) * 2)));
47-
}
44+
width: to-rem(calc((var(--kol-spin-size, 13) * 3) + 2));
45+
height: to-rem(calc(var(--kol-spin-size, 13) + (var(--kol-spin-border-width) * 2)));
4846

49-
&-element {
47+
&__element {
5048
border-radius: 50%;
5149
position: absolute;
5250
top: 1px;
5351
width: to-rem(var(--kol-spin-size, 13));
5452
height: to-rem(var(--kol-spin-size, 13));
5553
animation-timing-function: cubic-bezier(0, 1, 1, 0);
54+
background-color: var(--kol-spin-color, var(--kol-theme-spin-color, #000));
5655
border: to-rem(var(--kol-spin-border-width)) solid #fff;
5756

5857
&--1 {
59-
background-color: var(--kol-spin-color, #000);
6058
left: to-rem(var(--kol-spin-border-width));
6159
z-index: 0;
6260
animation: 1s infinite spin1;
6361
}
6462

6563
&--2 {
66-
background-color: var(--kol-spin-color, #000);
6764
left: to-rem(var(--kol-spin-border-width));
6865
z-index: 1;
6966
animation: 1s infinite spin2;
7067
}
7168

7269
&--3 {
73-
background-color: var(--kol-spin-color, #000);
7470
left: to-rem(calc(var(--kol-spin-size, 13) + var(--kol-spin-border-width)));
7571
z-index: 1;
7672
animation: 1s infinite spin2;
7773
}
7874

79-
&--neutral {
75+
&--4 {
8076
opacity: 0.6;
81-
background-color: var(--kol-spin-color, #000);
8277
left: to-rem(calc((var(--kol-spin-size, 13) * 2) + var(--kol-spin-border-width)));
8378
z-index: 0;
8479
animation: 1s infinite spin3;

‎packages/components/src/internal/functional-components/spin/component.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,36 @@ import type { SpinApi } from './api';
77
function renderSpinVariant(variant: string): unknown {
88
switch (variant) {
99
case 'cycle':
10-
return <span class="kol-spin__loader"></span>;
10+
return <span class={`kol-spin__loader kol-spin__spinner--${variant}__element`}></span>;
1111
case 'none':
1212
return <slot name="expert"></slot>;
1313
default:
1414
return (
1515
<>
16-
<span class="kol-spin__spinner-element kol-spin__spinner-element--1"></span>
17-
<span class="kol-spin__spinner-element kol-spin__spinner-element--2"></span>
18-
<span class="kol-spin__spinner-element kol-spin__spinner-element--3"></span>
19-
<span class="kol-spin__spinner-element kol-spin__spinner-element--neutral"></span>
16+
<span
17+
class={`kol-spin__spinner-element
18+
kol-spin__spinner-element--1
19+
kol-spin__spinner--${variant}__element
20+
kol-spin__spinner--${variant}__element--1`}
21+
></span>
22+
<span
23+
class={`kol-spin__spinner-element
24+
kol-spin__spinner-element--2
25+
kol-spin__spinner--${variant}__element
26+
kol-spin__spinner--${variant}__element--2`}
27+
></span>
28+
<span
29+
class={`kol-spin__spinner-element
30+
kol-spin__spinner-element--3
31+
kol-spin__spinner--${variant}__element
32+
kol-spin__spinner--${variant}__element--3`}
33+
></span>
34+
<span
35+
class={`kol-spin__spinner-element
36+
kol-spin__spinner-element--neutral
37+
kol-spin__spinner--${variant}__element
38+
kol-spin__spinner--${variant}__element--4`}
39+
></span>
2040
</>
2141
);
2242
}

‎packages/samples/react/src/components/spin/basic.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,9 @@ import { SampleDescription } from '../SampleDescription';
88
export const SpinBasic: FC = () => (
99
<>
1010
<SampleDescription>
11-
<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot; and that you can change its color and size.</p>
11+
<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>
1212
</SampleDescription>
1313

14-
<section className="grid gap-4">
15-
<KolSpin _show />
16-
17-
<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '40' }} />
18-
</section>
14+
<KolSpin _show />
1915
</>
2016
);

‎packages/samples/react/src/components/spin/cycle.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ export const SpinCycle: FC = () => (
1111
<p>This sample shows the KolSpin variant &quot;cycle&quot; and that you can change its color and size.</p>
1212
</SampleDescription>
1313

14-
<section className="grid gap-4">
15-
<KolSpin _show _variant="cycle" />
16-
17-
<KolSpin _show _variant="cycle" style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />
18-
</section>
14+
<KolSpin _show _variant="cycle" />
1915
</>
2016
);

‎packages/samples/react/src/components/spin/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { SpinBasic } from './basic';
33
import { SpinCustom } from './custom';
44
import { SpinCycle } from './cycle';
55
import { SpinLabel } from './label';
6+
import { SpinVariables } from './variables';
67

78
export const SPIN_ROUTES: Routes = {
89
spin: {
910
basic: SpinBasic,
1011
cycle: SpinCycle,
1112
custom: SpinCustom,
1213
label: SpinLabel,
14+
variables: SpinVariables,
1315
},
1416
};

‎packages/samples/react/src/components/spin/variables.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
import { KolSpin } from '@public-ui/react-v19';
4+
5+
import type { FC } from 'react';
6+
import { SampleDescription } from '../SampleDescription';
7+
8+
export const SpinVariables: FC = () => (
9+
<>
10+
<SampleDescription>
11+
<p>You can change the color and size of the spinners with CSS properties.</p>
12+
</SampleDescription>
13+
14+
<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />
15+
</>
16+
);

‎packages/themes/bwst/src/components/spin.scss‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,36 @@
22

33
@layer kol-theme-component {
44
.kol-spin {
5-
&__loader {
6-
animation: rotation 1.5s linear infinite;
7-
8-
&:before {
9-
border-color: var(--color-primary-variant) var(--color-primary-variant) var(--color-secondary) var(--color-primary-variant);
10-
border-style: solid;
11-
border-radius: 50%;
12-
display: inline-block;
13-
box-sizing: border-box;
14-
width: to-rem(96);
15-
height: to-rem(96);
16-
border-width: 10px;
17-
animation-duration: 1.5s;
18-
animation-name: rotation;
5+
&__spinner {
6+
--kol-theme-spin-color: var(--color-primary-variant);
7+
8+
&--cycle {
9+
--kol-spin-size: 96;
10+
11+
&__element {
12+
animation: rotation 1.5s linear infinite;
13+
14+
&:before {
15+
border-color: var(--color-secondary) var(--color-primary-variant) var(--color-primary-variant) var(--color-primary-variant);
16+
border-style: solid;
17+
border-radius: 50%;
18+
display: inline-block;
19+
box-sizing: border-box;
20+
border-width: 10px;
21+
animation-duration: 1.5s;
22+
}
23+
}
1924
}
2025
}
2126

22-
&__spinner-element {
23-
&--1 {
24-
background-color: var(--color-primary-variant);
25-
}
26-
27-
&--2 {
28-
background-color: var(--color-primary-variant);
29-
}
30-
31-
&--3 {
32-
background-color: var(--color-primary-variant);
27+
@keyframes growingCircle {
28+
0% {
29+
transform: rotate(0deg);
3330
}
3431

35-
&--neutral {
36-
background-color: var(--color-secondary);
32+
100% {
33+
transform: rotate(360deg);
3734
}
3835
}
3936
}
40-
41-
@keyframes rotation {
42-
0% {
43-
transform: rotate(0deg);
44-
}
45-
46-
100% {
47-
transform: rotate(360deg);
48-
}
49-
}
5037
}

‎packages/themes/kern/src/components/spin.scss‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@
22

33
@layer kol-theme-component {
44
.kol-spin {
5-
&__spinner--cycle {
6-
--kol-spin-size: 96;
7-
}
5+
&__spinner {
6+
--kol-theme-spin-color: var(--kern-color-feedback-loader);
87

9-
&__loader {
10-
animation: rotation 1.5s linear infinite;
8+
&--cycle {
9+
--kol-spin-size: 96;
1110

12-
&:before {
13-
border-color: var(--kern-color-action-focus-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background)
14-
var(--kern-color-feedback-loader-background);
15-
border-style: solid;
16-
border-radius: 50%;
17-
display: inline-block;
18-
box-sizing: border-box;
19-
border-width: 10px;
20-
animation-duration: 1.5s;
21-
}
22-
}
11+
&__element {
12+
animation: rotation 1.5s linear infinite;
2313

24-
&__spinner-element {
25-
--kol-spin-color: var(--kern-color-feedback-loader);
14+
&:before {
15+
border-color: var(--kern-color-action-focus-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background)
16+
var(--kern-color-feedback-loader-background);
17+
border-style: solid;
18+
border-radius: 50%;
19+
display: inline-block;
20+
box-sizing: border-box;
21+
border-width: 10px;
22+
animation-duration: 1.5s;
23+
}
24+
}
25+
}
2626
}
27-
}
2827

29-
@keyframes prixClipFix {
30-
0% {
31-
transform: rotate(0deg);
32-
}
28+
@keyframes growingCircle {
29+
0% {
30+
transform: rotate(0deg);
31+
}
3332

34-
100% {
35-
transform: rotate(360deg);
33+
100% {
34+
transform: rotate(360deg);
35+
}
3636
}
3737
}
3838
}

0 commit comments

Comments
 (0)
⚡