Permalink
Browse files

Add drop shadow variant for idle state JW8-1668

  • Loading branch information...
DanFerrer committed Jul 2, 2018
1 parent 0ac0e36 commit d9b85fe5c6b4e068941ed935216419d048685bec
Showing with 45 additions and 1 deletion.
  1. +1 −0 package.json
  2. +2 −1 postcss.config.js
  3. +1 −0 src/css/controls.less
  4. +41 −0 src/css/controls/imports/drop-shadow-variants.less
View
@@ -56,6 +56,7 @@
"marked": "0.3.19",
"mocha": "5.0.5",
"node-libs-browser": "2.1.0",
"postcss-easing-gradients": "^3.0.0",
"postcss-loader": "2.1.3",
"postcss-safe-parser": "3.0.1",
"promise-polyfill": "7.1.1",
View
@@ -1,5 +1,6 @@
module.exports = {
plugins: [
require('postcss-easing-gradients'),
require('autoprefixer')
]
};
};
View
@@ -14,6 +14,7 @@
@import "controls/imports/settings-menu.less";
@import "controls/imports/idle-variants.less";
@import "controls/imports/info-overlay.less";
@import "controls/imports/drop-shadow-variants.less";
// State specific
@import "controls/states.less";
@@ -0,0 +1,41 @@
@import "../../shared-imports/vars.less";
.jw-ab-drop-shadow.jw-state-idle {
background-image: ~"linear-gradient(to bottom, rgba(0, 0, 0, 0.2), ease-out, rgba(0, 0, 0, 0))";
background-size: 100% 7rem;
background-position: 50% 0;
.jw-controls .jw-svg-icon,
.jw-controls .jw-icon.jw-text,
.jw-slider-container .jw-rail,
.jw-title {
text-shadow: none;
box-shadow: none;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.jw-button-color {
opacity: 0.8;
transition-property: color, opacity;
&:not(:hover) {
color: @white;
opacity: 0.8;
}
&:hover {
opacity: 1;
}
}
.jw-controls-backdrop {
background-image: ~"linear-gradient(to bottom, rgba(0, 0, 0, 0), ease-in, rgba(0, 0, 0, 0.4))";
mix-blend-mode: multiply;
transition-property: opacity;
}
.jw-controls {
background-color: transparent;
}
}

0 comments on commit d9b85fe

Please sign in to comment.