69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
.top-sheet.top-sheet {
|
|
padding: 4px;
|
|
text-decoration: none;
|
|
|
|
& > .info {
|
|
display: block;
|
|
background: darken($base-a, 0%);
|
|
color: white;
|
|
text-align: left;
|
|
padding: 16px;
|
|
width: auto;
|
|
border-radius: 3px;
|
|
box-shadow: $shadow2;
|
|
text-shadow: 0 1px 1px rgba($base-text, 0.3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
box-shadow: $shadow3;
|
|
}
|
|
|
|
&:nth-of-type(3n + 1) {
|
|
& > .info {
|
|
background: linear-gradient(
|
|
15deg,
|
|
$base-a,
|
|
adjust-color($base-a, $lightness: 4%, $hue: 20deg));
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-a, 8%);
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3n + 2) {
|
|
& > .info {
|
|
background: linear-gradient(
|
|
15deg,
|
|
$base-mute,
|
|
adjust-color($base-mute, $lightness: 4%, $hue: -10deg));
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-mute, 8%);
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3n + 3) {
|
|
& > .info {
|
|
background: linear-gradient(
|
|
15deg,
|
|
$base-c,
|
|
adjust-color($base-c, $lightness: 2%, $hue: 6deg));
|
|
}
|
|
|
|
&:hover > .info,
|
|
&:focus > .info {
|
|
background: darken($base-c, 8%);
|
|
}
|
|
}
|
|
|
|
& > .info > .title {
|
|
display: none;
|
|
}
|
|
}
|