@leapdev/gui 0.2.258 → 0.2.261

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 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapdev/gui",
3
- "version": "0.2.258",
3
+ "version": "0.2.261",
4
4
  "description": "LEAP GUI",
5
5
  "author": "LEAP Dev",
6
6
  "license": "ISC",