Добавлен адаптив для списка рекомендованных приложений при включении MFA

src/components/profile/multiFactorAuth/instructions/instructions.scss

@@ -1,14 +1,41 @@
 @import "~components/ui/fonts.scss";
 
+.instructionTitle {
+    font-family: $font-family-title;
+    font-size: 14px;
+}
+
+.appList {
+    margin: 10px 0;
+    font-size: 11px;
+
+    li {
+        margin: 7px 0;
+    }
+
+    a {
+        color: #666;
+        border-bottom-color: #666;
+        border-bottom-style: dashed;
+    }
+}
+
+.otherApps {
+    position: absolute;
+    right: 0;
+    bottom: 5px;
+    font-size: 10px;
+
+    a {
+        color: #9E9E9E;
+        border-bottom-color: #9E9E9E;
+    }
+}
+
+@media screen and (min-width: 420px) {
     $boxHeight: 110px;
     $boxPadding: 15px;
 
-@mixin media-old-ifphone {
-  @media screen and (max-width: 380px) {
-    @content
-  }
-}
-
     .instructionContainer {
         position: relative;
         min-height: $boxHeight + $boxPadding * 2;
@@ -36,18 +63,13 @@ $boxPadding: 15px;
         position: absolute;
         text-align: center;
         cursor: pointer;
-    max-width: 28%;
 
         transform: scale(1);
         opacity: 1;
-    transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); // easeInOutQuart
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
         font-family: $font-family-title;
-
-    // .instructionActive & {
-    //     cursor: default;
-    // }
     }
 
     .osLogo {
@@ -55,20 +77,12 @@ $boxPadding: 15px;
         margin: 0 auto;
         height: 80px;
         color: #444;
-
-    @include media-old-ifphone {
-        height: 60px;
-    }
     }
 
     .osName {
         font-size: 15px;
         margin: 10px 0;
         white-space: nowrap;
-
-    @include media-old-ifphone {
-        font-size: 11px;
-    }
     }
 
     .androidTile {
@@ -94,10 +108,10 @@ $boxPadding: 15px;
 
     .appleTile {
         $translateX: 124px;
-    $translateX: -50%;
+        $translateX: -51%;
 
         transform: translateX($translateX) scale(1);
-    left: 50%;
+        left: 49%;
 
         &:hover {
             transform: translateX($translateX) scale(1.1);
@@ -157,35 +171,118 @@ $boxPadding: 15px;
         padding-bottom: 15px;
         min-height: $boxHeight;
     }
+}
 
-.instructionTitle {
+@media screen and (max-width: 420px) {
+    .instructionContainer {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .osList {
+
+    }
+
+    .osTile {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 48px;
+
+        background: #fff;
+        $borderColor: #eee;
+        border-top: 1px solid $borderColor;
+        border-bottom: 1px solid transparent;
+        cursor: pointer;
+
+        transition: .3s cubic-bezier(0.215, 0.61, 0.355, 1); // easeOutCubic
+
+        &:last-of-type {
+            border-bottom-color: $borderColor;
+        }
+
+        .instructionActive & {
+            border-bottom-color: $borderColor;
+        }
+    }
+
+    .osLogo {
+        max-width: 30px;
+    }
+
+    .osName {
         font-family: $font-family-title;
-    font-size: 14px;
+        font-size: 16px;
+        margin-left: 10px;
     }
 
-.appList {
-    margin: 10px 0;
-    font-size: 11px;
-
-    li {
-        margin: 7px 0;
+    @mixin commonNonActiveTile() {
+        opacity: 0;
+        pointer-events: none;
     }
 
-    a {
-        color: #666;
-        border-bottom-color: #666;
-        border-bottom-style: dashed;
+    .androidTile {
+        z-index: 3;
+
+        .appleActive & {
+            @include commonNonActiveTile;
+            transform: translateY(-50px);
         }
+
+        .windowsActive & {
+            @include commonNonActiveTile;
+            transform: translateY(-100px);
+        }
+    }
+
+    .appleTile {
+        z-index: 2;
+
+        .appleActive & {
+            transform: translateY(-50px);
+        }
+
+        .androidActive &,
+        .windowsActive & {
+            @include commonNonActiveTile;
+            transform: translateY(-100px);
+        }
+    }
+
+    .windowsTile {
+        z-index: 1;
+
+        .windowsActive & {
+            transform: translateY(-100px);
+        }
+
+        .androidActive &,
+        .appleActive & {
+            @include commonNonActiveTile;
+            transform: translateY(-100px);
+        }
+    }
+
+    .osInstructionContainer {
+        position: absolute;
+        top: -50px;
+        height: 100px;
+        opacity: 0;
+        transition: .4s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
+        width: 100%;
+        box-shadow: inset 0 -1px #eee;
+
+        .instructionActive & {
+            top: 50px;
+            opacity: 1;
+        }
+    }
+
+    .osInstruction {
+        padding-top: 10px;
     }
 
     .otherApps {
-    position: absolute;
-    right: 0;
-    bottom: 5px;
-    font-size: 10px;
-
-    a {
-        color: #9E9E9E;
-        border-bottom-color: #9E9E9E;
+        bottom: 8px;
     }
 }