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

//! ### 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%",
//!             }
//!         }
//!     )
//! }
//! ```