@leapdev/gui 0.2.255 → 0.2.256

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.
@@ -1,78 +1,80 @@
1
- .toast, #toast-container {
2
- padding: 1.25rem 2.75rem 1.25rem 1.25rem;
3
- background-color: white !important;
4
- border-radius: var(--leap-border-radius) !important;
5
- border: 1px solid #ebebeb;
6
- margin-bottom: 0;
7
- box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10) !important;
8
- transition: box-shadow 0.15s ease-in-out;
9
-
10
- @media screen and (min-width: 768px) {
11
- width: 20rem;
12
- }
13
-
14
- &:hover {
15
- box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18) !important;
1
+ #toast-container {
2
+ .toast {
3
+ padding: 1.25rem 2.75rem 1.25rem 1.25rem;
4
+ background-color: white !important;
5
+ border-radius: var(--leap-border-radius) !important;
6
+ border: 1px solid #ebebeb;
7
+ margin-bottom: 0;
8
+ box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10) !important;
16
9
  transition: box-shadow 0.15s ease-in-out;
17
- }
18
10
 
19
- > .toast-title {
20
- text-transform: uppercase;
21
- font-weight: 600;
22
- font-size: 1rem;
23
- margin-bottom: 0.25rem;
24
- }
11
+ @media screen and (min-width: 768px) {
12
+ width: 20rem;
13
+ }
25
14
 
26
- &.toast-success {
27
- >.toast-title {
28
- color: $primary;
15
+ &:hover {
16
+ box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18) !important;
17
+ transition: box-shadow 0.15s ease-in-out;
29
18
  }
30
- >.toast-close-button {
31
- background-color: $primary;
32
- color: #fff;
33
- &:hover {
34
- background-color: darken($primary, 5%);
19
+
20
+ > .toast-title {
21
+ text-transform: uppercase;
22
+ font-weight: 600;
23
+ font-size: 1rem;
24
+ margin-bottom: 0.25rem;
25
+ }
26
+
27
+ &.toast-success {
28
+ >.toast-title {
29
+ color: $primary;
30
+ }
31
+ >.toast-close-button {
32
+ background-color: $primary;
33
+ color: #fff;
34
+ &:hover {
35
+ background-color: darken($primary, 5%);
36
+ }
35
37
  }
36
38
  }
37
- }
38
39
 
39
- &.toast-error {
40
- color: $danger !important;
40
+ &.toast-error {
41
+ color: $danger !important;
41
42
 
42
- // > .toast-title {}
43
- >.toast-close-button {
44
- background-color: $danger;
45
- color: #fff;
43
+ // > .toast-title {}
44
+ >.toast-close-button {
45
+ background-color: $danger;
46
+ color: #fff;
46
47
 
47
- &:hover {
48
- background-color: darken($danger, 5%);
48
+ &:hover {
49
+ background-color: darken($danger, 5%);
50
+ }
49
51
  }
50
52
  }
51
- }
52
-
53
- .toast-message {
54
- max-width: 12.5rem;
55
- min-width: 12.5rem;
56
- }
57
53
 
58
- button.toast-close-button {
59
- position: absolute;
60
- top: 1rem;
61
- right: 1rem;
62
- background-color: #f7f7f7;
63
- color: var(--leap-label-color);
64
- border-radius: var(--leap-border-radius);
65
- border: none;
66
- font-size: 1.4rem !important;
67
- font-weight: normal;
68
- line-height: 1;
69
- padding: 0.0625rem 0.375rem !important;
70
- transition: all .15s ease-in-out;
71
- opacity: 1;
54
+ .toast-message {
55
+ max-width: 12.5rem;
56
+ min-width: 12.5rem;
57
+ }
72
58
 
73
- &:hover {
59
+ button.toast-close-button {
60
+ position: absolute;
61
+ top: 1rem;
62
+ right: 1rem;
63
+ background-color: #f7f7f7;
64
+ color: var(--leap-label-color);
65
+ border-radius: var(--leap-border-radius);
66
+ border: none;
67
+ font-size: 1.4rem !important;
68
+ font-weight: normal;
69
+ line-height: 1;
70
+ padding: 0.0625rem 0.375rem !important;
74
71
  transition: all .15s ease-in-out;
75
72
  opacity: 1;
73
+
74
+ &:hover {
75
+ transition: all .15s ease-in-out;
76
+ opacity: 1;
77
+ }
76
78
  }
77
79
  }
78
80
  }
@@ -36,6 +36,14 @@
36
36
  background-color: var(--leap-input-disabled-background);
37
37
  border-color: var(--leap-input-disabled-border);
38
38
  }
39
+
40
+ &.has-error {
41
+ border-color: $danger;
42
+
43
+ &:focus {
44
+ box-shadow: var(--leap-input-box-shadow-error);
45
+ }
46
+ }
39
47
  }
40
48
 
41
49
  .form-control {
@@ -49,6 +49,7 @@ $custom-select-chevron: str-replace(url("data:image/svg+xml,%3Cs
49
49
  --leap-input-focus-border-color: #0078d7;
50
50
  --leap-input-placeholder-color: #6c757d;
51
51
  --leap-input-box-shadow: none;
52
+ --leap-input-box-shadow-error: none;
52
53
  --leap-input-addon-padding: 0 0.4375rem;
53
54
 
54
55
  --leap-select-padding-y: 0.125rem;
@@ -52,6 +52,7 @@ $custom-select-chevron: str-replace(url("data:image/svg+xml,%3cs
52
52
  --leap-input-focus-border-color: #1E365E;
53
53
  --leap-input-placeholder-color: #717880;
54
54
  --leap-input-box-shadow: inset 0 0 0 rgb(19 19 19 / 0%), 0 0 0 0.15rem #cdd3dc;
55
+ --leap-input-box-shadow-error: inset 0 0 0 #BE332A, 0 0 0 0.15rem rgba(190, 51, 42, 0.2);
55
56
  --leap-input-addon-padding: 0.375rem 1rem;
56
57
 
57
58
  --leap-select-padding-y: 0.125rem;
@@ -48,6 +48,7 @@ $custom-select-chevron: str-replace(url("data:image/svg+xml,%3Cs
48
48
  --leap-input-focus-border-color: #0078d7;
49
49
  --leap-input-placeholder-color: #6c757d;
50
50
  --leap-input-box-shadow: none;
51
+ --leap-input-box-shadow-error: none;
51
52
  --leap-input-addon-padding: 0 0.4375rem;
52
53
 
53
54
  --leap-select-padding-y: 0.125rem;
@@ -344,8 +344,8 @@ html {
344
344
  }
345
345
 
346
346
  &_validation_message {
347
- margin: -0.5rem 0 var(--leap-form-group-margin) 0;
348
347
  & > summary {
348
+ pointer-events: none;
349
349
  display: flex;
350
350
  align-items: center;
351
351
  gap: 0.25rem;
@@ -360,13 +360,9 @@ html {
360
360
  font-size: 1rem;
361
361
  }
362
362
  &:hover {
363
- text-decoration: underline;
363
+ cursor: pointer;
364
364
  }
365
365
  }
366
- &[closed] {
367
- }
368
- &[open] {
369
- }
370
366
  > ul {
371
367
  border-radius: var(--leap-border-radius);
372
368
  background-color: #f7f7f7;
@@ -387,6 +383,20 @@ html {
387
383
  top: calc(50% - 0.1875rem);
388
384
  left: 0;
389
385
  }
386
+
387
+ &.text-green {
388
+ color: $success;
389
+ &::before {
390
+ content: '';
391
+ width: 1rem;
392
+ height: 1rem;
393
+ background-size: contain;
394
+ background-color: transparent;
395
+ top: 0.1875rem;
396
+ left: -0.3125rem;
397
+ background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='#{$success}' viewBox='0 0 96 96'%3E%3Cpath d='M4,48 C4,23.699471 23.699471,4 48,4 C72.300529,4 92,23.699471 92,48 C92,72.300529 72.300529,92 48,92 C23.699471,92 4,72.300529 4,48 Z M40.9289322,54.8994949 L31.0294373,45 L23.9583694,52.0710678 L40.9289322,69.0416306 L72.0416306,37.9289322 L64.9705627,30.8578644 L40.9289322,54.8994949 Z'/%3E%3C/svg%3E"), '#', '%23');
398
+ }
399
+ }
390
400
  }
391
401
  }
392
402
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapdev/gui",
3
- "version": "0.2.255",
3
+ "version": "0.2.256",
4
4
  "description": "LEAP GUI",
5
5
  "author": "LEAP Dev",
6
6
  "license": "ISC",