accounts-frontend/packages/app/pages/rules/rules.scss

99 lines
1.7 KiB
SCSS
Raw Normal View History

@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';
2016-05-22 21:26:52 +05:30
.rules {
2020-05-24 04:38:24 +05:30
max-width: 500px;
margin: 30px auto 0;
padding: 0 20px;
2016-05-22 21:26:52 +05:30
}
.rulesSection {
2020-05-24 04:38:24 +05:30
margin-bottom: 30px;
2016-05-22 21:26:52 +05:30
}
.rulesSectionTitle {
2020-05-24 04:38:24 +05:30
line-height: 50px;
2016-05-22 21:26:52 +05:30
2020-05-24 04:38:24 +05:30
font-family: $font-family-title;
font-size: 20px;
color: #fff;
padding: 0;
margin: 0;
text-align: center;
2016-05-22 21:26:52 +05:30
2020-05-24 04:38:24 +05:30
background: $blue;
2016-05-22 21:26:52 +05:30
}
.rulesBody {
2020-05-24 04:38:24 +05:30
position: relative;
// z-index, чтобы положить :before ниже текста, но выше фона блока
z-index: 0;
2020-05-24 04:38:24 +05:30
padding: 20px;
background: #fff;
font-size: 14px;
}
%rulesTextFormat {
2020-05-24 04:38:24 +05:30
line-height: 1.4;
margin-bottom: 10px;
}
.blockDescription {
@extend %rulesTextFormat;
2020-05-24 04:38:24 +05:30
p {
@extend %rulesTextFormat;
}
2016-05-22 21:26:52 +05:30
}
.rulesList {
2020-05-24 04:38:24 +05:30
padding: 0;
margin: 0;
2021-03-26 08:49:04 +05:30
padding-inline-start: 20px;
2016-05-22 21:26:52 +05:30
}
.rulesItem {
2020-05-24 04:38:24 +05:30
@extend %rulesTextFormat;
list-style: decimal;
position: relative;
cursor: pointer;
&:last-of-type {
margin-bottom: 0;
}
&.target {
&:before {
cursor: default;
$border: 8px solid #ddd8ce;
content: '';
position: absolute;
top: -10px;
2021-03-26 08:49:04 +05:30
inset-inline-start: -40px;
2020-05-24 04:38:24 +05:30
width: calc(100% + 60px);
height: calc(100% + 20px);
background: $white;
border-left: $border;
border-right: $border;
box-sizing: border-box;
z-index: -1;
}
}
2020-05-24 04:38:24 +05:30
a {
color: #444;
border-bottom-color: #aaa;
2016-05-22 21:26:52 +05:30
2020-05-24 04:38:24 +05:30
&:hover {
border-bottom-color: #444;
}
2016-05-22 21:26:52 +05:30
}
}
.footer {
2020-05-24 04:38:24 +05:30
text-align: center;
margin-bottom: 20px;
}