Allow overriding typography of slim control bar text

Allow overriding for phone, desktop or in general.
codevise · Feb 10, 2017 · 07fba6f · 07fba6f
1 parent a6402da
commit 07fba6f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss b/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss
@@ -8,19 +8,23 @@ $indicator-typography: () !default;
 /// Typography of indicators on phone.
 $indicator-phone-typography: () !default;
 
-@mixin indicator-typography {
+@mixin indicator-typography($overrides: (), $desktop-overrides: (), $phone-overrides: ()) {
   @include standard-typography(
-    $indicator-typography,
+    map-merge($indicator-typography, $overrides),
     (
       font-size: 0.92em,
       letter-spacing: 0.2em,
       text-transform: uppercase,
     )
   );
 
+  @include desktop {
+    @include typography($desktop-overrides);
+  }
+
   @include phone {
     @include standard-typography(
-      $indicator-phone-typography,
+      map-merge($indicator-phone-typography, $phone-overrides),
       (
         font-size: 0.8em,
         letter-spacing: 0.1em,

diff --git a/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss b/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss
@@ -17,6 +17,15 @@ $slim-player-controls-progress-bar-color: $main-color !default;
 /// Color of the part of the progress bar indicating the load progress.
 $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2) !default;
 
+/// Typography for text displayed next to play button
+$slim-player-controls-control-bar-text-typography: () !default;
+
+/// Typography for text displayed next to play button in desktop layout
+$slim-player-controls-control-bar-text-desktop-typography: () !default;
+
+/// Typography for text displayed next to play button in phone layout
+$slim-player-controls-control-bar-text-phone-typography: () !default;
+
 %player_controls {
   &-control_bar {
     position: absolute;
@@ -50,7 +59,11 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     color: $slim-player-controls-color;
     text-shadow: 1px 1px 4px $indicator-text-shadow-color;
 
-    @include indicator-typography;
+    @include indicator-typography(
+      $overrides: $slim-player-controls-control-bar-text-typography,
+      $phone-overrides: $slim-player-controls-control-bar-text-phone-typography,
+      $desktop-overrides: $slim-player-controls-control-bar-text-desktop-typography
+    );
 
     @include phone {
       left: 50px;