From 25c6cbd29aff90f694d72afe28ab56b0113fb16a Mon Sep 17 00:00:00 2001 From: Guille Cura Date: Thu, 5 Jul 2018 02:37:43 -0300 Subject: Update stylesheets and added darkMode variable and toggle. --- src/styles/recipes.scss | 56 +++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 30 deletions(-) (limited to 'src/styles/recipes.scss') diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 1b519a5e5..84222e1fe 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss @@ -1,16 +1,22 @@ @import './config.scss'; +.theme__dark .recipe-teaser { + background-color: $dark-theme-gray-dark; + + &:hover { background-color: $dark-theme-gray; } +} + .recipes { .recipes__list { + align-content: flex-start; display: flex; flex-flow: row wrap; - align-content: flex-start; - min-height: 70%; height: auto; + min-height: 70%; &.recipes__list--disabled { - opacity: 0.3; filter: grayscale(100%); + opacity: .3; pointer-events: none; } } @@ -19,58 +25,48 @@ height: auto; margin-bottom: 35px; - .badge { - margin-right: 10px; - } + .badge { margin-right: 10px; } &.recipes__navigation--disabled { - opacity: 0.3; filter: grayscale(100%); + opacity: .3; pointer-events: none; } } - &__service-request { - float: right; - } + &__service-request { float: right; } } .recipe-teaser { - position: relative; - width: calc(25% - 20px); + background-color: $theme-gray-lightest; + border-radius: $theme-border-radius; height: 120px; margin: 0 20px 20px 0; - border-radius: $theme-border-radius; - background-color: $theme-gray-lightest; - transition: background $theme-transition-time; overflow: hidden; + position: relative; + transition: background $theme-transition-time; + width: calc(25% - 20px); - &:hover { - background-color: $theme-gray-lighter; - } + &:hover { background-color: $theme-gray-lighter; } .recipe-teaser__icon { - width: 50px; margin-bottom: 10px; + width: 50px; } - .recipe-teaser__label { - display: block; - } + .recipe-teaser__label { display: block; } - h2 { - z-index: 10; - } + h2 { z-index: 10; } &__dev-badge { - position: absolute; - top: 5px; - right: -13px; - width: 50px; background: $theme-brand-warning; + box-shadow: 0 0 4px rgba(black, .2); color: #FFF; font-size: 10px; + position: absolute; + right: -13px; + top: 5px; transform: rotateZ(45deg); - box-shadow: 0 0 4px rgba(black, 0.2); + width: 50px; } } -- cgit v1.2.3-54-g00ecf