@magic-spells/cart-progress-bar 0.1.0 → 0.2.1

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 (14) hide show
  1. package/README.md +78 -40
  2. package/dist/cart-progress-bar.cjs.js +23 -39
  3. package/dist/cart-progress-bar.cjs.js.map +1 -1
  4. package/dist/cart-progress-bar.css +17 -79
  5. package/dist/cart-progress-bar.esm.js +23 -39
  6. package/dist/cart-progress-bar.esm.js.map +1 -1
  7. package/dist/cart-progress-bar.js +23 -39
  8. package/dist/cart-progress-bar.js.map +1 -1
  9. package/dist/cart-progress-bar.min.css +1 -1
  10. package/dist/cart-progress-bar.min.js +1 -1
  11. package/dist/cart-progress-bar.scss +27 -105
  12. package/package.json +1 -1
  13. package/src/cart-progress-bar.js +23 -39
  14. package/src/cart-progress-bar.scss +27 -105
package/src/cart-progress-bar.scss CHANGED
@@ -1,18 +1,15 @@
1
1
  // SCSS Variables (can be overridden before import)
2
2
  $cart-progress-bar-height: 12px !default;
3
3
  $cart-progress-bar-border-radius: 6px !default;
4
- $cart-progress-bar-bg: #e9ecef !default;
5
- $cart-progress-bar-fill-bg: #28a745 !default;
6
- $cart-progress-bar-complete-bg: #007bff !default;
7
4
  $cart-progress-bar-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !default;
8
5
  $cart-progress-bar-transition-duration: 0.3s !default;
9
6
 
10
- // Message styling
11
- $cart-progress-message-font-size: 0.875rem !default;
12
- $cart-progress-message-line-height: 1.4 !default;
13
- $cart-progress-message-color: #495057 !default;
14
- $cart-progress-message-complete-color: #155724 !default;
15
- $cart-progress-message-margin: 0.5rem !default;
7
+ // Core color variables
8
+ $cart-progress-section-bg: transparent !default;
9
+ $cart-progress-section-color: #495057 !default;
10
+ $cart-progress-bar-bg: #e9ecef !default;
11
+ $cart-progress-bar-fill-before: #28a745 !default;
12
+ $cart-progress-bar-fill-after: #007bff !default;
16
13
 
17
14
  // Responsive breakpoints
18
15
  $cart-progress-mobile-breakpoint: 768px !default;
@@ -22,66 +19,46 @@ cart-progress-bar {
22
19
  // CSS Custom Properties for customization (mapped from SCSS variables)
23
20
  --cart-progress-bar-height: #{$cart-progress-bar-height};
24
21
  --cart-progress-bar-border-radius: #{$cart-progress-bar-border-radius};
25
- --cart-progress-bar-bg: #{$cart-progress-bar-bg};
26
- --cart-progress-bar-fill-bg: #{$cart-progress-bar-fill-bg};
27
- --cart-progress-bar-complete-bg: #{$cart-progress-bar-complete-bg};
28
22
  --cart-progress-bar-shadow: #{$cart-progress-bar-shadow};
29
23
  --cart-progress-bar-transition-duration: #{$cart-progress-bar-transition-duration};
30
- --cart-progress-message-font-size: #{$cart-progress-message-font-size};
31
- --cart-progress-message-line-height: #{$cart-progress-message-line-height};
32
- --cart-progress-message-color: #{$cart-progress-message-color};
33
- --cart-progress-message-complete-color: #{$cart-progress-message-complete-color};
34
- --cart-progress-message-margin: #{$cart-progress-message-margin};
35
24
 
36
- // Dynamic progress percentage (set by JavaScript)
25
+ // Core color variables
26
+ --cart-progress-section-bg: #{$cart-progress-section-bg};
27
+ --cart-progress-section-color: #{$cart-progress-section-color};
28
+ --cart-progress-bar-bg: #{$cart-progress-bar-bg};
29
+ --cart-progress-bar-fill-before: #{$cart-progress-bar-fill-before};
30
+ --cart-progress-bar-fill-after: #{$cart-progress-bar-fill-after};
31
+
32
+ // Dynamic variables (set by JavaScript)
37
33
  --cart-progress-percent: 0%;
34
+ --cart-progress-bar-fill-current: var(--cart-progress-bar-fill-before);
38
35
 
39
36
  display: block;
40
37
  width: 100%;
41
38
  max-width: 100%;
39
+ background-color: var(--cart-progress-section-bg);
40
+ color: var(--cart-progress-section-color);
42
41
 
43
42
  // Message styling
44
43
  p[data-content-cart-progress-message] {
45
- font-size: var(--cart-progress-message-font-size);
46
- line-height: var(--cart-progress-message-line-height);
47
- color: var(--cart-progress-message-color);
48
- margin: var(--cart-progress-message-margin) 0;
49
- text-align: center;
50
- transition: color var(--cart-progress-bar-transition-duration) ease;
51
-
52
- @media (max-width: $cart-progress-mobile-breakpoint) {
53
- font-size: calc(var(--cart-progress-message-font-size) * 0.9);
54
- margin: calc(var(--cart-progress-message-margin) * 0.75) 0;
55
- }
44
+ color: inherit;
45
+ transition: opacity var(--cart-progress-bar-transition-duration) ease;
56
46
  }
57
47
 
58
48
  // State-based styling
59
- &[data-complete='true'] {
49
+ &[complete='true'] {
60
50
  p[data-content-cart-progress-message] {
61
- color: var(--cart-progress-message-complete-color);
62
51
  font-weight: 600;
63
52
  }
64
53
  }
65
54
 
66
- // Progress level classes for additional styling hooks
67
- &.progress-low {
68
- --cart-progress-bar-fill-bg: #dc3545; // red for low progress
69
- }
70
-
71
- &.progress-medium {
72
- --cart-progress-bar-fill-bg: #ffc107; // yellow for medium progress
55
+ // State-based progress bar coloring
56
+ &[complete='false'] {
57
+ --cart-progress-bar-fill-current: var(--cart-progress-bar-fill-before);
73
58
  }
74
59
 
75
- &.progress-high {
76
- --cart-progress-bar-fill-bg: #fd7e14; // orange for high progress
77
- }
78
-
79
- &.progress-complete {
80
- --cart-progress-bar-fill-bg: var(--cart-progress-bar-complete-bg);
81
-
82
- p[data-content-cart-progress-message] {
83
- color: var(--cart-progress-message-complete-color);
84
- }
60
+ &[complete='true'] {
61
+ --cart-progress-bar-fill-current: var(--cart-progress-bar-fill-after);
85
62
  }
86
63
  }
87
64
 
@@ -99,7 +76,7 @@ progress-bar {
99
76
  .progress-bar-fill {
100
77
  height: 100%;
101
78
  width: var(--cart-progress-percent);
102
- background-color: var(--cart-progress-bar-fill-bg);
79
+ background-color: var(--cart-progress-bar-fill-current);
103
80
  border-radius: var(--cart-progress-bar-border-radius);
104
81
  transition:
105
82
  width var(--cart-progress-bar-transition-duration) ease,
@@ -133,8 +110,7 @@ progress-bar {
133
110
  }
134
111
 
135
112
  // Animate shine effect when complete
136
- cart-progress-bar[data-complete='true'] &,
137
- cart-progress-bar.progress-complete & {
113
+ cart-progress-bar[complete='true'] & {
138
114
  .progress-bar-fill::after {
139
115
  left: 100%;
140
116
  }
@@ -145,58 +121,4 @@ progress-bar {
145
121
  outline: 2px solid #007bff;
146
122
  outline-offset: 2px;
147
123
  }
148
-
149
- // High contrast mode support
150
- @media (prefers-contrast: high) {
151
- --cart-progress-bar-bg: #000000;
152
- --cart-progress-bar-fill-bg: #ffffff;
153
- border: 1px solid #ffffff;
154
- }
155
-
156
- // Reduced motion support
157
- @media (prefers-reduced-motion: reduce) {
158
- .progress-bar-fill {
159
- transition: none;
160
- }
161
-
162
- .progress-bar-fill::after {
163
- transition: none;
164
- }
165
- }
166
- }
167
-
168
- // Responsive adjustments
169
- @media (max-width: $cart-progress-mobile-breakpoint) {
170
- cart-progress-bar {
171
- --cart-progress-bar-height: 10px;
172
- --cart-progress-message-margin: 0.375rem;
173
- }
174
- }
175
-
176
- // Dark mode support
177
- @media (prefers-color-scheme: dark) {
178
- cart-progress-bar {
179
- --cart-progress-bar-bg: #343a40;
180
- --cart-progress-message-color: #e9ecef;
181
- --cart-progress-message-complete-color: #28a745;
182
- }
183
- }
184
-
185
- // Print styles
186
- @media print {
187
- cart-progress-bar {
188
- .above-message,
189
- .below-message {
190
- color: #000000 !important;
191
- }
192
-
193
- progress-bar {
194
- border: 1px solid #000000;
195
-
196
- .progress-bar-fill {
197
- background-color: #000000 !important;
198
- background-image: none !important;
199
- }
200
- }
201
- }
202
124
  }