356 lines
5.3 KiB
SCSS
356 lines
5.3 KiB
SCSS
|
/**
|
||
|
|
* 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)
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import "./variables";
|
||
|
|
|
||
|
|
//++++++++++++++++++++++++++++++++++++++++++++++++ Padding
|
||
|
|
|
||
|
|
// None
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Extra small
|
||
|
|
|
||
|
|
.vn-pa-xs {
|
||
|
|
padding: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-pl-xs {
|
||
|
|
padding-left: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-pr-xs {
|
||
|
|
padding-right: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-pt-xs {
|
||
|
|
padding-top: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-pb-xs {
|
||
|
|
padding-bottom: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-py-xs {
|
||
|
|
padding-top: $spacing-xs;
|
||
|
|
padding-bottom: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-px-xs {
|
||
|
|
padding-left: $spacing-xs;
|
||
|
|
padding-right: $spacing-xs;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Small
|
||
|
|
|
||
|
|
.vn-pa-sm {
|
||
|
|
padding: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-pl-sm {
|
||
|
|
padding-left: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-pr-sm {
|
||
|
|
padding-right: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-pt-sm {
|
||
|
|
padding-top: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-pb-sm {
|
||
|
|
padding-bottom: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-py-sm {
|
||
|
|
padding-top: $spacing-sm;
|
||
|
|
padding-bottom: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-px-sm {
|
||
|
|
padding-left: $spacing-sm;
|
||
|
|
padding-right: $spacing-sm;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Medium
|
||
|
|
|
||
|
|
.vn-pa-md {
|
||
|
|
padding: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-pl-md {
|
||
|
|
padding-left: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-pr-md {
|
||
|
|
padding-right: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-pt-md {
|
||
|
|
padding-top: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-pb-md {
|
||
|
|
padding-bottom: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-py-md {
|
||
|
|
padding-top: $spacing-md;
|
||
|
|
padding-bottom: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-px-md {
|
||
|
|
padding-left: $spacing-md;
|
||
|
|
padding-right: $spacing-md;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Large
|
||
|
|
|
||
|
|
.vn-pa-lg {
|
||
|
|
padding: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-pl-lg {
|
||
|
|
padding-left: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-pr-lg {
|
||
|
|
padding-right: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-pt-lg {
|
||
|
|
padding-top: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-pb-lg {
|
||
|
|
padding-bottom: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-py-lg {
|
||
|
|
padding-top: $spacing-lg;
|
||
|
|
padding-bottom: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-px-lg {
|
||
|
|
padding-left: $spacing-lg;
|
||
|
|
padding-right: $spacing-lg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Extra large
|
||
|
|
|
||
|
|
.vn-pa-xl {
|
||
|
|
padding: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-pl-xl {
|
||
|
|
padding-left: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-pr-xl {
|
||
|
|
padding-right: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-pt-xl {
|
||
|
|
padding-top: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-pb-xl {
|
||
|
|
padding-bottom: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-py-xl {
|
||
|
|
padding-top: $spacing-xl;
|
||
|
|
padding-bottom: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-px-xl {
|
||
|
|
padding-left: $spacing-xl;
|
||
|
|
padding-right: $spacing-xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
//++++++++++++++++++++++++++++++++++++++++++++++++ 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: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-mt-xs {
|
||
|
|
margin-top: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-ml-xs {
|
||
|
|
margin-left: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-mr-xs {
|
||
|
|
margin-right: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-mb-xs {
|
||
|
|
margin-bottom: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-my-xs {
|
||
|
|
margin-top: $spacing-xs;
|
||
|
|
margin-bottom: $spacing-xs;
|
||
|
|
}
|
||
|
|
.vn-mx-xs {
|
||
|
|
margin-left: $spacing-xs;
|
||
|
|
margin-right: $spacing-xs;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Small
|
||
|
|
|
||
|
|
.vn-ma-sm {
|
||
|
|
margin: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-mt-sm {
|
||
|
|
margin-top: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-ml-sm {
|
||
|
|
margin-left: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-mr-sm {
|
||
|
|
margin-right: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-mb-sm {
|
||
|
|
margin-bottom: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-my-sm {
|
||
|
|
margin-top: $spacing-sm;
|
||
|
|
margin-bottom: $spacing-sm;
|
||
|
|
}
|
||
|
|
.vn-mx-sm {
|
||
|
|
margin-left: $spacing-sm;
|
||
|
|
margin-right: $spacing-sm;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Medium
|
||
|
|
|
||
|
|
.vn-ma-md {
|
||
|
|
margin: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-mt-md {
|
||
|
|
margin-top: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-ml-md {
|
||
|
|
margin-left: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-mr-md {
|
||
|
|
margin-right: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-mb-md {
|
||
|
|
margin-bottom: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-my-md {
|
||
|
|
margin-top: $spacing-md;
|
||
|
|
margin-bottom: $spacing-md;
|
||
|
|
}
|
||
|
|
.vn-mx-md {
|
||
|
|
margin-left: $spacing-md;
|
||
|
|
margin-right: $spacing-md;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Large
|
||
|
|
|
||
|
|
.vn-ma-lg {
|
||
|
|
margin: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-mt-lg {
|
||
|
|
margin-top: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-ml-lg {
|
||
|
|
margin-left: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-mr-lg {
|
||
|
|
margin-right: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-mb-lg {
|
||
|
|
margin-bottom: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-my-lg {
|
||
|
|
margin-top: $spacing-lg;
|
||
|
|
margin-bottom: $spacing-lg;
|
||
|
|
}
|
||
|
|
.vn-mx-lg {
|
||
|
|
margin-left: $spacing-lg;
|
||
|
|
margin-right: $spacing-lg;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Extra large */
|
||
|
|
|
||
|
|
.vn-ma-xl {
|
||
|
|
margin: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-mt-xl {
|
||
|
|
margin-top: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-ml-xl {
|
||
|
|
margin-left: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-mr-xl {
|
||
|
|
margin-right: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-mb-xl {
|
||
|
|
margin-bottom: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-my-xl {
|
||
|
|
margin-top: $spacing-xl;
|
||
|
|
margin-bottom: $spacing-xl;
|
||
|
|
}
|
||
|
|
.vn-mx-xl {
|
||
|
|
margin-left: $spacing-xl;
|
||
|
|
margin-right: $spacing-xl;
|
||
|
|
}
|