kgroad-frontend2/src/shared/ui/auth-classes.scss

99 lines
1.5 KiB
SCSS

@import "./variables.scss";
.auth-page {
padding: 96px 32px 48px 32px;
height: 100vh;
min-height: 800px;
width: 100%;
display: flex;
justify-content: center;
}
.auth-wrapper {
display: flex;
align-items: center;
flex-direction: column;
gap: 24px;
}
.auth-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(234, 236, 240);
border-radius: 10px;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
background: rgb(255, 255, 255);
}
.auth-icon2 {
min-width: 60px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 8px solid rgba(72, 159, 225, 0.15);
border-radius: 50%;
background: rgba(72, 159, 225, 0.3);
img {
width: 24px;
height: 24px;
}
}
.auth-header {
margin-bottom: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
h2 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: $gray-900;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: $gray-500;
}
}
.auth-redirect {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: $gray-500;
a {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: $light-blue;
}
}
@media screen and (max-width: 768px) {
.auth-page {
padding: 66px 30px;
}
}
@media screen and (max-width: 550px) {
.auth-page {
padding: 48px 16px;
}
.auth-wrapper {
width: 100%;
}
}