Changeset 3499:4f82fdafce03 for admin/style

Timestamp:

01/04/17 10:20:59 (9 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Adaptive admin font size is now optional

Location:

admin/style

Files:

• default.css (modified) (1 diff)
• scss/partials/_common.scss (modified) (2 diffs)

admin/style/default.css

@@ -245 +245 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
   @media screen and (max-width: 26.5em) {
-    body {
+    body.responsive-font {
       font-size: 1.2rem;
       line-height: 1.3; } }
   @media screen and (min-width: 120em) {
-    body {
+    body.responsive-font {
       font-size: 1.6rem;
       line-height: 1.5; } }
   @media screen and (min-width: 26.5em) and (max-width: 120em) {
-    body {
+    body.responsive-font {
       font-size: calc( 1.2rem + 0.4 * (100vw - 42.4rem) / (192 - 42.4));
       line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - 42.4rem) / (192 - 42.4)); } }

admin/style/scss/partials/_common.scss

@@ -2 +2 @@
 
 :root {
-    // May be superseed by user pref (typically from 50% to 75%, default 62.5%)
-    --html-font-size: #{$html-font-size};
+     // May be superseed by user pref (typically from 50% to 75%, default 62.5%)
+     --html-font-size: #{$html-font-size};
 }
 
 // base //
 html {
-    font-size: $html-font-size; // html font-size for IE and Edge
-    font-size: var(--html-font-size); // html font-size for modern browsers
+     font-size: $html-font-size; // html font-size for IE and Edge
+     font-size: var(--html-font-size); // html font-size for modern browsers
 }
 
 body {
-    font-size: $body-font-size;
-    line-height: 1.5;
-    @media screen and(max-width: $small-screen) {
-        font-size: $body-font-size-small;
-        line-height: 1.3;
-    }
-    @media screen and(min-width: $large-screen) {
-        font-size: $body-font-size-large;
-        line-height: 1.5;
-    }
-    @media screen and(min-width: $small-screen) and (max-width: $large-screen) {
-        font-size: calc( #{$body-font-size-small} + #{strip-unit($body-font-size-large - $body-font-size-small)} * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}));
-        line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}));
-    }
-    font-family: $sans-serif;
+     font-size: $body-font-size;
+     line-height: 1.5;
+     font-family: $sans-serif;
+     &.responsive-font {
+          @media screen and(max-width: $small-screen) {
+               font-size: $body-font-size-small;
+               line-height: 1.3;
+          }
+          @media screen and(min-width: $large-screen) {
+               font-size: $body-font-size-large;
+               line-height: 1.5;
+          }
+          @media screen and(min-width: $small-screen) and (max-width: $large-screen) {
+               font-size: calc( #{$body-font-size-small} + #{strip-unit($body-font-size-large - $body-font-size-small)} * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}));
+               line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}));
+          }
+     }
 }
 
 #wrapper {
-    @media screen and (max-width: $small-screen) {
-        font-size: 1.4em;
-    }
+     @media screen and (max-width: $small-screen) {
+          font-size: 1.4em;
+     }
 }
 
@@ -44 +46 @@
 h5,
 h6 {
-    margin-top: 0;
-    margin-bottom: 1em;
+     margin-top: 0;
+     margin-bottom: 1em;
 }
 
 h2 {
-    font-size: 1.5em;
-    font-weight: normal;
-    line-height: 1.25;
-    padding: 0 0 1.5em;
+     font-size: 1.5em;
+     font-weight: normal;
+     line-height: 1.25;
+     padding: 0 0 1.5em;
 }
 
 h3,
 .as_h3 {
-    font-size: 1.34em;
-    font-weight: normal;
-    line-height: 1.5;
-    margin-top: 1em;
+     font-size: 1.34em;
+     font-weight: normal;
+     line-height: 1.5;
+     margin-top: 1em;
 }
 
 h4,
 .as_h4 {
-    font-size: 1.16em;
-    line-height: 1.5;
+     font-size: 1.16em;
+     line-height: 1.5;
 }
 
 h5 {
-    font-size: 1em;
-    line-height: 1.5;
-    font-weight: bold;
+     font-size: 1em;
+     line-height: 1.5;
+     font-weight: bold;
 }
 
 h6 {
-    font-size: 1em;
-    line-height: 1.5;
+     font-size: 1em;
+     line-height: 1.5;
 }