@transferwise/neptune-css 0.0.0-experimental-2d03128 → 0.0.0-experimental-e6f7234

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 (68) hide show
  1. package/dist/css/accordion.css +2 -0
  2. package/dist/css/alerts.css +5 -0
  3. package/dist/css/border-radius.css +0 -8
  4. package/dist/css/button-groups.css +1 -0
  5. package/dist/css/buttons.css +2 -0
  6. package/dist/css/circles.css +2 -0
  7. package/dist/css/decision.css +1 -0
  8. package/dist/css/dropdowns.css +13 -0
  9. package/dist/css/droppable.css +1 -0
  10. package/dist/css/flex.css +253 -417
  11. package/dist/css/footer.css +1 -0
  12. package/dist/css/grid.css +4 -0
  13. package/dist/css/input-groups.css +13 -0
  14. package/dist/css/list-group.css +1 -0
  15. package/dist/css/navbar.css +172 -88
  16. package/dist/css/neptune-addons.css +893 -421
  17. package/dist/css/neptune-core.css +201 -163
  18. package/dist/css/neptune-social-media.css +1 -0
  19. package/dist/css/neptune.css +15832 -14449
  20. package/dist/css/popovers.css +8 -0
  21. package/dist/css/progress-bars.css +6 -6
  22. package/dist/css/tooltip.css +1 -0
  23. package/dist/css/utilities.css +72 -1202
  24. package/package.json +1 -1
  25. package/src/less/addons/_display-utilities.less +159 -0
  26. package/src/less/addons/_spacing-utilities.less +26 -3
  27. package/src/less/addons/_utilities.less +147 -0
  28. package/src/less/border-radius.less +3 -1
  29. package/src/less/core/_scaffolding.less +27 -7
  30. package/src/less/core/_typography-utilities.less +237 -17
  31. package/src/less/flex.less +18 -9
  32. package/src/less/{addons → mixins}/_center-block.less +4 -2
  33. package/src/less/mixins/_flex.less +105 -0
  34. package/src/less/navbar.less +1338 -11
  35. package/src/less/neptune-addons.less +1 -4
  36. package/src/less/neptune.bundle.less +1 -3
  37. package/src/less/progress-bars.less +2 -2
  38. package/src/less/utilities.less +141 -29
  39. package/dist/css/navbar-base.css +0 -1209
  40. package/src/less/navbar-base.less +0 -1338
  41. package/src/less/utilities/align-items.less +0 -107
  42. package/src/less/utilities/align-self.less +0 -107
  43. package/src/less/utilities/border-radius.less +0 -11
  44. package/src/less/utilities/color.less +0 -70
  45. package/src/less/utilities/cursor.less +0 -3
  46. package/src/less/utilities/display.less +0 -178
  47. package/src/less/utilities/flex-direction.less +0 -47
  48. package/src/less/utilities/flex-grow.less +0 -27
  49. package/src/less/utilities/flex-wrap.less +0 -47
  50. package/src/less/utilities/float.less +0 -77
  51. package/src/less/utilities/font-weight.less +0 -11
  52. package/src/less/utilities/gap.less +0 -3
  53. package/src/less/utilities/justify-content.less +0 -107
  54. package/src/less/utilities/margin.less +0 -192
  55. package/src/less/utilities/max-width.less +0 -3
  56. package/src/less/utilities/order.less +0 -87
  57. package/src/less/utilities/outline-style.less +0 -8
  58. package/src/less/utilities/overflow-wrap.less +0 -3
  59. package/src/less/utilities/padding.less +0 -179
  60. package/src/less/utilities/position.less +0 -3
  61. package/src/less/utilities/rotate.less +0 -12
  62. package/src/less/utilities/screen-reader.less +0 -24
  63. package/src/less/utilities/text-align.less +0 -87
  64. package/src/less/utilities/text-decoration-line.less +0 -8
  65. package/src/less/utilities/text-overflow.less +0 -7
  66. package/src/less/utilities/text-transform.less +0 -11
  67. package/src/less/utilities/visibility.less +0 -3
  68. package/src/less/utilities/white-space.less +0 -27
@@ -1,107 +0,0 @@
1
- .align-items-start {
2
- align-items: flex-start;
3
- }
4
-
5
- .align-items-end {
6
- align-items: flex-end;
7
- }
8
-
9
- .align-items-center {
10
- align-items: center;
11
- }
12
-
13
- .align-items-baseline {
14
- align-items: baseline;
15
- }
16
-
17
- .align-items-stretch {
18
- align-items: stretch;
19
- }
20
-
21
- @media (--screen-sm) {
22
- .align-items-start--sm {
23
- align-items: flex-start;
24
- }
25
-
26
- .align-items-end--sm {
27
- align-items: flex-end;
28
- }
29
-
30
- .align-items-center--sm {
31
- align-items: center;
32
- }
33
-
34
- .align-items-baseline--sm {
35
- align-items: baseline;
36
- }
37
-
38
- .align-items-stretch--sm {
39
- align-items: stretch;
40
- }
41
- }
42
-
43
- @media (--screen-md) {
44
- .align-items-start--md {
45
- align-items: flex-start;
46
- }
47
-
48
- .align-items-end--md {
49
- align-items: flex-end;
50
- }
51
-
52
- .align-items-center--md {
53
- align-items: center;
54
- }
55
-
56
- .align-items-baseline--md {
57
- align-items: baseline;
58
- }
59
-
60
- .align-items-stretch--md {
61
- align-items: stretch;
62
- }
63
- }
64
-
65
- @media (--screen-lg) {
66
- .align-items-start--lg {
67
- align-items: flex-start;
68
- }
69
-
70
- .align-items-end--lg {
71
- align-items: flex-end;
72
- }
73
-
74
- .align-items-center--lg {
75
- align-items: center;
76
- }
77
-
78
- .align-items-baseline--lg {
79
- align-items: baseline;
80
- }
81
-
82
- .align-items-stretch--lg {
83
- align-items: stretch;
84
- }
85
- }
86
-
87
- @media (--screen-xl) {
88
- .align-items-start--xl {
89
- align-items: flex-start;
90
- }
91
-
92
- .align-items-end--xl {
93
- align-items: flex-end;
94
- }
95
-
96
- .align-items-center--xl {
97
- align-items: center;
98
- }
99
-
100
- .align-items-baseline--xl {
101
- align-items: baseline;
102
- }
103
-
104
- .align-items-stretch--xl {
105
- align-items: stretch;
106
- }
107
- }
@@ -1,107 +0,0 @@
1
- .align-self-start {
2
- align-self: flex-start;
3
- }
4
-
5
- .align-self-end {
6
- align-self: flex-end;
7
- }
8
-
9
- .align-self-center {
10
- align-self: center;
11
- }
12
-
13
- .align-self-stretch {
14
- align-self: stretch;
15
- }
16
-
17
- .align-self-baseline {
18
- align-self: baseline;
19
- }
20
-
21
- @media (--screen-sm) {
22
- .align-self-start--sm {
23
- align-self: flex-start;
24
- }
25
-
26
- .align-self-end--sm {
27
- align-self: flex-end;
28
- }
29
-
30
- .align-self-center--sm {
31
- align-self: center;
32
- }
33
-
34
- .align-self-stretch--sm {
35
- align-self: stretch;
36
- }
37
-
38
- .align-self-baseline--sm {
39
- align-self: baseline;
40
- }
41
- }
42
-
43
- @media (--screen-md) {
44
- .align-self-start--md {
45
- align-self: flex-start;
46
- }
47
-
48
- .align-self-end--md {
49
- align-self: flex-end;
50
- }
51
-
52
- .align-self-center--md {
53
- align-self: center;
54
- }
55
-
56
- .align-self-stretch--md {
57
- align-self: stretch;
58
- }
59
-
60
- .align-self-baseline--md {
61
- align-self: baseline;
62
- }
63
- }
64
-
65
- @media (--screen-lg) {
66
- .align-self-start--lg {
67
- align-self: flex-start;
68
- }
69
-
70
- .align-self-end--lg {
71
- align-self: flex-end;
72
- }
73
-
74
- .align-self-center--lg {
75
- align-self: center;
76
- }
77
-
78
- .align-self-stretch--lg {
79
- align-self: stretch;
80
- }
81
-
82
- .align-self-baseline--lg {
83
- align-self: baseline;
84
- }
85
- }
86
-
87
- @media (--screen-xl) {
88
- .align-self-start--xl {
89
- align-self: flex-start;
90
- }
91
-
92
- .align-self-end--xl {
93
- align-self: flex-end;
94
- }
95
-
96
- .align-self-center--xl {
97
- align-self: center;
98
- }
99
-
100
- .align-self-stretch--xl {
101
- align-self: stretch;
102
- }
103
-
104
- .align-self-baseline--xl {
105
- align-self: baseline;
106
- }
107
- }
@@ -1,11 +0,0 @@
1
- .rounded-sm {
2
- border-radius: 2px;
3
- }
4
-
5
- .rounded {
6
- border-radius: var(--radius-small);
7
- }
8
-
9
- .rounded-full {
10
- border-radius: var(--radius-full);
11
- }
@@ -1,70 +0,0 @@
1
- @import (reference) "../../variables/neptune-tokens.less";
2
- @import (reference) "../mixins/_text-emphasis.less";
3
-
4
- .text-primary {
5
- color: var(--color-content-primary) !important;
6
-
7
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
8
- .bg-primary & {
9
- color: @color-navy-content-primary !important;
10
- }
11
- }
12
-
13
- .text-secondary {
14
- color: var(--color-content-secondary) !important;
15
- }
16
-
17
- .text-muted {
18
- color: var(--color-content-tertiary) !important;
19
- }
20
-
21
- .text-accent,
22
- .text-info {
23
- color: var(--color-interactive-primary) !important;
24
-
25
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
26
- .bg-primary & {
27
- color: @color-navy-content-accent !important;
28
- }
29
- }
30
-
31
- .text-negative,
32
- /* TODO: Deprecate in favor of `.text-negative` */
33
- .text-danger {
34
- color: var(--color-sentiment-negative) !important;
35
-
36
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
37
- .bg-primary & {
38
- color: @color-navy-content-negative !important;
39
- }
40
- }
41
-
42
- .text-positive,
43
- /* TODO: Deprecate in favor of `.text-positive` */
44
- .text-success {
45
- color: var(--color-sentiment-positive) !important;
46
-
47
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
48
- .bg-primary & {
49
- color: @color-navy-content-positive !important;
50
- }
51
- }
52
-
53
- /**
54
- * @deprecated This makes text inaccessible. Use background color in combination with `.text-primary` instead.
55
- */
56
- .text-warning {
57
- color: var(--color-sentiment-warning) !important;
58
-
59
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
60
- .bg-primary & {
61
- color: @color-navy-content-warning !important;
62
- }
63
- }
64
-
65
- /**
66
- * @deprecated Navy colors are obsolete.
67
- */
68
- .text-inverse {
69
- .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
70
- }
@@ -1,3 +0,0 @@
1
- .clickable {
2
- cursor: pointer;
3
- }
@@ -1,178 +0,0 @@
1
- .d-block,
2
- .show {
3
- display: block !important;
4
- }
5
-
6
- .d-inline-block {
7
- display: inline-block !important;
8
- }
9
-
10
- .d-inline {
11
- display: inline;
12
- }
13
-
14
- .d-flex {
15
- display: flex;
16
- }
17
-
18
- .d-inline-flex {
19
- display: inline-flex;
20
- }
21
-
22
- .hidden,
23
- .hide,
24
- .visible-xs,
25
- .visible-xs-block,
26
- .visible-xs-inline-block,
27
- .visible-xs-inline,
28
- .visible-sm,
29
- .visible-sm-block,
30
- .visible-sm-inline-block,
31
- .visible-sm-inline,
32
- .visible-md,
33
- .visible-md-block,
34
- .visible-md-inline-block,
35
- .visible-md-inline,
36
- .visible-lg,
37
- .visible-lg-block,
38
- .visible-lg-inline-block,
39
- .visible-lg-inline,
40
- .visible-xl,
41
- .visible-xl-block,
42
- .visible-xl-inline-block,
43
- .visible-xl-inline {
44
- display: none !important;
45
- }
46
-
47
- @media (--screen-xs-max) {
48
- .hidden-xs {
49
- display: none !important;
50
- }
51
-
52
- .visible-xs,
53
- .visible-xs-block {
54
- display: block !important;
55
- }
56
-
57
- .visible-xs-inline-block {
58
- display: inline-block !important;
59
- }
60
-
61
- .visible-xs-inline {
62
- display: inline !important;
63
- }
64
- }
65
-
66
- @media (--screen-sm) {
67
- .d-flex--sm {
68
- display: flex;
69
- }
70
-
71
- .d-inline-flex--sm {
72
- display: inline-flex;
73
- }
74
-
75
- @media (--screen-sm-max) {
76
- .hidden-sm {
77
- display: none !important;
78
- }
79
-
80
- .visible-sm,
81
- .visible-sm-block {
82
- display: block !important;
83
- }
84
-
85
- .visible-sm-inline-block {
86
- display: inline-block !important;
87
- }
88
-
89
- .visible-sm-inline {
90
- display: inline !important;
91
- }
92
- }
93
- }
94
-
95
- @media (--screen-md) {
96
- .d-flex--md {
97
- display: flex;
98
- }
99
-
100
- .d-inline-flex--md {
101
- display: inline-flex;
102
- }
103
-
104
- @media (--screen-md-max) {
105
- .hidden-md {
106
- display: none !important;
107
- }
108
-
109
- .visible-md,
110
- .visible-md-block {
111
- display: block !important;
112
- }
113
-
114
- .visible-md-inline-block {
115
- display: inline-block !important;
116
- }
117
-
118
- .visible-md-inline {
119
- display: inline !important;
120
- }
121
- }
122
- }
123
-
124
- @media (--screen-lg) {
125
- .d-flex--lg {
126
- display: flex;
127
- }
128
-
129
- .d-inline-flex--lg {
130
- display: inline-flex;
131
- }
132
-
133
- @media (--screen-lg-max) {
134
- .hidden-lg {
135
- display: none !important;
136
- }
137
-
138
- .visible-lg,
139
- .visible-lg-block {
140
- display: block !important;
141
- }
142
-
143
- .visible-lg-inline-block {
144
- display: inline-block !important;
145
- }
146
-
147
- .visible-lg-inline {
148
- display: inline !important;
149
- }
150
- }
151
- }
152
-
153
- @media (--screen-xl) {
154
- .d-flex--xl {
155
- display: flex;
156
- }
157
-
158
- .d-inline-flex--xl {
159
- display: inline-flex;
160
- }
161
-
162
- .hidden-xl {
163
- display: none !important;
164
- }
165
-
166
- .visible-xl,
167
- .visible-xl-block {
168
- display: block !important;
169
- }
170
-
171
- .visible-xl-inline-block {
172
- display: inline-block !important;
173
- }
174
-
175
- .visible-xl-inline {
176
- display: inline !important;
177
- }
178
- }
@@ -1,47 +0,0 @@
1
- .flex-row {
2
- flex-direction: row;
3
- }
4
-
5
- .flex-column {
6
- flex-direction: column;
7
- }
8
-
9
- @media (--screen-sm) {
10
- .flex-row--sm {
11
- flex-direction: row;
12
- }
13
-
14
- .flex-column--sm {
15
- flex-direction: column;
16
- }
17
- }
18
-
19
- @media (--screen-md) {
20
- .flex-row--md {
21
- flex-direction: row;
22
- }
23
-
24
- .flex-column--md {
25
- flex-direction: column;
26
- }
27
- }
28
-
29
- @media (--screen-lg) {
30
- .flex-row--lg {
31
- flex-direction: row;
32
- }
33
-
34
- .flex-column--lg {
35
- flex-direction: column;
36
- }
37
- }
38
-
39
- @media (--screen-xl) {
40
- .flex-row--xl {
41
- flex-direction: row;
42
- }
43
-
44
- .flex-column--xl {
45
- flex-direction: column;
46
- }
47
- }
@@ -1,27 +0,0 @@
1
- .flex-grow-1 {
2
- flex-grow: 1;
3
- }
4
-
5
- @media (--screen-sm) {
6
- .flex-grow-1--sm {
7
- flex-grow: 1;
8
- }
9
- }
10
-
11
- @media (--screen-md) {
12
- .flex-grow-1--md {
13
- flex-grow: 1;
14
- }
15
- }
16
-
17
- @media (--screen-lg) {
18
- .flex-grow-1--lg {
19
- flex-grow: 1;
20
- }
21
- }
22
-
23
- @media (--screen-xl) {
24
- .flex-grow-1--xl {
25
- flex-grow: 1;
26
- }
27
- }
@@ -1,47 +0,0 @@
1
- .flex-wrap {
2
- flex-wrap: wrap;
3
- }
4
-
5
- .flex-nowrap {
6
- flex-wrap: nowrap;
7
- }
8
-
9
- @media (--screen-sm) {
10
- .flex-wrap--sm {
11
- flex-wrap: wrap;
12
- }
13
-
14
- .flex-nowrap--sm {
15
- flex-wrap: nowrap;
16
- }
17
- }
18
-
19
- @media (--screen-md) {
20
- .flex-wrap--md {
21
- flex-wrap: wrap;
22
- }
23
-
24
- .flex-nowrap--md {
25
- flex-wrap: nowrap;
26
- }
27
- }
28
-
29
- @media (--screen-lg) {
30
- .flex-wrap--lg {
31
- flex-wrap: wrap;
32
- }
33
-
34
- .flex-nowrap--lg {
35
- flex-wrap: nowrap;
36
- }
37
- }
38
-
39
- @media (--screen-xl) {
40
- .flex-wrap--xl {
41
- flex-wrap: wrap;
42
- }
43
-
44
- .flex-nowrap--xl {
45
- flex-wrap: nowrap;
46
- }
47
- }
@@ -1,77 +0,0 @@
1
- .pull-left,
2
- .pull-xs-left {
3
- float: inline-start !important;
4
- }
5
-
6
- .pull-right,
7
- .pull-xs-right {
8
- float: inline-end !important;
9
- }
10
-
11
- .pull-right-single-direction {
12
- float: right !important;
13
- }
14
-
15
- .pull-left-single-direction {
16
- float: left !important;
17
- }
18
-
19
- .pull-xs-none {
20
- float: none !important;
21
- }
22
-
23
- @media (--screen-sm) {
24
- .pull-sm-left {
25
- float: inline-start !important;
26
- }
27
-
28
- .pull-sm-right {
29
- float: inline-end !important;
30
- }
31
-
32
- .pull-sm-none {
33
- float: none !important;
34
- }
35
- }
36
-
37
- @media (--screen-md) {
38
- .pull-md-left {
39
- float: inline-start !important;
40
- }
41
-
42
- .pull-md-right {
43
- float: inline-end !important;
44
- }
45
-
46
- .pull-md-none {
47
- float: none !important;
48
- }
49
- }
50
-
51
- @media (--screen-lg) {
52
- .pull-lg-left {
53
- float: inline-start !important;
54
- }
55
-
56
- .pull-lg-right {
57
- float: inline-end !important;
58
- }
59
-
60
- .pull-lg-none {
61
- float: none !important;
62
- }
63
- }
64
-
65
- @media (--screen-xl) {
66
- .pull-xl-left {
67
- float: inline-start !important;
68
- }
69
-
70
- .pull-xl-right {
71
- float: inline-end !important;
72
- }
73
-
74
- .pull-xl-none {
75
- float: none !important;
76
- }
77
- }
@@ -1,11 +0,0 @@
1
- .font-weight-normal {
2
- font-weight: var(--font-weight-regular) !important;
3
- }
4
-
5
- .font-weight-semi-bold {
6
- font-weight: var(--font-weight-semi-bold) !important;
7
- }
8
-
9
- .font-weight-bold {
10
- font-weight: var(--font-weight-bold) !important;
11
- }
@@ -1,3 +0,0 @@
1
- .gap-y-1 {
2
- row-gap: var(--size-8);
3
- }