diff --git a/_sass/2017/components/pages-list.scss b/_sass/2017/components/pages-list.scss index c7c3ab66..fc5fdb6b 100644 --- a/_sass/2017/components/pages-list.scss +++ b/_sass/2017/components/pages-list.scss @@ -66,56 +66,3 @@ 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; - } -} diff --git a/_sass/2017/components/top-sheet.scss b/_sass/2017/components/top-sheet.scss new file mode 100644 index 00000000..4320657d --- /dev/null +++ b/_sass/2017/components/top-sheet.scss @@ -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; + } +} diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index d0e70410..11cd0616 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -26,3 +26,4 @@ @import './components/side-ad'; @import './components/site-header'; @import './components/top-nav'; +@import './components/top-sheet'; diff --git a/react-router.md b/react-router.md index 309c5f95..9bd0689c 100644 --- a/react-router.md +++ b/react-router.md @@ -2,7 +2,6 @@ title: React-router category: React layout: default-ad -tags: [Featured] --- {% raw %} diff --git a/sass.md b/sass.md index 48ce099f..79f776e2 100644 --- a/sass.md +++ b/sass.md @@ -2,6 +2,7 @@ title: Sass category: CSS layout: 2017/sheet +tags: [Featured] --- ## Basics