@automattic/jetpack-components 1.1.13 → 1.1.14

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.
Files changed (42) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/components/action-button/style.module.scss +1 -1
  3. package/components/action-popover/styles.module.scss +10 -10
  4. package/components/admin-page/style.module.scss +1 -1
  5. package/components/admin-section/hero/style.module.scss +1 -1
  6. package/components/alert/style.module.scss +16 -16
  7. package/components/badge/style.module.scss +2 -2
  8. package/components/boost-score-bar/style.scss +3 -3
  9. package/components/boost-score-graph/style-annotation.scss +1 -1
  10. package/components/boost-score-graph/style-tooltip.scss +55 -54
  11. package/components/boost-score-graph/style.scss +15 -15
  12. package/components/button/style.module.scss +12 -12
  13. package/components/contextual-upgrade-trigger/style.module.scss +8 -8
  14. package/components/decorative-card/style.scss +3 -3
  15. package/components/details-viewer/styles.module.scss +6 -6
  16. package/components/dialog/style.module.scss +5 -5
  17. package/components/diff-viewer/styles.module.scss +12 -12
  18. package/components/donut-meter/style.scss +9 -9
  19. package/components/gridicon/style.scss +3 -3
  20. package/components/icon-tooltip/style.scss +3 -3
  21. package/components/icons/style.module.scss +11 -11
  22. package/components/indeterminate-progress-bar/style.module.scss +1 -7
  23. package/components/jetpack-footer/style.scss +13 -13
  24. package/components/layout/container/style.module.scss +1 -1
  25. package/components/loading-placeholder/style.module.scss +13 -13
  26. package/components/marked-lines/styles.module.scss +12 -12
  27. package/components/notice/style.module.scss +19 -16
  28. package/components/popover/style.scss +1 -1
  29. package/components/pricing-card/style.scss +14 -14
  30. package/components/product-offer/style.module.scss +19 -19
  31. package/components/product-price/style.module.scss +11 -11
  32. package/components/progress-bar/style.module.scss +3 -3
  33. package/components/radio-control/styles.module.scss +5 -5
  34. package/components/spinner/style.scss +3 -2
  35. package/components/split-button/style.module.scss +10 -10
  36. package/components/stat-card/style.module.scss +10 -10
  37. package/components/status/style.module.scss +54 -49
  38. package/components/testimonials/style.scss +112 -112
  39. package/components/text/style.module.scss +6 -6
  40. package/components/toggle-control/styles.module.scss +9 -9
  41. package/components/upsell-banner/style.scss +9 -9
  42. package/package.json +6 -6
package/components/icon-tooltip/style.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '@automattic/jetpack-base-styles/style';
2
2
 
3
- $arrow-color: var( --jp-gray );
3
+ $arrow-color: var(--jp-gray);
4
4
 
5
5
  // Fix arrow color
6
6
  .components-popover:not(.is-without-arrow)::before {
@@ -26,7 +26,7 @@ $arrow-color: var( --jp-gray );
26
26
  }
27
27
 
28
28
  .components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
29
- margin-left: -62px;
29
+ margin-left: -62px;
30
30
  }
31
31
 
32
32
  /*
@@ -72,7 +72,7 @@ $arrow-color: var( --jp-gray );
72
72
  .icon-tooltip-wrapper {
73
73
  display: inline-block;
74
74
  position: relative;
75
- color: var( --jp-black );
75
+ color: var(--jp-black);
76
76
 
77
77
  .components-button.is-link:focus:not(:disabled) {
78
78
  box-shadow: none;
package/components/icons/style.module.scss CHANGED
@@ -13,11 +13,11 @@
13
13
  fill: gb.$gray-700;
14
14
 
15
15
  &.bluesky {
16
- fill: var( --color-bluesky );
16
+ fill: var(--color-bluesky);
17
17
  }
18
18
 
19
19
  &.facebook {
20
- fill: var( --color-facebook );
20
+ fill: var(--color-facebook);
21
21
  // Add some specificity to override the border-radius on Jetpack settings page
22
22
  &:global(.social-logo) {
23
23
  border-radius: 50%;
@@ -25,27 +25,27 @@
25
25
  }
26
26
 
27
27
  &.twitter {
28
- fill: var( --color-twitter );
28
+ fill: var(--color-twitter);
29
29
  }
30
30
 
31
31
  &.linkedin {
32
- fill: var( --color-linkedin );
32
+ fill: var(--color-linkedin);
33
33
  }
34
34
 
35
35
  &.tumblr {
36
- fill: var( --color-tumblr );
36
+ fill: var(--color-tumblr);
37
37
  }
38
38
 
39
39
  &.google {
40
- fill: var( --color-gplus );
40
+ fill: var(--color-gplus);
41
41
  }
42
42
 
43
43
  &.mastodon {
44
- fill: var( --color-mastodon );
44
+ fill: var(--color-mastodon);
45
45
  }
46
46
 
47
47
  &.nextdoor {
48
- fill: var( --color-nextdoor );
48
+ fill: var(--color-nextdoor);
49
49
  // Add some specificity to override the border-radius on Jetpack settings page
50
50
  &:global(.social-logo) {
51
51
  border-radius: 50%;
@@ -53,15 +53,15 @@
53
53
  }
54
54
 
55
55
  &.instagram {
56
- fill: var( --color-instagram );
56
+ fill: var(--color-instagram);
57
57
  }
58
58
 
59
59
  &.whatsapp {
60
- fill: var( --color-whatsapp );
60
+ fill: var(--color-whatsapp);
61
61
  }
62
62
 
63
63
  &.threads {
64
- fill: var( --color-threads );
64
+ fill: var(--color-threads);
65
65
 
66
66
  &:global(.social-logo) {
67
67
  border-radius: 40%;
package/components/indeterminate-progress-bar/style.module.scss CHANGED
@@ -11,13 +11,7 @@
11
11
 
12
12
  pointer-events: none;
13
13
  background-size: 68px 100%;
14
- background-image: linear-gradient(
15
- -45deg,
16
- var(--jp-indeterminate-progress-bar__light-color) 33%,
17
- var(--jp-indeterminate-progress-bar__dark-color) 33%,
18
- var(--jp-indeterminate-progress-bar__dark-color) 71%,
19
- var(--jp-indeterminate-progress-bar__light-color) 71%
20
- );
14
+ background-image: linear-gradient(-45deg, var(--jp-indeterminate-progress-bar__light-color) 33%, var(--jp-indeterminate-progress-bar__dark-color) 33%, var(--jp-indeterminate-progress-bar__dark-color) 71%, var(--jp-indeterminate-progress-bar__light-color) 71%);
21
15
  display: inline-block;
22
16
  }
23
17
 
package/components/jetpack-footer/style.scss CHANGED
@@ -6,9 +6,9 @@
6
6
  max-width: 1128px;
7
7
  width: 100%;
8
8
 
9
- color: var( --jp-black );
9
+ color: var(--jp-black);
10
10
 
11
- font-size: var( --font-body-extra-small );
11
+ font-size: var(--font-body-extra-small);
12
12
  line-height: 1.333;
13
13
 
14
14
  a {
@@ -68,7 +68,7 @@
68
68
 
69
69
  > a {
70
70
  display: flex;
71
- align-items: center;
71
+ align-items: center;
72
72
  gap: 0.25rem;
73
73
 
74
74
  min-height: 44px; // Minimum target area size
@@ -79,15 +79,15 @@
79
79
 
80
80
  .jp-dashboard-footer__accessible-external-link {
81
81
  border: 0;
82
- clip: rect(1px, 1px, 1px, 1px);
83
- clip-path: inset(50%);
84
- height: 1px;
85
- margin: -1px;
86
- overflow: hidden;
87
- padding: 0;
88
- position: absolute;
89
- width: 1px;
90
- overflow-wrap: normal;
82
+ clip: rect(1px, 1px, 1px, 1px);
83
+ clip-path: inset(50%);
84
+ height: 1px;
85
+ margin: -1px;
86
+ overflow: hidden;
87
+ padding: 0;
88
+ position: absolute;
89
+ width: 1px;
90
+ overflow-wrap: normal;
91
91
  }
92
92
 
93
93
  .jp-dashboard-footer__jp-item {
@@ -117,4 +117,4 @@
117
117
  > a {
118
118
  text-decoration: none; // Logos typically have no hover effect
119
119
  }
120
- }
120
+ }
package/components/layout/container/style.module.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  @include breakpoints.media(#{$size}) using ($columns) {
9
9
  padding: 0 #{$padding};
10
- grid-template-columns: repeat( #{$columns}, minmax(0, 1fr) );
10
+ grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
11
11
  }
12
12
  }
13
13
 
package/components/loading-placeholder/style.module.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  @keyframes pulse {
2
2
 
3
- 0% {
4
- opacity: .6;
5
- }
3
+ 0% {
4
+ opacity: .6;
5
+ }
6
6
 
7
- 50% {
8
- opacity: 1;
9
- }
7
+ 50% {
8
+ opacity: 1;
9
+ }
10
10
 
11
- 100% {
12
- opacity: .6;
13
- }
11
+ 100% {
12
+ opacity: .6;
13
+ }
14
14
  }
15
15
 
16
16
  .placeholder {
17
- background-color: var( --jp-gray );
18
- animation: pulse 1.5s infinite;
19
- height: 100%;
20
- width: 100%;
17
+ background-color: var(--jp-gray);
18
+ animation: pulse 1.5s infinite;
19
+ height: 100%;
20
+ width: 100%;
21
21
  }
package/components/marked-lines/styles.module.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .marked-lines {
2
2
  padding: 0;
3
- background-color: var( --jp-gray-0 );
3
+ background-color: var(--jp-gray-0);
4
4
  font-family: monospace;
5
5
  display: flex;
6
6
  flex-direction: row;
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .marked-lines__marked-line {
11
- background-color: var( --jp-red-0 );
11
+ background-color: var(--jp-red-0);
12
12
  }
13
13
 
14
14
  .marked-lines__line-numbers {
@@ -18,13 +18,13 @@
18
18
  }
19
19
 
20
20
  .marked-lines__line-number {
21
- padding: 0 calc( var( --spacing-base ) / 2 ); // 0px | 4px
22
- background-color: var( --jp-gray-10 );
23
- color: var( --font-body );
21
+ padding: 0 calc(var(--spacing-base) / 2); // 0px | 4px
22
+ background-color: var(--jp-gray-10);
23
+ color: var(--font-body);
24
24
 
25
25
  &.marked-lines__marked-line {
26
- background-color: var( --jp-red-50 );
27
- color: var( --jp-white );
26
+ background-color: var(--jp-red-50);
27
+ color: var(--jp-white);
28
28
  }
29
29
  }
30
30
 
@@ -37,12 +37,12 @@
37
37
  }
38
38
 
39
39
  .marked-lines__line {
40
- padding-left: var( --spacing-base ); // 8px
40
+ padding-left: var(--spacing-base); // 8px
41
41
  }
42
42
 
43
43
  .marked-lines__mark {
44
- background-color: var( --jp-red );
45
- color: var( --jp-white );
46
- border-radius: calc( var( --jp-border-radius ) / 2 ); // 2px
47
- padding: calc( var( --spacing-base ) / 4 ) calc( var( --spacing-base ) / 2 ); // 2px | 4px
44
+ background-color: var(--jp-red);
45
+ color: var(--jp-white);
46
+ border-radius: calc(var(--jp-border-radius) / 2); // 2px
47
+ padding: calc(var(--spacing-base) / 4) calc(var(--spacing-base) / 2); // 2px | 4px
48
48
  }
package/components/notice/style.module.scss CHANGED
@@ -2,11 +2,11 @@
2
2
  display: flex;
3
3
  align-items: flex-start;
4
4
 
5
- font-size: var( --font-body );
5
+ font-size: var(--font-body);
6
6
 
7
- border: 1px solid var( --jp-black );
7
+ border: 1px solid var(--jp-black);
8
8
  border-radius: 4px;
9
- border-color: var( --jp-gray-5 );
9
+ border-color: var(--jp-gray-5);
10
10
  border-left-width: 6px;
11
11
 
12
12
  padding: 24px 31px 27px 18px;
@@ -14,8 +14,8 @@
14
14
 
15
15
  .icon-wrapper {
16
16
  margin-right: 20px;
17
- width: calc( var( --spacing-base ) * 3 );
18
- height: calc( var( --spacing-base ) * 3 );
17
+ width: calc(var(--spacing-base) * 3);
18
+ height: calc(var(--spacing-base) * 3);
19
19
  }
20
20
 
21
21
  .close-button {
@@ -74,8 +74,11 @@
74
74
 
75
75
  a {
76
76
 
77
- &, &:hover, &:active, &:focus {
78
- color: var( --jp-black );
77
+ &,
78
+ &:hover,
79
+ &:active,
80
+ &:focus {
81
+ color: var(--jp-black);
79
82
  }
80
83
  }
81
84
 
@@ -85,33 +88,33 @@
85
88
  }
86
89
 
87
90
  .is-error {
88
- border-left-color: var( --jp-red );
91
+ border-left-color: var(--jp-red);
89
92
 
90
93
  .icon {
91
- fill: var( --jp-red );
94
+ fill: var(--jp-red);
92
95
  }
93
96
  }
94
97
 
95
98
  .is-warning {
96
- border-left-color: var( --jp-yellow-20 );
99
+ border-left-color: var(--jp-yellow-20);
97
100
 
98
101
  .icon {
99
- fill: var( --jp-yellow-20 );
102
+ fill: var(--jp-yellow-20);
100
103
  }
101
104
  }
102
105
 
103
106
  .is-info {
104
- border-left-color: var( --black );
107
+ border-left-color: var(--black);
105
108
 
106
109
  .icon {
107
- fill: var( --black );
110
+ fill: var(--black);
108
111
  }
109
112
  }
110
113
 
111
114
  .is-success {
112
- border-left-color: var( --jp-green );
115
+ border-left-color: var(--jp-green);
113
116
 
114
117
  .icon {
115
- fill: var( --jp-green );
118
+ fill: var(--jp-green);
116
119
  }
117
- }
120
+ }
package/components/popover/style.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .jp-popover {
2
2
  width: 600px;
3
- max-width: calc( 100% - 32px );
3
+ max-width: calc(100% - 32px);
4
4
  padding: 16px;
5
5
  background-color: #fff;
6
6
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.03);
package/components/pricing-card/style.scss CHANGED
@@ -5,9 +5,9 @@
5
5
  width: fit-content;
6
6
  max-width: 384px;
7
7
  padding: 24px 24px 32px;
8
- background:var( --jp-white );
9
- box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.08 );
10
- border-radius: var( --jp-border-radius );
8
+ background: var(--jp-white);
9
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
10
+ border-radius: var(--jp-border-radius);
11
11
 
12
12
  @media screen and ( min-width: 600px ) {
13
13
  padding: 32px 32px 44px;
@@ -46,7 +46,7 @@
46
46
  &__price-before {
47
47
  position: relative;
48
48
  margin-right: 16px;
49
- color: var( --jp-gray-20 );
49
+ color: var(--jp-gray-20);
50
50
  }
51
51
 
52
52
  &__price-strikethrough {
@@ -55,17 +55,17 @@
55
55
  height: 3px;
56
56
  left: 0;
57
57
  top: 20px;
58
- background: var( --jp-pink );
58
+ background: var(--jp-pink);
59
59
  border-radius: 1.5px;
60
60
  }
61
61
 
62
62
  &__price-after {
63
- color: var( --jp-black );
63
+ color: var(--jp-black);
64
64
  }
65
65
 
66
66
  &__currency {
67
67
  vertical-align: super;
68
- font-size: var( --font-title-small );
68
+ font-size: var(--font-title-small);
69
69
  font-weight: 400;
70
70
  line-height: 20px;
71
71
  }
@@ -76,12 +76,12 @@
76
76
  font-size: 14px;
77
77
  font-weight: 400;
78
78
  line-height: 17px;
79
- color: var( --jp-gray-50 );
79
+ color: var(--jp-gray-50);
80
80
  letter-spacing: -0.02em;
81
81
  }
82
82
 
83
83
  &__price-decimal {
84
- font-size: var( --font-label );
84
+ font-size: var(--font-label);
85
85
  line-height: 14px;
86
86
  vertical-align: top;
87
87
  }
@@ -90,9 +90,9 @@
90
90
  width: 100%;
91
91
  height: auto;
92
92
  font-size: 18px;
93
- background: var( --jp-black );
94
- color: var( --jp-white ) !important;
95
- border-radius: var( --jp-border-radius );
93
+ background: var(--jp-black);
94
+ color: var(--jp-white) !important;
95
+ border-radius: var(--jp-border-radius);
96
96
  padding: 14px 24px;
97
97
  margin: 24px 0 32px;
98
98
  justify-content: center;
@@ -101,10 +101,10 @@
101
101
 
102
102
  &__info,
103
103
  &__tos {
104
- font-size: var( --font-label );
104
+ font-size: var(--font-label);
105
105
  line-height: 20px;
106
106
  letter-spacing: -0.02em;
107
- color: var( --jp-gray-60 );
107
+ color: var(--jp-gray-60);
108
108
  }
109
109
 
110
110
  &__tos {
package/components/product-offer/style.module.scss CHANGED
@@ -1,26 +1,26 @@
1
1
  .wrapper {
2
- padding: calc( var( --spacing-base ) * 8 );
2
+ padding: calc(var(--spacing-base) * 8);
3
3
  position: relative;
4
4
  }
5
5
 
6
6
  .is-card {
7
- background-color: var( --jp-white );
8
- border: 1px solid var( --jp-gray );
9
- border-radius: var( --jp-border-radius );
10
- box-shadow: 0 2px 6px var( --product-card-shadow ), 0 1px 2px var( --product-card-shadow );
7
+ background-color: var(--jp-white);
8
+ border: 1px solid var(--jp-gray);
9
+ border-radius: var(--jp-border-radius);
10
+ box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);
11
11
 
12
12
  .card-header {
13
- border-radius: var( --jp-border-radius ) var( --jp-border-radius ) 0 0;
13
+ border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;
14
14
  }
15
15
  }
16
16
 
17
17
  .card-header {
18
18
  display: flex;
19
19
  align-items: center;
20
- background: var( --jp-black );
21
- color: var( --jp-white );
22
- padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base );
23
- line-height: calc( var( --spacing-base ) * 3 );
20
+ background: var(--jp-black);
21
+ color: var(--jp-white);
22
+ padding: calc(var(--spacing-base) / 2) var(--spacing-base);
23
+ line-height: calc(var(--spacing-base) * 3);
24
24
  position: absolute;
25
25
  top: 0;
26
26
  left: 0;
@@ -35,15 +35,15 @@
35
35
  }
36
36
 
37
37
  .product-bundle-icon {
38
- fill: var( --jp-white );
39
- margin-right: var( --spacing-base );
38
+ fill: var(--jp-white);
39
+ margin-right: var(--spacing-base);
40
40
  }
41
41
 
42
42
  .product-bundle-icons,
43
43
  .product-icon {
44
44
  display: flex;
45
45
  align-items: center;
46
- margin-bottom: calc( var( --spacing-base ) * 4 );
46
+ margin-bottom: calc(var(--spacing-base) * 4);
47
47
  }
48
48
 
49
49
  .plus-icon {
@@ -56,18 +56,18 @@
56
56
  margin: 0;
57
57
  padding: 0;
58
58
  flex-grow: 1;
59
- margin-bottom: calc( var( --spacing-base ) * 2 );
59
+ margin-bottom: calc(var(--spacing-base) * 2);
60
60
 
61
61
  li {
62
62
  list-style: none;
63
63
  display: flex;
64
64
  align-items: flex-start;
65
- margin-bottom: var( --spacing-base );
65
+ margin-bottom: var(--spacing-base);
66
66
  }
67
67
 
68
68
  .check {
69
- fill: var( --jp-green-primary );
70
- margin-right: var( --spacing-base );
69
+ fill: var(--jp-green-primary);
70
+ margin-right: var(--spacing-base);
71
71
  flex-shrink: 0;
72
72
  }
73
73
  }
@@ -78,7 +78,7 @@
78
78
  align-items: center;
79
79
 
80
80
  svg {
81
- margin-right: var( --spacing-base );
81
+ margin-right: var(--spacing-base);
82
82
  }
83
83
  }
84
84
 
@@ -88,6 +88,6 @@
88
88
 
89
89
  &:global(.is-primary):disabled {
90
90
  opacity: 1;
91
- background-color: var( --jp-black );
91
+ background-color: var(--jp-black);
92
92
  }
93
93
  }
package/components/product-price/style.module.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .price-container {
9
9
  display: flex;
10
- align-items: flex-start;
10
+ align-items: flex-start;
11
11
  flex-grow: 2;
12
12
  flex-basis: 0;
13
13
 
@@ -23,19 +23,19 @@
23
23
  flex: 0 0 auto;
24
24
 
25
25
  &:first-child {
26
- margin-right: calc( var( --spacing-base ) * 2 );
26
+ margin-right: calc(var(--spacing-base) * 2);
27
27
  }
28
28
 
29
29
  &.is-not-off-price {
30
- color: var( --jp-gray-20);
30
+ color: var(--jp-gray-20);
31
31
 
32
32
  &::after {
33
33
  content: " ";
34
34
  display: block;
35
35
  width: 100%;
36
36
  height: 3px;
37
- background: var( --jp-red);
38
- border-radius: var( --jp-border-radius );
37
+ background: var(--jp-red);
38
+ border-radius: var(--jp-border-radius);
39
39
  position: absolute;
40
40
  top: 50%;
41
41
  margin-top: -2px;
@@ -49,11 +49,11 @@
49
49
  flex-wrap: wrap;
50
50
  align-items: flex-start;
51
51
  justify-content: flex-start;
52
- margin-bottom: calc( var( --spacing-base ) * 3 );
52
+ margin-bottom: calc(var(--spacing-base) * 3);
53
53
  }
54
54
 
55
55
  .legend {
56
- color: var( --jp-gray-40 );
56
+ color: var(--jp-gray-40);
57
57
  font-size: var(--font-body-small);
58
58
  line-height: 20px;
59
59
 
@@ -63,13 +63,13 @@
63
63
  }
64
64
 
65
65
  .promo-label {
66
- background-color: var( --jp-yellow-10);
66
+ background-color: var(--jp-yellow-10);
67
67
  border-radius: 4px;
68
- padding-left: var( --spacing-base );
69
- padding-right: var( --spacing-base );
68
+ padding-left: var(--spacing-base);
69
+ padding-right: var(--spacing-base);
70
70
  font-weight: 600;
71
71
  font-size: 13px;
72
- margin-left: var( --spacing-base );
72
+ margin-left: var(--spacing-base);
73
73
  }
74
74
 
75
75
  .symbol {
package/components/progress-bar/style.module.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  width: 100%;
3
3
  height: 12px;
4
4
  background-color: var(--jp-gray-5);
5
- border-radius: calc( var( --spacing-base ) * 3 );
5
+ border-radius: calc(var(--spacing-base) * 3);
6
6
  overflow: hidden;
7
7
 
8
8
  &.small {
@@ -11,8 +11,8 @@
11
11
 
12
12
  .progress {
13
13
  height: 100%;
14
- border-radius: calc( var( --spacing-base ) * 3 );
15
- background-color: var( --jp-black );
14
+ border-radius: calc(var(--spacing-base) * 3);
15
+ background-color: var(--jp-black);
16
16
  min-width: 12px;
17
17
  }
18
18
  }
package/components/radio-control/styles.module.scss CHANGED
@@ -12,15 +12,15 @@
12
12
  &__input[type="radio"] {
13
13
 
14
14
  &:checked {
15
- background: var( --jp-green-40 );
16
- border-color: var( --jp-green-40 );
15
+ background: var(--jp-green-40);
16
+ border-color: var(--jp-green-40);
17
17
  }
18
18
 
19
19
  &:focus {
20
- border-color: var( --jp-green-50 );
21
- box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
20
+ border-color: var(--jp-green-50);
21
+ box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
22
22
  }
23
23
  }
24
24
  }
25
25
  }
26
- }
26
+ }
package/components/spinner/style.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @keyframes rotate-spinner {
2
2
 
3
3
  100% {
4
- transform: rotate( 360deg );
4
+ transform: rotate(360deg);
5
5
  }
6
6
  }
7
7
 
@@ -10,7 +10,8 @@
10
10
  align-items: center;
11
11
  }
12
12
 
13
- .jp-components-spinner__outer, .jp-components-spinner__inner {
13
+ .jp-components-spinner__outer,
14
+ .jp-components-spinner__inner {
14
15
  margin: auto;
15
16
  box-sizing: border-box;
16
17
  border: 0.1em solid transparent;
package/components/split-button/style.module.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  .split-button {
2
- --actions-size: 28px;
3
- display: flex;
4
- height: var(--actions-size);
5
- border-radius: var(--jp-border-radius);
2
+ --actions-size: 28px;
3
+ display: flex;
4
+ height: var(--actions-size);
5
+ border-radius: var(--jp-border-radius);
6
6
 
7
7
  :global(.components-button-group) {
8
8
  display: flex;
9
9
  height: 100%;
10
10
  }
11
11
 
12
- > .button:first-child {
13
- border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
14
- }
12
+ > .button:first-child {
13
+ border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
14
+ }
15
15
 
16
- > :global(.components-dropdown) > .button {
17
- border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
18
- }
16
+ > :global(.components-dropdown) > .button {
17
+ border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
18
+ }
19
19
  }
20
20
 
21
21
  .button {