From dae0af1fd2499a2eca2becbbec13356a27c4e81c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 24 Sep 2017 01:25:07 +0200 Subject: Change mobile layout breakpoint from 1024px to 630px (#5063) 630px = Drawer + 1 Column --- app/javascript/styles/components.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'app/javascript/styles/components.scss') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 62c9b0066..b6cf920b4 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -222,7 +222,7 @@ } .dropdown--active::after { - @media screen and (min-width: 1025px) { + @media screen and (min-width: 631px) { content: ""; display: block; position: absolute; @@ -1474,7 +1474,7 @@ } } -@media screen and (max-width: 1024px) { +@media screen and (max-width: 630px) { .column, .drawer { width: 100%; @@ -1491,7 +1491,7 @@ } } -@media screen and (min-width: 1025px) { +@media screen and (min-width: 631px) { .columns-area { padding: 0; } @@ -1605,7 +1605,7 @@ &:hover, &:focus, &:active { - @media screen and (min-width: 1025px) { + @media screen and (min-width: 631px) { background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1625,7 +1625,7 @@ } } -@media screen and (min-width: 1025px) { +@media screen and (min-width: 631px) { .tabs-bar { display: none; } @@ -4037,7 +4037,7 @@ noscript { 100% { opacity: 1; } } -@media screen and (max-width: 1024px) and (max-height: 400px) { +@media screen and (max-width: 630px) and (max-height: 400px) { $duration: 400ms; $delay: 100ms; -- cgit