Skip to content

Commit b0ff370

Browse files
UnderlineWordsUnderlineWords
committed
006
1 parent 3821fa0 commit b0ff370

1 file changed

Lines changed: 177 additions & 0 deletions

File tree

‎utilities/background-color/index.html‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,8 @@ <h2 class="display-flex mb-10">
553553
<th>Class</th>
554554
</tr>
555555
</thead>
556+
557+
<!-- bg-primary -->
556558
<tbody>
557559
<tr>
558560
<td class="weight-bold">Primary</td>
@@ -633,6 +635,7 @@ <h2 class="display-flex mb-10">
633635
</tr>
634636
</tbody>
635637

638+
<!-- bg-success -->
636639
<tbody>
637640
<tr>
638641
<td class="weight-bold">Success</td>
@@ -713,6 +716,7 @@ <h2 class="display-flex mb-10">
713716
</tr>
714717
</tbody>
715718

719+
<!-- bg-error -->
716720
<tbody>
717721
<tr>
718722
<td class="weight-bold">Warning</td>
@@ -793,6 +797,7 @@ <h2 class="display-flex mb-10">
793797
</tr>
794798
</tbody>
795799

800+
<!-- bg-error -->
796801
<tbody>
797802
<tr>
798803
<td class="weight-bold">Error</td>
@@ -873,6 +878,7 @@ <h2 class="display-flex mb-10">
873878
</tr>
874879
</tbody>
875880

881+
<!-- bg-dark -->
876882
<tbody>
877883
<tr>
878884
<td class="weight-bold">Dark</td>
@@ -953,6 +959,7 @@ <h2 class="display-flex mb-10">
953959
</tr>
954960
</tbody>
955961

962+
<!-- bg-grey -->
956963
<tbody>
957964
<tr>
958965
<td class="weight-bold">Grey</td>
@@ -1033,7 +1040,15 @@ <h2 class="display-flex mb-10">
10331040
</tr>
10341041
</tbody>
10351042

1043+
<!-- bg-color -->
10361044
<tbody>
1045+
<tr>
1046+
<td colspan="5">
1047+
<div class="warning small alert center align weight-500">
1048+
Since the default theme's background color is white, it does not include a class for its lighter tones.<br>Therefore, the following light tone classes will not work for <u>default theme</u>.
1049+
</div>
1050+
</td>
1051+
</tr>
10371052
<tr>
10381053
<td class="weight-bold">BG Color</td>
10391054
<td><div class="p-10 bg-color-lighten-5 height-30 bordered">&nbsp;</div></td>
@@ -1104,6 +1119,168 @@ <h2 class="display-flex mb-10">
11041119
<td><div class="p-10 bg-color-darken-50 height-30 bordered">&nbsp;</div></td>
11051120
<td><code>bg-color-darken-50</code></td>
11061121
</tr>
1122+
<tr>
1123+
<td>&nbsp;</td>
1124+
<td></td>
1125+
<td></td>
1126+
<td></td>
1127+
<td></td>
1128+
</tr>
1129+
</tbody>
1130+
1131+
<!-- bg-white -->
1132+
<tbody>
1133+
<tr>
1134+
<td class="weight-bold">White</td>
1135+
<td>-</td>
1136+
<td>-</td>
1137+
<td><div class="p-10 bg-white-darken-5 height-30 bordered">&nbsp;</div></td>
1138+
<td><code>bg-white-darken-5</code></td>
1139+
</tr>
1140+
<tr>
1141+
<td>&nbsp;</td>
1142+
<td>-</td>
1143+
<td>-</td>
1144+
<td><div class="p-10 bg-white-darken-10 height-30 bordered">&nbsp;</div></td>
1145+
<td><code>bg-white-darken-10</code></td>
1146+
</tr>
1147+
<tr>
1148+
<td>&nbsp;</td>
1149+
<td>-</td>
1150+
<td>-</td>
1151+
<td><div class="p-10 bg-white-darken-15 height-30 bordered">&nbsp;</div></td>
1152+
<td><code>bg-white-darken-15</code></td>
1153+
</tr>
1154+
<tr>
1155+
<td>&nbsp;</td>
1156+
<td>-</td>
1157+
<td>-</td>
1158+
<td><div class="p-10 bg-white-darken-20 height-30 bordered">&nbsp;</div></td>
1159+
<td><code>bg-white-darken-20</code></td>
1160+
</tr>
1161+
<tr>
1162+
<td>&nbsp;</td>
1163+
<td>-</td>
1164+
<td>-</td>
1165+
<td><div class="p-10 bg-white-darken-25 height-30 bordered">&nbsp;</div></td>
1166+
<td><code>bg-white-darken-25</code></td>
1167+
</tr>
1168+
<tr>
1169+
<td>&nbsp;</td>
1170+
<td>-</td>
1171+
<td>-</td>
1172+
<td><div class="p-10 bg-white-darken-30 height-30 bordered">&nbsp;</div></td>
1173+
<td><code>bg-white-darken-30</code></td>
1174+
</tr>
1175+
<tr>
1176+
<td>&nbsp;</td>
1177+
<td>-</td>
1178+
<td>-</td>
1179+
<td><div class="p-10 bg-white-darken-35 height-30 bordered">&nbsp;</div></td>
1180+
<td><code>bg-white-darken-35</code></td>
1181+
</tr>
1182+
<tr>
1183+
<td>&nbsp;</td>
1184+
<td>-</td>
1185+
<td>-</td>
1186+
<td><div class="p-10 bg-white-darken-40 height-30 bordered">&nbsp;</div></td>
1187+
<td><code>bg-white-darken-40</code></td>
1188+
</tr>
1189+
<tr>
1190+
<td>&nbsp;</td>
1191+
<td>-</td>
1192+
<td>-</td>
1193+
<td><div class="p-10 bg-white-darken-45 height-30 bordered">&nbsp;</div></td>
1194+
<td><code>bg-white-darken-45</code></td>
1195+
</tr>
1196+
<tr>
1197+
<td>&nbsp;</td>
1198+
<td>-</td>
1199+
<td>-</td>
1200+
<td><div class="p-10 bg-white-darken-50 height-30 bordered">&nbsp;</div></td>
1201+
<td><code>bg-white-darken-50</code></td>
1202+
</tr>
1203+
<tr>
1204+
<td>&nbsp;</td>
1205+
<td></td>
1206+
<td></td>
1207+
<td></td>
1208+
<td></td>
1209+
</tr>
1210+
</tbody>
1211+
1212+
<!-- bg-black -->
1213+
<tbody>
1214+
<tr>
1215+
<td class="weight-bold">Black</td>
1216+
<td><div class="p-10 bg-black-lighten-5 height-30 bordered">&nbsp;</div></td>
1217+
<td><code>bg-black-lighten-5</code></td>
1218+
<td>-</td>
1219+
<td>-</td>
1220+
</tr>
1221+
<tr>
1222+
<td>&nbsp;</td>
1223+
<td><div class="p-10 bg-black-lighten-10 height-30 bordered">&nbsp;</div></td>
1224+
<td><code>bg-black-lighten-10</code></td>
1225+
<td>-</td>
1226+
<td>-</td>
1227+
</tr>
1228+
<tr>
1229+
<td>&nbsp;</td>
1230+
<td><div class="p-10 bg-black-lighten-15 height-30 bordered">&nbsp;</div></td>
1231+
<td><code>bg-black-lighten-15</code></td>
1232+
<td>-</td>
1233+
<td>-</td>
1234+
</tr>
1235+
<tr>
1236+
<td>&nbsp;</td>
1237+
<td><div class="p-10 bg-black-lighten-20 height-30 bordered">&nbsp;</div></td>
1238+
<td><code>bg-black-lighten-20</code></td>
1239+
<td>-</td>
1240+
<td>-</td>
1241+
</tr>
1242+
<tr>
1243+
<td>&nbsp;</td>
1244+
<td><div class="p-10 bg-black-lighten-25 height-30 bordered">&nbsp;</div></td>
1245+
<td><code>bg-black-lighten-25</code></td>
1246+
<td>-</td>
1247+
<td>-</td>
1248+
</tr>
1249+
<tr>
1250+
<td>&nbsp;</td>
1251+
<td><div class="p-10 bg-black-lighten-30 height-30 bordered">&nbsp;</div></td>
1252+
<td><code>bg-black-lighten-30</code></td>
1253+
<td>-</td>
1254+
<td>-</td>
1255+
</tr>
1256+
<tr>
1257+
<td>&nbsp;</td>
1258+
<td><div class="p-10 bg-black-lighten-35 height-30 bordered">&nbsp;</div></td>
1259+
<td><code>bg-black-lighten-35</code></td>
1260+
<td>-</td>
1261+
<td>-</td>
1262+
</tr>
1263+
<tr>
1264+
<td>&nbsp;</td>
1265+
<td><div class="p-10 bg-black-lighten-40 height-30 bordered">&nbsp;</div></td>
1266+
<td><code>bg-black-lighten-40</code></td>
1267+
<td>-</td>
1268+
<td>-</td>
1269+
</tr>
1270+
<tr>
1271+
<td>&nbsp;</td>
1272+
<td><div class="p-10 bg-black-lighten-45 height-30 bordered">&nbsp;</div></td>
1273+
<td><code>bg-black-lighten-45</code></td>
1274+
<td>-</td>
1275+
<td>-</td>
1276+
</tr>
1277+
<tr>
1278+
<td>&nbsp;</td>
1279+
<td><div class="p-10 bg-black-lighten-50 height-30 bordered">&nbsp;</div></td>
1280+
<td><code>bg-black-lighten-50</code></td>
1281+
<td>-</td>
1282+
<td>-</td>
1283+
</tr>
11071284
</tbody>
11081285
</table>
11091286

0 commit comments

Comments
 (0)