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

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

@@ -1,163 +1,5 @@
 @import "~components/ui/fonts.scss";
 
-$boxHeight: 110px;
-$boxPadding: 15px;
-
-@mixin media-old-ifphone {
-  @media screen and (max-width: 380px) {
-    @content
-  }
-}
-
-.instructionContainer {
-    position: relative;
-    min-height: $boxHeight + $boxPadding * 2;
-
-    background: #fff;
-    border: 1px #fff solid;
-
-    transition: 0.4s ease;
-}
-
-.instructionActive {
-    background: #ebe8e1;
-    border-color: #d8d5ce;
-}
-
-.osList {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: $boxPadding;
-    height: $boxHeight;
-}
-
-.osTile {
-    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);
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-    font-family: $font-family-title;
-
-    // .instructionActive & {
-    //     cursor: default;
-    // }
-}
-
-.osLogo {
-    display: block;
-    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 {
-    $translateX: 0;
-
-    transform: translateX($translateX) scale(1);
-
-    &:hover {
-        transform: translateX($translateX) scale(1.1);
-    }
-
-    .androidActive & {
-        transform: translateX(0);
-        left: 0;
-    }
-
-    .appleActive &,
-    .windowsActive & {
-        transform: translateX($translateX) scale(0);
-        opacity: 0;
-    }
-}
-
-.appleTile {
-    $translateX: 124px;
-    $translateX: -50%;
-
-    transform: translateX($translateX) scale(1);
-    left: 50%;
-
-    &:hover {
-        transform: translateX($translateX) scale(1.1);
-    }
-
-    .appleActive & {
-        transform: translateX(0);
-        left: 0;
-    }
-
-    .androidActive &,
-    .windowsActive & {
-        transform: translateX($translateX) scale(0);
-        opacity: 0;
-    }
-}
-
-.windowsTile {
-    $translateX: 230px;
-    $translateX: -100%;
-
-    transform: translateX($translateX) scale(1);
-    left: 100%;
-
-    &:hover {
-        transform: translateX($translateX) scale(1.1);
-    }
-
-    .windowsActive & {
-        transform: translateX(0);
-        left: 0;
-    }
-
-    .appleActive &,
-    .androidActive & {
-        transform: translateX($translateX) scale(0);
-        opacity: 0;
-    }
-}
-
-.osInstructionContainer {
-    opacity: 0;
-    transition: 0.4s;
-
-    .instructionActive & {
-        opacity: 1;
-    }
-}
-
-.osInstruction {
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-    margin: 15px;
-    margin-left: 30%;
-    padding-left: 15px;
-    padding-bottom: 15px;
-    min-height: $boxHeight;
-}
-
 .instructionTitle {
     font-family: $font-family-title;
     font-size: 14px;
@@ -189,3 +31,258 @@ $boxPadding: 15px;
         border-bottom-color: #9E9E9E;
     }
 }
+
+@media screen and (min-width: 420px) {
+    $boxHeight: 110px;
+    $boxPadding: 15px;
+
+    .instructionContainer {
+        position: relative;
+        min-height: $boxHeight + $boxPadding * 2;
+
+        background: #fff;
+        border: 1px #fff solid;
+
+        transition: 0.4s ease;
+    }
+
+    .instructionActive {
+        background: #ebe8e1;
+        border-color: #d8d5ce;
+    }
+
+    .osList {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: $boxPadding;
+        height: $boxHeight;
+    }
+
+    .osTile {
+        position: absolute;
+        text-align: center;
+        cursor: pointer;
+
+        transform: scale(1);
+        opacity: 1;
+        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;
+    }
+
+    .osLogo {
+        display: block;
+        margin: 0 auto;
+        height: 80px;
+        color: #444;
+    }
+
+    .osName {
+        font-size: 15px;
+        margin: 10px 0;
+        white-space: nowrap;
+    }
+
+    .androidTile {
+        $translateX: 0;
+
+        transform: translateX($translateX) scale(1);
+
+        &:hover {
+            transform: translateX($translateX) scale(1.1);
+        }
+
+        .androidActive & {
+            transform: translateX(0);
+            left: 0;
+        }
+
+        .appleActive &,
+        .windowsActive & {
+            transform: translateX($translateX) scale(0);
+            opacity: 0;
+        }
+    }
+
+    .appleTile {
+        $translateX: 124px;
+        $translateX: -51%;
+
+        transform: translateX($translateX) scale(1);
+        left: 49%;
+
+        &:hover {
+            transform: translateX($translateX) scale(1.1);
+        }
+
+        .appleActive & {
+            transform: translateX(0);
+            left: 0;
+        }
+
+        .androidActive &,
+        .windowsActive & {
+            transform: translateX($translateX) scale(0);
+            opacity: 0;
+        }
+    }
+
+    .windowsTile {
+        $translateX: 230px;
+        $translateX: -100%;
+
+        transform: translateX($translateX) scale(1);
+        left: 100%;
+
+        &:hover {
+            transform: translateX($translateX) scale(1.1);
+        }
+
+        .windowsActive & {
+            transform: translateX(0);
+            left: 0;
+        }
+
+        .appleActive &,
+        .androidActive & {
+            transform: translateX($translateX) scale(0);
+            opacity: 0;
+        }
+    }
+
+    .osInstructionContainer {
+        opacity: 0;
+        transition: 0.4s;
+
+        .instructionActive & {
+            opacity: 1;
+        }
+    }
+
+    .osInstruction {
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+        margin: 15px;
+        margin-left: 30%;
+        padding-left: 15px;
+        padding-bottom: 15px;
+        min-height: $boxHeight;
+    }
+}
+
+@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: 16px;
+        margin-left: 10px;
+    }
+
+    @mixin commonNonActiveTile() {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .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 {
+        bottom: 8px;
+    }
+}