blog/_sass/misc/article-menu.scss

62 lines
1.1 KiB
SCSS
Raw Normal View History

2019-09-11 06:19:34 +02:00
/*
* Post menu
*/
.post-menu {
padding: 0 20px;
max-width: 250px;
.post-menu-title {
2020-07-12 10:19:42 +02:00
font-size: $base-font-size * 1.5;
margin-bottom: 14px;
2019-09-11 06:19:34 +02:00
font-weight: 600;
2020-07-12 10:19:42 +02:00
color: #222;
2019-09-11 06:19:34 +02:00
}
.post-menu-content {
ul {
2020-07-12 10:19:42 +02:00
border-left: 1px solid #e9ecef;
$indent: $base-font-size / 4;
$active-bgcolor: #ecebec;
2019-09-11 06:19:34 +02:00
@for $i from 2 to 7 {
.h-h#{$i} {
2020-07-12 10:19:42 +02:00
padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
font-size: $base-font-size * 1.2;
line-height: 1.4;
2019-09-11 06:19:34 +02:00
}
}
a {
display: flex;
2020-07-12 10:19:42 +02:00
padding: 2px 8px;
color: darken($text-color, 10%);
2019-09-11 06:19:34 +02:00
* {
pointer-events: none;
}
2020-07-12 10:19:42 +02:00
&:hover {
text-decoration: none;
color: lighten($text-color, 20%)!important;
}
2019-09-11 06:19:34 +02:00
}
.active {
2020-07-12 10:19:42 +02:00
background-color: $active-bgcolor;
2019-09-11 06:19:34 +02:00
transition: background 0.5s;
2020-07-12 10:19:42 +02:00
border-left: 2px solid #202020;
margin-left: -2px;
&:hover {
background-color: lighten($active-bgcolor, 2%);
}
a {
color: #121416;
}
2019-09-11 06:19:34 +02:00
}
}
}
}