Update
This commit is contained in:
parent
29f92f6b12
commit
ee90312092
|
@ -66,56 +66,3 @@
|
||||||
color: $base-b;
|
color: $base-b;
|
||||||
flex: 0 0 100%;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -0,0 +1,66 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -26,3 +26,4 @@
|
||||||
@import './components/side-ad';
|
@import './components/side-ad';
|
||||||
@import './components/site-header';
|
@import './components/site-header';
|
||||||
@import './components/top-nav';
|
@import './components/top-nav';
|
||||||
|
@import './components/top-sheet';
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
title: React-router
|
title: React-router
|
||||||
category: React
|
category: React
|
||||||
layout: default-ad
|
layout: default-ad
|
||||||
tags: [Featured]
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
|
Loading…
Reference in New Issue