402 lines
5.3 KiB
CSS
402 lines
5.3 KiB
CSS
/**
|
|
* CSS spacing classes
|
|
*
|
|
* vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
|
|
* T D S
|
|
*
|
|
* T - type
|
|
* - values: p (padding), m (margin)
|
|
*
|
|
* D - direction
|
|
* - values:
|
|
* t (top), r (right), b (bottom), l (left),
|
|
* a (all), x (both left & right), y (both top & bottom)
|
|
*
|
|
* S - size
|
|
* - values:
|
|
* none,
|
|
* auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
|
|
* xs (extra small),
|
|
* sm (small),
|
|
* md (medium),
|
|
* lg (large),
|
|
* xl (extra large)
|
|
*/
|
|
|
|
/* ++++++++++++++++++++++++++++++++++++++++++++++++ Padding */
|
|
|
|
.vn-pa-none {
|
|
padding: 0;
|
|
}
|
|
.vn-pl-none {
|
|
padding-left: 0;
|
|
}
|
|
.vn-pr-none {
|
|
padding-right: 0;
|
|
}
|
|
.vn-pt-none {
|
|
padding-top: 0;
|
|
}
|
|
.vn-pb-none {
|
|
padding-bottom: 0;
|
|
}
|
|
.vn-py-none {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.vn-px-none {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.vn-pa-xs {
|
|
padding: 4px;
|
|
}
|
|
.vn-pl-xs {
|
|
padding-left: 4px;
|
|
}
|
|
.vn-pr-xs {
|
|
padding-right: 4px;
|
|
}
|
|
.vn-pt-xs {
|
|
padding-top: 4px;
|
|
}
|
|
.vn-pb-xs {
|
|
padding-bottom: 4px;
|
|
}
|
|
.vn-py-xs {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
.vn-px-xs {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Small */
|
|
|
|
.vn-pa-sm {
|
|
padding: 8px;
|
|
}
|
|
.vn-pl-sm {
|
|
padding-left: 8px;
|
|
}
|
|
.vn-pr-sm {
|
|
padding-right: 8px;
|
|
}
|
|
.vn-pt-sm {
|
|
padding-top: 8px;
|
|
}
|
|
.vn-pb-sm {
|
|
padding-bottom: 8px;
|
|
}
|
|
.vn-py-sm {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.vn-px-sm {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
/* Medium */
|
|
|
|
.vn-pa-md {
|
|
padding: 16px;
|
|
}
|
|
.vn-pl-md {
|
|
padding-left: 16px;
|
|
}
|
|
.vn-pr-md {
|
|
padding-right: 16px;
|
|
}
|
|
.vn-pt-md {
|
|
padding-top: 16px;
|
|
}
|
|
.vn-pb-md {
|
|
padding-bottom: 16px;
|
|
}
|
|
.vn-py-md {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.vn-px-md {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
/* Medium-Large */
|
|
|
|
.vn-pa-ml {
|
|
padding: 32px;
|
|
}
|
|
.vn-pl-ml {
|
|
padding-left: 32px;
|
|
}
|
|
.vn-pr-ml {
|
|
padding-right: 32px;
|
|
}
|
|
.vn-pt-ml {
|
|
padding-top: 32px;
|
|
}
|
|
.vn-pb-ml {
|
|
padding-bottom: 32px;
|
|
}
|
|
.vn-py-ml {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
.vn-px-ml {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
/* Large */
|
|
|
|
.vn-pa-lg {
|
|
padding: 64px;
|
|
}
|
|
.vn-pl-lg {
|
|
padding-left: 64px;
|
|
}
|
|
.vn-pr-lg {
|
|
padding-right: 64px;
|
|
}
|
|
.vn-pt-lg {
|
|
padding-top: 64px;
|
|
}
|
|
.vn-pb-lg {
|
|
padding-bottom: 64px;
|
|
}
|
|
.vn-py-lg {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
.vn-px-lg {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
/* Extra large */
|
|
|
|
.vn-pa-xl {
|
|
padding: 100px;
|
|
}
|
|
.vn-pl-xl {
|
|
padding-left: 100px;
|
|
}
|
|
.vn-pr-xl {
|
|
padding-right: 100px;
|
|
}
|
|
.vn-pt-xl {
|
|
padding-top: 100px;
|
|
}
|
|
.vn-pb-xl {
|
|
padding-bottom: 100px;
|
|
}
|
|
.vn-py-xl {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.vn-px-xl {
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
}
|
|
|
|
/* ++++++++++++++++++++++++++++++++++++++++++++++++ Margin */
|
|
|
|
/* None */
|
|
|
|
.vn-ma-none {
|
|
padding: 0;
|
|
}
|
|
.vn-ml-none {
|
|
padding-left: 0;
|
|
}
|
|
.vn-mr-none {
|
|
padding-right: 0;
|
|
}
|
|
.vn-mt-none {
|
|
padding-top: 0;
|
|
}
|
|
.vn-mb-none {
|
|
padding-bottom: 0;
|
|
}
|
|
.vn-my-none {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.vn-mx-none {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Auto */
|
|
|
|
.vn-ml-none {
|
|
padding-left: auto;
|
|
}
|
|
.vn-mr-none {
|
|
padding-right: auto;
|
|
}
|
|
.vn-mx-none {
|
|
padding-left: auto;
|
|
padding-right: auto;
|
|
}
|
|
|
|
/* Extra small */
|
|
|
|
.vn-ma-xs {
|
|
margin: 4px;
|
|
}
|
|
.vn-mt-xs {
|
|
margin-top: 4px;
|
|
}
|
|
.vn-ml-xs {
|
|
margin-left: 4px;
|
|
}
|
|
.vn-mr-xs {
|
|
margin-right: 4px;
|
|
}
|
|
.vn-mb-xs {
|
|
margin-bottom: 4px;
|
|
}
|
|
.vn-my-xs {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.vn-mx-xs {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Small */
|
|
|
|
.vn-ma-sm {
|
|
margin: 8px;
|
|
}
|
|
.vn-mt-sm {
|
|
margin-top: 8px;
|
|
}
|
|
.vn-ml-sm {
|
|
margin-left: 8px;
|
|
}
|
|
.vn-mr-sm {
|
|
margin-right: 8px;
|
|
}
|
|
.vn-mb-sm {
|
|
margin-bottom: 8px;
|
|
}
|
|
.vn-my-sm {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.vn-mx-sm {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Medium */
|
|
|
|
.vn-ma-md {
|
|
margin: 16px;
|
|
}
|
|
.vn-mt-md {
|
|
margin-top: 16px;
|
|
}
|
|
.vn-ml-md {
|
|
margin-left: 16px;
|
|
}
|
|
.vn-mr-md {
|
|
margin-right: 16px;
|
|
}
|
|
.vn-mb-md {
|
|
margin-bottom: 16px;
|
|
}
|
|
.vn-my-md {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.vn-mx-md {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
/* Medium-Large */
|
|
|
|
.vn-ma-ml {
|
|
margin: 32px;
|
|
}
|
|
.vn-mt-ml {
|
|
margin-top: 32px;
|
|
}
|
|
.vn-ml-ml {
|
|
margin-left: 32px;
|
|
}
|
|
.vn-mr-ml {
|
|
margin-right: 32px;
|
|
}
|
|
.vn-mb-ml {
|
|
margin-bottom: 32px;
|
|
}
|
|
.vn-my-ml {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.vn-mx-ml {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
/* Large */
|
|
|
|
.vn-ma-lg {
|
|
margin: 64px;
|
|
}
|
|
.vn-mt-lg {
|
|
margin-top: 64px;
|
|
}
|
|
.vn-ml-lg {
|
|
margin-left: 64px;
|
|
}
|
|
.vn-mr-lg {
|
|
margin-right: 64px;
|
|
}
|
|
.vn-mb-lg {
|
|
margin-bottom: 64px;
|
|
}
|
|
.vn-my-lg {
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
.vn-mx-lg {
|
|
margin-left: 64px;
|
|
margin-right: 64px;
|
|
}
|
|
|
|
/* Extra large */
|
|
|
|
.vn-ma-xl {
|
|
margin: 100px;
|
|
}
|
|
.vn-mt-xl {
|
|
margin-top: 100px;
|
|
}
|
|
.vn-ml-xl {
|
|
margin-left: 100px;
|
|
}
|
|
.vn-mr-xl {
|
|
margin-right: 100px;
|
|
}
|
|
.vn-mb-xl {
|
|
margin-bottom: 100px;
|
|
}
|
|
.vn-my-xl {
|
|
margin-top: 100px;
|
|
margin-bottom: 100px;
|
|
}
|
|
.vn-mx-xl {
|
|
margin-left: 100px;
|
|
margin-right: 100px;
|
|
}
|