srcdev-nuxt-components 0.0.28 → 0.0.29

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 (2) hide show
  1. package/components/presentation/tabs/TabsCore.vue +19 -16
  2. package/package.json +1 -1
package/components/presentation/tabs/TabsCore.vue CHANGED
@@ -70,13 +70,16 @@ onMounted(() => {
70
70
 
71
71
  <style lang="css">
72
72
  .tabs-list {
73
- --_default-text: light-dark(var(--gray-12), var(--gray-0));
74
- --_active-bg: light-dark(var(--gray-12), var(--gray-0));
75
- --_active-text: light-dark(var(--gray-0), var(--gray-12));
76
- --_active-indicator: light-dark(var(--gray-12), var(--gray-0));
77
- --_hovered-bg: light-dark(var(--gray-7), var(--gray-3));
78
- --_hovered-text: light-dark(var(--gray-0), var(--gray-12));
79
- --_border-bottom: light-dark(var(--gray-12), var(--gray-0));
73
+ /*
74
+ * CSS var within /assets/styles/components/tabs.css
75
+ */
76
+ --_tabs-default-text: var(--tabs-default-text, light-dark(var(--gray-12), var(--gray-0)));
77
+ --_tabs-active-bg: var(--tabs-active-bg, light-dark(var(--gray-12), var(--gray-0)));
78
+ --_tabs-active-text: var(--tabs-active-text, light-dark(var(--gray-0), var(--gray-12)));
79
+ --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
80
+ --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
81
+ --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
82
+ --_tabs-border-bottom: var(--tabs-border-bottom, light-dark(var(--gray-12), var(--gray-0)));
80
83
 
81
84
  position: relative;
82
85
  display: flex;
@@ -145,28 +148,28 @@ onMounted(() => {
145
148
  /*
146
149
  * User configurable variables
147
150
  */
148
- border-bottom: 1px solid var(--_border-bottom);
151
+ border-bottom: 1px solid var(--_tabs-border-bottom);
149
152
  margin-block: 3rem;
150
153
 
151
154
  .nav__hovered {
152
- background: var(--_hovered-bg);
153
- color: var(--_hovered-text);
155
+ background: var(--_tabs-hovered-bg);
156
+ color: var(--_tabs-hovered-text);
154
157
  }
155
158
 
156
159
  .nav__active {
157
- background: var(--_active-bg);
158
- color: var(--_active-text);
160
+ background: var(--_tabs-active-bg);
161
+ color: var(--_tabs-active-text);
159
162
  }
160
163
 
161
164
  .nav__active-indicator {
162
- background: var(--_active-indicator);
165
+ background: var(--_tabs-active-indicator);
163
166
  height: 4px;
164
167
  }
165
168
 
166
169
  .tabs-list-item {
167
170
  background: transparent;
168
171
  border: 0;
169
- color: var(--_default-text);
172
+ color: var(--_tabs-default-text);
170
173
  cursor: pointer;
171
174
  font: inherit;
172
175
  text-transform: uppercase;
@@ -175,11 +178,11 @@ onMounted(() => {
175
178
  padding: 1em 2em;
176
179
 
177
180
  &:hover {
178
- color: var(--_hovered-text);
181
+ color: var(--_tabs-hovered-text);
179
182
  }
180
183
 
181
184
  &[aria-selected='true'] {
182
- color: var(--_active-text);
185
+ color: var(--_tabs-active-text);
183
186
  }
184
187
  }
185
188
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "0.0.28",
4
+ "version": "0.0.29",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",