@@ -105,19 +105,19 @@ fn view(model: &Model) -> Node<Msg> {
105105 // scene container + sky
106106 div ! [
107107 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" ;
113113 } ,
114114 // road
115115 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" ;
121121 } ] ,
122122 view_car( & model. car)
123123 ]
@@ -127,29 +127,29 @@ fn view_car(car: &Car) -> Node<Msg> {
127127 div ! [
128128 // car container
129129 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" ;
135135 } ,
136136 // windows
137137 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" ;
144144 } ] ,
145145 // body
146146 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" ;
153153 } ] ,
154154 view_wheel( car. width * 0.15 , car) ,
155155 view_wheel( car. width * 0.6 , car)
@@ -159,13 +159,13 @@ fn view_car(car: &Car) -> Node<Msg> {
159159fn view_wheel ( wheel_x : f64 , car : & Car ) -> Node < Msg > {
160160 let wheel_radius = car. height * 0.4 ;
161161 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" ;
169169 } ]
170170}
171171
0 commit comments