ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-29 00:10:54 +05:30
Code Issues Packages Projects Releases Wiki Activity

#305: update Instructions view to support small screens

Browse Source
This commit is contained in:
SleepWalker 2017-10-23 22:43:32 +03:00
parent b032cef120
commit fca73477cc
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/profile/multiFactorAuth/instructions/Instructions.js
View File

@ -78,7 +78,7 @@ export default class Instructions extends Component<{}, {
event.preventDefault(); event.preventDefault();
this.setState({ this.setState({
activeOs: osName activeOs: this.state.activeOs === osName ? null : osName
}); });
} }
} }

25
src/components/profile/multiFactorAuth/instructions/instructions.scss
View File

@ -29,16 +29,18 @@ $boxHeight: 140px;
position: absolute; position: absolute;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
max-width: 28%;
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 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; font-family: $font-family-title;
.instructionActive & { // .instructionActive & {
cursor: default; // cursor: default;
} // }
} }
.osLogo { .osLogo {
@ -46,6 +48,10 @@ $boxHeight: 140px;
margin: 0 auto; margin: 0 auto;
height: 80px; height: 80px;
color: #444; color: #444;
@media screen and (max-width: 380px) { // for old iPhones
height: 60px;
}
} }
.osName { .osName {
@ -64,6 +70,7 @@ $boxHeight: 140px;
.androidActive & { .androidActive & {
transform: translateX(0); transform: translateX(0);
left: 0;
} }
.appleActive &, .appleActive &,
@ -75,8 +82,10 @@ $boxHeight: 140px;
.appleTile { .appleTile {
$translateX: 124px; $translateX: 124px;
$translateX: -50%;
transform: translateX($translateX) scale(1); transform: translateX($translateX) scale(1);
left: 50%;
&:hover { &:hover {
transform: translateX($translateX) scale(1.1); transform: translateX($translateX) scale(1.1);
@ -84,6 +93,7 @@ $boxHeight: 140px;
.appleActive & { .appleActive & {
transform: translateX(0); transform: translateX(0);
left: 0;
} }
.androidActive &, .androidActive &,
@ -95,8 +105,10 @@ $boxHeight: 140px;
.windowsTile { .windowsTile {
$translateX: 230px; $translateX: 230px;
$translateX: -100%;
transform: translateX($translateX) scale(1); transform: translateX($translateX) scale(1);
left: 100%;
&:hover { &:hover {
transform: translateX($translateX) scale(1.1); transform: translateX($translateX) scale(1.1);
@ -104,6 +116,7 @@ $boxHeight: 140px;
.windowsActive & { .windowsActive & {
transform: translateX(0); transform: translateX(0);
left: 0;
} }
.appleActive &, .appleActive &,
@ -123,12 +136,10 @@ $boxHeight: 140px;
} }
.osInstruction { .osInstruction {
$padding: 15px;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-left: 115px - $padding; margin-left: 30%;
padding: $padding; padding: 15px;
} }
.instructionTitle { .instructionTitle {