@trilogy-ds/styles 0.0.1-beta-108 → 0.0.1-beta-110

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 (12) hide show
  1. package/dist/default/trilogy-mangled.css +1 -1
  2. package/dist/default/trilogy-partials.css +1 -1
  3. package/dist/default/trilogy.css +1 -1
  4. package/framework/src/components/_divider.scss +11 -14
  5. package/framework/src/components/_pagination.scss +48 -124
  6. package/framework/src/components/_price.scss +3 -3
  7. package/framework/src/components/_stepper.scss +1 -1
  8. package/framework/src/components/_timeline.scss +22 -111
  9. package/framework/src/grid/_columns.scss +284 -751
  10. package/framework/src/grid/_rows.scss +44 -42
  11. package/framework/src/utilities/_mixins.scss +1 -1
  12. package/package.json +1 -1
package/framework/src/components/_divider.scss CHANGED
@@ -1,17 +1,14 @@
1
1
  .divider {
2
- position: relative;
3
- text-align: center;
4
- background-color: getColor('neutral-fade');
5
- height: 1px;
6
- width: 100%;
2
+ background-color: getColor('neutral');
3
+ height: 1px;
4
+ width: 100%;
5
+ display: flex;
6
+ justify-content: center;
7
+ align-items: center;
7
8
 
8
- p.divider-content {
9
- position: absolute;
10
- left: 50%;
11
- top: 50%;
12
- transform: translate(-50%, -50%);
13
- white-space: nowrap;
14
- padding: 0 $spacing-4;
15
- background-color: invertColor('neutral');
16
- }
9
+ p.divider-content {
10
+ white-space: nowrap;
11
+ padding: 0 $spacing-4;
12
+ background-color: invertColor('neutral');
13
+ }
17
14
  }
package/framework/src/components/_pagination.scss CHANGED
@@ -1,118 +1,55 @@
1
1
  .pagination {
2
2
  font-size: $size-normal;
3
3
  margin: -2.5px;
4
+ align-items: center;
5
+ display: flex;
6
+ justify-content: space-between;
7
+ text-align: center;
4
8
 
5
9
  .pagination-previous,
6
- .pagination-next {
7
- padding-left: 1em;
8
- padding-right: 1em;
9
- height: 35px;
10
- width: 35px;
11
- border-radius: 9999px;
10
+ .pagination-next,
11
+ .pagination-link,
12
+ .pagination-ellipsis {
13
+ @include control;
14
+ @include unselectable;
15
+ font-size: 1em;
16
+ padding-left: 0.5em;
17
+ padding-right: 0.5em;
18
+ justify-content: center;
19
+ margin: 2.5px;
20
+ text-align: center;
12
21
  }
13
22
 
14
- .pagination-link {
23
+ .pagination-previous,
24
+ .pagination-next,
25
+ .pagination-link,
26
+ .pagination-ellipsis {
27
+ @include hover();
28
+ color: getColor('font');
29
+ min-width: 2.25em;
15
30
  height: 35px;
31
+ width: 35px;
16
32
  border-radius: 9999px;
33
+ padding-left: 0.75em;
34
+ padding-right: 0.75em;
35
+ white-space: nowrap;
17
36
  }
18
37
 
19
38
  .pagination-list {
20
39
  flex: 0 0 auto;
21
- }
22
-
23
- }
24
-
25
- .pagination,
26
- .pagination-list {
27
- align-items: center;
28
- display: flex;
29
- justify-content: center;
30
- text-align: center;
31
- }
32
-
33
- .pagination-previous,
34
- .pagination-next,
35
- .pagination-link,
36
- .pagination-ellipsis {
37
- @include control;
38
- @include unselectable;
39
-
40
- font-size: 1em;
41
- padding-left: 0.5em;
42
- padding-right: 0.5em;
43
- justify-content: center;
44
- margin: 2.5px;
45
- text-align: center;
46
- }
47
-
48
- .pagination-previous,
49
- .pagination-next,
50
- .pagination-link {
51
- color: getColor('neutral');
52
- min-width: 2.25em;
53
-
54
- @include hover();
55
-
56
- }
57
-
58
- .pagination-previous,
59
- .pagination-next {
60
- padding-left: 0.75em;
61
- padding-right: 0.75em;
62
- white-space: nowrap;
63
- }
64
-
65
- .pagination-link {
66
- &[aria-current] {
67
- background-color: getColor('font');
68
- color: getColor('background');
69
- #{$hoverSelector}, &:focus, &:focus-within {
70
- background: linear-gradient(
71
- to top,
72
- rgba(0, 0, 0, 0.25),
73
- rgba(0, 0, 0, 0.25)
74
- ) getColor('font') !important;
75
- }
76
- }
77
- }
78
-
79
- .pagination-ellipsis {
80
- color: getColor('background');
81
- pointer-events: none;
82
- }
83
-
84
- .pagination-list {
85
- flex-wrap: wrap;
86
- }
87
-
88
- @include mobile {
89
- .pagination {
90
40
  flex-wrap: wrap;
91
- }
92
-
93
- .pagination-previous,
94
- .pagination-next {
95
41
  flex-grow: 1;
96
- flex-shrink: 1;
42
+ align-items: center;
43
+ display: flex;
44
+ justify-content: center;
45
+ text-align: center;
97
46
  }
98
47
 
99
- .pagination-list {
100
- li {
101
- flex-grow: 1;
102
- flex-shrink: 1;
103
- }
104
- }
105
- }
106
-
107
- @include tablet {
108
- .pagination-list {
109
- flex-grow: 1;
110
- flex-shrink: 1;
111
- justify-content: flex-start;
48
+ .pagination-previous {
112
49
  order: 1;
113
50
  }
114
51
 
115
- .pagination-previous {
52
+ .pagination-list {
116
53
  order: 2;
117
54
  }
118
55
 
@@ -120,37 +57,24 @@
120
57
  order: 3;
121
58
  }
122
59
 
123
- .pagination {
124
- justify-content: space-between;
125
-
126
- &.is-centered {
127
- .pagination-previous {
128
- order: 1;
129
- }
130
-
131
- .pagination-list {
132
- justify-content: center;
133
- order: 2;
134
- }
135
-
136
- .pagination-next {
137
- order: 3;
60
+ .pagination-link {
61
+ &[aria-current] {
62
+ background-color: getColor('font');
63
+ color: getColor('background');
64
+ #{$hoverSelector}, &:focus, &:focus-within {
65
+ background: linear-gradient(
66
+ to top,
67
+ rgba(0, 0, 0, 0.25),
68
+ rgba(0, 0, 0, 0.25)
69
+ ) getColor('font') !important;
138
70
  }
139
71
  }
72
+ }
140
73
 
141
- &.is-right {
142
- .pagination-previous {
143
- order: 1;
144
- }
145
-
146
- .pagination-next {
147
- order: 2;
148
- }
149
-
150
- .pagination-list {
151
- justify-content: flex-end;
152
- order: 3;
153
- }
154
- }
74
+ .pagination-ellipsis {
75
+ pointer-events: none;
155
76
  }
77
+
156
78
  }
79
+
80
+
package/framework/src/components/_price.scss CHANGED
@@ -183,7 +183,7 @@ $price-levels: (
183
183
 
184
184
  &.is-striked {
185
185
  position: relative;
186
- color: getColor('main-fade');
186
+ color: getColor('neutral');
187
187
 
188
188
  &::before {
189
189
  position: absolute;
@@ -192,13 +192,13 @@ $price-levels: (
192
192
  top: 50%;
193
193
  right: 0;
194
194
  border-top: 2px solid;
195
- border-color: getColor('font');
195
+ border-color: getColor('neutral');
196
196
  border-radius: 5px;
197
197
  transform: rotate(-20deg);
198
198
  }
199
199
 
200
200
  &.is-inverted {
201
- color: getColor('main-fade');
201
+ color: getColor('background');
202
202
 
203
203
  &::before {
204
204
  border-color: getColor('background');
package/framework/src/components/_stepper.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  height: 4px;
24
24
  border-radius: var(--radius-small);
25
25
  background-size: 200% !important;
26
- background-color: getColor('neutral-fade');
26
+ background-color: getColor('neutral');
27
27
  }
28
28
 
29
29
  &.is-error {
package/framework/src/components/_timeline.scss CHANGED
@@ -31,20 +31,9 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
31
31
  margin-left: 0;
32
32
  }
33
33
 
34
- &::before {
35
- content: '';
36
- display: block;
37
- width: $timeline-line-width;
38
- position: absolute;
39
- top: 49.80px;
40
- left: 3rem;
41
- bottom: 8px;
42
- height: auto;
43
- border-radius: 2px;
44
- }
45
-
46
- .timeline-item,
47
- .undone {
34
+ .timeline-item {
35
+ --font-color: #{getColor('neutral')};
36
+ --bg-color: #{getColor('background')};
48
37
  display: flex;
49
38
  display: -ms-flexbox;
50
39
  display: -webkit-flex;
@@ -53,85 +42,39 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
53
42
  padding-bottom: $spacing-2;
54
43
 
55
44
  &::before {
56
- background-color: getColor('neutral-fade');
45
+ content: '';
46
+ display: block;
47
+ width: $timeline-line-width;
48
+ background-color: var(--font-color);
49
+ position: absolute;
50
+ top: 49.80px;
51
+ left: 3rem;
52
+ bottom: 8px;
53
+ height: auto;
54
+ border-radius: 2px;
57
55
  }
58
56
 
59
57
  .timeline-marker.is-icon {
60
- background-color: getColor('main');
61
- color: getColor('font');
58
+ background-color: var(--font-color);
59
+ color: var(--bg-color);
62
60
  }
63
61
 
64
- &.active {
65
- .timeline-marker.is-icon {
66
- background-color: getColor('main');
67
-
68
- .icon {
69
- color: getColor('background');
70
- }
71
- }
62
+ &.active, &.done {
63
+ --font-color: #{getColor('main')};
64
+ --bg-color: #{getColor('background')};
65
+ }
72
66
 
67
+ &.active {
73
68
  .timeline-content {
74
69
  p.main-content {
75
70
  font-weight: 800;
76
71
  }
77
72
  }
78
-
79
- &::before {
80
- content: '';
81
- background-color: getColor('main');
82
- display: block;
83
- width: $timeline-line-width;
84
- position: absolute;
85
- top: 49.80px;
86
- left: 3rem;
87
- bottom: 8px;
88
- height: auto;
89
- border-radius: 2px;
90
- }
91
-
92
- }
93
-
94
- &.done {
95
- .timeline-marker.is-icon {
96
- background-color: getColor('font');
97
-
98
- .icon {
99
- color: getColor('background')
100
- }
101
- }
102
-
103
- &::before {
104
- content: '';
105
- background-color: getColor('font');
106
- display: block;
107
- width: $timeline-line-width;
108
- position: absolute;
109
- top: 49.80px;
110
- left: 3rem;
111
- bottom: 8px;
112
- height: auto;
113
- border-radius: 2px;
114
- }
115
73
  }
116
74
 
117
75
  &.cancel {
118
- .timeline-marker.is-icon {
119
- background-color: getColor('neutral');
120
- color: getColor('neutral-fade');
121
- }
122
-
123
- &::before {
124
- content: '';
125
- background-color: getColor('neutral-fade');
126
- display: block;
127
- width: $timeline-line-width;
128
- position: absolute;
129
- top: 49.80px;
130
- left: 3rem;
131
- bottom: 8px;
132
- height: auto;
133
- border-radius: 2px;
134
- }
76
+ --font-color: #{getColor('neutral')};
77
+ --bg-color: #{getColor('neutral-fade')};
135
78
  }
136
79
 
137
80
  .timeline-marker {
@@ -172,13 +115,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
172
115
  $timeline-marker-border-size * 0.5);
173
116
  line-height: size(0.75rem);
174
117
  padding: math.div($timeline-icon-size, 3);
175
- background: $timeline-marker-color;
176
118
  border-radius: 9999px;
177
-
178
- > i {
179
- color: getColor('background');
180
- font-size: $timeline-icon-size !important;
181
- }
182
119
  }
183
120
 
184
121
  &.is-outlined {
@@ -322,32 +259,10 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
322
259
  }
323
260
 
324
261
  &::before {
325
- content: '';
326
- background-color: $timeline-line-color;
327
- display: block;
328
262
  width: calc(100% - 58px);
329
- position: absolute;
330
263
  top: 22.89px;
331
264
  left: 59px;
332
- bottom: 8px;
333
265
  height: 2px;
334
- border-radius: 2px;
335
- }
336
-
337
- &.active::before {
338
- background-color: getColor('main');
339
- }
340
-
341
- &.undone::before {
342
- background-color: getColor('neutral-fade');
343
- }
344
-
345
- &.done::before {
346
- background-color: getColor('font');
347
- }
348
-
349
- &.cancel::before {
350
- background-color: getColor('neutral-fade');
351
266
  }
352
267
 
353
268
  .timeline-marker {
@@ -360,10 +275,6 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
360
275
  padding: 0;
361
276
  margin-top: 8px;
362
277
 
363
- .main-content {
364
- margin-left: 0;
365
- }
366
-
367
278
  }
368
279
  }
369
280
  }