Direction Styles

Sassyons provides styles the for directions: top, right, bottom, left in a variety of units:

You can use vw with right and left
You can use vh with top and bottom
Example = the top-50 class name will produce top: 50%
Example = the left-100vw class name will produce left: 100vw

All directions

Class	Properties
⟨direction⟩-0	⟨direction⟩: 0; }
⟨direction⟩-50	⟨direction⟩: 50%; }
⟨direction⟩-100	⟨direction⟩: 100%; }
⟨direction⟩-initial	⟨direction⟩: initial; }

`top` & `bottom`

Class	Properties
top-50vw	top: 50vw
top-100vw	top: 100vw
bottom-50vw	bottom: 50vw
bottom-100vw	bottom: 100vw

`left` & `right`

Class	Properties
left-50vh	left: 50vh
left-100vh	left: 100vh
right-50vh	right: 50vh
right-100vh	right: 100vh