Last active
November 9, 2016 15:16
-
-
Save hayatbiralem/736d4004c9d5acd57582a499ae235e54 to your computer and use it in GitHub Desktop.
[utilities.spacing] improve list definitions and let vertical/horizontal directions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| > 1% | |
| last 2 versions |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| For this issue: https://github.com/inuitcss/inuitcss/issues/228 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.21) | |
| // Compass (v1.0.3) | |
| // sass-mq (v3.2.5) | |
| // ---- | |
| @import "mq"; | |
| $inuit-global-spacing-unit: 24px; | |
| $inuit-global-spacing-unit-tiny: 6px; | |
| $inuit-global-spacing-unit-small: 12px; | |
| $inuit-global-spacing-unit-large: 48px; | |
| $inuit-global-spacing-unit-huge: 96px; | |
| /* ========================================================================== | |
| #SPACING | |
| ========================================================================== */ | |
| /** | |
| * Utility classes to put specific spacing values onto elements. The below loop | |
| * will generate us a suite of classes like: | |
| * | |
| * .u-margin-top {} | |
| * .u-padding-left-large {} | |
| * .u-margin-right-small {} | |
| * .u-padding {} | |
| * .u-padding-right-none {} | |
| */ | |
| /* stylelint-disable string-quotes */ | |
| $inuit-spacing-properties: ( | |
| 'padding': 'padding', | |
| 'margin': 'margin', | |
| ) !default; | |
| $inuit-spacing-directions: ( | |
| null: null, | |
| '-top' : '-top', | |
| '-right' : '-right', | |
| '-bottom' : '-bottom', | |
| '-left' : '-left', | |
| '-horizontal': '-left' '-right', // optional but possible, use it if you want | |
| '-vertical' : '-top' '-bottom', // optional but possible, use it if you want | |
| ) !default; | |
| $inuit-spacing-sizes: ( | |
| null: $inuit-global-spacing-unit, | |
| '-tiny': $inuit-global-spacing-unit-tiny, | |
| '-small': $inuit-global-spacing-unit-small, | |
| '-large': $inuit-global-spacing-unit-large, | |
| '-huge': $inuit-global-spacing-unit-huge, | |
| '-none': 0 | |
| ) !default; | |
| @each $property-namespace, $property in $inuit-spacing-properties { | |
| @each $direction-namespace, $direction in $inuit-spacing-directions { | |
| @each $size-namespace, $value in $inuit-spacing-sizes { | |
| .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} { | |
| @if type-of($direction) == 'list' { | |
| @each $sub-direction in $direction { | |
| #{$property}#{$sub-direction}: $value !important; | |
| } | |
| } @else { | |
| #{$property}#{$direction}: $value !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* stylelint-enable string-quotes */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================================== | |
| #SPACING | |
| ========================================================================== */ | |
| /** | |
| * Utility classes to put specific spacing values onto elements. The below loop | |
| * will generate us a suite of classes like: | |
| * | |
| * .u-margin-top {} | |
| * .u-padding-left-large {} | |
| * .u-margin-right-small {} | |
| * .u-padding {} | |
| * .u-padding-right-none {} | |
| */ | |
| /* stylelint-disable string-quotes */ | |
| .u-padding { | |
| padding: 24px !important; | |
| } | |
| .u-padding-tiny { | |
| padding: 6px !important; | |
| } | |
| .u-padding-small { | |
| padding: 12px !important; | |
| } | |
| .u-padding-large { | |
| padding: 48px !important; | |
| } | |
| .u-padding-huge { | |
| padding: 96px !important; | |
| } | |
| .u-padding-none { | |
| padding: 0 !important; | |
| } | |
| .u-padding-top { | |
| padding-top: 24px !important; | |
| } | |
| .u-padding-top-tiny { | |
| padding-top: 6px !important; | |
| } | |
| .u-padding-top-small { | |
| padding-top: 12px !important; | |
| } | |
| .u-padding-top-large { | |
| padding-top: 48px !important; | |
| } | |
| .u-padding-top-huge { | |
| padding-top: 96px !important; | |
| } | |
| .u-padding-top-none { | |
| padding-top: 0 !important; | |
| } | |
| .u-padding-right { | |
| padding-right: 24px !important; | |
| } | |
| .u-padding-right-tiny { | |
| padding-right: 6px !important; | |
| } | |
| .u-padding-right-small { | |
| padding-right: 12px !important; | |
| } | |
| .u-padding-right-large { | |
| padding-right: 48px !important; | |
| } | |
| .u-padding-right-huge { | |
| padding-right: 96px !important; | |
| } | |
| .u-padding-right-none { | |
| padding-right: 0 !important; | |
| } | |
| .u-padding-bottom { | |
| padding-bottom: 24px !important; | |
| } | |
| .u-padding-bottom-tiny { | |
| padding-bottom: 6px !important; | |
| } | |
| .u-padding-bottom-small { | |
| padding-bottom: 12px !important; | |
| } | |
| .u-padding-bottom-large { | |
| padding-bottom: 48px !important; | |
| } | |
| .u-padding-bottom-huge { | |
| padding-bottom: 96px !important; | |
| } | |
| .u-padding-bottom-none { | |
| padding-bottom: 0 !important; | |
| } | |
| .u-padding-left { | |
| padding-left: 24px !important; | |
| } | |
| .u-padding-left-tiny { | |
| padding-left: 6px !important; | |
| } | |
| .u-padding-left-small { | |
| padding-left: 12px !important; | |
| } | |
| .u-padding-left-large { | |
| padding-left: 48px !important; | |
| } | |
| .u-padding-left-huge { | |
| padding-left: 96px !important; | |
| } | |
| .u-padding-left-none { | |
| padding-left: 0 !important; | |
| } | |
| .u-padding-horizontal { | |
| padding-left: 24px !important; | |
| padding-right: 24px !important; | |
| } | |
| .u-padding-horizontal-tiny { | |
| padding-left: 6px !important; | |
| padding-right: 6px !important; | |
| } | |
| .u-padding-horizontal-small { | |
| padding-left: 12px !important; | |
| padding-right: 12px !important; | |
| } | |
| .u-padding-horizontal-large { | |
| padding-left: 48px !important; | |
| padding-right: 48px !important; | |
| } | |
| .u-padding-horizontal-huge { | |
| padding-left: 96px !important; | |
| padding-right: 96px !important; | |
| } | |
| .u-padding-horizontal-none { | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| } | |
| .u-padding-vertical { | |
| padding-top: 24px !important; | |
| padding-bottom: 24px !important; | |
| } | |
| .u-padding-vertical-tiny { | |
| padding-top: 6px !important; | |
| padding-bottom: 6px !important; | |
| } | |
| .u-padding-vertical-small { | |
| padding-top: 12px !important; | |
| padding-bottom: 12px !important; | |
| } | |
| .u-padding-vertical-large { | |
| padding-top: 48px !important; | |
| padding-bottom: 48px !important; | |
| } | |
| .u-padding-vertical-huge { | |
| padding-top: 96px !important; | |
| padding-bottom: 96px !important; | |
| } | |
| .u-padding-vertical-none { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .u-margin { | |
| margin: 24px !important; | |
| } | |
| .u-margin-tiny { | |
| margin: 6px !important; | |
| } | |
| .u-margin-small { | |
| margin: 12px !important; | |
| } | |
| .u-margin-large { | |
| margin: 48px !important; | |
| } | |
| .u-margin-huge { | |
| margin: 96px !important; | |
| } | |
| .u-margin-none { | |
| margin: 0 !important; | |
| } | |
| .u-margin-top { | |
| margin-top: 24px !important; | |
| } | |
| .u-margin-top-tiny { | |
| margin-top: 6px !important; | |
| } | |
| .u-margin-top-small { | |
| margin-top: 12px !important; | |
| } | |
| .u-margin-top-large { | |
| margin-top: 48px !important; | |
| } | |
| .u-margin-top-huge { | |
| margin-top: 96px !important; | |
| } | |
| .u-margin-top-none { | |
| margin-top: 0 !important; | |
| } | |
| .u-margin-right { | |
| margin-right: 24px !important; | |
| } | |
| .u-margin-right-tiny { | |
| margin-right: 6px !important; | |
| } | |
| .u-margin-right-small { | |
| margin-right: 12px !important; | |
| } | |
| .u-margin-right-large { | |
| margin-right: 48px !important; | |
| } | |
| .u-margin-right-huge { | |
| margin-right: 96px !important; | |
| } | |
| .u-margin-right-none { | |
| margin-right: 0 !important; | |
| } | |
| .u-margin-bottom { | |
| margin-bottom: 24px !important; | |
| } | |
| .u-margin-bottom-tiny { | |
| margin-bottom: 6px !important; | |
| } | |
| .u-margin-bottom-small { | |
| margin-bottom: 12px !important; | |
| } | |
| .u-margin-bottom-large { | |
| margin-bottom: 48px !important; | |
| } | |
| .u-margin-bottom-huge { | |
| margin-bottom: 96px !important; | |
| } | |
| .u-margin-bottom-none { | |
| margin-bottom: 0 !important; | |
| } | |
| .u-margin-left { | |
| margin-left: 24px !important; | |
| } | |
| .u-margin-left-tiny { | |
| margin-left: 6px !important; | |
| } | |
| .u-margin-left-small { | |
| margin-left: 12px !important; | |
| } | |
| .u-margin-left-large { | |
| margin-left: 48px !important; | |
| } | |
| .u-margin-left-huge { | |
| margin-left: 96px !important; | |
| } | |
| .u-margin-left-none { | |
| margin-left: 0 !important; | |
| } | |
| .u-margin-horizontal { | |
| margin-left: 24px !important; | |
| margin-right: 24px !important; | |
| } | |
| .u-margin-horizontal-tiny { | |
| margin-left: 6px !important; | |
| margin-right: 6px !important; | |
| } | |
| .u-margin-horizontal-small { | |
| margin-left: 12px !important; | |
| margin-right: 12px !important; | |
| } | |
| .u-margin-horizontal-large { | |
| margin-left: 48px !important; | |
| margin-right: 48px !important; | |
| } | |
| .u-margin-horizontal-huge { | |
| margin-left: 96px !important; | |
| margin-right: 96px !important; | |
| } | |
| .u-margin-horizontal-none { | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; | |
| } | |
| .u-margin-vertical { | |
| margin-top: 24px !important; | |
| margin-bottom: 24px !important; | |
| } | |
| .u-margin-vertical-tiny { | |
| margin-top: 6px !important; | |
| margin-bottom: 6px !important; | |
| } | |
| .u-margin-vertical-small { | |
| margin-top: 12px !important; | |
| margin-bottom: 12px !important; | |
| } | |
| .u-margin-vertical-large { | |
| margin-top: 48px !important; | |
| margin-bottom: 48px !important; | |
| } | |
| .u-margin-vertical-huge { | |
| margin-top: 96px !important; | |
| margin-bottom: 96px !important; | |
| } | |
| .u-margin-vertical-none { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } | |
| /* stylelint-enable string-quotes */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| For this issue: https://github.com/inuitcss/inuitcss/issues/228 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment