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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7-h",
+  "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/abstracts/_mixins.scss

@@ -5,6 +5,12 @@
   transform: translate(-#{$top}, -#{$top});
 }
 
+@mixin flex-position($flex, $content, $align) {
+  display: $flex;
+  justify-content: $content;
+  align-items: $align;
+}
+
 @mixin yellow-btn {
   color: $default-lt-button-color;
   background-color: $default_color_player;

package/src/assets/sass/app.scss

@@ -14,7 +14,11 @@
 // 1. Basics
 //---------------------------------------------
 
-
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 //---------------------------------------------
 // 2. Resetting properties
@@ -24,6 +28,18 @@ body {
   margin: 0;
 }
 
+.container-text-portrait-player {
+  display: flex;
+  max-width: 800px;
+  max-height: 800px;
+  margin-bottom: 3rem;
+}
+
+.container-text-landscape-player {
+  display: flex;
+  max-width: 1000px;
+}
+
 //---------------------------------------------
 // 3. General
 //---------------------------------------------

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;
@@ -120,6 +134,7 @@
       color: $default-lt-button-color;
       text-align: left;
       overflow: auto;
+      padding: 20px;
       font-family: $lt-font-family-base;
 
       button,
@@ -168,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;
@@ -215,9 +229,14 @@
     overflow: auto;
     max-width: 620px;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       max-height: unset;
+      width: auto;
       height: 100%;
+      position: unset;
+      transform: unset;
+      border: 1px solid $default-lt-span-color;
+      border-radius: 0 0 0 30px;
     }
 
     .modal-flex {
@@ -306,7 +325,7 @@
   &__modal-body {
     padding: 40px;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       padding: 20px;
     }
   }
@@ -328,7 +347,7 @@
     right: 40px;
     margin-top: 0 !important;
 
-    @media screen and (max-width: 620px) {
+    @include modal-max-width {
       top: 20px;
       right: 20px;
     }
@@ -337,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;
-  }
 }