@dialpad/dialtone 7.29.0 → 7.30.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.
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: ITEM LAYOUT
|
|
4
|
+
//
|
|
5
|
+
// Custom layout to enable developer to use list-item like stack.
|
|
6
|
+
// It is used as base for `dt-list-item` component
|
|
7
|
+
// visit https://dialpad.design/components/item_layout
|
|
8
|
+
//
|
|
9
|
+
// TABLE OF CONTENTS
|
|
10
|
+
// • BASE STYLE
|
|
11
|
+
//
|
|
12
|
+
// ============================================================================
|
|
13
|
+
// $ BASE STYLE
|
|
14
|
+
// ----------------------------------------------------------------------------
|
|
15
|
+
.dt-item-layout {
|
|
16
|
+
min-height: calc(var(--size-550) + var(--size-300));
|
|
17
|
+
padding: var(--space-300) var(--space-400);
|
|
18
|
+
font-size: var(--fs-200);
|
|
19
|
+
line-height: var(--lh-300);
|
|
20
|
+
|
|
21
|
+
&--content {
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&--subtitle {
|
|
26
|
+
color: var(--fc-tertiary);
|
|
27
|
+
font-size: var(--fs-100);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&,
|
|
31
|
+
&--right,
|
|
32
|
+
&--left {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
min-width: var(--size-600);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&--right {
|
|
39
|
+
align-self: flex-start;
|
|
40
|
+
padding-left: var(--space-400);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--left {
|
|
44
|
+
align-self: flex-start;
|
|
45
|
+
justify-content: flex-end;
|
|
46
|
+
padding-right: var(--space-400);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--bottom {
|
|
50
|
+
margin-top: var(--space-200);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -4773,6 +4773,38 @@ legend .d-label {
|
|
|
4773
4773
|
.d-stack--gap-600 {
|
|
4774
4774
|
--stack-gap: var(--space-600);
|
|
4775
4775
|
}
|
|
4776
|
+
.dt-item-layout {
|
|
4777
|
+
min-height: calc(var(--size-550) + var(--size-300));
|
|
4778
|
+
padding: var(--space-300) var(--space-400);
|
|
4779
|
+
font-size: var(--fs-200);
|
|
4780
|
+
line-height: var(--lh-300);
|
|
4781
|
+
}
|
|
4782
|
+
.dt-item-layout--content {
|
|
4783
|
+
flex-grow: 1;
|
|
4784
|
+
}
|
|
4785
|
+
.dt-item-layout--subtitle {
|
|
4786
|
+
color: var(--fc-tertiary);
|
|
4787
|
+
font-size: var(--fs-100);
|
|
4788
|
+
}
|
|
4789
|
+
.dt-item-layout,
|
|
4790
|
+
.dt-item-layout--right,
|
|
4791
|
+
.dt-item-layout--left {
|
|
4792
|
+
display: flex;
|
|
4793
|
+
align-items: center;
|
|
4794
|
+
min-width: var(--size-600);
|
|
4795
|
+
}
|
|
4796
|
+
.dt-item-layout--right {
|
|
4797
|
+
align-self: flex-start;
|
|
4798
|
+
padding-left: var(--space-400);
|
|
4799
|
+
}
|
|
4800
|
+
.dt-item-layout--left {
|
|
4801
|
+
align-self: flex-start;
|
|
4802
|
+
justify-content: flex-end;
|
|
4803
|
+
padding-right: var(--space-400);
|
|
4804
|
+
}
|
|
4805
|
+
.dt-item-layout--bottom {
|
|
4806
|
+
margin-top: var(--space-200);
|
|
4807
|
+
}
|
|
4776
4808
|
.d-bgg-from-black-600,
|
|
4777
4809
|
.h\:d-bgg-from-black-600:hover,
|
|
4778
4810
|
.f\:d-bgg-from-black-600:focus {
|