Relatieve lettergrootte i.v.m. toegankelijkheid

Author: Htbaa

plugins/gh-datainmap/CHANGELOG.md

@@ -1,3 +1,5 @@
+- Lettergrootte in standaard stylesheet aangepast van absolute lengte-eenheid naar relatieve lengte-eenheid i.v.m. toegankelijkheid.
+
 **1.10.3 (2021-12-14)**
 
 - Fix voor kaartweergave in de backend bij beheren locatie. Deze weas door een verouderde URL niet zichtbaar.

src/scss/mixins/_mixins.scss

@@ -23,10 +23,43 @@ border-radius: $radius;
     box-shadow: $shadow;
 }
 
+// Bron: https://css-tricks.com/snippets/sass/strip-unit-function/
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+    @if type-of($number) == 'number' and not unitless($number) {
+        @return $number / ($number * 0 + 1);
+    }
+    @return $number;
+}
+
 // Rem output with px fallback
-@mixin font-size($sizeValue: 1) {
-    font-size: ($sizeValue * 16) * 1px;
-    font-size: $sizeValue * 1rem;
+@mixin font-size($sizeValue: 1, $important: null) {
+    @if type-of($important) == 'bool' {
+        @if $important == true {
+            $important: !important;
+        }
+        @else {
+            $important: null;
+        }
+    }
+    // px input
+    @if unit($sizeValue) == 'px' {
+        font-size: $sizeValue $important;
+        font-size: strip-unit(percentage($sizeValue / $font-size-base) / 100) * 1rem $important;
+    }
+    // rem input
+    @else if unitless($sizeValue) {
+        font-size: ceil($sizeValue * strip-unit($font-size-base)) * 1px $important;
+        font-size: $sizeValue * 1rem $important;
+    }
+    // Fallthrough
+    @else {
+        $unit: unit($sizeValue);
+        @warn 'Mixin font-size() ondersteund geen `#{$unit}`, opgegeven unit: #{$sizeValue}';
+        font-size: $sizeValue $important;
+    }
 }
 
 // Center block

src/scss/style.scss

@@ -1,3 +1,4 @@
+$font-size-base: 14px;
 @import './mixins/mixins';
 @import './modules/modules';
 @import './transitions';
@@ -19,7 +20,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
     bottom:.5em;
 }
 .ol-control button {
-    font-size:20px;
+    @include font-size(20px);
     background-color:$bgcolor-button-neutral;
     color:$textcolor-button-neutral;
 
@@ -94,7 +95,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
         margin:0 -20px;
         background-color:$bgcolor-button-neutral;
         h1 {
-            font-size:14px;
+            @include font-size(14px);
             margin:0;
             padding:10px;
             font-weight:bold;
@@ -113,20 +114,20 @@ $shadow-color: rgba(0, 0, 0, 0.5);
             margin:10px 0;
             button {
                 @extend .btn !optional;
-                font-size:12px;
+                @include font-size(12px);
             }
         }
         .#{$descriptionClass} {
             margin:10px 0;
-            font-size:12px;
+            @include font-size(12px);
             font-style:italic;
         }
         .#{checkboxClass} {
             &:first-child {
                 margin-top:10px;
             }
             label {
-                font-size: 12px;
+                @include font-size(12px);
                 font-weight:normal;
             }
         }
@@ -179,7 +180,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
                 line-height:1.5;
                 border:1px solid #ccc;
                 padding:5px 10px;
-                font-size:12px;
+                @include font-size(12px);
                 border-top-left-radius:3px;
                 border-top-right-radius:3px;
             }
@@ -199,7 +200,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
                     @media all and (min-width: $screen-md) {
                         min-width:300px;
                     }
-                    font-size:12px;
+                    @include font-size(12px);
 
                     &:last-child {
                         border-bottom-style: none;
@@ -287,7 +288,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
         max-width:320px;
         span {
             font-weight: bold;
-            font-size:12px;
+            @include font-size(12px);
         }
     }
     .gh-dim-features-listbox {
@@ -364,7 +365,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
             margin:0 -20px;
             background-color:$bgcolor-button-neutral;
             h1 {
-                font-size:14px;
+                @include font-size(14px);
                 margin:0;
                 padding:10px;
                 font-weight:bold;
@@ -387,7 +388,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
             padding-right:20px;
             .gh-dim-features-listbox-description {
                 margin:10px;
-                font-size:12px;
+                @include font-size(12px);
                 font-style:italic;
             }
 
@@ -405,7 +406,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
                     @media all and (min-width: $screen-md) {
                         min-width:300px;
                     }
-                    font-size:12px;
+                    @include font-size(12px);
 
                     &:hover {
                         background-color:#EBEBEB;
@@ -464,7 +465,7 @@ body.gh-dim-modal-open {
             background-color:$bgcolor-feature-header;
             border-radius:6px 6px 0 0;
             h1 {
-                font-size:24px;
+                @include font-size(24px);
                 margin:0;
                 color:#FFF;
                 overflow:hidden;
@@ -479,7 +480,7 @@ body.gh-dim-modal-open {
                 right:24px;
                 .gh-dim-modal-close-marker {
                     display:inline-block;
-                    font-size:48px;
+                    @include font-size(48px);
                     font-weight:normal;
                     color:$textcolor-button-hover;
                     margin-top:12px;