-ma in their class names instead of -pa
The Ueyen navigation bar allows creating a nav-bar with a set of items (linked buttons). The navigation can be set to change its alignment on the different breakpoint
The following selectors class names can be used to add a padding to an element from small -s to huge -h.
un-paThe same result as un-pa-m (Medium padding)
un-pa-sSmall padding - all sides.
un-pa-mMedium padding - all sides
un-pa-lLarge padding - all sides
un-pa-hHuge padding - all sides
un-pa-noRemoves the padding - all sides
The following elements have small to huge padding
Small
Medium
Large
Huge
All the padding basic selectors can be followed by :s to :h (small to
huge) to apply the padding in different breakpoints.
un-pa-s:sSmall padding on larger than Breakpoint Small
un-pa-s:mSmall padding on larger than Breakpoint Large.
un-pa-s:lSmall padding on larger than Breakpoint large.
un-pa-s:hSmall padding on larger than Breakpoint Huge.
un-pa-m:sMedium padding on larger than Breakpoint Small
un-pa-m:mMedium padding on larger than Breakpoint Large.
un-pa-m:lMedium padding on larger than Breakpoint large.
un-pa-m:hMedium padding on larger than Breakpoint Huge.
un-pa-l:sLarge padding on larger than Breakpoint Small
un-pa-l:mLarge padding on larger than Breakpoint Large.
un-pa-l:lLarge padding on larger than Breakpoint large.
un-pa-l:hLarge padding on larger than Breakpoint Huge.
un-pa-h:sHuge padding on larger than Breakpoint Small
un-pa-h:mHuge padding on larger than Breakpoint Large.
un-pa-h:lHuge padding on larger than Breakpoint large.
un-pa-h:hHuge padding on larger than Breakpoint Huge.
The element has the class selectors of un-pa-s un-pa-l:s un-pa-h:h.
un-pa-s Small padding on screens smaller than the breakpoint small (default padding).
un-pa-l:s Large padding on screens larger than the breakpoint small.
un-pa-h:h Huge padding on screens larger than the breakpoint huge.
Padding & Breakpoints
All the basic selectors for padding and margin can be used for a specific direction. See the following class selectors:
un-pa-top-sTop-Small padding
un-pa-top-mTop-Medium padding.
un-pa-top-lTop-Large padding.
un-pa-top-hTop-Huge padding.
un-pa-right-sRight-Small padding
un-pa-right-mRight-Medium padding.
un-pa-right-lRight-Large padding.
un-pa-right-hRight-Huge padding.
un-pa-bottom-sBottom-Small padding
un-pa-bottom-mBottom-Medium padding.
un-pa-bottom-lBottom-Large padding.
un-pa-bottom-hBottom-Huge padding.
un-pa-left-sLeft-Small padding
un-pa-left-mLeft-Medium padding.
un-pa-left-lLeft-Large padding.
un-pa-left-hLeft-Huge padding.
The following elements have top to left padding:
Top Large
Right Medium
Bottom Huge
Left Large
All the directional padding selectors can be followed by :s to :h (small to
huge) to apply the directional padding in different breakpoints.
un-pa-left-s:sLeft Small padding on larger than Breakpoint Small
un-pa-top-l:mTop Large padding on larger than Breakpoint Medium.
un-pa-bottom-h:lBottom Huge padding on larger than Breakpoint large.
un-pa-right-s:hRight Small padding on larger than Breakpoint Huge.
ALL the padding selectors described above can be applied to the children of the targetted element (including the padding-and-breakpoint selectors).
Simply add * after the padding indicator -pa
un-pa*Padding on all the children elements, on all-directions.
un-pa*-topTop padding on all the children elements, on all-directions.
un-pa*-bottom-hBottom Huge padding on all the children elements
un-pa*-right-s:hRight Small padding on all the children elements, larger than Breakpoint Huge.
The following elements are all having a large padding, simply by giving the class name of un-pa*-l to their parent element:
Children element
Children element
Children element
Children element
Children element
Children element
-ma indicator, instead of -pa