Add: Modal for Instructions CSS (#237)

* Add: Modal for Instructions CSS

* Removed Player Instructions Modal for touch devices

* Refactored to object and media

* Update media.o-player-modal.scss

Author: firefinchdev

examples/public/images/player-control.png

@@ -0,0 +1,17 @@
+<div class="o-player-modal modal-overlays">
+    <div class="card card-text">
+    <div class="row">
+        <img src="\images\player-control.png">
+        <div class="justify-content-center">
+            <h3 class="red">Up/Down: Change Video Speed</h3>
+            <h3 class="red">Left/Right: Seeks 5 seconds Backward/Forward</h3>
+        </div>
+    </div>
+    <div class="footer row justify-content-end no-gutters">
+        <label class="red"><input type="checkbox">Don't show again</label>
+        <div class="button-solid">
+            <button>Close</button>
+        </div>
+    </div>
+    </div>
+</div>

examples/views/player-instructions.hbs

@@ -34,3 +34,4 @@
 @import "media-query/media.sidebar.scss";
 @import "media-query/media.pill";
 @import "media-query/media.doubt";
+@import "media-query/media.o-player-modal";

sass/styles/_media-query.scss

@@ -55,3 +55,4 @@
 @import "objects/o-changedp/o-changedp";
 @import "objects/o-side-nav/o-side-nav";
 @import "objects/o-skeleton/o-skeleton-card";
+@import "objects/o-player-modal/o-player-modal";

sass/styles/_objects.scss

@@ -0,0 +1,5 @@
+@media (max-width: 767px) {
+  .o-player-modal {
+    display: none;
+  }
+}

sass/styles/media-query/media.o-player-modal.scss

@@ -0,0 +1,8 @@
+.o-player-modal{
+  .footer {
+    label {
+      height: 20px;
+      margin: 3%;
+    }
+  }
+}