1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 |
|
5 | @import "scss/mixin";
|
6 | @import "scss/variable";
|
7 |
|
8 |
|
9 |
|
10 | #{$list-prefix} {
|
11 | &-header {
|
12 | border-bottom: $line-1 solid $list-divider-color;
|
13 | color: $list-title-color;
|
14 | }
|
15 |
|
16 | &-footer {
|
17 | border-top: $line-1 solid $list-divider-color;
|
18 | color: $list-content-color;
|
19 | }
|
20 |
|
21 | &-loading.#{$css-prefix}loading {
|
22 | display: block;
|
23 | }
|
24 | &-empty {
|
25 | font-size: $font-size-body-1;
|
26 | color: $color-line1-4;
|
27 | padding: $s-8 0;
|
28 | text-align: center;
|
29 | }
|
30 |
|
31 | &-items {
|
32 | margin: 0;
|
33 | padding: 0;
|
34 | list-style: none;
|
35 | }
|
36 | &-item {
|
37 | display: table;
|
38 | display: flex;
|
39 | width: 100%;
|
40 | color: $list-content-color;
|
41 | }
|
42 |
|
43 | &-item-media {
|
44 | display: table-cell;
|
45 | display: flex;
|
46 | flex-direction: column;
|
47 | align-items: flex-start;
|
48 | justify-content: flex-start;
|
49 | min-width: 1px;
|
50 | flex-shrink: 0;
|
51 | vertical-align: top;
|
52 | }
|
53 |
|
54 | &-item-extra {
|
55 | display: table-cell;
|
56 | display: flex;
|
57 | flex-direction: column;
|
58 | align-items: flex-start;
|
59 | justify-content: flex-start;
|
60 | min-width: 1px;
|
61 | flex-shrink: 0;
|
62 | vertical-align: top;
|
63 | color: $list-extra-color;
|
64 | }
|
65 |
|
66 | &-item-content {
|
67 | display: table-cell;
|
68 | display: flex;
|
69 | flex-direction: column;
|
70 | align-items: flex-start;
|
71 | justify-content: center;
|
72 | flex: 1;
|
73 | width: 100%;
|
74 | vertical-align: middle;
|
75 | }
|
76 |
|
77 | &-item-title {
|
78 | color: $list-title-color;
|
79 | }
|
80 |
|
81 |
|
82 | &-medium {
|
83 | #{$list-prefix}-header {
|
84 | padding: $list-size-m-item-padding-tb $list-size-m-item-padding-lr;
|
85 | font-size: $list-size-m-title-font-size;
|
86 | font-weight: $list-size-m-title-font-weight;
|
87 | }
|
88 |
|
89 | #{$list-prefix}-footer {
|
90 | padding: $list-size-m-item-padding-tb $list-size-m-item-padding-lr;
|
91 | }
|
92 |
|
93 | #{$list-prefix}-item-media {
|
94 | padding-right: $list-size-m-item-media-margin;
|
95 | }
|
96 | #{$list-prefix}-item-extra {
|
97 | padding-left: $list-size-m-item-media-margin;
|
98 | }
|
99 |
|
100 | #{$list-prefix}-item {
|
101 | font-size: $list-size-m-item-content-font-size;
|
102 | line-height: $list-size-m-item-content-line-height;
|
103 | padding: $list-size-m-item-padding-tb $list-size-m-item-padding-lr;
|
104 | }
|
105 | & #{$list-prefix}-item-title {
|
106 | font-weight: $list-size-m-item-title-font-weight;
|
107 | font-size: $list-size-m-item-title-font-size;
|
108 | line-height: $list-size-m-item-title-line-height;
|
109 | }
|
110 | }
|
111 |
|
112 | &-small {
|
113 | #{$list-prefix}-header {
|
114 | padding: $list-size-s-item-padding-tb $list-size-s-item-padding-lr;
|
115 | font-size: $list-size-s-title-font-size;
|
116 | font-weight: $list-size-s-title-font-weight;
|
117 | }
|
118 |
|
119 | #{$list-prefix}-footer {
|
120 | padding: $list-size-s-item-padding-tb $list-size-s-item-padding-lr;
|
121 | }
|
122 |
|
123 | #{$list-prefix}-item-media {
|
124 | padding-right: $list-size-s-item-media-margin;
|
125 | }
|
126 | #{$list-prefix}-item-extra {
|
127 | padding-left: $list-size-s-item-media-margin;
|
128 | }
|
129 |
|
130 | #{$list-prefix}-item {
|
131 | font-size: $list-size-s-item-content-font-size;
|
132 | font-weight: $list-size-s-item-title-font-weight;
|
133 | line-height: $list-size-s-item-content-line-height;
|
134 | padding: $list-size-s-item-padding-tb $list-size-s-item-padding-lr;
|
135 | }
|
136 | & #{$list-prefix}-item-title {
|
137 | font-size: $list-size-s-item-title-font-size;
|
138 | line-height: $list-size-s-item-title-line-height;
|
139 | }
|
140 | }
|
141 |
|
142 | &-divider {
|
143 | #{$list-prefix}-item {
|
144 | border-bottom: $line-1 solid $list-divider-color;
|
145 | &:last-child {
|
146 | border-bottom: none;
|
147 | }
|
148 | }
|
149 | }
|
150 | }
|
151 |
|
152 | @import './rtl.scss';
|