srcdev-nuxt-components 1.0.0 → 1.0.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 (7) hide show
  1. package/assets/styles/a11y/index.css +2 -0
  2. package/assets/styles/main.css +1 -1
  3. package/components/presentation/display-prompt/DisplayPromptCore.vue +35 -16
  4. package/package.json +1 -1
  5. package/assets/styles/ally/index.css +0 -2
  6. /package/assets/styles/{ally → a11y}/_utils.css +0 -0
  7. /package/assets/styles/{ally → a11y}/_variables.css +0 -0
package/assets/styles/a11y/index.css ADDED
@@ -0,0 +1,2 @@
1
+ @import './_variables';
2
+ @import './_utils';
package/assets/styles/main.css CHANGED
@@ -2,4 +2,4 @@
2
2
  @import './forms';
3
3
  @import './utils';
4
4
  @import './typography';
5
- @import './ally';
5
+ @import './a11y';
package/components/presentation/display-prompt/DisplayPromptCore.vue CHANGED
@@ -13,7 +13,8 @@
13
13
  </p>
14
14
  </div>
15
15
  <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
16
- <span class="sr-only">Close</span>
16
+ <Icon name="bitcoin-icons:cross-filled" class="icon" />
17
+ <span class="sr-only">Really Close</span>
17
18
  </button>
18
19
  </div>
19
20
  </div>
@@ -58,10 +59,10 @@ const dismissPrompt = () => {
58
59
 
59
60
  <style lang="css">
60
61
  .display-prompt-wrapper {
61
- background-color: var(--display-prompt-core-wrapper-background-color);
62
- border-radius: var(--display-prompt-core-wrapper-border-radius);
63
- border: var(--display-prompt-core-wrapper-border);
64
- outline: var(--display-prompt-core-wrapper-outline);
62
+ background-color: var(--display-prompt-wrapper-background-color);
63
+ border-radius: var(--display-prompt-wrapper-border-radius);
64
+ border: var(--display-prompt-wrapper-border);
65
+ outline: var(--display-prompt-wrapper-outline);
65
66
  overflow: hidden;
66
67
  transition: height 200ms, opacity 200ms, display 200ms;
67
68
  transition-behavior: allow-discrete;
@@ -73,23 +74,23 @@ const dismissPrompt = () => {
73
74
  }
74
75
 
75
76
  .display-prompt-inner {
76
- background-color: var(--display-prompt-core-inner-background-color);
77
+ background-color: var(--display-prompt-inner-background-color);
77
78
  align-items: center;
78
- border-radius: var(--display-prompt-core-inner-border-radius);
79
+ border-radius: var(--display-prompt-inner-border-radius);
79
80
  display: flex;
80
- gap: var(--display-prompt-core-inner-gap);
81
+ gap: var(--display-prompt-inner-gap);
81
82
  justify-content: space-between;
82
- padding: var(--display-prompt-core-inner-padding);
83
- margin: var(--display-prompt-core-inner-margin);
83
+ padding: var(--display-prompt-inner-padding);
84
+ margin: var(--display-prompt-inner-margin);
84
85
 
85
86
  .display-prompt-icon {
86
87
  display: inline-flex;
87
88
  .icon {
88
- color: var(--display-prompt-core-icon-color);
89
+ color: var(--display-prompt-icon-color);
89
90
  display: inline-block;
90
- font-size: var(--display-prompt-core-icon-size);
91
+ font-size: var(--display-prompt-icon-size);
91
92
  font-style: normal;
92
- font-weight: var(--display-prompt-core-icon-weight);
93
+ font-weight: var(--display-prompt-icon-weight);
93
94
  overflow: hidden;
94
95
  }
95
96
  }
@@ -98,7 +99,7 @@ const dismissPrompt = () => {
98
99
  display: block flex;
99
100
  flex-direction: column;
100
101
  flex-grow: 1;
101
- gap: var(--display-prompt-core-inner-content-gap);
102
+ gap: var(--display-prompt-inner-content-gap);
102
103
  margin: var(--display-prompt-content-margin);
103
104
  padding: var(--display-prompt-content-padding);
104
105
 
@@ -121,10 +122,28 @@ const dismissPrompt = () => {
121
122
  }
122
123
  }
123
124
  .display-prompt-action {
124
- display: flex;
125
+ /* all: unset; */
126
+ background-color: transparent;
127
+ display: block flex;
125
128
  align-items: center;
126
129
  justify-content: center;
127
- width: 40px;
130
+ margin: var(--display-prompt-button-margin);
131
+ padding: var(--display-prompt-button-padding);
132
+ border: var(--display-prompt-button-border);
133
+ border-radius: var(--display-prompt-button-border-radius);
134
+ outline: var(--display-prompt-button-outline);
135
+
136
+ &:hover {
137
+ cursor: pointer;
138
+ }
139
+
140
+ .icon {
141
+ color: var(--display-prompt-button-icon-color);
142
+ display: block;
143
+ font-size: var(--display-prompt-button-icon-font-size);
144
+ border: 1px solid green;
145
+ padding: 1rem;
146
+ }
128
147
  }
129
148
  }
130
149
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
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",
package/assets/styles/ally/index.css DELETED
@@ -1,2 +0,0 @@
1
- @import './_variables.css';
2
- @import './_utils.css';
/package/assets/styles/{ally → a11y}/_utils.css RENAMED
File without changes
/package/assets/styles/{ally → a11y}/_variables.css RENAMED
File without changes