diff --git a/agaric/sass/agaric/_component.card.scss b/agaric/sass/agaric/_component.card.scss index 0f2e86c..c2eff1e 100644 --- a/agaric/sass/agaric/_component.card.scss +++ b/agaric/sass/agaric/_component.card.scss @@ -16,72 +16,115 @@ a.card { .card.is-blue { color: $white; background-color: $blue; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($blue, .5); + } } a.card.is-blue:hover { color: $white; background-color: darken($blue, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-marine { color: $white; background-color: $marine; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($marine, .5); + } } a.card.is-marine:hover { color: $white; background-color: darken($marine, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-berry { color: $white; background-color: $berry; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($berry, .5); + } } a.card.is-berry:hover { color: $white; background-color: darken($berry, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-cinnamon { color: $white; background-color: $cinnamon; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($cinnamon, .5); + } } a.card.is-cinnamon:hover { color: $white; background-color: darken($cinnamon, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-dark { color: $white; background-color: $dark; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($dark, .5); + } } a.card.is-dark:hover { color: $white; background-color: darken($dark, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-grey { color: $white; background-color: $grey; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($grey, .5); + } } a.card.is-grey:hover { color: $white; background-color: darken($grey, 5%); + & > .card-image { + box-shadow: none; + } } .card.is-dandelion { color: $white; background-color: $dandelion; + & > .card-image { + box-shadow: inset 0 0 0 100vmax rgba($dandelion, .5); + } } a.card.is-dandelion:hover { color: $white; background-color: darken($dandelion, 5%); + & > .card-image { + box-shadow: none; + } } + // Project .card-project { position: relative;