accounts-frontend/packages/app/components/profile/profileForm.scss

117 lines
1.5 KiB
SCSS
Raw Normal View History

@import '~app/components/ui/fonts.scss';
@import '~app/components/ui/colors.scss';
.contentWithBackButton {
position: relative;
max-width: 400px;
margin: 0 auto;
}
.backButton {
position: absolute;
left: -60px;
top: 15px;
width: 25px;
height: 25px;
padding: 15px;
font-size: 25px;
border-bottom: none;
color: #ccc;
transition: 0.3s;
&:hover {
color: #9a9a9a;
}
}
.backIcon {
composes: arrowLeft from '~app/components/ui/icons.scss';
position: relative;
}
.backText {
display: none;
}
.form {
background: #fff;
overflow: hidden; // disable margin collapsing
}
.formBody {
margin: 30px;
}
.formRow {
margin: 25px 0;
}
.title {
position: relative;
font-size: 24px;
font-family: $font-family-title;
padding-bottom: 9px;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 86px;
background: $green;
}
}
.violetTitle {
composes: title;
&:after {
background: $violet;
}
}
.description {
font-size: 12px;
color: #666666;
line-height: 1.5;
margin-top: 25px;
}
.stepper {
width: 35%;
margin: 0 auto;
}
@media (max-width: 525px) {
.contentWithBackButton .title {
padding-top: 23px;
}
.backButton {
top: 29px;
left: 27px;
padding: 0;
margin: 0;
width: auto;
height: auto;
z-index: 1;
font-size: 14px;
}
.backIcon {
bottom: 1px;
}
.backText {
display: inline;
}
}