@latest-thinking/lt-player 1.0.7-i → 1.0.7-j

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7-i",
+  "version": "1.0.7-j",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/sass/components/_modal.scss

@@ -1,5 +1,19 @@
 @import "../abstracts/variables";
 
+$modal-max-width: 620px;
+
+@mixin modal-max-width {
+  @media (max-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
+@mixin modal-min-width {
+  @media (min-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
 @mixin modal-h2 {
   font-size: $lt-player-font-size-xxxl2;
   font-weight: $lt-player-font-weight-lg;
@@ -169,11 +183,10 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    //opacity: 0;
-    //visibility: hidden;
-    //transform: scale(1.1);
-    //transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+
+    @include modal-min-width {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
 
     &__mobile {
       position: absolute;
@@ -216,7 +229,7 @@
     overflow: auto;
     max-width: 620px;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       max-height: unset;
       width: auto;
       height: 100%;
@@ -312,7 +325,7 @@
   &__modal-body {
     padding: 40px;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       padding: 20px;
     }
   }
@@ -334,7 +347,7 @@
     right: 40px;
     margin-top: 0 !important;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       top: 20px;
       right: 20px;
     }
@@ -343,11 +356,4 @@
   &__close-button:hover {
     color: #d75b4c;
   }
-
-  &__show-modal {
-    //opacity: 1;
-    //visibility: visible;
-    //transform: scale(1.0);
-    //transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
-  }
 }