From f2dca5578ca9feb1339413b362f09f5ffdf6b509 Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Wed, 2 Mar 2016 14:15:21 +0100
Subject: [PATCH] refs #7094: * fix for media queries, breakpoints
---
themes/foundation5/scss/default.scss | 40 +++++++++----------
.../scss/vendor/foundation/_functions.scss | 6 ++-
2 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/themes/foundation5/scss/default.scss b/themes/foundation5/scss/default.scss
index a1029fdca65..5f4ba55ad5f 100644
--- a/themes/foundation5/scss/default.scss
+++ b/themes/foundation5/scss/default.scss
@@ -116,7 +116,7 @@ ul {
@media only screen and (min-width: 20em) {
/* font-size: 80%;*/ padding: .25em; // Details tab
}
- @media only screen and (min-width: 48rem) {
+ @media only screen and (min-width: $small-breakpoint + em-calc(1)) {
/*@include fs-smaller;*/
@include pad-l-r;
}
@@ -379,9 +379,7 @@ ul.date-range-slider {
// Sticky header, top-bar, search box in top-bar, breadcrumbs
// Do NOT set top-bar height to auto in default or toggles wont work on small devices
.top-bar {
- @media only screen and (min-width: 45rem) {
- height: auto
- }
+ @media only screen and (min-width: $small-breakpoint + em-calc(1)) { height: auto; }
.name {
margin-left: 0;
}
@@ -471,7 +469,7 @@ ul.date-range-slider {
vertical-align: top;
width: 100%;
- @media only screen and (max-width: 767px) {
+ @media only screen and (max-width: $small-breakpoint) {
width: 100%
}
}
@@ -566,7 +564,7 @@ ul.date-range-slider {
.button {
margin-bottom: 0;
// small buttons for mobile
- @media only screen and (max-width: 767px) {
+ @media only screen and (max-width: $small-breakpoint) {
max-width: 50%;
float: left;
}
@@ -575,7 +573,7 @@ ul.date-range-slider {
}
// Inline on larger devices
- @media only screen and (min-width: 48rem) {
+ @media only screen and (min-width: $small-breakpoint + em-calc(1)) {
ul li {
display: inline; // CHECK - FIXME CK
}
@@ -592,8 +590,8 @@ ul.date-range-slider {
input[type="checkbox"] + label{
color: $secondary-color;
}
- // Add sufficient space for selecting on devices up to 768px
- @media only screen and (max-width: 767px) {
+ // Add sufficient space for selecting on devices up to 640px
+ @media only screen and (max-width: $small-breakpoint) {
float: left;
margin-top: 1rem;
}
@@ -648,7 +646,7 @@ ul.date-range-slider {
}
// Inline on larger displays, stacked on small
- @media only screen and (min-width: 48rem) {
+ @media only screen and (min-width: $small-breakpoint + em-calc(1)) {
ul {
display: inline;
@@ -689,7 +687,7 @@ ul.date-range-slider {
}
}
// 786px and above as inline list
- @media only screen and (min-width: 48rem) {
+ @media only screen and (min-width: $small-breakpoint + em-calc(1)) {
li {
border-bottom: none;
border-right: 1px solid $iron;
@@ -745,7 +743,7 @@ ul.date-range-slider {
// Searchbox - END
.grid {
- @media only screen and (max-width: 767px) {
+ @media only screen and (max-width: $small-breakpoint) {
min-height: 250px; // e.g. search/list-grid.phtml
}
}
@@ -779,7 +777,7 @@ ul.date-range-slider {
// Add a border around all subfield groups + padding on small devices
div[id^="search0_"] {
- @media screen and (max-width: 767px) {
+ @media screen and (max-width: $small-breakpoint) {
border: 1px solid $secondary-color;
margin-bottom: 1rem;
padding: .5rem .5rem 0 .5rem;
@@ -798,9 +796,9 @@ ul.date-range-slider {
.close a {
color: #f08a24 !important;
}
- // removal link that appears after 'add group' has been clicked, placement for medium (768px) up
+ // removal link that appears after 'add group' has been clicked, placement for medium (641px) up
// a.group-close {
-// @media screen and (min-width: 48rem) {
+// @media screen and (min-width: $small-breakpoint + em-calc(1)) {
// margin-right: -1rem;
// margin-top: -1.5rem;
// }
@@ -819,7 +817,7 @@ ul.date-range-slider {
// add space between 'add searchfield' and 'matches ...' on small screens
.match {
- @media screen and (max-width: 767px) {
+ @media screen and (max-width: $small-breakpoint) {
margin-top: 1rem;
}
}
@@ -1074,13 +1072,13 @@ button,
// where does the following go best - or leave standard values? - fixme ck
#content {
h2 {
- font-size: 1.6875rem !important;
+ font-size: 1.6875rem ;
}
h3 {
- font-size: 1.375rem !important;
+ font-size: 1.375rem ;
}
h4 {
- font-size: 1.125rem !important;
+ font-size: 1.125rem ;
}
}
// Tabs
@@ -1379,7 +1377,7 @@ $offcanvas-padding: 2em;
.offcanvas-overlay,
.offcanvas-toggle {display: none;}
-@media screen and (max-width: 767px) {
+@media screen and (max-width: $small-breakpoint) {
body.offcanvas {
overflow-x: hidden; /* Prevent scroll on narrow devices */
.sidebar {
@@ -1479,7 +1477,7 @@ $offcanvas-padding: 2em;
}
// display inline on small devices vudl - navigation
.visible-small-inline {
- @media (max-width: 767px) {
+ @media (max-width: $small-breakpoint) {
display: inline !important;
}
}
diff --git a/themes/foundation5/scss/vendor/foundation/_functions.scss b/themes/foundation5/scss/vendor/foundation/_functions.scss
index a63b920dde7..433baf33de0 100644
--- a/themes/foundation5/scss/vendor/foundation/_functions.scss
+++ b/themes/foundation5/scss/vendor/foundation/_functions.scss
@@ -121,8 +121,10 @@ $modules: () !default;
// If you require to comma separate your list
//
// rem-calc((16px, 32px, 48), 8px);
-
-@function rem-calc($values, $base-value: $rem-base) {
+// CUSTOMIZATION - CK -- we need to replace $rem-base in "$values, $base-value: $rem-base" with 16px
+// to counter miscalculations resulting from custom base-font size set in settings.scss
+// changing the $rem-base in 16px in settings.scss is also necessary
+@function rem-calc($values, $base-value: 16px) {
$max: length($values);
@if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
--
GitLab