Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(layout): device size attributes should not set max-width or max-h…
…eight

do not specify max-height or max-width for **.layout-column** and **.layout-row** media breakpoints; as these incorrectly limited the size of the container.

> Consider below where `<xxx>` is the display breakpoints sm, md, lg, gt-sm, etc.

Breaking Changes

Before

```css
.layout-colum > .flex-<xxx> { max-height : <percentage>; }
.layout-row > .flex-<xxx> { max-width : <percentage>; }
```

now

```css
.layout-colum > .flex-<xxx> {  }
.layout-row > .flex-<xxx> {  }
```
  • Loading branch information
ThomasBurleson committed Sep 5, 2015
1 parent 65d0db5 commit 8b210c3
Showing 1 changed file with 9 additions and 20 deletions.
29 changes: 9 additions & 20 deletions src/core/services/layout/layout.scss
Expand Up @@ -157,36 +157,25 @@
.#{$flexName}-#{$i * 5} {
flex: 0 0 #{$i * 5 + '%'};
}
.layout-row > .#{$flexName}-#{$i * 5} {
max-width: #{$i * 5 + '%'};
}
.layout-column > .#{$flexName}-#{$i * 5} {
max-height: #{$i * 5 + '%'};
}
.layout-row > .#{$flexName}-#{$i * 5} { }
.layout-column > .#{$flexName}-#{$i * 5} { }
}

.#{$flexName}-33, .#{$flexName}-34 {
flex: 0 0 33.33%;
flex: 0 0 34%;
}
.#{$flexName}-66, .#{$flexName}-67 {
flex: 0 0 66.66%;
flex: 0 0 66%;

}

.layout-row {
> .#{$flexName}-33, > .#{$flexName}-34 {
max-width: 33.33%;
}
> .#{$flexName}-66, > .#{$flexName}-67 {
max-width: 66.66%;
}
> .#{$flexName}-33, > .#{$flexName}-34 { }
> .#{$flexName}-66, > .#{$flexName}-67 { }
}
.layout-column {
> .#{$flexName}-33, > .#{$flexName}-34 {
max-height: 33.33%;
}
> .#{$flexName}-66, > .#{$flexName}-67 {
max-height: 66.66%;
}
> .#{$flexName}-33, > .#{$flexName}-34 { }
> .#{$flexName}-66, > .#{$flexName}-67 { }
}
}

Expand Down

0 comments on commit 8b210c3

Please sign in to comment.