Skip to content

Commit

Permalink
Merge pull request #10451 from SassNinja/feature/offcanvas-iterate-si…
Browse files Browse the repository at this point in the history 
…zes-map

Iterate over off-canvas sizes map
  • Loading branch information
@kball
kball committed Jul 25, 2017
1 parent 68685f7 commit 909cf94
Showing 1 changed file with 60 additions and 60 deletions.
120 changes: 60 additions & 60 deletions scss/components/_off-canvas.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,25 +196,24 @@ $maincontent-class: 'off-canvas-content' !default;
@if $position == left {
top: 0;
left: 0;
width: map-get($sizes, small);
height: 100%;

transform: translateX(-(map-get($sizes, small)));
overflow-y: auto;

@include breakpoint(medium) {
width: map-get($sizes, medium);
transform: translateX(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
width: $size;
transform: translateX(-$size);
}
}

// Sets the position for nested off-canvas element
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
transform: translateX(-(map-get($sizes, small)));

@include breakpoint(medium) {
transform: translateX(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateX(-$size);
}
}

&.is-transition-overlap.is-open {
transform: translate(0, 0);
}
Expand All @@ -223,35 +222,35 @@ $maincontent-class: 'off-canvas-content' !default;
// Sets the open position for the content
@at-root .#{$maincontent-class}.is-open-#{$position} {
&.has-transition-push {
transform: translateX(map-get($sizes, small));
@include breakpoint(medium) {
transform: translateX(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateX($size);
}
}
}
}
}
@else if $position == right {
top: 0;
right: 0;
width: map-get($sizes, small);
height: 100%;

transform: translateX(map-get($sizes, small));
overflow-y: auto;

@include breakpoint(medium) {
width: map-get($sizes, medium);
transform: translateX(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
width: $size;
transform: translateX($size);
}
}

// Sets the position for nested off-canvas element
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
transform: translateX(map-get($sizes, small));

@include breakpoint(medium) {
transform: translateX(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateX($size);
}
}

&.is-transition-overlap.is-open {
transform: translate(0, 0);
}
Expand All @@ -260,9 +259,10 @@ $maincontent-class: 'off-canvas-content' !default;
// Sets the open position for the content
@at-root .#{$maincontent-class}.is-open-#{$position} {
&.has-transition-push {
transform: translateX(-(map-get($sizes, small)));
@include breakpoint(medium) {
transform: translateX(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateX(-$size);
}
}
}
}
Expand All @@ -271,24 +271,22 @@ $maincontent-class: 'off-canvas-content' !default;
top: 0;
left: 0;
width: 100%;
height: map-get($sizes, small);

transform: translateY(-(map-get($sizes, small)));
overflow-x: auto;

@include breakpoint(medium) {
height: map-get($sizes, medium);
transform: translateY(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
height: $size;
transform: translateY(-$size);
}
}

// Sets the position for nested off-canvas element
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
transform: translateY(-(map-get($sizes, small)));

@include breakpoint(medium) {
transform: translateY(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateY(-$size);
}
}

&.is-transition-overlap.is-open {
transform: translate(0, 0);
}
Expand All @@ -297,9 +295,10 @@ $maincontent-class: 'off-canvas-content' !default;
// Sets the open position for the content
@at-root .#{$maincontent-class}.is-open-#{$position} {
&.has-transition-push {
transform: translateY(map-get($sizes, small));
@include breakpoint(medium) {
transform: translateY(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateY($size);
}
}
}
}
Expand All @@ -308,24 +307,22 @@ $maincontent-class: 'off-canvas-content' !default;
bottom: 0;
left: 0;
width: 100%;
height: map-get($sizes, small);

transform: translateY(map-get($sizes, small));
overflow-x: auto;

@include breakpoint(medium) {
height: map-get($sizes, medium);
transform: translateY(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
height: $size;
transform: translateY($size);
}
}

// Sets the position for nested off-canvas element
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
transform: translateY(map-get($sizes, small));

@include breakpoint(medium) {
transform: translateY(map-get($sizes, medium));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateY($size);
}
}

&.is-transition-overlap.is-open {
transform: translate(0, 0);
}
Expand All @@ -334,9 +331,10 @@ $maincontent-class: 'off-canvas-content' !default;
// Sets the open position for the content
@at-root .#{$maincontent-class}.is-open-#{$position} {
&.has-transition-push {
transform: translateY(-(map-get($sizes, small)));
@include breakpoint(medium) {
transform: translateY(-(map-get($sizes, medium)));
@each $name, $size in $sizes {
@include breakpoint($name) {
transform: translateY(-$size);
}
}
}
}
Expand Down Expand Up @@ -405,17 +403,19 @@ $content: $maincontent-class
}

@at-root .#{$content}.has-reveal-#{$position} {
margin-#{$position}: map-get($offcanvas-sizes, small);
@include breakpoint(medium) {
margin-#{$position}: map-get($offcanvas-sizes, medium);
@each $name, $size in $offcanvas-sizes {
@include breakpoint($name) {
margin-#{$position}: $size;
}
}
}

// backwards compatibility (prior to v6.4)
& ~ .#{$content} {
margin-#{$position}: map-get($offcanvas-sizes, small);
@include breakpoint(medium) {
margin-#{$position}: map-get($offcanvas-sizes, medium);
@each $name, $size in $offcanvas-sizes {
@include breakpoint($name) {
margin-#{$position}: $size;
}
}
}
}
Expand Down

0 comments on commit 909cf94

Please sign in to comment.