@cfx-dev/ui-components 5.0.21 → 5.0.22
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.
- package/dist/assets/general/global.css +1 -1
- package/dist/styles-scss/_ui.scss +186 -6
- package/dist/styles-scss/tokens.scss +12 -135
- package/package.json +3 -3
|
@@ -127,12 +127,6 @@ $cfxuiColorAlpha: (
|
|
|
127
127
|
'10': 0.1,
|
|
128
128
|
);
|
|
129
129
|
|
|
130
|
-
@mixin define-font-size($name, $size, $line-height: 1.3, $paragraph-spacing: 0) {
|
|
131
|
-
@include def('font-size-#{$name}', $size);
|
|
132
|
-
@include def('line-height-#{$name}', $line-height);
|
|
133
|
-
@include def('paragraph-spacing-#{$name}', $paragraph-spacing);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
130
|
@mixin define-color($name, $color, $bg, $fg) {
|
|
137
131
|
.cfx-color-#{$name} {
|
|
138
132
|
color: $color;
|
|
@@ -511,3 +505,189 @@ $mpMap: (
|
|
|
511
505
|
pb: padding-bottom,
|
|
512
506
|
pl: padding-left,
|
|
513
507
|
);
|
|
508
|
+
|
|
509
|
+
@mixin define-vars-from-map($prefix: '', $spacerMap, $media: 'initial') {
|
|
510
|
+
@each $name, $value in $spacerMap {
|
|
511
|
+
$fullName: '#{$name}-#{$media}';
|
|
512
|
+
$prefixedName: $name;
|
|
513
|
+
$prefixedFullName: $fullName;
|
|
514
|
+
|
|
515
|
+
@if $prefix != '' {
|
|
516
|
+
$prefixedName: '#{$prefix}-#{$name}';
|
|
517
|
+
$prefixedFullName: '#{$prefix}-#{$fullName}';
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
@include def('#{$prefixedFullName}', $value);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
@include media-min($media) {
|
|
524
|
+
@each $name, $value in $spacerMap {
|
|
525
|
+
$fullName: '#{$name}-#{$media}';
|
|
526
|
+
$prefixedName: $name;
|
|
527
|
+
$prefixedFullName: $fullName;
|
|
528
|
+
|
|
529
|
+
@if $prefix != '' {
|
|
530
|
+
$prefixedName: '#{$prefix}-#{$name}';
|
|
531
|
+
$prefixedFullName: '#{$prefix}-#{$fullName}';
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
@include def('#{$prefixedName}', use('#{$prefixedFullName}'));
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
@mixin define-font-size($name, $size, $line-height: 1.3, $paragraph-spacing: 0) {
|
|
540
|
+
@include def('font-size-#{$name}', $size);
|
|
541
|
+
@include def('line-height-#{$name}', $line-height);
|
|
542
|
+
@include def('paragraph-spacing-#{$name}', $paragraph-spacing);
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
@mixin define-font-sizes($sizesMap, $media: 'initial') {
|
|
546
|
+
@each $name, $values in $sizesMap {
|
|
547
|
+
$fullName: '#{$name}-#{$media}';
|
|
548
|
+
|
|
549
|
+
@include def('font-size-#{$fullName}', list.nth($values, 1));
|
|
550
|
+
@include def('line-height-#{$fullName}', list.nth($values, 2));
|
|
551
|
+
@include def('paragraph-spacing-#{$fullName}', list.nth($values, 3));
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
@include media-min($media) {
|
|
555
|
+
@each $name, $values in $sizesMap {
|
|
556
|
+
$fullName: '#{$name}-#{$media}';
|
|
557
|
+
|
|
558
|
+
@include def('font-size-#{$name}', use('font-size-#{$fullName}'));
|
|
559
|
+
@include def('line-height-#{$name}', use('line-height-#{$fullName}'));
|
|
560
|
+
@include def('paragraph-spacing-#{$name}', use('paragraph-spacing-#{$fullName}'));
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
// Return a list of values: (font-size, line-height, paragraph-spacing)
|
|
566
|
+
@function get-font-size($size, $line-height: 1.3, $paragraph-spacing: 0) {
|
|
567
|
+
@return ($size, $line-height, $paragraph-spacing);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
$fontSizeMapInitial: (
|
|
571
|
+
'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
|
|
572
|
+
'xxsmall': get-font-size(gs(120), 1.5, gs(110)),
|
|
573
|
+
'xsmall': get-font-size(gs(140), 1.5, gs(110)),
|
|
574
|
+
'small': get-font-size(gs(160), 1.5, gs(150)),
|
|
575
|
+
'medium': get-font-size(gs(200), 1.3, gs(100)),
|
|
576
|
+
'large': get-font-size(gs(240), 1.2, gs(110)),
|
|
577
|
+
'xlarge': get-font-size(gs(250), 1.2, gs(110)),
|
|
578
|
+
'xxlarge': get-font-size(gs(350), 1.2, gs(120)),
|
|
579
|
+
'xxxlarge': get-font-size(gs(400), 1.1, gs(140)),
|
|
580
|
+
'xxxxlarge': get-font-size(gs(450), 1.1, gs(200)),
|
|
581
|
+
);
|
|
582
|
+
$fontSizeMapTablet: (
|
|
583
|
+
'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
|
|
584
|
+
'xxsmall': get-font-size(gs(120), 1.5, gs(110)),
|
|
585
|
+
'xsmall': get-font-size(gs(140), 1.5, gs(110)),
|
|
586
|
+
'small': get-font-size(gs(160), 1.5, gs(150)),
|
|
587
|
+
'medium': get-font-size(gs(200), 1.3, gs(100)),
|
|
588
|
+
'large': get-font-size(gs(240), 1.2, gs(110)),
|
|
589
|
+
'xlarge': get-font-size(gs(300), 1.2, gs(140)),
|
|
590
|
+
'xxlarge': get-font-size(gs(400), 1.2, gs(150)),
|
|
591
|
+
'xxxlarge': get-font-size(gs(700), 1.1, gs(300)),
|
|
592
|
+
'xxxxlarge': get-font-size(gs(800), 1.1, gs(350)),
|
|
593
|
+
);
|
|
594
|
+
$fontSizeMapDesktop: (
|
|
595
|
+
'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
|
|
596
|
+
'xxsmall': get-font-size(gs(140), 1.5, gs(110)),
|
|
597
|
+
'xsmall': get-font-size(gs(160), 1.5, gs(120)),
|
|
598
|
+
'small': get-font-size(gs(180), 1.5, gs(160)),
|
|
599
|
+
'medium': get-font-size(gs(240), 1.3, gs(110)),
|
|
600
|
+
'large': get-font-size(gs(300), 1.2, gs(200)),
|
|
601
|
+
'xlarge': get-font-size(gs(400), 1.2, gs(180)),
|
|
602
|
+
'xxlarge': get-font-size(gs(500), 1.2, gs(200)),
|
|
603
|
+
'xxxlarge': get-font-size(gs(1000), 1.1, gs(400)),
|
|
604
|
+
'xxxxlarge': get-font-size(gs(1200), 1.1, gs(500)),
|
|
605
|
+
);
|
|
606
|
+
$fontSizeMapLargeDesktop: (
|
|
607
|
+
'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
|
|
608
|
+
'xxsmall': get-font-size(gs(140), 1.5, gs(110)),
|
|
609
|
+
'xsmall': get-font-size(gs(160), 1.5, gs(120)),
|
|
610
|
+
'small': get-font-size(gs(180), 1.5, gs(160)),
|
|
611
|
+
'medium': get-font-size(gs(240), 1.3, gs(110)),
|
|
612
|
+
'large': get-font-size(gs(300), 1.2, gs(200)),
|
|
613
|
+
'xlarge': get-font-size(gs(400), 1.2, gs(180)),
|
|
614
|
+
'xxlarge': get-font-size(gs(500), 1.2, gs(200)),
|
|
615
|
+
'xxxlarge': get-font-size(gs(1000), 1.1, gs(400)),
|
|
616
|
+
'xxxxlarge': get-font-size(gs(1200), 1.1, gs(500)),
|
|
617
|
+
);
|
|
618
|
+
|
|
619
|
+
// Spacer tokens
|
|
620
|
+
$spacerMapInitial: (
|
|
621
|
+
'xxsmall': gs(100),
|
|
622
|
+
'xsmall': gs(180),
|
|
623
|
+
'small': gs(200),
|
|
624
|
+
'medium': gs(300),
|
|
625
|
+
'large': gs(400),
|
|
626
|
+
'xlarge': gs(600),
|
|
627
|
+
'xxlarge': gs(700),
|
|
628
|
+
'xxxlarge': gs(800),
|
|
629
|
+
'xxxxlarge': gs(1000),
|
|
630
|
+
'xxxxxlarge': gs(1200),
|
|
631
|
+
);
|
|
632
|
+
$spacerMapTablet: (
|
|
633
|
+
'xxsmall': gs(100),
|
|
634
|
+
'xsmall': gs(180),
|
|
635
|
+
'small': gs(200),
|
|
636
|
+
'medium': gs(300),
|
|
637
|
+
'large': gs(400),
|
|
638
|
+
'xlarge': gs(600),
|
|
639
|
+
'xxlarge': gs(700),
|
|
640
|
+
'xxxlarge': gs(800),
|
|
641
|
+
'xxxxlarge': gs(1000),
|
|
642
|
+
'xxxxxlarge': gs(1200),
|
|
643
|
+
);
|
|
644
|
+
$spacerMapDesktop: (
|
|
645
|
+
'xxsmall': gs(120),
|
|
646
|
+
'xsmall': gs(200),
|
|
647
|
+
'small': gs(300),
|
|
648
|
+
'medium': gs(400),
|
|
649
|
+
'large': gs(600),
|
|
650
|
+
'xlarge': gs(800),
|
|
651
|
+
'xxlarge': gs(1000),
|
|
652
|
+
'xxxlarge': gs(1200),
|
|
653
|
+
'xxxxlarge': gs(1800),
|
|
654
|
+
'xxxxxlarge': gs(2400),
|
|
655
|
+
);
|
|
656
|
+
$spacerMapLargeDesktop: (
|
|
657
|
+
'xxsmall': gs(120),
|
|
658
|
+
'xsmall': gs(200),
|
|
659
|
+
'small': gs(300),
|
|
660
|
+
'medium': gs(400),
|
|
661
|
+
'large': gs(600),
|
|
662
|
+
'xlarge': gs(800),
|
|
663
|
+
'xxlarge': gs(1000),
|
|
664
|
+
'xxxlarge': gs(1200),
|
|
665
|
+
'xxxxlarge': gs(1800),
|
|
666
|
+
'xxxxxlarge': gs(2400),
|
|
667
|
+
);
|
|
668
|
+
|
|
669
|
+
// Controls size tokens
|
|
670
|
+
$controlSizeMapInitial: (
|
|
671
|
+
'button-height': q(5.75),
|
|
672
|
+
'button-padding-sides': spacing(200),
|
|
673
|
+
'main-nav-height': q(7.5),
|
|
674
|
+
'sub-nav-height': gs(7),
|
|
675
|
+
);
|
|
676
|
+
$controlSizeMapTablet: (
|
|
677
|
+
'button-height': q(5.75),
|
|
678
|
+
'button-padding-sides': spacing(200),
|
|
679
|
+
'main-nav-height': q(7.5),
|
|
680
|
+
'sub-nav-height': gs(7),
|
|
681
|
+
);
|
|
682
|
+
$controlSizeMapDesktop: (
|
|
683
|
+
'button-height': q(7),
|
|
684
|
+
'button-padding-sides': spacing(400),
|
|
685
|
+
'main-nav-height': q(10),
|
|
686
|
+
'sub-nav-height': gs(9),
|
|
687
|
+
);
|
|
688
|
+
$controlSizeMapLargeDesktop: (
|
|
689
|
+
'button-height': q(7),
|
|
690
|
+
'button-padding-sides': spacing(400),
|
|
691
|
+
'main-nav-height': q(10),
|
|
692
|
+
'sub-nav-height': gs(9),
|
|
693
|
+
);
|
|
@@ -84,59 +84,10 @@
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
@mixin text-responsive-tokens() {
|
|
87
|
-
|
|
88
|
-
@include ui.define-font-
|
|
89
|
-
@include ui.define-font-
|
|
90
|
-
@include ui.define-font-
|
|
91
|
-
@include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
|
|
92
|
-
@include ui.define-font-size('medium', ui.gs(200), 1.3, ui.gs(100));
|
|
93
|
-
@include ui.define-font-size('large', ui.gs(240), 1.2, ui.gs(110));
|
|
94
|
-
@include ui.define-font-size('xlarge', ui.gs(250), 1.2, ui.gs(110));
|
|
95
|
-
@include ui.define-font-size('xxlarge', ui.gs(350), 1.2, ui.gs(120));
|
|
96
|
-
@include ui.define-font-size('xxxlarge', ui.gs(400), 1.1, ui.gs(140));
|
|
97
|
-
@include ui.define-font-size('xxxxlarge', ui.gs(450), 1.1, ui.gs(200));
|
|
98
|
-
|
|
99
|
-
// Tablet sizes
|
|
100
|
-
@include ui.media-min('medium') {
|
|
101
|
-
@include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
|
|
102
|
-
@include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
|
|
103
|
-
@include ui.define-font-size('xsmall', ui.gs(140), 1.5, ui.gs(110));
|
|
104
|
-
@include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
|
|
105
|
-
@include ui.define-font-size('medium', ui.gs(200), 1.3, ui.gs(100));
|
|
106
|
-
@include ui.define-font-size('large', ui.gs(240), 1.2, ui.gs(110));
|
|
107
|
-
@include ui.define-font-size('xlarge', ui.gs(300), 1.2, ui.gs(140));
|
|
108
|
-
@include ui.define-font-size('xxlarge', ui.gs(400), 1.2, ui.gs(150));
|
|
109
|
-
@include ui.define-font-size('xxxlarge', ui.gs(700), 1.1, ui.gs(300));
|
|
110
|
-
@include ui.define-font-size('xxxxlarge', ui.gs(800), 1.1, ui.gs(350));
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Desktop sizes
|
|
114
|
-
@include ui.media-min('large') {
|
|
115
|
-
@include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
|
|
116
|
-
@include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
|
|
117
|
-
@include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
|
|
118
|
-
@include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
|
|
119
|
-
@include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
|
|
120
|
-
@include ui.define-font-size('large', ui.gs(300), 1.2, ui.gs(200));
|
|
121
|
-
@include ui.define-font-size('xlarge', ui.gs(400), 1.2, ui.gs(180));
|
|
122
|
-
@include ui.define-font-size('xxlarge', ui.gs(500), 1.2, ui.gs(200));
|
|
123
|
-
@include ui.define-font-size('xxxlarge', ui.gs(1000), 1.1, ui.gs(400));
|
|
124
|
-
@include ui.define-font-size('xxxxlarge', ui.gs(1200), 1.1, ui.gs(500));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// Large Desktop sizes - same as desktop
|
|
128
|
-
@include ui.media-min('xlarge') {
|
|
129
|
-
@include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
|
|
130
|
-
@include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
|
|
131
|
-
@include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
|
|
132
|
-
@include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
|
|
133
|
-
@include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
|
|
134
|
-
@include ui.define-font-size('large', ui.gs(300), 1.2, ui.gs(200));
|
|
135
|
-
@include ui.define-font-size('xlarge', ui.gs(400), 1.2, ui.gs(180));
|
|
136
|
-
@include ui.define-font-size('xxlarge', ui.gs(500), 1.2, ui.gs(200));
|
|
137
|
-
@include ui.define-font-size('xxxlarge', ui.gs(1000), 1.1, ui.gs(400));
|
|
138
|
-
@include ui.define-font-size('xxxxlarge', ui.gs(1200), 1.1, ui.gs(500));
|
|
139
|
-
}
|
|
87
|
+
@include ui.define-font-sizes(ui.$fontSizeMapInitial, 'initial');
|
|
88
|
+
@include ui.define-font-sizes(ui.$fontSizeMapTablet, 'medium');
|
|
89
|
+
@include ui.define-font-sizes(ui.$fontSizeMapDesktop, 'large');
|
|
90
|
+
@include ui.define-font-sizes(ui.$fontSizeMapLargeDesktop, 'xlarge');
|
|
140
91
|
}
|
|
141
92
|
|
|
142
93
|
@mixin offset-tokens() {
|
|
@@ -152,59 +103,10 @@
|
|
|
152
103
|
}
|
|
153
104
|
|
|
154
105
|
@mixin spacer-tokens() {
|
|
155
|
-
|
|
156
|
-
@include ui.
|
|
157
|
-
@include ui.
|
|
158
|
-
@include ui.
|
|
159
|
-
@include ui.def('spacer-medium', ui.gs(300));
|
|
160
|
-
@include ui.def('spacer-large', ui.gs(400));
|
|
161
|
-
@include ui.def('spacer-xlarge', ui.gs(600));
|
|
162
|
-
@include ui.def('spacer-xxlarge', ui.gs(700));
|
|
163
|
-
@include ui.def('spacer-xxxlarge', ui.gs(800));
|
|
164
|
-
@include ui.def('spacer-xxxxlarge', ui.gs(1000));
|
|
165
|
-
@include ui.def('spacer-xxxxxlarge', ui.gs(1200));
|
|
166
|
-
|
|
167
|
-
// Tablet sizes
|
|
168
|
-
@include ui.media-min('medium') {
|
|
169
|
-
@include ui.def('spacer-xxsmall', ui.gs(100));
|
|
170
|
-
@include ui.def('spacer-xsmall', ui.gs(180));
|
|
171
|
-
@include ui.def('spacer-small', ui.gs(200));
|
|
172
|
-
@include ui.def('spacer-medium', ui.gs(300));
|
|
173
|
-
@include ui.def('spacer-large', ui.gs(400));
|
|
174
|
-
@include ui.def('spacer-xlarge', ui.gs(600));
|
|
175
|
-
@include ui.def('spacer-xxlarge', ui.gs(700));
|
|
176
|
-
@include ui.def('spacer-xxxlarge', ui.gs(800));
|
|
177
|
-
@include ui.def('spacer-xxxxlarge', ui.gs(1000));
|
|
178
|
-
@include ui.def('spacer-xxxxxlarge', ui.gs(1200));
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
// Desktop sizes
|
|
182
|
-
@include ui.media-min('large') {
|
|
183
|
-
@include ui.def('spacer-xxsmall', ui.gs(120));
|
|
184
|
-
@include ui.def('spacer-xsmall', ui.gs(200));
|
|
185
|
-
@include ui.def('spacer-small', ui.gs(300));
|
|
186
|
-
@include ui.def('spacer-medium', ui.gs(400));
|
|
187
|
-
@include ui.def('spacer-large', ui.gs(600));
|
|
188
|
-
@include ui.def('spacer-xlarge', ui.gs(800));
|
|
189
|
-
@include ui.def('spacer-xxlarge', ui.gs(1000));
|
|
190
|
-
@include ui.def('spacer-xxxlarge', ui.gs(1200));
|
|
191
|
-
@include ui.def('spacer-xxxxlarge', ui.gs(1800));
|
|
192
|
-
@include ui.def('spacer-xxxxxlarge', ui.gs(2400));
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
// Large Desktop sizes
|
|
196
|
-
@include ui.media-min('xlarge') {
|
|
197
|
-
@include ui.def('spacer-xxsmall', ui.gs(120));
|
|
198
|
-
@include ui.def('spacer-xsmall', ui.gs(200));
|
|
199
|
-
@include ui.def('spacer-small', ui.gs(300));
|
|
200
|
-
@include ui.def('spacer-medium', ui.gs(400));
|
|
201
|
-
@include ui.def('spacer-large', ui.gs(600));
|
|
202
|
-
@include ui.def('spacer-xlarge', ui.gs(800));
|
|
203
|
-
@include ui.def('spacer-xxlarge', ui.gs(1000));
|
|
204
|
-
@include ui.def('spacer-xxxlarge', ui.gs(1200));
|
|
205
|
-
@include ui.def('spacer-xxxxlarge', ui.gs(1800));
|
|
206
|
-
@include ui.def('spacer-xxxxxlarge', ui.gs(2400));
|
|
207
|
-
}
|
|
106
|
+
@include ui.define-vars-from-map('spacer', ui.$spacerMapInitial, 'initial');
|
|
107
|
+
@include ui.define-vars-from-map('spacer', ui.$spacerMapTablet, 'medium');
|
|
108
|
+
@include ui.define-vars-from-map('spacer', ui.$spacerMapDesktop, 'large');
|
|
109
|
+
@include ui.define-vars-from-map('spacer', ui.$spacerMapLargeDesktop, 'xlarge');
|
|
208
110
|
}
|
|
209
111
|
|
|
210
112
|
@mixin control-tokens() {
|
|
@@ -214,35 +116,10 @@
|
|
|
214
116
|
@include ui.def('control-height-#{$name}', $value);
|
|
215
117
|
}
|
|
216
118
|
|
|
217
|
-
|
|
218
|
-
@include ui.
|
|
219
|
-
@include ui.
|
|
220
|
-
@include ui.
|
|
221
|
-
@include ui.def('sub-nav-height', ui.gs(7));
|
|
222
|
-
|
|
223
|
-
// Tablet sizes
|
|
224
|
-
@include ui.media-min('medium') {
|
|
225
|
-
@include ui.def('button-height', ui.q(5.75));
|
|
226
|
-
@include ui.def('button-padding-sides', ui.spacing(200));
|
|
227
|
-
@include ui.def('main-nav-height', ui.q(7.5));
|
|
228
|
-
@include ui.def('sub-nav-height', ui.gs(7));
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
// Desktop sizes
|
|
232
|
-
@include ui.media-min('large') {
|
|
233
|
-
@include ui.def('button-height', ui.q(7));
|
|
234
|
-
@include ui.def('button-padding-sides', ui.spacing(400));
|
|
235
|
-
@include ui.def('main-nav-height', ui.q(10));
|
|
236
|
-
@include ui.def('sub-nav-height', ui.gs(9));
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
// Large Desktop sizes
|
|
240
|
-
@include ui.media-min('xlarge') {
|
|
241
|
-
@include ui.def('button-height', ui.q(7));
|
|
242
|
-
@include ui.def('button-padding-sides', ui.spacing(400));
|
|
243
|
-
@include ui.def('main-nav-height', ui.q(10));
|
|
244
|
-
@include ui.def('sub-nav-height', ui.gs(9));
|
|
245
|
-
}
|
|
119
|
+
@include ui.define-vars-from-map('', ui.$controlSizeMapInitial, 'initial');
|
|
120
|
+
@include ui.define-vars-from-map('', ui.$controlSizeMapTablet, 'medium');
|
|
121
|
+
@include ui.define-vars-from-map('', ui.$controlSizeMapDesktop, 'large');
|
|
122
|
+
@include ui.define-vars-from-map('', ui.$controlSizeMapLargeDesktop, 'xlarge');
|
|
246
123
|
}
|
|
247
124
|
|
|
248
125
|
// Components tokens
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cfx-dev/ui-components",
|
|
3
|
-
"
|
|
4
|
-
"version": "5.0.21",
|
|
3
|
+
"version": "5.0.22",
|
|
5
4
|
"type": "module",
|
|
6
5
|
"license": "MIT",
|
|
7
6
|
"main": "dist/main.js",
|
|
@@ -69,5 +68,6 @@
|
|
|
69
68
|
},
|
|
70
69
|
"resolutions": {
|
|
71
70
|
"jackspeak": "2.1.1"
|
|
72
|
-
}
|
|
71
|
+
},
|
|
72
|
+
"packageManager": "yarn@4.12.0"
|
|
73
73
|
}
|