linear-react-components-ui 1.1.20-beta.40 → 1.1.20-beta.41

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/lib/assets/styles/wizard.scss +62 -88
  2. package/package.json +1 -1
package/lib/assets/styles/wizard.scss CHANGED
@@ -10,6 +10,65 @@
10
10
  &:has(.wizard-progressbar[data-position="left"]) {
11
11
  flex-direction: row;
12
12
  }
13
+ .wizard-progressbar {
14
+ > .title {
15
+ font-size: 16px;
16
+ font-weight: 600;
17
+ display: flex;
18
+ align-items: center;
19
+ position: relative;
20
+ &[data-disabled="true"] {
21
+ pointer-events: none;
22
+ -webkit-user-select: none;
23
+ -ms-user-select: none;
24
+ user-select: none;
25
+ .step {
26
+ .number {
27
+ background-color: #dadada;
28
+ border-color: #dadada;
29
+ }
30
+ }
31
+ .step-title {
32
+ color: #dadada;
33
+ }
34
+ }
35
+ &[data-completed="true"] {
36
+ > .step {
37
+ > .number {
38
+ background-color: $success-color;
39
+ border-color: $success-color;
40
+ }
41
+ }
42
+ }
43
+ > .step {
44
+ display: flex;
45
+ flex-direction: column;
46
+ align-items: center;
47
+ justify-content: center;
48
+ > .number {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ font-size: 20px;
53
+ font-weight: 600;
54
+ width: 36px;
55
+ height: 36px;
56
+ border-radius: 100%;
57
+ color: #fff;
58
+ background-color: $color-light-dark;
59
+ z-index: 1;
60
+ transition: all 0.2s ease-in-out;
61
+ border: 2px solid $color-light-dark;
62
+ }
63
+ }
64
+ > .step-title {
65
+ max-width: 150px;
66
+ overflow: hidden;
67
+ font-weight: 500;
68
+ color: $font-color-soft;
69
+ }
70
+ }
71
+ }
13
72
  .wizard-progressbar[data-position="top"] {
14
73
  width: 100%;
15
74
  display: grid;
@@ -21,12 +80,7 @@
21
80
  border-bottom: 2px solid $component-border-color;
22
81
  gap: 10px;
23
82
  > .title {
24
- font-size: 16px;
25
- font-weight: 600;
26
- display: flex;
27
- align-items: center;
28
83
  flex-direction: column;
29
- position: relative;
30
84
  flex: 1;
31
85
  text-align: center;
32
86
  &:first-child {
@@ -83,63 +137,26 @@
83
137
  & + .title:after {
84
138
  background-color: $success-color !important;
85
139
  }
86
- > .step {
87
- > .number {
88
- background-color: $success-color;
89
- border-color: $success-color;
90
- }
91
- }
92
- }
93
- &[data-disabled="true"] .step {
94
- opacity: 0.3;
95
140
  }
96
141
  > .step {
97
- display: flex;
98
- flex-direction: column;
99
- align-items: center;
100
- justify-content: center;
101
142
  width: 54px;
102
- > .number {
103
- display: flex;
104
- align-items: center;
105
- justify-content: center;
106
- font-size: 20px;
107
- font-weight: 600;
108
- width: 36px;
109
- height: 36px;
110
- border-radius: 100%;
111
- color: #fff;
112
- background-color: $color-light-dark;
113
- z-index: 1;
114
- transition: all 0.2s ease-in-out;
115
- border: 2px solid $color-light-dark;
116
- }
117
143
  }
118
144
  > .step-title {
119
- max-width: 150px;
120
- overflow: hidden;
121
145
  margin-top: 6px;
122
- font-weight: 500;
123
- color: $font-color-soft;
124
146
  }
125
147
  }
126
148
  }
127
149
  .wizard-progressbar[data-position="left"] {
128
- width: 166px;
150
+ width: 220px;
129
151
  display: flex;
130
152
  flex-direction: column;
131
153
  gap: 30px;
132
154
  border-right: 1px solid #ccc;
133
- padding-right: 16px;
155
+ padding: 10px 16px 10px 10px;
134
156
  margin-right: 10px;
157
+ background-color: $fieldset-default;
135
158
  > .title {
136
- font-size: 16px;
137
- font-weight: 600;
138
- display: flex;
139
- align-items: center;
140
159
  gap: 10px;
141
- position: relative;
142
-
143
160
  &:has(+ .title) {
144
161
  &:after {
145
162
  content: "";
@@ -151,56 +168,13 @@
151
168
  background-color: #dadada;
152
169
  }
153
170
  }
154
-
155
171
  &[data-completed="true"] {
156
172
  &:has(+ .title):after {
157
173
  background-color: $success-color !important;
158
174
  }
159
- > .step {
160
- > .number {
161
- background-color: $success-color;
162
- border-color: $success-color;
163
- }
164
- }
165
- }
166
- &[data-disabled="true"] {
167
- .step {
168
- .number {
169
- background-color: #dadada;
170
- border-color: #dadada;
171
- }
172
- }
173
- .step-title {
174
- color: #dadada;
175
- }
176
175
  }
177
176
  > .step {
178
- display: flex;
179
- flex-direction: column;
180
- align-items: center;
181
- justify-content: center;
182
177
  width: 36px;
183
- > .number {
184
- display: flex;
185
- align-items: center;
186
- justify-content: center;
187
- font-size: 20px;
188
- font-weight: 600;
189
- width: 36px;
190
- height: 36px;
191
- border-radius: 100%;
192
- color: #fff;
193
- background-color: $color-light-dark;
194
- z-index: 1;
195
- transition: all 0.2s ease-in-out;
196
- border: 2px solid $color-light-dark;
197
- }
198
- }
199
- > .step-title {
200
- max-width: 150px;
201
- overflow: hidden;
202
- font-weight: 500;
203
- color: $font-color-soft;
204
178
  }
205
179
  }
206
180
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linear-react-components-ui",
3
- "version": "1.1.20-beta.40",
3
+ "version": "1.1.20-beta.41",
4
4
  "description": "Linear Sistemas ReactJs Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.cjs",