diff options
-rw-r--r-- | web/cobrands/sass/_layout.scss | 40 |
1 files changed, 32 insertions, 8 deletions
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 7e56d31bd..cfa0852a7 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -5,8 +5,10 @@ $layout_front_stats_color: $primary !default; $mappage-header-height: 4em !default; $mappage-sidebar-width: 29em; $mappage-sidebar-padding: 1em; -$mappage-with-notes-sidebar-width: 44em; -$mappage-with-actions-sidebar-width: 58em; +$mappage-notes-width: 15em; +$mappage-actions-width: 25em; +$mappage-sidebar-width--medium: 24em; +$mappage-actions-width--medium: 20em; .internal-link-fixed-header { display: block; @@ -353,11 +355,15 @@ body.mappage.admin { margin: 0; .with-notes & { - #{$left}: $mappage-with-notes-sidebar-width; + #{$left}: $mappage-sidebar-width + $mappage-notes-width; } .with-actions & { - #{$left}: $mappage-with-actions-sidebar-width; + #{$left}: $mappage-sidebar-width + $mappage-actions-width; + + @media (max-width: 79em) { + #{$left}: $mappage-sidebar-width--medium + $mappage-actions-width--medium; + } } } @@ -374,20 +380,24 @@ body.mappage.admin { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); .with-notes & { - width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2)); + width: (($mappage-sidebar-width + $mappage-notes-width) - ($mappage-sidebar-padding * 2)); // TODO: Should have a bitmap image fallback for old browsers!! background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); } .with-actions & { - width: $mappage-with-actions-sidebar-width; + width: $mappage-sidebar-width + $mappage-actions-width; max-width: 100%; // Secondary column will squish on screens 768-960px padding: 0; // Padding will be handled by children of .two_column_sidebar &:after { display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar } + + @media (max-width: 79em) { + width: $mappage-sidebar-width--medium + $mappage-actions-width--medium; + } } // Chrome/Safari count padding-bottom as part of the scrollable content in @@ -435,13 +445,27 @@ body.mappage.admin { #side-report { width: $mappage-sidebar-width; @include flex(0 0 auto); + + @media (max-width: 79em) { + width: $mappage-sidebar-width--medium; + } + } + + // Line up edge of .shadow-wrap with edge of #side-report + .shadow-wrap { + width: $mappage-sidebar-width; + + @media (max-width: 79em) { + width: $mappage-sidebar-width--medium; + } } - // No flexbox in IE8, so we settle for floating the columns instead. + // No flexbox in IE8-9, so we settle for floating the columns instead. // They will no longer stretch the full height of the sidebar, and the // width of #side-report will no longer match the width of .shadow-wrap // when a scrollbar is present. - .iel8 & { + .iel8 &, + .ie9 & { @include clearfix(); & > * { |