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

177 lines
2.4 KiB
SCSS

@import '~app/components/ui/fonts.scss';
@import '~app/components/ui/colors.scss';
$formColumnWidth: 416px;
.indexContent {
display: flex;
}
.formColumn {
width: $formColumnWidth;
min-width: $formColumnWidth; // Чтобы flex не ужимал блок, несмотря на фикс ширину выше
border-bottom: 10px solid #ddd8ce;
}
.descriptionColumn {
padding: 12px 20px 0 0;
box-sizing: border-box;
}
.indexTitle {
font-family: $font-family-title;
font-size: 30px;
margin-bottom: 12px;
}
.indexDescription {
font-size: 14px;
line-height: 1.4;
color: #9a9a9a;
}
.item {
padding: 30px;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
}
.paramItem {
composes: item;
$padding: 20px;
padding-top: $padding;
padding-bottom: $padding;
color: #666666;
}
.paramRow {
display: flex;
align-items: baseline;
flex-basis: 0;
flex-grow: 1;
font-size: 14px;
}
.paramName {
width: 125px;
font-family: $font-family-title;
}
.paramValue {
flex-grow: 1;
}
.uuidValue {
composes: paramName;
composes: paramValue;
}
.paramAction {
text-align: center;
cursor: pointer;
border-bottom: none;
}
.paramEditIcon {
composes: pencil from '~app/components/ui/icons.scss';
color: $white;
transition: 0.4s;
a:hover & {
color: #444;
}
}
.paramMessage {
padding: 10px 40px 0 0;
color: $red;
font-size: 11px;
line-height: 1.2;
a {
color: $red !important;
border-bottom-color: transparent;
border-bottom-style: dashed;
&:hover {
border-bottom-color: lighter($red);
}
}
}
.uuid {
font-family: $font-family-title;
white-space: nowrap;
}
@media (max-width: 720px) {
.indexTitle {
text-align: center;
margin-bottom: 8px;
}
.indexContent {
flex-direction: column;
align-items: center;
}
.descriptionColumn {
width: 100%;
max-width: $formColumnWidth;
padding: 0;
margin-bottom: 10px;
}
.formColumn {
min-width: 0;
width: auto;
max-width: $formColumnWidth;
}
.indexDescription {
text-align: center;
}
.uuid {
font-size: 13px;
}
}
@media (max-width: 424px) {
.paramRow {
flex-wrap: wrap;
}
.paramName {
width: 100%;
margin-bottom: 3px;
}
.paramValue {
flex-grow: 0;
font-size: 16px;
}
.paramEditIcon {
margin-left: 5px;
vertical-align: top;
}
.paramMessage {
padding: 3px 0 0;
}
.uuid {
font-size: 14px;
}
}