source.uim.bootstrap.bs5.demos.utilities.colors source code

1 module source.uim.bootstrap.bs5.demos.utilities.colors;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/colors", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Colors - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto colorExample = demoBs5Example("color", "Color",
20   H5Div(
21     H5P(["text-primary"], "Text primary color."),
22     H5P(["text-secondary"], "Text secondary color."),
23     H5P(["text-success"], "Text success color."),
24     H5P(["text-danger"], "Text danger color."),
25     H5P(["text-warning"], "Text warning color."),
26     H5P(["text-info"], "Text info color."),
27     H5P(["text-light bg-dark"], "Text light color with background dark color."),
28     H5P(["text-dark"], "Text dark color."),
29     H5P(["text-body"], "Text body color."),
30     H5P(["text-muted"], "Text muted color."),
31     H5P(["text-white bg-dark"], "Text white color with background dark color."),
32     H5P(["text-white-50 bg-dark"], "Text white-50 color with background dark color."),
33     H5P(["text-black-50"], "Text black-50 color.")
34   ), ``, ``);
35 
36 auto backgroundExample = demoBs5Example("background", "Background color",
37   H5Div(
38     H5P(["bg-primary text-white p-3"], "Background primary color with text white color."),
39     H5P(["bg-secondary text-white p-3"], "Background secondary color with text white color."),
40     H5P(["bg-success text-white p-3"], "Background success color with text white color."),
41     H5P(["bg-danger text-white p-3"], "Background danger color with text white color."),
42     H5P(["bg-warning text-white p-3"], "Background warning color with text white color."),
43     H5P(["bg-info text-white p-3"], "Background info color with text white color."),
44     H5P(["bg-light text-dark p-3"], "Background light color with text dark color."),
45     H5P(["bg-dark text-white p-3"], "Background dark color with text white color."),
46     H5P(["bg-white text-dark p-3"], "Background white color with text dark color."),
47     H5P(["bg-transparent text-dark p-3"], "Background transparent with text dark color.")
48   ), ``, ``);
49 
50 auto gradientSizeExample = demoBs5Example("gradient", "Background gradient",
51   H5Div(
52     H5P(["bg-primary bg-gradient text-white p-3"], "Background primary color with text white color."),
53     H5P(["bg-secondary bg-gradient text-white p-3"], "Background secondary color with text white color."),
54     H5P(["bg-success bg-gradient text-white p-3"], "Background success color with text white color."),
55     H5P(["bg-danger bg-gradient text-white p-3"], "Background danger color with text white color."),
56     H5P(["bg-warning bg-gradient text-white p-3"], "Background warning color with text white color."),
57     H5P(["bg-info bg-gradient text-white p-3"], "Background info color with text white color."),
58     H5P(["bg-light bg-gradient text-dark p-3"], "Background light color with text dark color."),
59     H5P(["bg-dark bg-gradient text-white p-3"], "Background dark color with text white color.")
60   ), ``, ``);
61 
62       return 
63 H5Main(["style":"margin-top:70px;"], 
64   H5Div(["container-fluid", "mt-3", "bg-light"],
65     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
66     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "colors")),
67   BS5Container(["mt-3"]).row(
68     H5Div(["col-12", "col-lg-2"], 
69       listLevels("basic"),
70       listAreas("basic", "utilities"),
71       listSections("basic", "utilities", "colors")),
72     H5Div(["col-12", "col-lg-8"], 
73       dateInfo(this),
74       H5H2(["display-4"], "Colors"),
75       H5Hr,
76 
77       colorExample,
78       backgroundExample,
79       gradientSizeExample
80 
81     ),
82     H5Div(["col-12", "col-lg-2"]))).toString;
83     }
84   });
85 }