@@ -105,19 +105,19 @@ fn view(model: &Model) -> Node<Msg> {
105
105
// scene container + sky
106
106
div ! [
107
107
style! {
108
- "overflow" => "hidden" ;
109
- "width" => unit!( 100 , %) ;
110
- "position" => "relative" ;
111
- "height" => unit!( 170 , px) ;
112
- "background-color" => "deepskyblue" ;
108
+ St :: Overflow => "hidden" ;
109
+ St :: Width => unit!( 100 , %) ;
110
+ St :: Position => "relative" ;
111
+ St :: Height => unit!( 170 , px) ;
112
+ St :: BackgroundColor => "deepskyblue" ;
113
113
} ,
114
114
// road
115
115
div![ style! {
116
- "width" => unit!( 100 , %) ;
117
- "height" => unit!( 20 , px) ;
118
- "bottom" => 0 ;
119
- "background-color" => "darkgray" ;
120
- "position" => "absolute" ;
116
+ St :: Width => unit!( 100 , %) ;
117
+ St :: Height => unit!( 20 , px) ;
118
+ St :: Bottom => 0 ;
119
+ St :: BackgroundColor => "darkgray" ;
120
+ St :: Position => "absolute" ;
121
121
} ] ,
122
122
view_car( & model. car)
123
123
]
@@ -127,29 +127,29 @@ fn view_car(car: &Car) -> Node<Msg> {
127
127
div ! [
128
128
// car container
129
129
style! {
130
- "width" => unit!( car. width, px) ;
131
- "height" => unit!( car. height, px) ;
132
- "top" => unit!( car. y, px) ;
133
- "left" => unit!( car. x, px) ;
134
- "position" => "absolute" ;
130
+ St :: Width => unit!( car. width, px) ;
131
+ St :: Height => unit!( car. height, px) ;
132
+ St :: Top => unit!( car. y, px) ;
133
+ St :: Left => unit!( car. x, px) ;
134
+ St :: Position => "absolute" ;
135
135
} ,
136
136
// windows
137
137
div![ style! {
138
- "background-color" => "rgb(255,255,255,0.5)" ;
139
- "left" => unit!( car. width * 0.25 , px) ;
140
- "width" => unit!( car. width * 0.5 , px) ;
141
- "height" => unit!( car. height * 0.6 , px) ;
142
- "border-radius" => unit!( 9999 , px) ;
143
- "position" => "absolute" ;
138
+ St :: BackgroundColor => "rgb(255,255,255,0.5)" ;
139
+ St :: Left => unit!( car. width * 0.25 , px) ;
140
+ St :: Width => unit!( car. width * 0.5 , px) ;
141
+ St :: Height => unit!( car. height * 0.6 , px) ;
142
+ St :: BorderRadius => unit!( 9999 , px) ;
143
+ St :: Position => "absolute" ;
144
144
} ] ,
145
145
// body
146
146
div![ style! {
147
- "top" => unit!( car. height * 0.35 , px) ;
148
- "background-color" => car. color;
149
- "width" => unit!( car. width, px) ;
150
- "height" => unit!( car. height * 0.5 , px) ;
151
- "border-radius" => unit!( 9999 , px) ;
152
- "position" => "absolute" ;
147
+ St :: Top => unit!( car. height * 0.35 , px) ;
148
+ St :: BackgroundColor => car. color;
149
+ St :: Width => unit!( car. width, px) ;
150
+ St :: Height => unit!( car. height * 0.5 , px) ;
151
+ St :: BorderRadius => unit!( 9999 , px) ;
152
+ St :: Position => "absolute" ;
153
153
} ] ,
154
154
view_wheel( car. width * 0.15 , car) ,
155
155
view_wheel( car. width * 0.6 , car)
@@ -159,13 +159,13 @@ fn view_car(car: &Car) -> Node<Msg> {
159
159
fn view_wheel ( wheel_x : f64 , car : & Car ) -> Node < Msg > {
160
160
let wheel_radius = car. height * 0.4 ;
161
161
div ! [ style! {
162
- "top" => unit!( car. height * 0.55 , px) ;
163
- "left" => unit!( wheel_x, px) ;
164
- "background-color" => "black" ;
165
- "width" => unit!( wheel_radius, px) ;
166
- "height" => unit!( wheel_radius, px) ;
167
- "border-radius" => unit!( 9999 , px) ;
168
- "position" => "absolute" ;
162
+ St :: Top => unit!( car. height * 0.55 , px) ;
163
+ St :: Left => unit!( wheel_x, px) ;
164
+ St :: BackgroundColor => "black" ;
165
+ St :: Width => unit!( wheel_radius, px) ;
166
+ St :: Height => unit!( wheel_radius, px) ;
167
+ St :: BorderRadius => unit!( 9999 , px) ;
168
+ St :: Position => "absolute" ;
169
169
} ]
170
170
}
171
171
0 commit comments