diff --git a/src/scss/utility-mixins/sizing.scss b/src/scss/utility-mixins/sizing.scss index 64bdcc65d6cc5d0ec5a15cc00c974318401b7d3b..0e14782e3961d73360159bccb49251a570f51292 100644 --- a/src/scss/utility-mixins/sizing.scss +++ b/src/scss/utility-mixins/sizing.scss @@ -206,20 +206,38 @@ } } +@mixin gl-sm-w-half { + @include gl-media-breakpoint-up(sm) { + width: 50%; + } +} + @mixin gl-md-w-auto { @include gl-media-breakpoint-up(md) { width: auto; } } +@mixin gl-md-w-50p { + @include gl-media-breakpoint-up(md) { + width: 50%; + } +} + @mixin gl-lg-w-1px { - @media (min-width: $breakpoint-lg) { + @include gl-media-breakpoint-up(lg) { width: 1px; } } -@mixin gl-md-w-50p { - @include gl-media-breakpoint-up(md) { +@mixin gl-lg-w-auto { + @include gl-media-breakpoint-up(lg) { + width: auto; + } +} + +@mixin gl-lg-w-50p { + @include gl-media-breakpoint-up(lg) { width: 50%; } } diff --git a/src/scss/utility-mixins/spacing.scss b/src/scss/utility-mixins/spacing.scss index 0c11bd4bea9d569dc642585e559b28e5d59a63f2..b6eac140c841f30078b0f3053d54450dbc5cefc6 100644 --- a/src/scss/utility-mixins/spacing.scss +++ b/src/scss/utility-mixins/spacing.scss @@ -821,6 +821,12 @@ } } +@mixin gl-md-ml-3 { + @include gl-media-breakpoint-up(md) { + @include gl-ml-3; + } +} + @mixin gl-md-mr-3 { @include gl-media-breakpoint-up(md) { @include gl-mr-3; @@ -894,18 +900,187 @@ * notes: * - Utilities should strictly follow $gl-spacing-scale */ + +@mixin gl-sm-pt-0 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-0; + } +} + +@mixin gl-sm-pt-1 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-1; + } +} + +@mixin gl-sm-pt-2 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-2; + } +} + +@mixin gl-sm-pt-3 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-3; + } +} + +@mixin gl-sm-pt-4 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-4; + } +} + +@mixin gl-sm-pt-5 { + @include gl-media-breakpoint-down(sm) { + @include gl-pt-5; + } +} + +@mixin gl-sm-pr-0 { + @include gl-media-breakpoint-down(sm) { + @include gl-pr-0; + } +} + +@mixin gl-sm-pr-1 { + @include gl-media-breakpoint-down(sm) { + @include gl-pr-1; + } +} + +@mixin gl-sm-pr-2 { + @include gl-media-breakpoint-down(sm) { + @include gl-pr-2; + } +} + +@mixin gl-sm-pr-3 { + @include gl-media-breakpoint-down(sm) { + @include gl-pr-3; + } +} + +@mixin gl-sm-pr-4 { + @include gl-media-breakpoint-down(sm) { + @include gl-pr-4; + } +} + @mixin gl-sm-pr-5 { @include gl-media-breakpoint-down(sm) { @include gl-pr-5; } } +@mixin gl-sm-pb-0 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-0; + } +} + +@mixin gl-sm-pb-1 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-1; + } +} + +@mixin gl-sm-pb-2 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-2; + } +} + +@mixin gl-sm-pb-3 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-3; + } +} + +@mixin gl-sm-pb-4 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-4; + } +} + +@mixin gl-sm-pb-5 { + @include gl-media-breakpoint-down(sm) { + @include gl-pb-5; + } +} + +@mixin gl-sm-pl-0 { + @include gl-media-breakpoint-down(sm) { + @include gl-pl-0; + } +} + +@mixin gl-sm-pl-1 { + @include gl-media-breakpoint-down(sm) { + @include gl-pl-1; + } +} + +@mixin gl-sm-pl-2 { + @include gl-media-breakpoint-down(sm) { + @include gl-pl-2; + } +} + +@mixin gl-sm-pl-3 { + @include gl-media-breakpoint-down(sm) { + @include gl-pl-3; + } +} + +@mixin gl-sm-pl-4 { + @include gl-media-breakpoint-down(sm) { + @include gl-pl-4; + } +} + @mixin gl-sm-pl-5 { @include gl-media-breakpoint-down(sm) { @include gl-pl-5; } } +@mixin gl-md-pt-0 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-0; + } +} + +@mixin gl-md-pt-1 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-1; + } +} + +@mixin gl-md-pt-2 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-2; + } +} + +@mixin gl-md-pt-3 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-3; + } +} + +@mixin gl-md-pt-4 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-4; + } +} + +@mixin gl-md-pt-5 { + @include gl-media-breakpoint-up(md) { + @include gl-pt-5; + } +} + @mixin gl-md-pr-0 { @include gl-media-breakpoint-up(md) { @include gl-pr-0; @@ -924,24 +1099,240 @@ } } +@mixin gl-md-pr-3 { + @include gl-media-breakpoint-up(md) { + @include gl-pr-3; + } +} + +@mixin gl-md-pr-4 { + @include gl-media-breakpoint-up(md) { + @include gl-pr-4; + } +} + @mixin gl-md-pr-5 { @include gl-media-breakpoint-up(md) { @include gl-pr-5; } } +@mixin gl-md-pb-0 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-0; + } +} + +@mixin gl-md-pb-1 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-1; + } +} + +@mixin gl-md-pb-2 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-2; + } +} + +@mixin gl-md-pb-3 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-3; + } +} + +@mixin gl-md-pb-4 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-4; + } +} + +@mixin gl-md-pb-5 { + @include gl-media-breakpoint-up(md) { + @include gl-pb-5; + } +} + +@mixin gl-md-pl-0 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-0; + } +} + +@mixin gl-md-pl-1 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-1; + } +} + +@mixin gl-md-pl-2 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-2; + } +} + +@mixin gl-md-pl-3 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-3; + } +} + +@mixin gl-md-pl-4 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-4; + } +} + +@mixin gl-md-pl-5 { + @include gl-media-breakpoint-up(md) { + @include gl-pl-5; + } +} + +@mixin gl-lg-pt-0 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-0; + } +} + +@mixin gl-lg-pt-1 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-1; + } +} + +@mixin gl-lg-pt-2 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-2; + } +} + +@mixin gl-lg-pt-3 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-3; + } +} + +@mixin gl-lg-pt-4 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-4; + } +} + +@mixin gl-lg-pt-5 { + @include gl-media-breakpoint-up(lg) { + @include gl-pt-5; + } +} + +@mixin gl-lg-pr-0 { + @include gl-media-breakpoint-up(lg) { + @include gl-pr-0; + } +} + +@mixin gl-lg-pr-1 { + @include gl-media-breakpoint-up(lg) { + @include gl-pr-1; + } +} + +@mixin gl-lg-pr-2 { + @include gl-media-breakpoint-up(lg) { + @include gl-pr-2; + } +} + +@mixin gl-lg-pr-3 { + @include gl-media-breakpoint-up(lg) { + @include gl-pr-3; + } +} + +@mixin gl-lg-pr-4 { + @include gl-media-breakpoint-up(lg) { + @include gl-pr-4; + } +} + @mixin gl-lg-pr-5 { @include gl-media-breakpoint-up(lg) { @include gl-pr-5; } } -@mixin gl-md-pl-3 { - @include gl-media-breakpoint-up(md) { +@mixin gl-lg-pb-0 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-0; + } +} + +@mixin gl-lg-pb-1 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-1; + } +} + +@mixin gl-lg-pb-2 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-2; + } +} + +@mixin gl-lg-pb-3 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-3; + } +} + +@mixin gl-lg-pb-4 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-4; + } +} + +@mixin gl-lg-pb-5 { + @include gl-media-breakpoint-up(lg) { + @include gl-pb-5; + } +} + +@mixin gl-lg-pl-0 { + @include gl-media-breakpoint-up(lg) { + @include gl-pl-0; + } +} + +@mixin gl-lg-pl-1 { + @include gl-media-breakpoint-up(lg) { + @include gl-pl-1; + } +} + +@mixin gl-lg-pl-2 { + @include gl-media-breakpoint-up(lg) { + @include gl-pl-2; + } +} + +@mixin gl-lg-pl-3 { + @include gl-media-breakpoint-up(lg) { @include gl-pl-3; } } +@mixin gl-lg-pl-4 { + @include gl-media-breakpoint-up(lg) { + @include gl-pl-4; + } +} + +@mixin gl-lg-pl-5 { + @include gl-media-breakpoint-up(lg) { + @include gl-pl-5; + } +} + /** * Remove margin and padding from empty elements * to prevent them from inadvertantly taking up