app/assets/stylesheets/sessions/new.scss
.page-wrapper {
height: 100vh;
width: 100vw;
position: relative;
// background-image: linear-gradient(to top left, #aadcf9, #b8fbf8);
background: #f5f5f5 image_url('bg.svg') center center no-repeat;
background-size: cover;
@include mediaMax($mobile-w) {
background: #fff;
}
}
.mb-input {
margin-bottom: 15px;
}
.select-wrapper {
margin: 10px 0;
line-height: 33px;
width: 100%;
}
.link {
cursor: pointer;
color: $color-blue;
&:hover {
color: darken($color-blue, 10%);
}
}
.extra-info {
margin: 8px 0;
font-size: 1.3rem;
}
.page-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, $offset-of-vertical);
margin-bottom: 20px;
width: 330px;
.page-container-style {
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
text-align: center;
padding-bottom: 30px;
border-radius: 3px;
}
@include mediaMax($mobile-w) {
width: 100vw;
margin-bottom: 0;
top: 0;
left: 0;
transform: none;
.page-container-style {
box-shadow: none;
}
}
$zoom: 1.1;
.logo-wrapper {
height: 125px;
color: #fff;
border-radius: 3px 3px 0 0;
// background-color: #fff;
background-color: $color-blue;
background-size: cover;
background-position: center center;
position: relative;
@include mediaMax($mobile-w) {
border-radius: 0;
}
}
.logo,
.avatar-mask {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
}
.logo {
width: 200px * $zoom;
height: 38.4px * $zoom;
display: block;
background: image_url('logo_white.png') center center no-repeat;
background-size: 100%;
}
.avatar-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.avatar-mask {
$size: 38.4px * $zoom;
width: $size;
height: $size;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, .5);
}
.switch-button {
margin: 10px 0;
display: flex;
a {
position: relative;
display: inline-block;
line-height: 40px;
width: 50%;
color: #777;
&.active {
color: #7d7d7d;
font-weight: 600;
}
&:hover {
background: #efefef;
}
}
a:first-child::after {
position: absolute;
right: -0.5px;
top: 25%;
content: '';
height: 50%;
width: 1px;
display: block;
background-color: #eee;
}
&:hover a:first-child::after {
display: none;
}
}
.form-wrapper {
width: 260px;
margin-left: auto;
margin-right: auto;
}
}
.social-login {
margin-top: 20px;
.section-title {
position: relative;
span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 10px;
background-color: #fff;
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #c3c3c3;
left: 0;
top: 10px;
}
}
.social-button {
display: flex;
justify-content: space-between;
margin-top: 10px;
a {
width: 48%;
}
a.full-width {
width: 100%;
}
.iconfont {
position: relative;
top: -1px;
}
&.center {
justify-content: center;
}
}
}
.back-btn {
margin: 12px auto;
margin-bottom: 5px;
display: inline-block;
transition: all .3s;
.iconfont {
display: inline-block;
color: #fff;
width: 22px;
height: 22px;
line-height: 22px;
background-color: $color-blue;
border-radius: 50%;
text-align: center;
margin-right: 5px;
position: relative;
top: -1px;
&::after {
position: relative;
left: -1px;
top: 1px;
}
}
&:hover {
transform: translateX(-10px);
}
}
.form-title {
font-size: 2rem;
color: #222;
margin: 0;
}
.form-desc {
margin: 0;
font-size: 1.3rem;
color: #666;
margin-bottom: 20px;
}
.icon-eye.active {
color: $color-blue;
}