From 21abd5474937256965f35fde940b4a0735cd9caa Mon Sep 17 00:00:00 2001 From: Randy Askin Date: Tue, 18 Jul 2017 13:14:59 -0700 Subject: [PATCH] remove inuit responsive --- _trumps.spacing-responsive.scss | 674 ++++++++---------- bower.json | 7 +- ...spacing-responsive-design-demo-styles.html | 2 +- demo/index.html | 5 +- 4 files changed, 284 insertions(+), 404 deletions(-) diff --git a/_trumps.spacing-responsive.scss b/_trumps.spacing-responsive.scss index 69f3352..d042b72 100644 --- a/_trumps.spacing-responsive.scss +++ b/_trumps.spacing-responsive.scss @@ -11,8 +11,7 @@ * `.u-[breakpoint]-(m|p)(t|r|b|l|h|v)(-|+|0) {}` = utility - breakpoint - margin/padding top/right/bottom/left/horizontal/vertical less/more/none */ -@import "inuit-responsive-settings/_settings.responsive.scss"; -@import "inuit-responsive-tools/_tools.responsive.scss"; +@import 'px-helpers-design/_generic.helpers.scss'; @import 'px-spacing-design/_trumps.spacing.scss'; /// Produce CSS for default margin sizes? @@ -112,491 +111,374 @@ $inuit-enable-responsive-paddings--rtl : false !default; /// @type String [null] - Keep a global variable for the spacing alias so the @content passed into the `inuit-generate-spacing` mixin will generate correctly. $inuit-generate-spacing-alias : null; - + /// @name inuit-generate-spacing /// @output Internally used mixin to quickly generate our different variants based upon the breakpoints defined in `settings.responsive`. @mixin inuit-generate-spacing() { - - // Loop through our previously-defined breakpoints. - @each $breakpoint in $breakpoints { - - $inuit-generate-spacing-alias: nth($breakpoint, 1) !global; - $inuit-generate-spacing-condition: nth($breakpoint, 2); - - // This isn’t ideal, but we definitely don’t want to generate widths - // for retina devices. Exclude retina media-qeuries manually. - @if ($inuit-generate-spacing-alias != "retina") { - - @include media-query($inuit-generate-spacing-alias) { - @content; - } // Close media query. - - } // Close retina check. - - } // Close breakpoints loop. - + // Loop through our previously-defined breakpoints. + @each $breakpoint in $breakpoints { + $inuit-generate-spacing-alias: nth($breakpoint, 1) !global; + $inuit-generate-spacing-condition: nth($breakpoint, 2); + // This isn’t ideal, but we definitely don’t want to generate widths + // for retina devices. Exclude retina media-qeuries manually. + @if ($inuit-generate-spacing-alias != "retina") { + @include media-query($inuit-generate-spacing-alias) { + @content; + } // Close media query. + } // Close retina check. + } // Close breakpoints loop. } @if ($inuit-enable-responsive-margins == true) { - - /** - * Margin helper classes. - * - * Add margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m { margin: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt { margin-top: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr { margin-right: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb { margin-bottom: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml { margin-left: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh { margin-right: $inuit-base-spacing-unit !important; margin-left: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv { margin-top: $inuit-base-spacing-unit !important; margin-bottom: $inuit-base-spacing-unit !important; } - - } - + /** + * Add margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m { margin: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt { margin-top: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr { margin-right: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb { margin-bottom: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml { margin-left: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh { margin-right: $inuit-base-spacing-unit !important; margin-left: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv { margin-top: $inuit-base-spacing-unit !important; margin-bottom: $inuit-base-spacing-unit !important; } + } } - @if ($inuit-enable-responsive-margins--tiny == true) { - - /** - * Add tiny margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m-- { margin: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt-- { margin-top: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr-- { margin-right: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb-- { margin-bottom: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml-- { margin-left: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh-- { margin-right: $inuit-base-spacing-unit--tiny !important; margin-left: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv-- { margin-top: $inuit-base-spacing-unit--tiny !important; margin-bottom: $inuit-base-spacing-unit--tiny !important; } - - } - + /** + * Add tiny margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m-- { margin: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt-- { margin-top: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr-- { margin-right: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb-- { margin-bottom: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml-- { margin-left: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh-- { margin-right: $inuit-base-spacing-unit--tiny !important; margin-left: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv-- { margin-top: $inuit-base-spacing-unit--tiny !important; margin-bottom: $inuit-base-spacing-unit--tiny !important; } + } } - @if ($inuit-enable-responsive-margins--small == true) { - - /** - * Add small margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m- { margin: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt- { margin-top: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr- { margin-right: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb- { margin-bottom: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml- { margin-left: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh- { margin-right: $inuit-base-spacing-unit--small !important; margin-left: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv- { margin-top: $inuit-base-spacing-unit--small !important; margin-bottom: $inuit-base-spacing-unit--small !important; } - - } - + /** + * Add small margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m- { margin: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt- { margin-top: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr- { margin-right: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb- { margin-bottom: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml- { margin-left: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh- { margin-right: $inuit-base-spacing-unit--small !important; margin-left: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv- { margin-top: $inuit-base-spacing-unit--small !important; margin-bottom: $inuit-base-spacing-unit--small !important; } + } } - @if ($inuit-enable-responsive-margins--large == true) { - - /** - * Add large margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m\00002b { margin: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt\00002b { margin-top: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b { margin-right: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb\00002b { margin-bottom: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b { margin-left: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh\00002b { margin-right: $inuit-base-spacing-unit--large !important; margin-left: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv\00002b { margin-top: $inuit-base-spacing-unit--large !important; margin-bottom: $inuit-base-spacing-unit--large !important; } - - } - + /** + * Add large margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m\00002b { margin: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt\00002b { margin-top: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b { margin-right: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb\00002b { margin-bottom: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b { margin-left: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh\00002b { margin-right: $inuit-base-spacing-unit--large !important; margin-left: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv\00002b { margin-top: $inuit-base-spacing-unit--large !important; margin-bottom: $inuit-base-spacing-unit--large !important; } + } } - @if ($inuit-enable-responsive-margins--huge == true) { - - /** - * Add huge margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m\00002b\00002b { margin: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt\00002b\00002b { margin-top: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b\00002b { margin-right: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb\00002b\00002b { margin-bottom: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b\00002b { margin-left: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh\00002b\00002b { margin-right: $inuit-base-spacing-unit--huge !important; margin-left: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv\00002b\00002b { margin-top: $inuit-base-spacing-unit--huge !important; margin-bottom: $inuit-base-spacing-unit--huge !important; } - - } - + /** + * Add huge margins. + */ + @include inuit-generate-spacing() { + + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m\00002b\00002b { margin: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt\00002b\00002b { margin-top: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b\00002b { margin-right: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb\00002b\00002b { margin-bottom: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b\00002b { margin-left: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh\00002b\00002b { margin-right: $inuit-base-spacing-unit--huge !important; margin-left: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv\00002b\00002b { margin-top: $inuit-base-spacing-unit--huge !important; margin-bottom: $inuit-base-spacing-unit--huge !important; } + } } - @if ($inuit-enable-responsive-margins--none == true) { - - /** - * Remove margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m0 { margin: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt0 { margin-top: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr0 { margin-right: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb0 { margin-bottom: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml0 { margin-left: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh0 { margin-right: 0 !important; margin-left: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv0 { margin-top: 0 !important; margin-bottom: 0 !important; } - - } - + /** + * Remove margins. + */ + @include inuit-generate-spacing() { + + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-m0 { margin: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mt0 { margin-top: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr0 { margin-right: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mb0 { margin-bottom: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml0 { margin-left: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mh0 { margin-right: 0 !important; margin-left: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mv0 { margin-top: 0 !important; margin-bottom: 0 !important; } + } } - @if ($inuit-enable-responsive-margins--negative == true) { - - /** - * Negative margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m { margin: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt { margin-top: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr { margin-right: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb { margin-bottom: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml { margin-left: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh { margin-right: -$inuit-base-spacing-unit !important; margin-left: -$inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv { margin-top: -$inuit-base-spacing-unit !important; margin-bottom: -$inuit-base-spacing-unit !important; } - - } - + /** + * Negative margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m { margin: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt { margin-top: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr { margin-right: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb { margin-bottom: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml { margin-left: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh { margin-right: -$inuit-base-spacing-unit !important; margin-left: -$inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv { margin-top: -$inuit-base-spacing-unit !important; margin-bottom: -$inuit-base-spacing-unit !important; } + } } @if ($inuit-enable-responsive-margins--negative-tiny == true) { - - /** - * Tiny negative margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m-- { margin: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt-- { margin-top: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr-- { margin-right: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb-- { margin-bottom: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml-- { margin-left: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh-- { margin-right: -$inuit-base-spacing-unit--tiny !important; margin-left: -$inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv-- { margin-top: -$inuit-base-spacing-unit--tiny !important; margin-bottom: -$inuit-base-spacing-unit--tiny !important; } - - } - + /** + * Tiny negative margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m-- { margin: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt-- { margin-top: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr-- { margin-right: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb-- { margin-bottom: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml-- { margin-left: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh-- { margin-right: -$inuit-base-spacing-unit--tiny !important; margin-left: -$inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv-- { margin-top: -$inuit-base-spacing-unit--tiny !important; margin-bottom: -$inuit-base-spacing-unit--tiny !important; } + } } - @if ($inuit-enable-responsive-margins--negative-small == true) { - - /** - * Small negative margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m- { margin: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt- { margin-top: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr- { margin-right: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb- { margin-bottom: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml- { margin-left: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh- { margin-right: -$inuit-base-spacing-unit--small !important; margin-left: -$inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv- { margin-top: -$inuit-base-spacing-unit--small !important; margin-bottom: -$inuit-base-spacing-unit--small !important; } - - } - + /** + * Small negative margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m- { margin: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt- { margin-top: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr- { margin-right: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb- { margin-bottom: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml- { margin-left: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh- { margin-right: -$inuit-base-spacing-unit--small !important; margin-left: -$inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv- { margin-top: -$inuit-base-spacing-unit--small !important; margin-bottom: -$inuit-base-spacing-unit--small !important; } + } } - @if ($inuit-enable-responsive-margins--negative-large == true) { - - /** - * Large negative margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m\00002b { margin: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt\00002b { margin-top: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr\00002b { margin-right: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb\00002b { margin-bottom: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml\00002b { margin-left: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh\00002b { margin-right: -$inuit-base-spacing-unit--large !important; margin-left: -$inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv\00002b { margin-top: -$inuit-base-spacing-unit--large !important; margin-bottom: -$inuit-base-spacing-unit--large !important; } - - } - + /** + * Large negative margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m\00002b { margin: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt\00002b { margin-top: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr\00002b { margin-right: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb\00002b { margin-bottom: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml\00002b { margin-left: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh\00002b { margin-right: -$inuit-base-spacing-unit--large !important; margin-left: -$inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv\00002b { margin-top: -$inuit-base-spacing-unit--large !important; margin-bottom: -$inuit-base-spacing-unit--large !important; } + } } - @if ($inuit-enable-responsive-margins--negative-huge == true) { - - /** - * Huge negative margins. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m\00002b\00002b { margin: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt\00002b\00002b { margin-top: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr\00002b\00002b { margin-right: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb\00002b\00002b { margin-bottom: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml\00002b\00002b { margin-left: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh\00002b\00002b { margin-right: -$inuit-base-spacing-unit--huge !important; margin-left: -$inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv\00002b\00002b { margin-top: -$inuit-base-spacing-unit--huge !important; margin-bottom: -$inuit-base-spacing-unit--huge !important; } - - } - + /** + * Huge negative margins. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--m\00002b\00002b { margin: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mt\00002b\00002b { margin-top: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mr\00002b\00002b { margin-right: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mb\00002b\00002b { margin-bottom: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--ml\00002b\00002b { margin-left: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mh\00002b\00002b { margin-right: -$inuit-base-spacing-unit--huge !important; margin-left: -$inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}--mv\00002b\00002b { margin-top: -$inuit-base-spacing-unit--huge !important; margin-bottom: -$inuit-base-spacing-unit--huge !important; } + } } - @if ($inuit-enable-responsive-margins--rtl == true) { - - /** - * Switch left and right margins when right-to-left language settings in use. - */ - + /** + * Switch left and right margins when right-to-left language settings in use. + */ [dir=rtl] { .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr { margin-right: 0 !important; margin-left: $inuit-base-spacing-unit !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml { margin-right: $inuit-base-spacing-unit !important; margin-left: 0 !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr- { margin-right: 0 !important; margin-left: $inuit-base-spacing-unit--small !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml- { margin-right: $inuit-base-spacing-unit--small !important; margin-left: 0 !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr-- { margin-right: 0 !important; margin-left: $inuit-base-spacing-unit--tiny !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml-- { margin-right: $inuit-base-spacing-unit--tiny !important; margin-left: 0 !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b { margin-right: 0 !important; margin-left: $inuit-base-spacing-unit--large !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b { margin-right: $inuit-base-spacing-unit--large !important; margin-left: 0 !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-mr\00002b\00002b { margin-right: 0 !important; margin-left: $inuit-base-spacing-unit--huge !important; - } + } .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ml\00002b\00002b { margin-right: $inuit-base-spacing-unit--huge !important; margin-left: 0 !important; - } } - + } } - @if ($inuit-enable-responsive-paddings == true) { - - /** - * Padding helper classes. - * - * Add paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p { padding: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt { padding-top: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr { padding-right: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb { padding-bottom: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl { padding-left: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph { padding-right: $inuit-base-spacing-unit !important; padding-left: $inuit-base-spacing-unit !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv { padding-top: $inuit-base-spacing-unit !important; padding-bottom: $inuit-base-spacing-unit !important; } - - } - + /** + * Add paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p { padding: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt { padding-top: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr { padding-right: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb { padding-bottom: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl { padding-left: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph { padding-right: $inuit-base-spacing-unit !important; padding-left: $inuit-base-spacing-unit !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv { padding-top: $inuit-base-spacing-unit !important; padding-bottom: $inuit-base-spacing-unit !important; } + } } - @if ($inuit-enable-responsive-paddings--tiny == true) { - - /** - * Add tiny paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p-- { padding: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt-- { padding-top: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr-- { padding-right: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb-- { padding-bottom: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl-- { padding-left: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph-- { padding-right: $inuit-base-spacing-unit--tiny !important; padding-left: $inuit-base-spacing-unit--tiny !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv-- { padding-top: $inuit-base-spacing-unit--tiny !important; padding-bottom: $inuit-base-spacing-unit--tiny !important; } - - } - + /** + * Add tiny paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p-- { padding: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt-- { padding-top: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr-- { padding-right: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb-- { padding-bottom: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl-- { padding-left: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph-- { padding-right: $inuit-base-spacing-unit--tiny !important; padding-left: $inuit-base-spacing-unit--tiny !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv-- { padding-top: $inuit-base-spacing-unit--tiny !important; padding-bottom: $inuit-base-spacing-unit--tiny !important; } + } } - @if ($inuit-enable-responsive-paddings--small == true) { - - /** - * Add small paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p- { padding: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt- { padding-top: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr- { padding-right: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb- { padding-bottom: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl- { padding-left: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph- { padding-right: $inuit-base-spacing-unit--small !important; padding-left: $inuit-base-spacing-unit--small !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv- { padding-top: $inuit-base-spacing-unit--small !important; padding-bottom: $inuit-base-spacing-unit--small !important; } - - } - + /** + * Add small paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p- { padding: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt- { padding-top: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr- { padding-right: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb- { padding-bottom: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl- { padding-left: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph- { padding-right: $inuit-base-spacing-unit--small !important; padding-left: $inuit-base-spacing-unit--small !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv- { padding-top: $inuit-base-spacing-unit--small !important; padding-bottom: $inuit-base-spacing-unit--small !important; } + } } - @if ($inuit-enable-responsive-paddings--large == true) { - - /** - * Add large paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p\00002b { padding: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt\00002b { padding-top: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b { padding-right: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb\00002b { padding-bottom: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b { padding-left: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph\00002b { padding-right: $inuit-base-spacing-unit--large !important; padding-left: $inuit-base-spacing-unit--large !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv\00002b { padding-top: $inuit-base-spacing-unit--large !important; padding-bottom: $inuit-base-spacing-unit--large !important; } - - } - + /** + * Add large paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p\00002b { padding: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt\00002b { padding-top: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b { padding-right: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb\00002b { padding-bottom: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b { padding-left: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph\00002b { padding-right: $inuit-base-spacing-unit--large !important; padding-left: $inuit-base-spacing-unit--large !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv\00002b { padding-top: $inuit-base-spacing-unit--large !important; padding-bottom: $inuit-base-spacing-unit--large !important; } + } } - @if ($inuit-enable-responsive-paddings--huge == true) { - - /** - * Add huge paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p\00002b\00002b { padding: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt\00002b\00002b { padding-top: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b\00002b { padding-right: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb\00002b\00002b { padding-bottom: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b\00002b { padding-left: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph\00002b\00002b { padding-right: $inuit-base-spacing-unit--huge !important; padding-left: $inuit-base-spacing-unit--huge !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv\00002b\00002b { padding-top: $inuit-base-spacing-unit--huge !important; padding-bottom: $inuit-base-spacing-unit--huge !important; } - - } - + /** + * Add huge paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p\00002b\00002b { padding: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt\00002b\00002b { padding-top: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b\00002b { padding-right: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb\00002b\00002b { padding-bottom: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b\00002b { padding-left: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph\00002b\00002b { padding-right: $inuit-base-spacing-unit--huge !important; padding-left: $inuit-base-spacing-unit--huge !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv\00002b\00002b { padding-top: $inuit-base-spacing-unit--huge !important; padding-bottom: $inuit-base-spacing-unit--huge !important; } + } } - @if ($inuit-enable-responsive-paddings--none == true) { - - /** - * Remove paddings. - */ - - @include inuit-generate-spacing() { - - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p0 { padding: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt0 { padding-top: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr0 { padding-right: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb0 { padding-bottom: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl0 { padding-left: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph0 { padding-right: 0 !important; padding-left: 0 !important; } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv0 { padding-top: 0 !important; padding-bottom: 0 !important; } - - } - + /** + * Remove paddings. + */ + @include inuit-generate-spacing() { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-p0 { padding: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pt0 { padding-top: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr0 { padding-right: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pb0 { padding-bottom: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl0 { padding-left: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-ph0 { padding-right: 0 !important; padding-left: 0 !important; } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pv0 { padding-top: 0 !important; padding-bottom: 0 !important; } + } } - @if ($inuit-enable-paddings--rtl == true) { - - /** - * Switch left and right paddings when right-to-left language settings in use. - */ - - [dir=rtl] { - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr { - padding-right: 0 !important; - padding-left: $inuit-base-spacing-unit !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl { - padding-right: $inuit-base-spacing-unit !important; - padding-left: 0 !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr- { - padding-right: 0 !important; - padding-left: $inuit-base-spacing-unit--small !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl- { - padding-right: $inuit-base-spacing-unit--small !important; - adding-left: 0 !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr-- { - padding-right: 0 !important; - padding-left: $inuit-base-spacing-unit--tiny !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl-- { - padding-right: $inuit-base-spacing-unit--tiny !important; - padding-left: 0 !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b { - padding-right: 0 !important; - padding-left: $inuit-base-spacing-unit--large !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b { - padding-right: $inuit-base-spacing-unit--large !important; - padding-left: 0 !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b\00002b { - padding-right: 0 !important; - padding-left: $inuit-base-spacing-unit--huge !important; - } - .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b\00002b { - padding-right: $inuit-base-spacing-unit--huge !important; - padding-left: 0 !important; - } + /** + * Switch left and right paddings when right-to-left language settings in use. + */ + [dir=rtl] { + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr { + padding-right: 0 !important; + padding-left: $inuit-base-spacing-unit !important; } - -} \ No newline at end of file + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl { + padding-right: $inuit-base-spacing-unit !important; + padding-left: 0 !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr- { + padding-right: 0 !important; + padding-left: $inuit-base-spacing-unit--small !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl- { + padding-right: $inuit-base-spacing-unit--small !important; + adding-left: 0 !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr-- { + padding-right: 0 !important; + padding-left: $inuit-base-spacing-unit--tiny !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl-- { + padding-right: $inuit-base-spacing-unit--tiny !important; + padding-left: 0 !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b { + padding-right: 0 !important; + padding-left: $inuit-base-spacing-unit--large !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b { + padding-right: $inuit-base-spacing-unit--large !important; + padding-left: 0 !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pr\00002b\00002b { + padding-right: 0 !important; + padding-left: $inuit-base-spacing-unit--huge !important; + } + .#{$inuit-spacing-namespace}u-#{$inuit-generate-spacing-alias}-pl\00002b\00002b { + padding-right: $inuit-base-spacing-unit--huge !important; + padding-left: 0 !important; + } + } +} diff --git a/bower.json b/bower.json index 48591f3..155ecc5 100644 --- a/bower.json +++ b/bower.json @@ -34,9 +34,8 @@ "LICENSE.md" ], "dependencies": { - "inuit-responsive-settings": "~0.1.5", - "inuit-responsive-tools": "~0.1.2", - "px-spacing-design": "^1.0.0" + "px-spacing-design": "^1.0.0", + "px-helpers-design": "^1.0.0" }, "devDependencies": { "px-starter-kit-design": "^1.0.0", @@ -45,4 +44,4 @@ "resolutions": { "webcomponentsjs": "^0.7.24" } -} \ No newline at end of file +} diff --git a/css/px-spacing-responsive-design-demo-styles.html b/css/px-spacing-responsive-design-demo-styles.html index a6b74f9..056401c 100644 --- a/css/px-spacing-responsive-design-demo-styles.html +++ b/css/px-spacing-responsive-design-demo-styles.html @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 9beea00..b6ebf61 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,8 +19,7 @@ sassdoc-path="sassdoc.json" dependencies='[ "https://github.com/PredixDev/px-spacing-design", - "https://github.com/inuitcss/tools.responsive", - "https://github.com/inuitcss/settings.responsive" + "https://github.com/PredixDev/px-helpers-design" ]' selected-options="{{selectedOptions}}"> @@ -120,7 +119,7 @@
-For each "breakpoint" set in InuitCSS's [settings.responsive $breakpoint Sass list](https://github.com/inuitcss/settings.responsive/blob/master/_settings.responsive.scss#L10-L17), a class will be appended i.e. u-[breakpoint-name]-classname, where the classname follows the following convention. Margin dimensions are set in the Predix UI [spacing-design](https://github.com/PredixDev/px-spacing-design) module. +For each "breakpoint" set in px-helpers-design [$breakpoint list](https://github.com/PredixDev/px-helpers-design/blob/master/_generic.helpers.scss#L23-L30), a class will be appended i.e. u-[breakpoint-name]-classname, where the classname follows the following convention. Margin dimensions are set in the Predix UI [spacing-design](https://github.com/PredixDev/px-spacing-design) module. ``` .u-[breakpoint]-[negative][type][direction][size] ```