taiga-front/app/styles/layout/invitation.scss

118 lines
2.5 KiB
SCSS

.invitation-main {
@include background-taiga;
align-content: center;
align-items: center;
background-size: cover;
display: flex;
flex: 1;
height: 100vh;
justify-content: center;
z-index: 999;
.invitation-container {
align-items: center;
display: flex;
flex-direction: column;
max-width: 800px;
min-width: 420px;
}
.avatar {
align-items: center;
display: flex;
flex-direction: column;
.person-name {
@include font-size(large);
@include font-type(light);
color: $white;
}
img {
margin-bottom: .5rem;
width: 50px;
}
}
.invitation-text {
@include font-size(large);
@include font-type(light);
color: $white;
text-align: center;
.project-name {
@include font-size(xlarge);
display: block;
text-transform: uppercase;
}
}
.invitation-form {
display: flex;
flex-basis: 100%;
width: 100%;
fieldset {
margin-bottom: .5rem;
}
input:focus {
+.forgot-pass {
opacity: 0;
transition: opacity .5s linear;
}
}
.forgot-pass {
@include font-size(small);
color: $gray-light;
opacity: 1;
position: absolute;
right: 1rem;
top: .5rem;
transition: all .3s linear;
&:hover {
color: $grayer;
transition: color .3s linear;
}
}
}
.login-form,
.register-form {
flex: 1;
padding: 1rem 3rem;
text-align: center;
.form-header {
@include font-size(large);
@include font-type(light);
color: $white;
}
}
.register-form {
fieldset {
&:last-child {
margin-bottom: 1rem;
}
}
}
.register-text {
color: $white;
a {
color: $primary;
}
}
.button-auth {
display: block;
}
.button-blackish {
&:hover {
background: $primary;
}
}
.login-form {
border-right: 1px solid rgba($white, .3);
}
.public-register-disabled {
width: 400px;
.login-form {
border-right: 0;
}
}
.contrib-plugins-wrapper {
label {
color: $whitish;
}
}
}