Commit 92547303 authored by Adrien Plazas's avatar Adrien Plazas
Browse files

themes: Simplify shadows definition

Let's use the power of SASS to simplify definitions. This also fixes an
upward shadow definition error.
parent 9f470864
Pipeline #53618 passed with stages
in 14 minutes and 50 seconds
......@@ -29,15 +29,15 @@ preferencespage label.h4 { font-weight: bold; }
deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to right, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to left, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to top, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
......
......@@ -29,15 +29,15 @@ preferencespage label.h4 { font-weight: bold; }
deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to right, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to left, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to top, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
......
......@@ -8,3 +8,15 @@
@function hdymix($c1, $c2, $r) {
@return unquote("mix(#{$c1}, #{$c2}, #{$r})");
}
@mixin background-shadow($direction) {
background-image:
linear-gradient($direction,
hdyalpha(#000, 0.05),
hdyalpha(#000, 0.01) 40px,
hdyalpha(#000, 0) 56px),
linear-gradient($direction,
hdyalpha(#000, 0.03),
hdyalpha(#000, 0.01) 7px,
hdyalpha(#000, 0) 24px);
}
......@@ -80,72 +80,25 @@ preferencespage label.h4 {
// Shadows
deck > dimming,
leaflet > dimming {
background: rgba(0, 0, 0, 0.12);
}
deck > shadow,
leaflet > shadow {
min-width: 56px;
min-height: 56px;
}
deck > border,
leaflet > border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
deck > shadow.left,
leaflet > shadow.left {
background-image:
linear-gradient(to right,
hdyalpha(#000, 0.05),
hdyalpha(#000, 0.01) 40px,
hdyalpha(#000, 0) 56px),
linear-gradient(to right,
hdyalpha(#000, 0.03),
hdyalpha(#000, 0.01) 7px,
hdyalpha(#000, 0) 24px);
}
deck > shadow.right,
leaflet > shadow.right {
background-image:
linear-gradient(to left,
hdyalpha(#000, 0.05),
hdyalpha(#000, 0.01) 40px,
hdyalpha(#000, 0) 56px),
linear-gradient(to left,
hdyalpha(#000, 0.03),
hdyalpha(#000, 0.01) 7px,
hdyalpha(#000, 0) 24px);
}
deck > shadow.down
leaflet > shadow.up {
background-image:
linear-gradient(to bottom,
hdyalpha(#000, 0.05),
hdyalpha(#000, 0.01) 40px,
hdyalpha(#000, 0) 56px),
linear-gradient(to bottom,
hdyalpha(#000, 0.03),
hdyalpha(#000, 0.01) 7px,
hdyalpha(#000, 0) 24px);
}
deck > shadow.down,
leaflet > shadow.down {
background-image:
linear-gradient(to top,
hdyalpha(#000, 0.05),
hdyalpha(#000, 0.01) 40px,
hdyalpha(#000, 0) 56px),
linear-gradient(to top,
hdyalpha(#000, 0.03),
hdyalpha(#000, 0.01) 7px,
hdyalpha(#000, 0) 24px);
deck,
leaflet {
> dimming {
background: rgba(0, 0, 0, 0.12);
}
> border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
> shadow {
min-width: 56px;
min-height: 56px;
&.left { @include background-shadow(to right); }
&.right { @include background-shadow(to left); }
&.up { @include background-shadow(to bottom); }
&.down { @include background-shadow(to top); }
}
}
......@@ -29,14 +29,14 @@ preferencespage label.h4 { font-weight: bold; }
deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to right, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to left, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to top, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment