Skip to main content

dioxus_element_plug/styles/
css_snippets.rs

1//! # CSS Snippets
2//!
3//! Reusable CSS snippets for Element Plus components.
4
5/// CSS Reset snippet
6pub fn css_reset() -> &'static str {
7    r#"
8/* CSS Reset */
9* {
10    margin: 0;
11    padding: 0;
12    box-sizing: border-box;
13}
14
15*:before, *:after {
16    box-sizing: inherit;
17}
18"#
19}
20
21/// Basic utility classes
22pub fn utility_classes() -> &'static str {
23    r#"
24/* Basic utilities */
25.clearfix::before,
26.clearfix::after {
27    display: table;
28    content: "";
29}
30
31.clearfix::after {
32    clear: both;
33}
34
35.pull-left {
36    float: left;
37}
38
39.pull-right {
40    float: right;
41}
42
43.text-center {
44    text-align: center;
45}
46
47.text-left {
48    text-align: left;
49}
50
51.text-right {
52    text-align: right;
53}
54"#
55}
56
57/// Grid system snippet
58pub fn grid_system() -> &'static str {
59    r#"
60/* Grid System */
61.el-row {
62    display: flex;
63    flex-wrap: wrap;
64}
65
66.el-col {
67    position: relative;
68    max-width: 100%;
69    min-height: 1px;
70}
71
72/* Column widths */
73.el-col-1 { width: 4.1666666667%; }
74.el-col-2 { width: 8.3333333333%; }
75.el-col-3 { width: 12.5%; }
76.el-col-4 { width: 16.6666666667%; }
77.el-col-5 { width: 20.8333333333%; }
78.el-col-6 { width: 25%; }
79.el-col-7 { width: 29.1666666667%; }
80.el-col-8 { width: 33.3333333333%; }
81.el-col-9 { width: 37.5%; }
82.el-col-10 { width: 41.6666666667%; }
83.el-col-11 { width: 45.8333333333%; }
84.el-col-12 { width: 50%; }
85.el-col-13 { width: 54.1666666667%; }
86.el-col-14 { width: 58.3333333333%; }
87.el-col-15 { width: 62.5%; }
88.el-col-16 { width: 66.6666666667%; }
89.el-col-17 { width: 70.8333333333%; }
90.el-col-18 { width: 75%; }
91.el-col-19 { width: 79.1666666667%; }
92.el-col-20 { width: 83.3333333333%; }
93.el-col-21 { width: 87.5%; }
94.el-col-22 { width: 91.6666666667%; }
95.el-col-23 { width: 95.8333333333%; }
96.el-col-24 { width: 100%; }
97"#
98}