@vectara/vectara-ui 9.7.0 → 9.8.0
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/lib/components/typography/_text.scss +54 -13
- package/lib/styles/index.css +97 -44
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
|
|
3
|
+
$textRhythm: $sizeM;
|
|
4
|
+
|
|
3
5
|
.vuiText {
|
|
4
6
|
overflow-wrap: break-word;
|
|
5
7
|
word-break: break-word;
|
|
@@ -24,22 +26,47 @@
|
|
|
24
26
|
ul,
|
|
25
27
|
ol {
|
|
26
28
|
margin-left: $sizeM;
|
|
27
|
-
margin-bottom: $
|
|
29
|
+
margin-bottom: $textRhythm;
|
|
30
|
+
}
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
hr {
|
|
33
|
+
border-top: none;
|
|
34
|
+
border-left: none;
|
|
35
|
+
border-right: none;
|
|
36
|
+
border-bottom: 1px solid;
|
|
37
|
+
width: 100%;
|
|
38
|
+
border-bottom-color: $borderColor;
|
|
39
|
+
margin-bottom: $textRhythm;
|
|
32
40
|
}
|
|
33
41
|
|
|
42
|
+
pre,
|
|
34
43
|
code {
|
|
35
44
|
border: 1px solid $borderColorLight;
|
|
36
45
|
padding: $sizeXxxs $sizeXs;
|
|
37
46
|
}
|
|
38
47
|
|
|
48
|
+
pre:only-child,
|
|
49
|
+
code:only-child {
|
|
50
|
+
padding: $sizeXs $sizeS;
|
|
51
|
+
border: none;
|
|
52
|
+
border-radius: $sizeXs;
|
|
53
|
+
overflow: auto;
|
|
54
|
+
background-color: $colorLightShade;
|
|
55
|
+
margin-bottom: $textRhythm;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
blockquote {
|
|
59
|
+
border-left: 4px solid $colorLightShade;
|
|
60
|
+
padding-left: $sizeM;
|
|
61
|
+
color: $colorDarkerShade;
|
|
62
|
+
margin-bottom: $textRhythm;
|
|
63
|
+
}
|
|
64
|
+
|
|
39
65
|
table {
|
|
40
66
|
width: 100%;
|
|
41
67
|
table-layout: fixed;
|
|
42
68
|
border: 1px solid $borderColorLight;
|
|
69
|
+
margin-bottom: $textRhythm;
|
|
43
70
|
|
|
44
71
|
thead {
|
|
45
72
|
background-color: $colorLightShade;
|
|
@@ -63,6 +90,10 @@
|
|
|
63
90
|
padding: $sizeS $sizeS;
|
|
64
91
|
}
|
|
65
92
|
}
|
|
93
|
+
|
|
94
|
+
sup {
|
|
95
|
+
vertical-align: super;
|
|
96
|
+
}
|
|
66
97
|
}
|
|
67
98
|
|
|
68
99
|
.vuiText--truncate {
|
|
@@ -79,40 +110,50 @@
|
|
|
79
110
|
ol {
|
|
80
111
|
font-size: $fontSize;
|
|
81
112
|
line-height: 1.4;
|
|
82
|
-
margin-bottom: $sizeXs;
|
|
83
113
|
font-weight: $fontWeight;
|
|
84
|
-
|
|
85
|
-
&:last-child {
|
|
86
|
-
margin-bottom: 0;
|
|
87
|
-
}
|
|
114
|
+
margin-bottom: $textRhythm;
|
|
88
115
|
}
|
|
89
116
|
|
|
90
117
|
h1 {
|
|
91
118
|
font-size: $fontSize * 2;
|
|
92
119
|
line-height: 1.1;
|
|
93
120
|
font-weight: $fontWeightStrong;
|
|
94
|
-
margin-bottom: $
|
|
121
|
+
margin-bottom: $textRhythm;
|
|
95
122
|
}
|
|
96
123
|
|
|
97
124
|
h2 {
|
|
98
125
|
font-size: $fontSize * 1.5;
|
|
99
126
|
line-height: 1.2;
|
|
100
127
|
font-weight: $fontWeightNormal;
|
|
101
|
-
margin-bottom: $
|
|
128
|
+
margin-bottom: $textRhythm;
|
|
102
129
|
}
|
|
103
130
|
|
|
104
131
|
h3 {
|
|
105
132
|
font-size: $fontSize * 1.25;
|
|
106
133
|
line-height: 1.3;
|
|
107
134
|
font-weight: $fontWeightNormal;
|
|
108
|
-
margin-bottom: $
|
|
135
|
+
margin-bottom: $textRhythm;
|
|
109
136
|
}
|
|
110
137
|
|
|
111
138
|
h4 {
|
|
112
139
|
font-size: $fontSize;
|
|
113
140
|
line-height: 1.4;
|
|
114
141
|
font-weight: $labelFontWeight;
|
|
115
|
-
margin-bottom: $
|
|
142
|
+
margin-bottom: $textRhythm;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
h5 {
|
|
146
|
+
font-size: $fontSize * 0.85;
|
|
147
|
+
line-height: 1.4;
|
|
148
|
+
font-weight: $labelFontWeight;
|
|
149
|
+
margin-bottom: $textRhythm;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
h6 {
|
|
153
|
+
font-size: $fontSize * 0.75;
|
|
154
|
+
line-height: 1.4;
|
|
155
|
+
font-weight: $labelFontWeight;
|
|
156
|
+
margin-bottom: $textRhythm;
|
|
116
157
|
}
|
|
117
158
|
}
|
|
118
159
|
|
package/lib/styles/index.css
CHANGED
|
@@ -4546,20 +4546,42 @@ h2.react-datepicker__current-month {
|
|
|
4546
4546
|
.vuiText ul,
|
|
4547
4547
|
.vuiText ol {
|
|
4548
4548
|
margin-left: 16px;
|
|
4549
|
-
margin-bottom:
|
|
4549
|
+
margin-bottom: 16px;
|
|
4550
4550
|
}
|
|
4551
|
-
.vuiText
|
|
4552
|
-
|
|
4553
|
-
|
|
4551
|
+
.vuiText hr {
|
|
4552
|
+
border-top: none;
|
|
4553
|
+
border-left: none;
|
|
4554
|
+
border-right: none;
|
|
4555
|
+
border-bottom: 1px solid;
|
|
4556
|
+
width: 100%;
|
|
4557
|
+
border-bottom-color: #cbd1de;
|
|
4558
|
+
margin-bottom: 16px;
|
|
4554
4559
|
}
|
|
4560
|
+
.vuiText pre,
|
|
4555
4561
|
.vuiText code {
|
|
4556
4562
|
border: 1px solid #e3e4f3;
|
|
4557
4563
|
padding: 2px 8px;
|
|
4558
4564
|
}
|
|
4565
|
+
.vuiText pre:only-child,
|
|
4566
|
+
.vuiText code:only-child {
|
|
4567
|
+
padding: 8px 12px;
|
|
4568
|
+
border: none;
|
|
4569
|
+
border-radius: 8px;
|
|
4570
|
+
overflow: auto;
|
|
4571
|
+
background-color: #f1f4f6;
|
|
4572
|
+
margin-bottom: 16px;
|
|
4573
|
+
}
|
|
4574
|
+
.vuiText blockquote {
|
|
4575
|
+
border-left: 4px solid #f1f4f6;
|
|
4576
|
+
padding-left: 16px;
|
|
4577
|
+
color: #1c1d22;
|
|
4578
|
+
margin-bottom: 16px;
|
|
4579
|
+
}
|
|
4559
4580
|
.vuiText table {
|
|
4560
4581
|
width: 100%;
|
|
4561
4582
|
table-layout: fixed;
|
|
4562
4583
|
border: 1px solid #e3e4f3;
|
|
4584
|
+
margin-bottom: 16px;
|
|
4563
4585
|
}
|
|
4564
4586
|
.vuiText table thead {
|
|
4565
4587
|
background-color: #f1f4f6;
|
|
@@ -4579,6 +4601,9 @@ h2.react-datepicker__current-month {
|
|
|
4579
4601
|
vertical-align: middle;
|
|
4580
4602
|
padding: 12px 12px;
|
|
4581
4603
|
}
|
|
4604
|
+
.vuiText sup {
|
|
4605
|
+
vertical-align: super;
|
|
4606
|
+
}
|
|
4582
4607
|
|
|
4583
4608
|
.vuiText--truncate {
|
|
4584
4609
|
overflow: hidden;
|
|
@@ -4601,37 +4626,44 @@ h2.react-datepicker__current-month {
|
|
|
4601
4626
|
.vuiText--xs ol {
|
|
4602
4627
|
font-size: 12px;
|
|
4603
4628
|
line-height: 1.4;
|
|
4604
|
-
margin-bottom: 8px;
|
|
4605
4629
|
font-weight: 500;
|
|
4606
|
-
|
|
4607
|
-
.vuiText--xs p:last-child,
|
|
4608
|
-
.vuiText--xs ul:last-child,
|
|
4609
|
-
.vuiText--xs ol:last-child {
|
|
4610
|
-
margin-bottom: 0;
|
|
4630
|
+
margin-bottom: 16px;
|
|
4611
4631
|
}
|
|
4612
4632
|
.vuiText--xs h1 {
|
|
4613
4633
|
font-size: 24px;
|
|
4614
4634
|
line-height: 1.1;
|
|
4615
4635
|
font-weight: 500;
|
|
4616
|
-
margin-bottom:
|
|
4636
|
+
margin-bottom: 16px;
|
|
4617
4637
|
}
|
|
4618
4638
|
.vuiText--xs h2 {
|
|
4619
4639
|
font-size: 18px;
|
|
4620
4640
|
line-height: 1.2;
|
|
4621
4641
|
font-weight: 400;
|
|
4622
|
-
margin-bottom:
|
|
4642
|
+
margin-bottom: 16px;
|
|
4623
4643
|
}
|
|
4624
4644
|
.vuiText--xs h3 {
|
|
4625
4645
|
font-size: 15px;
|
|
4626
4646
|
line-height: 1.3;
|
|
4627
4647
|
font-weight: 400;
|
|
4628
|
-
margin-bottom:
|
|
4648
|
+
margin-bottom: 16px;
|
|
4629
4649
|
}
|
|
4630
4650
|
.vuiText--xs h4 {
|
|
4631
4651
|
font-size: 12px;
|
|
4632
4652
|
line-height: 1.4;
|
|
4633
4653
|
font-weight: 600;
|
|
4634
|
-
margin-bottom:
|
|
4654
|
+
margin-bottom: 16px;
|
|
4655
|
+
}
|
|
4656
|
+
.vuiText--xs h5 {
|
|
4657
|
+
font-size: 10.2px;
|
|
4658
|
+
line-height: 1.4;
|
|
4659
|
+
font-weight: 600;
|
|
4660
|
+
margin-bottom: 16px;
|
|
4661
|
+
}
|
|
4662
|
+
.vuiText--xs h6 {
|
|
4663
|
+
font-size: 9px;
|
|
4664
|
+
line-height: 1.4;
|
|
4665
|
+
font-weight: 600;
|
|
4666
|
+
margin-bottom: 16px;
|
|
4635
4667
|
}
|
|
4636
4668
|
|
|
4637
4669
|
.vuiText--s {
|
|
@@ -4644,37 +4676,44 @@ h2.react-datepicker__current-month {
|
|
|
4644
4676
|
.vuiText--s ol {
|
|
4645
4677
|
font-size: 14px;
|
|
4646
4678
|
line-height: 1.4;
|
|
4647
|
-
margin-bottom: 8px;
|
|
4648
4679
|
font-weight: 400;
|
|
4649
|
-
|
|
4650
|
-
.vuiText--s p:last-child,
|
|
4651
|
-
.vuiText--s ul:last-child,
|
|
4652
|
-
.vuiText--s ol:last-child {
|
|
4653
|
-
margin-bottom: 0;
|
|
4680
|
+
margin-bottom: 16px;
|
|
4654
4681
|
}
|
|
4655
4682
|
.vuiText--s h1 {
|
|
4656
4683
|
font-size: 28px;
|
|
4657
4684
|
line-height: 1.1;
|
|
4658
4685
|
font-weight: 500;
|
|
4659
|
-
margin-bottom:
|
|
4686
|
+
margin-bottom: 16px;
|
|
4660
4687
|
}
|
|
4661
4688
|
.vuiText--s h2 {
|
|
4662
4689
|
font-size: 21px;
|
|
4663
4690
|
line-height: 1.2;
|
|
4664
4691
|
font-weight: 400;
|
|
4665
|
-
margin-bottom:
|
|
4692
|
+
margin-bottom: 16px;
|
|
4666
4693
|
}
|
|
4667
4694
|
.vuiText--s h3 {
|
|
4668
4695
|
font-size: 17.5px;
|
|
4669
4696
|
line-height: 1.3;
|
|
4670
4697
|
font-weight: 400;
|
|
4671
|
-
margin-bottom:
|
|
4698
|
+
margin-bottom: 16px;
|
|
4672
4699
|
}
|
|
4673
4700
|
.vuiText--s h4 {
|
|
4674
4701
|
font-size: 14px;
|
|
4675
4702
|
line-height: 1.4;
|
|
4676
4703
|
font-weight: 600;
|
|
4677
|
-
margin-bottom:
|
|
4704
|
+
margin-bottom: 16px;
|
|
4705
|
+
}
|
|
4706
|
+
.vuiText--s h5 {
|
|
4707
|
+
font-size: 11.9px;
|
|
4708
|
+
line-height: 1.4;
|
|
4709
|
+
font-weight: 600;
|
|
4710
|
+
margin-bottom: 16px;
|
|
4711
|
+
}
|
|
4712
|
+
.vuiText--s h6 {
|
|
4713
|
+
font-size: 10.5px;
|
|
4714
|
+
line-height: 1.4;
|
|
4715
|
+
font-weight: 600;
|
|
4716
|
+
margin-bottom: 16px;
|
|
4678
4717
|
}
|
|
4679
4718
|
|
|
4680
4719
|
.vuiText--m {
|
|
@@ -4687,37 +4726,44 @@ h2.react-datepicker__current-month {
|
|
|
4687
4726
|
.vuiText--m ol {
|
|
4688
4727
|
font-size: 16px;
|
|
4689
4728
|
line-height: 1.4;
|
|
4690
|
-
margin-bottom: 8px;
|
|
4691
4729
|
font-weight: 400;
|
|
4692
|
-
|
|
4693
|
-
.vuiText--m p:last-child,
|
|
4694
|
-
.vuiText--m ul:last-child,
|
|
4695
|
-
.vuiText--m ol:last-child {
|
|
4696
|
-
margin-bottom: 0;
|
|
4730
|
+
margin-bottom: 16px;
|
|
4697
4731
|
}
|
|
4698
4732
|
.vuiText--m h1 {
|
|
4699
4733
|
font-size: 32px;
|
|
4700
4734
|
line-height: 1.1;
|
|
4701
4735
|
font-weight: 500;
|
|
4702
|
-
margin-bottom:
|
|
4736
|
+
margin-bottom: 16px;
|
|
4703
4737
|
}
|
|
4704
4738
|
.vuiText--m h2 {
|
|
4705
4739
|
font-size: 24px;
|
|
4706
4740
|
line-height: 1.2;
|
|
4707
4741
|
font-weight: 400;
|
|
4708
|
-
margin-bottom:
|
|
4742
|
+
margin-bottom: 16px;
|
|
4709
4743
|
}
|
|
4710
4744
|
.vuiText--m h3 {
|
|
4711
4745
|
font-size: 20px;
|
|
4712
4746
|
line-height: 1.3;
|
|
4713
4747
|
font-weight: 400;
|
|
4714
|
-
margin-bottom:
|
|
4748
|
+
margin-bottom: 16px;
|
|
4715
4749
|
}
|
|
4716
4750
|
.vuiText--m h4 {
|
|
4717
4751
|
font-size: 16px;
|
|
4718
4752
|
line-height: 1.4;
|
|
4719
4753
|
font-weight: 600;
|
|
4720
|
-
margin-bottom:
|
|
4754
|
+
margin-bottom: 16px;
|
|
4755
|
+
}
|
|
4756
|
+
.vuiText--m h5 {
|
|
4757
|
+
font-size: 13.6px;
|
|
4758
|
+
line-height: 1.4;
|
|
4759
|
+
font-weight: 600;
|
|
4760
|
+
margin-bottom: 16px;
|
|
4761
|
+
}
|
|
4762
|
+
.vuiText--m h6 {
|
|
4763
|
+
font-size: 12px;
|
|
4764
|
+
line-height: 1.4;
|
|
4765
|
+
font-weight: 600;
|
|
4766
|
+
margin-bottom: 16px;
|
|
4721
4767
|
}
|
|
4722
4768
|
|
|
4723
4769
|
.vuiText--l {
|
|
@@ -4730,37 +4776,44 @@ h2.react-datepicker__current-month {
|
|
|
4730
4776
|
.vuiText--l ol {
|
|
4731
4777
|
font-size: 18px;
|
|
4732
4778
|
line-height: 1.4;
|
|
4733
|
-
margin-bottom: 8px;
|
|
4734
4779
|
font-weight: 400;
|
|
4735
|
-
|
|
4736
|
-
.vuiText--l p:last-child,
|
|
4737
|
-
.vuiText--l ul:last-child,
|
|
4738
|
-
.vuiText--l ol:last-child {
|
|
4739
|
-
margin-bottom: 0;
|
|
4780
|
+
margin-bottom: 16px;
|
|
4740
4781
|
}
|
|
4741
4782
|
.vuiText--l h1 {
|
|
4742
4783
|
font-size: 36px;
|
|
4743
4784
|
line-height: 1.1;
|
|
4744
4785
|
font-weight: 500;
|
|
4745
|
-
margin-bottom:
|
|
4786
|
+
margin-bottom: 16px;
|
|
4746
4787
|
}
|
|
4747
4788
|
.vuiText--l h2 {
|
|
4748
4789
|
font-size: 27px;
|
|
4749
4790
|
line-height: 1.2;
|
|
4750
4791
|
font-weight: 400;
|
|
4751
|
-
margin-bottom:
|
|
4792
|
+
margin-bottom: 16px;
|
|
4752
4793
|
}
|
|
4753
4794
|
.vuiText--l h3 {
|
|
4754
4795
|
font-size: 22.5px;
|
|
4755
4796
|
line-height: 1.3;
|
|
4756
4797
|
font-weight: 400;
|
|
4757
|
-
margin-bottom:
|
|
4798
|
+
margin-bottom: 16px;
|
|
4758
4799
|
}
|
|
4759
4800
|
.vuiText--l h4 {
|
|
4760
4801
|
font-size: 18px;
|
|
4761
4802
|
line-height: 1.4;
|
|
4762
4803
|
font-weight: 600;
|
|
4763
|
-
margin-bottom:
|
|
4804
|
+
margin-bottom: 16px;
|
|
4805
|
+
}
|
|
4806
|
+
.vuiText--l h5 {
|
|
4807
|
+
font-size: 15.3px;
|
|
4808
|
+
line-height: 1.4;
|
|
4809
|
+
font-weight: 600;
|
|
4810
|
+
margin-bottom: 16px;
|
|
4811
|
+
}
|
|
4812
|
+
.vuiText--l h6 {
|
|
4813
|
+
font-size: 13.5px;
|
|
4814
|
+
line-height: 1.4;
|
|
4815
|
+
font-weight: 600;
|
|
4816
|
+
margin-bottom: 16px;
|
|
4764
4817
|
}
|
|
4765
4818
|
|
|
4766
4819
|
.vuiText--left {
|