@leapdev/gui 0.2.257 → 0.2.260

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,23 +1,107 @@
1
- .nav-tabs.flex-column {
2
- .nav-link {
3
- padding: $nav-tabs-stacked-padding;
1
+ .navbar-brand {
2
+ padding-top: 0;
3
+ padding-bottom: 0;
4
+ }
4
5
 
5
- &.segment-button {
6
- padding: $nav-tabs-stacked-padding;
7
- }
8
- }
6
+ .leap-tabs,
7
+ .nav-tabs:not(.nav-tabs-inverted) {
8
+ background-color: $nav-tabs-bg;
9
+ }
10
+ .leap-tabs-inverted,
11
+ .nav-tabs.nav-tabs-inverted {
12
+ background-color: theme-color('primary-darker');
9
13
  }
10
14
 
11
15
  .nav-tabs {
12
- background-color: $nav-tabs-bg;
16
+ &:not(.nav-tabs-inverted) {
17
+ @if $is-sirius {
18
+ border-bottom: 0.0625rem solid $border-color;
19
+ }
20
+
21
+ .nav-link {
22
+ background-color: transparent;
23
+ color: $body-color;
24
+ &::after {
25
+ content: '';
26
+ position: absolute;
27
+ height: 0.125rem;
28
+ width: 100%;
29
+ left: 0;
30
+ bottom: -1px;
31
+ transform: scaleX(0);
32
+ z-index: 10;
33
+
34
+ @if $is-sirius {
35
+ transition: all .25s ease-out;
36
+ }
37
+
38
+
39
+ @include mobile-device-only {
40
+ &::after {
41
+ height: 0.25rem;
42
+ bottom: -0.125rem;
43
+ }
44
+ }
45
+
46
+ }
47
+ &:hover {
48
+ color: theme-color('primary');
49
+ background-color: $nav-tabs-link-hover-bg;
50
+
51
+ &::after {
52
+ background: $nav-tabs-link-hover-border;
53
+ transform: scaleX(1);
54
+ }
55
+ }
56
+
57
+ &:not(.active):hover {
58
+ background-color: $nav-tabs-link-hover-bg;
59
+ }
60
+
61
+ &.active {
62
+ color: $nav-tabs-link-active-color;
63
+ z-index: 2;
64
+
65
+ &::after {
66
+ background: $nav-tabs-link-active-border;
67
+ transform: scaleX(1);
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ &.nav-tabs-inverted {
74
+ color: $white;
75
+
76
+ .nav-link {
77
+ background-color: transparent;
78
+ color: $white;
79
+ &:hover {
80
+ opacity: 1;
81
+ }
82
+ &:not(.active) {
83
+ opacity: 0.8;
84
+ &:hover {
85
+ opacity: 1;
86
+ background-color: darken(theme-color('primary-darker'), 5%);
87
+ }
88
+ }
89
+
90
+ &.active {
91
+ background-color: rgba(238, 238, 238, 0.25);
92
+ }
13
93
 
14
- @if $is-sirius {
15
- border-bottom: 0.0625rem solid $border-color;
94
+ > span {
95
+ white-space: nowrap;
96
+ }
97
+ }
16
98
  }
17
99
 
18
100
  .nav-link {
19
- background-color: transparent;
20
- color: $body-color;
101
+ // // IE Fix
102
+ // display: inline-block;
103
+ display: flex;
104
+ align-items: center;
21
105
  padding: $nav-tabs-link-padding-x $nav-tabs-link-padding-y;
22
106
  font-weight: $nav-tabs-link-font-weight;
23
107
  font-size: $nav-tabs-link-font-size;
@@ -28,30 +112,6 @@
28
112
  min-width: $nav-tabs-link-min-width;
29
113
  z-index: 1;
30
114
 
31
- &::after {
32
- content: '';
33
- position: absolute;
34
- height: 0.125rem;
35
- width: 100%;
36
- left: 0;
37
- bottom: -1px;
38
- transform: scaleX(0);
39
- z-index: 10;
40
-
41
- @if $is-sirius {
42
- transition: all .25s ease-out;
43
- }
44
-
45
-
46
- @include mobile-device-only {
47
- &::after {
48
- height: 0.25rem;
49
- bottom: -0.125rem;
50
- }
51
- }
52
-
53
- }
54
-
55
115
  @if $nav-tabs-link-is-uppercase {
56
116
  text-transform: uppercase;
57
117
  }
@@ -62,33 +122,62 @@
62
122
  }
63
123
  }
64
124
 
65
- // IE Fix
66
- display: inline-block;
125
+ > span {
126
+ letter-spacing: $nav-tabs-link-letter-spacing;
127
+ }
128
+ }
129
+ }
67
130
 
68
- &:hover {
69
- color: theme-color('primary');
70
- background-color: $nav-tabs-link-hover-bg;
131
+ .nav-tabs-icon {
132
+ .nav-link {
133
+ gap: 0.5rem;
134
+ }
135
+ }
71
136
 
72
- &::after {
73
- background: $nav-tabs-link-hover-border;
74
- transform: scaleX(1);
75
- }
76
- }
137
+ .nav-tabs.nav-tabs-stacked {
138
+ flex-direction: column;
139
+ .nav-link {
140
+ padding: $nav-tabs-stacked-padding;
77
141
 
78
- &:not(.active):hover {
79
- background-color: $nav-tabs-link-hover-bg;
142
+ &.segment-button {
143
+ padding: $nav-tabs-stacked-padding;
80
144
  }
145
+ }
81
146
 
82
- &.active {
83
- color: $nav-tabs-link-active-color;
84
- &::after {
85
- background: $nav-tabs-link-active-border;
86
- transform: scaleX(1);
147
+ @media screen and (max-width: 320px) {
148
+ &.nav-tabs-icon {
149
+ .segment-button-text {
150
+ display: none;
151
+ position: absolute;
152
+ left: 100%;
153
+ top: 0;
154
+ bottom: 0;
155
+ align-items: center;
156
+ padding: 0.75rem;
157
+ }
158
+
159
+ .segment-button {
160
+ padding: 0.75rem;
161
+ &:hover .segment-button-text {
162
+ display: flex;
163
+ background-color: darken(theme-color('primary-darker'), 5%);
164
+ }
165
+
166
+ &.active:hover .segment-button-text {
167
+ background-color: theme-color('primary-darker');
168
+ &::after {
169
+ content: '';
170
+ position: absolute;
171
+ background-color: rgba(238, 238, 238, 0.25);
172
+ z-index: 0;
173
+ top: 0;
174
+ left: 0;
175
+ right: 0;
176
+ bottom: 0;
177
+ }
178
+ }
87
179
  }
88
- }
89
180
 
90
- > span {
91
- letter-spacing: $nav-tabs-link-letter-spacing;
92
181
  }
93
182
  }
94
183
  }
@@ -111,11 +200,6 @@
111
200
  }
112
201
  }
113
202
 
114
- .navbar-brand {
115
- padding-top: 0;
116
- padding-bottom: 0;
117
- }
118
-
119
203
  .navbar-light {
120
204
  .nav-tabs {
121
205
  .nav-link:not(.active) {
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  > .toast-title {
21
- text-transform: uppercase;
21
+ text-transform: none;
22
22
  font-weight: 600;
23
23
  font-size: 1rem;
24
24
  margin-bottom: 0.25rem;
@@ -39,8 +39,6 @@
39
39
 
40
40
  &.toast-error {
41
41
  color: $danger !important;
42
-
43
- // > .toast-title {}
44
42
  >.toast-close-button {
45
43
  background-color: $danger;
46
44
  color: #fff;
@@ -54,6 +52,7 @@
54
52
  .toast-message {
55
53
  max-width: 12.5rem;
56
54
  min-width: 12.5rem;
55
+ color: var(--leap-body-text-color) !important;
57
56
  }
58
57
 
59
58
  button.toast-close-button {
@@ -54,6 +54,7 @@ html {
54
54
  @media screen and (max-height: 849px) {
55
55
  height: auto;
56
56
  margin-bottom: 4vh;
57
+ margin-top: 2rem;
57
58
 
58
59
  > svg {
59
60
  height: 100%;
@@ -79,6 +80,7 @@ html {
79
80
  &_links {
80
81
  display: flex;
81
82
  margin-top: 2rem;
83
+ margin-bottom: 1rem;
82
84
  color: $text-muted;
83
85
  text-align: center;
84
86
  justify-content: space-between;
@@ -402,10 +404,18 @@ html {
402
404
  }
403
405
 
404
406
  &_signin_methods {
407
+ display: grid;
408
+ grid-template-columns: 1fr;
409
+ grid-template-rows: 1fr;
410
+ gap: 0.5rem;
405
411
  > .auth_btn {
412
+ margin: 0;
406
413
  display: flex;
414
+ justify-content: stretch;
407
415
  align-items: center;
408
- justify-content: center;
416
+ text-align: left;
417
+ line-height: 1.4;
418
+ padding: 0 1rem;
409
419
  text-transform: none;
410
420
 
411
421
  > span {
@@ -415,21 +425,5 @@ html {
415
425
  justify-content: center;
416
426
  }
417
427
  }
418
- @media screen and (min-width: 480px) {
419
- display: grid;
420
- grid-template-columns: 1fr;
421
- grid-template-rows: 1fr;
422
- gap: 0.5rem;
423
-
424
- >.auth_btn {
425
- margin: 0;
426
- display: flex;
427
- justify-content: stretch;
428
- align-items: center;
429
- text-align: left;
430
- line-height: 1.4;
431
- padding: 0 1rem;
432
- }
433
- }
434
428
  }
435
429
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapdev/gui",
3
- "version": "0.2.257",
3
+ "version": "0.2.260",
4
4
  "description": "LEAP GUI",
5
5
  "author": "LEAP Dev",
6
6
  "license": "ISC",