122 lines
1.7 KiB
SCSS
122 lines
1.7 KiB
SCSS
// search-box.scss
|
|
|
|
.pages-list {
|
|
& {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
> .item {
|
|
padding: 4px 0;
|
|
flex: 0 0 50%;
|
|
}
|
|
|
|
> .item.top-sheet {
|
|
flex: 0 0 25%;
|
|
}
|
|
}
|
|
|
|
// Article
|
|
.pages-list > .article {
|
|
text-decoration: none;
|
|
display: block;
|
|
white-space: nowrap;
|
|
|
|
&,
|
|
&:visited {
|
|
color: $base-mute3;
|
|
}
|
|
|
|
& > .info > .slug {
|
|
color: $base-head;
|
|
}
|
|
|
|
&:visited > .info > .slug {
|
|
color: $base-text;
|
|
}
|
|
|
|
& > .info > .title::before {
|
|
content: '';
|
|
margin: 0 4px;
|
|
}
|
|
|
|
& > .info > .title {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
& {
|
|
color: $base-mute;
|
|
}
|
|
|
|
& > .info > .title {
|
|
opacity: 1;
|
|
color: $base-a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pages-list > .category {
|
|
@include font-size(1);
|
|
border-bottom: solid 1px $dark-line-color;
|
|
margin: 16px 0;
|
|
padding: 0 0 16px 0;
|
|
font-weight: normal;
|
|
color: $base-b;
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
.top-sheet.top-sheet {
|
|
padding: 4px;
|
|
text-decoration: none;
|
|
|
|
& > .info {
|
|
display: block;
|
|
background: darken($base-a, 8%);
|
|
color: white;
|
|
text-align: left;
|
|
padding: 16px;
|
|
width: auto;
|
|
border-radius: 3px;
|
|
box-shadow: $shadow2;
|
|
}
|
|
|
|
&:nth-of-type(3n + 1) {
|
|
& > .info {
|
|
background: darken($base-a, 8%);
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-a, 16%);
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3n + 2) {
|
|
& > .info {
|
|
background: darken($base-b, 8%);
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-b, 16%);
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3n + 3) {
|
|
& > .info {
|
|
background: darken($base-c, 8%);
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-c, 16%);
|
|
}
|
|
}
|
|
|
|
& > .info > .title {
|
|
display: none;
|
|
}
|
|
}
|