From b096bb8846d3ec6190ee2f74950590e29c8f9afa Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Tue, 21 Nov 2017 01:04:56 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20=D1=80?= =?UTF-8?q?=D0=B5=D0=BA=D0=BE=D0=BC=D0=B5=D0=BD=D0=B4=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=BF=D1=80=D0=B8=20=D0=B2=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B8=20MFA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../instructions/instructions.scss | 413 +++++++++++------- 1 file changed, 255 insertions(+), 158 deletions(-) diff --git a/src/components/profile/multiFactorAuth/instructions/instructions.scss b/src/components/profile/multiFactorAuth/instructions/instructions.scss index 6a32603..8f3e26e 100644 --- a/src/components/profile/multiFactorAuth/instructions/instructions.scss +++ b/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; + } +}