feat(reader-react): refactor reader scss

packages/b-ber-reader-react/src/index.scss

@@ -8,4 +8,3 @@
 @import 'styles/media';
 @import 'styles/footnote';
 @import 'styles/layout';
-// @import 'styles/debug';

packages/b-ber-reader-react/src/styles/_controls.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .bber-controls {
   .bber-ul,
   .bber-ol {
@@ -37,9 +39,9 @@
   top: 0;
   left: 0;
   right: 0;
-  background-color: transparent;
   height: 0;
   opacity: 1 !important;
+  background-color: transparent;
 
   > .bber-nav > .bber-ul {
     box-sizing: border-box;
@@ -51,11 +53,11 @@
     height: 0;
     margin: 15px 15px 0;
 
-    @media screen and (max-width: $tablet-breakpoint-max) {
+    @include break-at('mobile', 'tablet') {
       margin: 10px 10px 0;
     }
 
-    @media screen and (max-width: $tablet-breakpoint-max) {
+    @include break-at('mobile', 'tablet') {
       > .bber-li > .bber-ul {
         display: flex;
 
@@ -107,7 +109,7 @@
           width: 43%;
           height: 43%;
 
-          @media screen and (max-width: $tablet-breakpoint-max) {
+          @include break-at('mobile', 'tablet') {
             width: 63%;
             height: 63%;
           }
@@ -161,15 +163,15 @@
         text-align: left;
         display: block;
         width: 100%;
-        padding: $medium / 2;
+        padding: math.div($medium, 2);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: $font-size-serif;
         font-family: $font-family-serif;
 
-        @media screen and (max-width: $tablet-breakpoint-max) {
-          padding: $medium / 2 16px !important;
+        @include break-at('mobile', 'tablet') {
+          padding: math.div($medium, 2) 16px !important;
         }
 
         &.bber-chapter--current {
@@ -178,7 +180,7 @@
 
         @for $i from 1 through 10 {
           &.bber-indent--#{$i} {
-            text-indent: ($i - 1) * ($small / 2);
+            text-indent: ($i - 1) * math.div($small, 2);
           }
         }
       }
@@ -193,13 +195,13 @@
     }
 
     .bber-dt {
-      padding: calc(#{$medium} / 2) 0 0 calc(#{$small} / 2);
+      padding: math.div($medium, 2) 0 0 math.div($small, 2);
       text-transform: capitalize;
     }
 
     .bber-dd {
       @include border('bottom');
-      padding: 5px calc(#{$small} / 2) calc(#{$medium} / 2);
+      padding: 5px math.div($small, 2) math.div($medium, 2);
     }
 
     .bber-li,
@@ -228,7 +230,7 @@
         text-align: left;
         display: block;
         width: 100%;
-        padding: calc(#{$medium} / 2);
+        padding: math.div($medium, 2);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -243,7 +245,7 @@
 
         @for $i from 1 through 10 {
           &.bber-indent--#{$i} {
-            text-indent: ($i - 1) * ($small / 2);
+            text-indent: ($i - 1) * math.div($small, 2);
           }
         }
       }
@@ -258,13 +260,13 @@
     }
 
     .bber-dt {
-      padding: calc(#{$medium} / 2) 0 0 calc(#{$small} / 2);
+      padding: math.div($medium, 2) 0 0 math.div($small, 2);
       text-transform: capitalize;
     }
 
     .bber-dd {
       @include border('bottom');
-      padding: 5px calc(#{$small} / 2) calc(#{$medium} / 2);
+      padding: 5px math.div($small, 2) math.div($medium, 2);
     }
 
     .bber-li,
@@ -294,7 +296,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
 
-  @media screen and (max-width: $tablet-breakpoint-max) {
+  @include break-at('mobile', 'tablet') {
     width: 100vw !important;
     left: 0;
     right: 0;
@@ -325,7 +327,7 @@
   height: $small + 25px;
   opacity: 1 !important;
 
-  @media screen and (max-width: $tablet-breakpoint-max) {
+  @include break-at('mobile', 'tablet') {
     background: $white;
     height: 42px;
   }
@@ -338,7 +340,7 @@
     height: $small + 25px;
     padding: 0 10px;
 
-    @media screen and (max-width: $tablet-breakpoint-max) {
+    @include break-at('mobile', 'tablet') {
       height: 42px;
     }
 

packages/b-ber-reader-react/src/styles/_media.scss

@@ -56,8 +56,8 @@ $thumb-c: #272727;
 
   .bber-a,
   .bber-button {
+    @include transition(color $transition-speed-normal $transition-easing);
     text-decoration: none !important;
-    transition: color $transition-speed-normal $transition-easing;
   }
 
   .bber-a.bber-hover,
@@ -74,10 +74,10 @@ $thumb-c: #272727;
 }
 
 .bber-slider__volume {
+  @include transition(flex-grow $transition-speed-normal $transition-easing);
   width: 0;
   flex-grow: 0;
   overflow: hidden;
-  transition: flex-grow $transition-speed-normal $transition-easing;
 
   &.bber-open {
     overflow: visible;
@@ -97,6 +97,10 @@ $thumb-c: #272727;
 }
 
 @mixin thumb {
+  @include transition(
+    background-color $transition-speed-normal $transition-easing
+  );
+
   box-sizing: border-box;
   position: relative;
   z-index: 1;
@@ -106,8 +110,6 @@ $thumb-c: #272727;
   border-radius: 50%;
   background-color: $thumb-c;
 
-  transition: background-color $transition-speed-normal $transition-easing;
-
   &:hover {
     background-color: $violet;
   }

packages/b-ber-reader-react/src/styles/_mixins.scss

@@ -45,3 +45,42 @@
     border: 1px solid $color;
   }
 }
+
+$mq-mobile: 'only screen and (max-width: 768px)';
+$mq-tablet: 'only screen and (min-width: 768px) and (max-width: 1140px)';
+$mq-reader-scroll: 'only screen and (max-width: 1140px), (min-aspect-ratio: 13 / 5)';
+$mq-reader-slide: 'only screen and (min-width: 1140px) and (max-aspect-ratio: 13 / 5)';
+
+$break-map: (
+  'mobile': $mq-mobile,
+  'tablet': $mq-tablet,
+  'reader-scroll': $mq-reader-scroll,
+  'reader-slide': $mq-reader-slide,
+);
+
+// Media query mixin. Accepts multiple arguments. Called with a single value,
+// or a comma separated list of values:
+//
+// @include break-at('mobile') { ... }
+// @include break-at('mobile', 'tablet') { .. }
+@mixin break-at($media...) {
+  $query: '';
+
+  @for $i from 1 through length($media) {
+    $value: map-get($break-map, nth($media, $i));
+
+    @if not $value {
+      @error "`#{$media}` is not a supported media query name.";
+    }
+
+    @if $query != '' {
+      $query: '#{$query}, #{$value}';
+    } @else {
+      $query: $value;
+    }
+  }
+
+  @media #{$query} {
+    @content;
+  }
+}

packages/b-ber-reader-react/src/styles/_print.scss

@@ -8,12 +8,12 @@
   #frame {
     position: static !important;
     overflow: visible !important;
+  }
 
-    #layout {
-      transform: none !important;
-      height: auto !important;
-      width: auto !important;
-      columns: unset !important;
-    }
+  #layout {
+    transform: none !important;
+    height: auto !important;
+    width: auto !important;
+    columns: unset !important;
   }
 }

packages/b-ber-reader-react/src/styles/_spinner.scss

@@ -1,3 +1,16 @@
+@use 'sass:math';
+
+// https://github.com/tobiasahlin/SpinKit/blob/master/examples/5-pulse.html
+@keyframes pulse {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
 .bber-spinner {
   width: 100vw;
   height: 100vh;
@@ -12,21 +25,10 @@
   display: block;
 }
 
-// https://github.com/tobiasahlin/SpinKit/blob/master/examples/5-pulse.html
-@keyframes pulse {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
 .bber-spinner__detail {
   position: absolute;
-  top: calc(50% - #{$spinner-size / 2});
-  left: calc(50% - #{$spinner-size / 2});
+  top: calc(50% - #{math.div($spinner-size, 2)});
+  left: calc(50% - #{math.div($spinner-size, 2)});
   width: $spinner-size;
   height: $spinner-size;
   margin: 0;

packages/b-ber-reader-react/src/styles/_variables.scss

@@ -16,14 +16,6 @@ $transition-easing: ease;
 $anmiation-speed-normal: 250ms;
 $anmiation-speed-slow: 2500ms;
 
-// The following media queries should be kept in sync with constants in
-// src/constants.js
-
-// Max. supported 'mobile' size (iPhone XS/R); Only applies to menu, so not used
-// in constants.js
-$mobile-breakpoint-max: 414px;
-$tablet-breakpoint-max: 768px;
-
 $font-family-serif: CrimsonPro, Georgia, 'Iowan', Times, serif;
 $font-size-serif: 16px;