oppi.li
1/* based on Fomantic UI list module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4.ui.list {
5 list-style-type: none;
6 margin: 1em 0;
7 padding: 0;
8 font-size: 1em;
9}
10
11.ui.list:first-child {
12 margin-top: 0;
13 padding-top: 0;
14}
15
16.ui.list:last-child {
17 margin-bottom: 0;
18 padding-bottom: 0;
19}
20
21.ui.list > .item,
22.ui.list .list > .item {
23 display: list-item;
24 table-layout: fixed;
25 list-style-type: none;
26 list-style-position: outside;
27}
28
29.ui.list > .list > .item::after,
30.ui.list > .item::after {
31 content: "";
32 display: block;
33 height: 0;
34 clear: both;
35 visibility: hidden;
36}
37
38.ui.list .list:not(.icon) {
39 clear: both;
40 margin: 0;
41 padding: 0.75em 0 0.25em 0.5em;
42}
43
44.ui.list .list > .item {
45 padding: 0.14285714em 0;
46}
47
48.ui.list .list > .item > i.icon,
49.ui.list > .item > i.icon {
50 display: table-cell;
51 min-width: 1.55em;
52 padding-top: 0;
53 transition: color 0.1s ease;
54 padding-right: 0.28571429em;
55 vertical-align: top;
56}
57.ui.list .list > .item > i.icon:only-child,
58.ui.list > .item > i.icon:only-child {
59 display: inline-block;
60 min-width: auto;
61 vertical-align: top;
62}
63
64.ui.list .list > .item > .image,
65.ui.list > .item > .image {
66 display: table-cell;
67 background-color: transparent;
68 vertical-align: top;
69}
70.ui.list .list > .item > .image:not(:only-child):not(img),
71.ui.list > .item > .image:not(:only-child):not(img) {
72 padding-right: 0.5em;
73}
74.ui.list .list > .item > .image img,
75.ui.list > .item > .image img {
76 vertical-align: top;
77}
78.ui.list .list > .item > img.image,
79.ui.list .list > .item > .image:only-child,
80.ui.list > .item > img.image,
81.ui.list > .item > .image:only-child {
82 display: inline-block;
83}
84
85.ui.list .list > .item > .content,
86.ui.list > .item > .content {
87 color: var(--color-text);
88}
89.ui.list .list > .item > .image + .content,
90.ui.list .list > .item > i.icon + .content,
91.ui.list > .item > .image + .content,
92.ui.list > .item > i.icon + .content {
93 display: table-cell;
94 width: 100%;
95 padding: 0 0 0 0.5em;
96 vertical-align: top;
97}
98.ui.list .list > .item > img.image + .content,
99.ui.list > .item > img.image + .content {
100 display: inline-block;
101 width: auto;
102}
103.ui.list .list > .item > .content > .list,
104.ui.list > .item > .content > .list {
105 margin-left: 0;
106 padding-left: 0;
107}
108
109.ui.list .list > .item .header,
110.ui.list > .item .header {
111 display: block;
112 margin: 0;
113 font-family: var(--fonts-regular);
114 font-weight: var(--font-weight-medium);
115 color: var(--color-text-dark);
116}
117
118.ui.list .list > .item .description,
119.ui.list > .item .description {
120 display: block;
121 color: var(--color-text);
122}
123
124.ui.list > .item a,
125.ui.list .list > .item a {
126 cursor: pointer;
127}
128
129.ui.list .list > .item [class*="right floated"],
130.ui.list > .item [class*="right floated"] {
131 float: right;
132 margin: 0 0 0 1em;
133}
134
135.ui.menu .ui.list > .item,
136.ui.menu .ui.list .list > .item {
137 display: list-item;
138 table-layout: fixed;
139 background-color: transparent;
140 list-style-type: none;
141 list-style-position: outside;
142 padding: 0.21428571em 0;
143}
144.ui.menu .ui.list .list > .item::before,
145.ui.menu .ui.list > .item::before {
146 border: none;
147 background: none;
148}
149.ui.menu .ui.list .list > .item:first-child,
150.ui.menu .ui.list > .item:first-child {
151 padding-top: 0;
152}
153.ui.menu .ui.list .list > .item:last-child,
154.ui.menu .ui.list > .item:last-child {
155 padding-bottom: 0;
156}
157
158.ui.list .list > .disabled.item,
159.ui.list > .disabled.item {
160 pointer-events: none;
161 opacity: var(--opacity-disabled);
162}
163
164.ui.list .list > a.item:hover > .icons,
165.ui.list > a.item:hover > .icons,
166.ui.list .list > a.item:hover > i.icon,
167.ui.list > a.item:hover > i.icon {
168 color: var(--color-text-dark);
169}
170
171.ui.divided.list > .item {
172 border-top: 1px solid var(--color-secondary);
173}
174.ui.divided.list .list > .item {
175 border-top: none;
176}
177.ui.divided.list .item .list > .item {
178 border-top: none;
179}
180.ui.divided.list .list > .item:first-child,
181.ui.divided.list > .item:first-child {
182 border-top: none;
183}
184.ui.divided.list .list > .item:first-child {
185 border-top-width: 1px;
186}
187
188.ui.relaxed.list > .item:not(:first-child) {
189 padding-top: 0.42857143em;
190}
191.ui.relaxed.list > .item:not(:last-child) {
192 padding-bottom: 0.42857143em;
193}