@stellar-expert/ui-framework 1.16.7 → 1.16.8

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,174 +1,174 @@
1
- $button-spacing: 0.5rem;
2
-
3
- .button,
4
- button {
5
- border: none;
6
- color: var(--color-bg);
7
- background: none;
8
- cursor: pointer;
9
- display: inline-block;
10
- font-size: $font-size-base;
11
- font-weight: 400;
12
- font-family: $font-face-primary;
13
- height: 2.4em;
14
- min-width: 6em;
15
- line-height: 2.4em;
16
- padding: 0 1.4em;
17
- text-align: center;
18
- text-decoration: none;
19
- white-space: nowrap;
20
- margin-right: $button-spacing;
21
- margin-bottom: 0.5em;
22
- position: relative;
23
- z-index: 0;
24
- user-select: none;
25
-
26
- &.button-block {
27
- display: block;
28
- width: 100%;
29
- }
30
-
31
- &:last-child {
32
- margin-right: 0;
33
- }
34
-
35
- &.small {
36
- font-size: 1.25rem;
37
- padding: 0 1em;
38
- }
39
-
40
- &:before {
41
- content: '';
42
- display: block;
43
- background: var(--color-highlight);
44
- border: none;
45
- position: absolute;
46
- z-index: -1;
47
- top: 0;
48
- left: 6px;
49
- width: calc(100% - 12px);
50
- height: 100%;
51
- transform: skew(-20deg);
52
- }
53
-
54
- &:focus {
55
- outline: 0;
56
- background: none !important;
57
- }
58
-
59
- &:hover {
60
- color: var(--color-bg);
61
-
62
- &:before {
63
- background: var(--color-primary);
64
- border-color: var(--color-primary);
65
- }
66
- }
67
-
68
- &:active {
69
- &:before {
70
- top: 1px;
71
- left: 7px;
72
- background: var(--color-primary);
73
- border-color: var(--color-primary);
74
- }
75
- }
76
-
77
- &[disabled],
78
- &.disabled {
79
- cursor: default !important;
80
- opacity: 0.7;
81
-
82
- &:hover,
83
- &:active {
84
- &:before {
85
- background: var(--color-primary);
86
- border-color: var(--color-primary);
87
- top: 0;
88
- left: 6px;
89
- }
90
- }
91
- }
92
-
93
- &.button-outline {
94
- color: var(--color-highlight);
95
-
96
- &:before {
97
- border: 1px solid var(--color-highlight);
98
- background: var(--color-bg);
99
- }
100
-
101
- &:hover {
102
- &:before {
103
- background: var(--color-bg);
104
- border-color: var(--color-primary);
105
- }
106
- }
107
-
108
- &[disabled],
109
- &.disabled {
110
- &:focus,
111
- &:hover {
112
- color: var(--color-highlight);
113
- }
114
-
115
- &:before {
116
- background: var(--color-bg);
117
- border-color: var(--color-highlight);
118
- }
119
- }
120
- }
121
-
122
- &.button-clear {
123
- color: var(--color-highlight);
124
-
125
- &:focus,
126
- &:hover {
127
- color: var(--color-primary);
128
- }
129
-
130
- &[disabled],
131
- &.disabled {
132
- &:focus,
133
- &:hover {
134
- color: var(--color-highlight);
135
- }
136
- }
137
- }
138
-
139
- &.loading:after {
140
- content: "";
141
- display: block;
142
- position: absolute;
143
- top: 0;
144
- left: 0;
145
- width: 20%;
146
- height: 100%;
147
- opacity: 0.4;
148
- background: linear-gradient(to right, transparent, var(--color-text) 50%, transparent);
149
- transform: skew(-20deg) translateX(0);
150
- animation: loading-button 3s infinite ease-in-out;
151
- }
152
- }
153
-
154
- @keyframes loading-button {
155
- 0% {
156
- left: 0;
157
- }
158
- 50% {
159
- left: 80%;
160
- }
161
- 100% {
162
- left: 0;
163
- }
164
- }
165
-
166
- @media (max-width: $responsive-mobile-browser-width) {
167
- button,
168
- .button {
169
- &.stackable {
170
- display: block;
171
- width: 100%;
172
- }
173
- }
1
+ $button-spacing: 0.5rem;
2
+
3
+ .button,
4
+ button {
5
+ border: none;
6
+ color: var(--color-bg);
7
+ background: none;
8
+ cursor: pointer;
9
+ display: inline-block;
10
+ font-size: $font-size-base;
11
+ font-weight: 400;
12
+ font-family: $font-face-primary;
13
+ height: 2.4em;
14
+ min-width: 6em;
15
+ line-height: 2.4em;
16
+ padding: 0 1.4em;
17
+ text-align: center;
18
+ text-decoration: none;
19
+ white-space: nowrap;
20
+ margin-right: $button-spacing;
21
+ margin-bottom: 0.5em;
22
+ position: relative;
23
+ z-index: 0;
24
+ user-select: none;
25
+
26
+ &.button-block {
27
+ display: block;
28
+ width: 100%;
29
+ }
30
+
31
+ &:last-child {
32
+ margin-right: 0;
33
+ }
34
+
35
+ &.small {
36
+ font-size: 1.25rem;
37
+ padding: 0 1em;
38
+ }
39
+
40
+ &:before {
41
+ content: '';
42
+ display: block;
43
+ background: var(--color-highlight);
44
+ border: none;
45
+ position: absolute;
46
+ z-index: -1;
47
+ top: 0;
48
+ left: 6px;
49
+ width: calc(100% - 12px);
50
+ height: 100%;
51
+ transform: skew(-20deg);
52
+ }
53
+
54
+ &:focus {
55
+ outline: 0;
56
+ background: none !important;
57
+ }
58
+
59
+ &:hover {
60
+ color: var(--color-bg);
61
+
62
+ &:before {
63
+ background: var(--color-primary);
64
+ border-color: var(--color-primary);
65
+ }
66
+ }
67
+
68
+ &:active {
69
+ &:before {
70
+ top: 1px;
71
+ left: 7px;
72
+ background: var(--color-primary);
73
+ border-color: var(--color-primary);
74
+ }
75
+ }
76
+
77
+ &[disabled],
78
+ &.disabled {
79
+ cursor: default !important;
80
+ opacity: 0.7;
81
+
82
+ &:hover,
83
+ &:active {
84
+ &:before {
85
+ background: var(--color-primary);
86
+ border-color: var(--color-primary);
87
+ top: 0;
88
+ left: 6px;
89
+ }
90
+ }
91
+ }
92
+
93
+ &.button-outline {
94
+ color: var(--color-highlight);
95
+
96
+ &:before {
97
+ border: 1px solid var(--color-highlight);
98
+ background: var(--color-bg);
99
+ }
100
+
101
+ &:hover {
102
+ &:before {
103
+ background: var(--color-bg);
104
+ border-color: var(--color-primary);
105
+ }
106
+ }
107
+
108
+ &[disabled],
109
+ &.disabled {
110
+ &:focus,
111
+ &:hover {
112
+ color: var(--color-highlight);
113
+ }
114
+
115
+ &:before {
116
+ background: var(--color-bg);
117
+ border-color: var(--color-highlight);
118
+ }
119
+ }
120
+ }
121
+
122
+ &.button-clear {
123
+ color: var(--color-highlight);
124
+
125
+ &:focus,
126
+ &:hover {
127
+ color: var(--color-primary);
128
+ }
129
+
130
+ &[disabled],
131
+ &.disabled {
132
+ &:focus,
133
+ &:hover {
134
+ color: var(--color-highlight);
135
+ }
136
+ }
137
+ }
138
+
139
+ &.loading:after {
140
+ content: "";
141
+ display: block;
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ width: 20%;
146
+ height: 100%;
147
+ opacity: 0.4;
148
+ background: linear-gradient(to right, transparent, var(--color-text) 50%, transparent);
149
+ transform: skew(-20deg) translateX(0);
150
+ animation: loading-button 3s infinite ease-in-out;
151
+ }
152
+ }
153
+
154
+ @keyframes loading-button {
155
+ 0% {
156
+ left: 0;
157
+ }
158
+ 50% {
159
+ left: 80%;
160
+ }
161
+ 100% {
162
+ left: 0;
163
+ }
164
+ }
165
+
166
+ @media (max-width: $responsive-mobile-browser-width) {
167
+ button,
168
+ .button {
169
+ &.stackable {
170
+ display: block;
171
+ width: 100%;
172
+ }
173
+ }
174
174
  }
@@ -1,72 +1,72 @@
1
- .hljs {
2
- background: #1f2d34;
3
- color: #BABABA;
4
- font-size: 0.875*$font-size-base;
5
- letter-spacing: -0.01em;
6
- line-height: 1.3;
7
- display: block;
8
- overflow-x: auto;
9
- padding: $space-micro $space-standard;
10
- border: 1px solid var(--color-contrast-border);
11
- border-radius: $border-radius-input;
12
- }
13
-
14
- .hljs-bullet,
15
- .hljs-quote,
16
- .hljs-link,
17
- .hljs-number,
18
- .hljs-regexp,
19
- .hljs-literal {
20
- color: #6896BA;
21
- }
22
-
23
- .hljs-code,
24
- .hljs-selector-class {
25
- color: #A6E22E;
26
- }
27
-
28
- .hljs-strong,
29
- .hljs-emphasis {
30
- color: #A8A8A2;
31
- }
32
-
33
- .hljs-emphasis {
34
- font-style: italic;
35
- }
36
-
37
- .hljs-keyword,
38
- .hljs-selector-tag,
39
- .hljs-section,
40
- .hljs-attribute,
41
- .hljs-name,
42
- .hljs-variable {
43
- color: #CB7832;
44
- }
45
-
46
- .hljs-params {
47
- color: #B9B9B9;
48
- }
49
-
50
- .hljs-string {
51
- color: #6A8759;
52
- }
53
-
54
- .hljs-subst,
55
- .hljs-type,
56
- .hljs-built_in,
57
- .hljs-builtin-name,
58
- .hljs-symbol,
59
- .hljs-selector-id,
60
- .hljs-selector-attr,
61
- .hljs-selector-pseudo,
62
- .hljs-template-tag,
63
- .hljs-template-variable,
64
- .hljs-addition {
65
- color: #E0C46C;
66
- }
67
-
68
- .hljs-comment,
69
- .hljs-deletion,
70
- .hljs-meta {
71
- color: #7F7F7F;
1
+ .hljs {
2
+ background: #1f2d34;
3
+ color: #BABABA;
4
+ font-size: 0.875*$font-size-base;
5
+ letter-spacing: -0.01em;
6
+ line-height: 1.3;
7
+ display: block;
8
+ overflow-x: auto;
9
+ padding: $space-micro $space-standard;
10
+ border: 1px solid var(--color-contrast-border);
11
+ border-radius: $border-radius-input;
12
+ }
13
+
14
+ .hljs-bullet,
15
+ .hljs-quote,
16
+ .hljs-link,
17
+ .hljs-number,
18
+ .hljs-regexp,
19
+ .hljs-literal {
20
+ color: #6896BA;
21
+ }
22
+
23
+ .hljs-code,
24
+ .hljs-selector-class {
25
+ color: #A6E22E;
26
+ }
27
+
28
+ .hljs-strong,
29
+ .hljs-emphasis {
30
+ color: #A8A8A2;
31
+ }
32
+
33
+ .hljs-emphasis {
34
+ font-style: italic;
35
+ }
36
+
37
+ .hljs-keyword,
38
+ .hljs-selector-tag,
39
+ .hljs-section,
40
+ .hljs-attribute,
41
+ .hljs-name,
42
+ .hljs-variable {
43
+ color: #CB7832;
44
+ }
45
+
46
+ .hljs-params {
47
+ color: #B9B9B9;
48
+ }
49
+
50
+ .hljs-string {
51
+ color: #6A8759;
52
+ }
53
+
54
+ .hljs-subst,
55
+ .hljs-type,
56
+ .hljs-built_in,
57
+ .hljs-builtin-name,
58
+ .hljs-symbol,
59
+ .hljs-selector-id,
60
+ .hljs-selector-attr,
61
+ .hljs-selector-pseudo,
62
+ .hljs-template-tag,
63
+ .hljs-template-variable,
64
+ .hljs-addition {
65
+ color: #E0C46C;
66
+ }
67
+
68
+ .hljs-comment,
69
+ .hljs-deletion,
70
+ .hljs-meta {
71
+ color: #7F7F7F;
72
72
  }