1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

//! ### Size Units
//!
//! #### Auto
//! Will use it's inner children as size, so in this case, the `rect` width will be equivalent to the width of `label`:
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "auto",
//!             height: "33",
//!             label {
//!                 "hello!"
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! ##### Logical pixels
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "50",
//!         height: "33"
//!     })
//! }
//! ```
//!
//! ##### Parent percentage
//! Relative percentage to the parent equivalent value.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "50%",  // Half the parent
//!         height: "75%"  // 3/4 the parent
//!     })
//! }
//! ```
//!
//! ##### `calc()`
//!
//! For more complex logic you can use the `calc()` function.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent
//!         height: "calc(100% - 10)"      // 100% of the parent minus 10
//!     })
//! }
//! ```
//!
//! #### fill
//! Use the remaining available space from the parent area:
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "100%",
//!             height: "100%",
//!             rect {
//!                 height: "200",
//!                 width: "100%",
//!             }
//!             rect {
//!                 height: "fill", // This is the same as calc(100% - 200)
//!                 width: "100%",
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! #### fill-min
//! Will have the same size of the biggest sibling element inside a container who has `content: fit`.
//! For an example, see `content`.
//!
//! #### Viewport percentage
//! Relative percentage to the viewport (Window) equivalent value.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "200",
//!             height: "200",
//!             rect {
//!                 height: "25v", // 25% of the window height no matter what height the parent has.
//!                 width: "100%",
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! #### Flex Factor
//!
//! When being a children of an element with `content: flex` you may change the growth factor of the size attributes.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             content: "flex",
//!             width: "200",
//!             height: "200",
//!             rect {
//!                 height: "flex(1)",
//!                 width: "100%",
//!                 background: "red"
//!             }
//!             rect {
//!                 height: "flex(3)",
//!                 width: "100%",
//!                 background: "blue"
//!             }
//!         }
//!     )
//! }
//! ```