accounts-frontend/src/components/profile/multiFactorAuth/instructions/instructions.scss

192 lines
3.1 KiB
SCSS
Raw Normal View History

2017-07-22 21:27:38 +05:30
@import "~components/ui/fonts.scss";
$boxHeight: 110px;
$boxPadding: 15px;
@mixin media-old-ifphone {
@media screen and (max-width: 380px) {
@content
}
}
2017-07-22 21:27:38 +05:30
.instructionContainer {
position: relative;
min-height: $boxHeight + $boxPadding * 2;
2017-07-22 21:27:38 +05:30
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;
2017-07-22 21:27:38 +05:30
}
.osTile {
position: absolute;
text-align: center;
cursor: pointer;
max-width: 28%;
2017-07-22 21:27:38 +05:30
transform: scale(1);
opacity: 1;
2017-07-28 01:51:15 +05:30
transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-tap-highlight-color: rgba(0,0,0,0);
2017-07-28 01:51:15 +05:30
font-family: $font-family-title;
// .instructionActive & {
// cursor: default;
// }
2017-07-22 21:27:38 +05:30
}
.osLogo {
display: block;
margin: 0 auto;
2017-07-28 01:51:15 +05:30
height: 80px;
2017-07-22 21:27:38 +05:30
color: #444;
@include media-old-ifphone {
height: 60px;
}
2017-07-22 21:27:38 +05:30
}
.osName {
font-size: 15px;
2017-07-22 21:27:38 +05:30
margin: 10px 0;
white-space: nowrap;
@include media-old-ifphone {
font-size: 11px;
}
2017-07-22 21:27:38 +05:30
}
.androidTile {
$translateX: 0;
transform: translateX($translateX) scale(1);
&:hover {
transform: translateX($translateX) scale(1.1);
}
.androidActive & {
transform: translateX(0);
left: 0;
2017-07-22 21:27:38 +05:30
}
.appleActive &,
.windowsActive & {
transform: translateX($translateX) scale(0);
opacity: 0;
}
}
.appleTile {
2017-07-28 01:51:15 +05:30
$translateX: 124px;
$translateX: -50%;
2017-07-22 21:27:38 +05:30
transform: translateX($translateX) scale(1);
left: 50%;
2017-07-22 21:27:38 +05:30
&:hover {
transform: translateX($translateX) scale(1.1);
}
.appleActive & {
transform: translateX(0);
left: 0;
2017-07-22 21:27:38 +05:30
}
.androidActive &,
.windowsActive & {
transform: translateX($translateX) scale(0);
opacity: 0;
}
}
.windowsTile {
2017-07-28 01:51:15 +05:30
$translateX: 230px;
$translateX: -100%;
2017-07-22 21:27:38 +05:30
transform: translateX($translateX) scale(1);
left: 100%;
2017-07-22 21:27:38 +05:30
&:hover {
transform: translateX($translateX) scale(1.1);
}
.windowsActive & {
transform: translateX(0);
left: 0;
2017-07-22 21:27:38 +05:30
}
.appleActive &,
.androidActive & {
transform: translateX($translateX) scale(0);
opacity: 0;
}
}
.osInstructionContainer {
opacity: 0;
2017-07-28 01:51:15 +05:30
transition: 0.4s;
2017-07-22 21:27:38 +05:30
.instructionActive & {
opacity: 1;
}
}
.osInstruction {
box-sizing: border-box;
2017-07-22 21:27:38 +05:30
position: relative;
z-index: 1;
margin: 15px;
margin-left: 30%;
padding-left: 15px;
padding-bottom: 15px;
min-height: $boxHeight;
2017-07-22 21:27:38 +05:30
}
.instructionTitle {
font-family: $font-family-title;
font-size: 14px;
2017-07-22 21:27:38 +05:30
}
.appList {
margin: 10px 0;
font-size: 11px;
2017-07-22 21:27:38 +05:30
li {
margin: 7px 0;
}
a {
color: #666;
border-bottom-color: #666;
border-bottom-style: dashed;
2017-07-22 21:27:38 +05:30
}
}
.otherApps {
position: absolute;
right: 0;
bottom: 5px;
font-size: 10px;
a {
color: #9E9E9E;
border-bottom-color: #9E9E9E;
}
2017-07-22 21:27:38 +05:30
}