Skip to content

Commit 04c5fde

Browse files
silverwindsilverwind
committed
move card styles to own file
1 parent 7941519 commit 04c5fde

File tree

3 files changed

+135
-135
lines changed

3 files changed

+135
-135
lines changed

‎web_src/css/base.css

Lines changed: 0 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1046,141 +1046,6 @@ a.label,
10461046
box-shadow: -1px -1px 0 0 var(--color-secondary);
10471047
}
10481048

1049-
/* Below styles are a skeleton of the full fomantic styles which */
1050-
/* are needed to get all current uses of fomantic cards working */
1051-
/* TODO: remove all these styles and use custom styling instead */
1052-
1053-
.ui.card:last-child {
1054-
margin-bottom: 0;
1055-
}
1056-
.ui.card:first-child {
1057-
margin-top: 0;
1058-
}
1059-
1060-
.ui.cards > .card,
1061-
.ui.card {
1062-
display: flex;
1063-
flex-direction: column;
1064-
max-width: 100%;
1065-
width: 290px;
1066-
min-height: 0;
1067-
padding: 0;
1068-
background: var(--color-card);
1069-
border: 1px solid var(--color-secondary);
1070-
box-shadow: none;
1071-
word-wrap: break-word;
1072-
}
1073-
1074-
.ui.card {
1075-
margin: 1em 0;
1076-
}
1077-
1078-
.ui.cards {
1079-
display: flex;
1080-
margin: -0.875em -0.5em;
1081-
flex-wrap: wrap;
1082-
}
1083-
1084-
.ui.cards > .card {
1085-
display: flex;
1086-
margin: 0.875em 0.5em;
1087-
float: none;
1088-
}
1089-
1090-
.ui.cards > .card > .content,
1091-
.ui.card > .content {
1092-
border-top: 1px solid var(--color-secondary);
1093-
max-width: 100%;
1094-
padding: 1em;
1095-
font-size: 1em;
1096-
}
1097-
1098-
.ui.cards > .card > .content > .meta + .description,
1099-
.ui.cards > .card > .content > .header + .description,
1100-
.ui.card > .content > .meta + .description,
1101-
.ui.card > .content > .header + .description {
1102-
margin-top: .5em;
1103-
}
1104-
1105-
.ui.cards > .card > .content > .header:not(.ui),
1106-
.ui.card > .content > .header:not(.ui) {
1107-
font-weight: 500;
1108-
font-size: 1.28571429em;
1109-
margin-top: -.21425em;
1110-
line-height: 1.28571429em;
1111-
}
1112-
1113-
.ui.cards > .card > .content:first-child,
1114-
.ui.card > .content:first-child {
1115-
border-top: none;
1116-
border-radius: var(--border-radius) var(--border-radius) 0 0;
1117-
}
1118-
1119-
.ui.cards > .card > :last-child,
1120-
.ui.card > :last-child {
1121-
border-radius: 0 0 var(--border-radius) var(--border-radius);
1122-
}
1123-
1124-
.ui.cards > .card > :only-child,
1125-
.ui.card > :only-child {
1126-
border-radius: var(--border-radius) !important;
1127-
}
1128-
1129-
.ui.cards > .card > .extra,
1130-
.ui.card > .extra,
1131-
.ui.cards > .card > .extra a:not(.ui),
1132-
.ui.card > .extra a:not(.ui) {
1133-
color: var(--color-text);
1134-
}
1135-
1136-
.ui.cards > .card > .extra a:not(.ui):hover,
1137-
.ui.card > .extra a:not(.ui):hover {
1138-
color: var(--color-primary);
1139-
}
1140-
1141-
.ui.cards > .card > .content > .header,
1142-
.ui.card > .content > .header {
1143-
color: var(--color-text);
1144-
}
1145-
1146-
.ui.cards > .card > .content > .description,
1147-
.ui.card > .content > .description {
1148-
color: var(--color-text);
1149-
}
1150-
1151-
.ui.cards > .card .meta > a:not(.ui),
1152-
.ui.card .meta > a:not(.ui) {
1153-
color: var(--color-text-light-2);
1154-
}
1155-
1156-
.ui.cards > .card .meta > a:not(.ui):hover,
1157-
.ui.card .meta > a:not(.ui):hover {
1158-
color: var(--color-text);
1159-
}
1160-
1161-
.ui.cards a.card:hover,
1162-
a.ui.card:hover {
1163-
border: 1px solid var(--color-secondary);
1164-
background: var(--color-card);
1165-
}
1166-
1167-
.ui.cards > .card > .extra,
1168-
.ui.card > .extra {
1169-
color: var(--color-text);
1170-
border-top-color: var(--color-secondary-light-1) !important;
1171-
}
1172-
1173-
.ui.three.cards {
1174-
margin-left: -1em;
1175-
margin-right: -1em;
1176-
}
1177-
1178-
.ui.three.cards > .card {
1179-
width: calc(33.33333333333333% - 2em);
1180-
margin-left: 1em;
1181-
margin-right: 1em;
1182-
}
1183-
11841049
.ui.comments .comment .text {
11851050
margin: 0;
11861051
}

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "./modules/tippy.css";
1111
@import "./modules/modal.css";
1212
@import "./modules/breadcrumb.css";
13+
@import "./modules/card.css";
1314
@import "./code/linebutton.css";
1415
@import "./markup/content.css";
1516
@import "./markup/codecopy.css";

‎web_src/css/modules/card.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/* Below styles are a subset of the full fomantic card styles which are */
2+
/* needed to get all current uses of fomantic cards working. */
3+
/* TODO: remove all these styles and use custom styling instead */
4+
5+
.ui.card:last-child {
6+
margin-bottom: 0;
7+
}
8+
.ui.card:first-child {
9+
margin-top: 0;
10+
}
11+
12+
.ui.cards > .card,
13+
.ui.card {
14+
display: flex;
15+
flex-direction: column;
16+
max-width: 100%;
17+
width: 290px;
18+
min-height: 0;
19+
padding: 0;
20+
background: var(--color-card);
21+
border: 1px solid var(--color-secondary);
22+
box-shadow: none;
23+
word-wrap: break-word;
24+
}
25+
26+
.ui.card {
27+
margin: 1em 0;
28+
}
29+
30+
.ui.cards {
31+
display: flex;
32+
margin: -0.875em -0.5em;
33+
flex-wrap: wrap;
34+
}
35+
36+
.ui.cards > .card {
37+
display: flex;
38+
margin: 0.875em 0.5em;
39+
float: none;
40+
}
41+
42+
.ui.cards > .card > .content,
43+
.ui.card > .content {
44+
border-top: 1px solid var(--color-secondary);
45+
max-width: 100%;
46+
padding: 1em;
47+
font-size: 1em;
48+
}
49+
50+
.ui.cards > .card > .content > .meta + .description,
51+
.ui.cards > .card > .content > .header + .description,
52+
.ui.card > .content > .meta + .description,
53+
.ui.card > .content > .header + .description {
54+
margin-top: .5em;
55+
}
56+
57+
.ui.cards > .card > .content > .header:not(.ui),
58+
.ui.card > .content > .header:not(.ui) {
59+
font-weight: 500;
60+
font-size: 1.28571429em;
61+
margin-top: -.21425em;
62+
line-height: 1.28571429em;
63+
}
64+
65+
.ui.cards > .card > .content:first-child,
66+
.ui.card > .content:first-child {
67+
border-top: none;
68+
border-radius: var(--border-radius) var(--border-radius) 0 0;
69+
}
70+
71+
.ui.cards > .card > :last-child,
72+
.ui.card > :last-child {
73+
border-radius: 0 0 var(--border-radius) var(--border-radius);
74+
}
75+
76+
.ui.cards > .card > :only-child,
77+
.ui.card > :only-child {
78+
border-radius: var(--border-radius) !important;
79+
}
80+
81+
.ui.cards > .card > .extra,
82+
.ui.card > .extra,
83+
.ui.cards > .card > .extra a:not(.ui),
84+
.ui.card > .extra a:not(.ui) {
85+
color: var(--color-text);
86+
}
87+
88+
.ui.cards > .card > .extra a:not(.ui):hover,
89+
.ui.card > .extra a:not(.ui):hover {
90+
color: var(--color-primary);
91+
}
92+
93+
.ui.cards > .card > .content > .header,
94+
.ui.card > .content > .header {
95+
color: var(--color-text);
96+
}
97+
98+
.ui.cards > .card > .content > .description,
99+
.ui.card > .content > .description {
100+
color: var(--color-text);
101+
}
102+
103+
.ui.cards > .card .meta > a:not(.ui),
104+
.ui.card .meta > a:not(.ui) {
105+
color: var(--color-text-light-2);
106+
}
107+
108+
.ui.cards > .card .meta > a:not(.ui):hover,
109+
.ui.card .meta > a:not(.ui):hover {
110+
color: var(--color-text);
111+
}
112+
113+
.ui.cards a.card:hover,
114+
a.ui.card:hover {
115+
border: 1px solid var(--color-secondary);
116+
background: var(--color-card);
117+
}
118+
119+
.ui.cards > .card > .extra,
120+
.ui.card > .extra {
121+
color: var(--color-text);
122+
border-top-color: var(--color-secondary-light-1) !important;
123+
}
124+
125+
.ui.three.cards {
126+
margin-left: -1em;
127+
margin-right: -1em;
128+
}
129+
130+
.ui.three.cards > .card {
131+
width: calc(33.33333333333333% - 2em);
132+
margin-left: 1em;
133+
margin-right: 1em;
134+
}

0 commit comments

Comments
 (0)