Merge pull request #1 from benjaminliugang/MAX-23935

MAX-23935 Change Request: Refine the shadow darker style for tooltip

HISTORY.md

@@ -1,3 +1,7 @@
+v1.3.3
+=================
+* Refine the shadow style
+
 v1.3.1
 =================
 * add slot to docs (#32)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-tooltip",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "main": [
     "px-tooltip.html"
   ],
@@ -54,4 +54,4 @@
     }
   },
   "license": "Apache-2.0"
-}
+}

css/px-tooltip-styles.html

@@ -17,7 +17,7 @@
 <dom-module id="px-tooltip-styles">
 <template>
 <style>
-@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:var(--px-tooltip-z-index,1002);pointer-events:none}#tooltip.right:after,#tooltip.right:before{right:calc(100% - 1px);top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}#tooltip.right:after{border-color:rgba(136,183,213,0);border-right-color:var(--px-tooltip-background-color,#fff);border-width:5px;margin-top:-5px}#tooltip.right:before{border-color:rgba(194,225,245,0);border-right-color:var(--px-tooltip-border-color,#000);border-width:6px;margin-top:-6px}#tooltip.left:after,#tooltip.left:before{left:calc(100% - 1px);top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}#tooltip.bottom:after,#tooltip.bottom:before,#tooltip.top:after,#tooltip.top:before{left:50%;content:" ";height:0;width:0;position:absolute;pointer-events:none}#tooltip.left:after{border-color:rgba(136,183,213,0);border-left-color:var(--px-tooltip-background-color,#fff);border-width:5px;margin-top:-5px}#tooltip.left:before{border-color:rgba(194,225,245,0);border-left-color:var(--px-tooltip-border-color,#000);border-width:6px;margin-top:-6px}#tooltip.bottom:after,#tooltip.bottom:before{bottom:calc(100% - 1px);border:solid transparent}#tooltip.bottom:after{border-color:rgba(136,183,213,0);border-bottom-color:var(--px-tooltip-background-color,#fff);border-width:5px;margin-left:-5px}#tooltip.bottom:before{border-color:rgba(194,225,245,0);border-bottom-color:var(--px-tooltip-border-color,#000);border-width:6px;margin-left:-6px}#tooltip.top:after,#tooltip.top:before{top:calc(100% - 1px);border:solid transparent}#tooltip.top:after{border-color:rgba(136,183,213,0);border-top-color:var(--px-tooltip-background-color,#fff);border-width:5px;margin-left:-5px}#tooltip.top:before{border-color:rgba(194,225,245,0);border-top-color:var(--px-tooltip-border-color,#000);border-width:6px;margin-left:-6px}.tooltip-container{background-color:var(--px-tooltip-background-color,#fff);color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 1px 3px 0 var(--px-tooltip-shadow-color,#000);pointer-events:none;outline:0;padding:15px 20px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;word-wrap:break-word}.tooltip-container #message{line-height:1}
+@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */#tooltip.left:after,#tooltip.right:after{box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000)}html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;background-color:transparent;display:block;position:absolute!important;outline:0;z-index:var(--px-tooltip-z-index,1002);pointer-events:none}#tooltip.right:after,#tooltip.right:before{content:"";position:absolute;width:0;height:0;margin-left:0;top:calc(50% - 7px);left:1px;pointer-events:none;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:0 0;transform:rotate(45deg)}#tooltip.bottom:after,#tooltip.bottom:before,#tooltip.left:after,#tooltip.left:before{transform-origin:100% 0;content:"";position:absolute;width:0;height:0;margin-left:0;box-sizing:border-box;border:5px solid var(--px-tooltip-background-color,#fff);pointer-events:none}#tooltip.right:after{z-index:-10}#tooltip.right:before{z-index:10}#tooltip.left:after,#tooltip.left:before{top:calc(50% - 7px);right:1px;transform:rotate(-45deg)}#tooltip.left:after{z-index:-10}#tooltip.left:before{z-index:10}#tooltip.bottom:after,#tooltip.bottom:before{left:calc(50% - 2.5px);top:1px;transform:rotate(45deg)}#tooltip.bottom:after{z-index:10;box-shadow:-3px -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.bottom:before{z-index:-10}#tooltip.bottom{box-shadow:0 -3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:after,#tooltip.top:before{content:"";position:absolute;width:0;height:0;margin-left:0;left:calc(50% - 8.5px);pointer-events:none;box-sizing:border-box;bottom:-1px;border:5px solid var(--px-tooltip-background-color,#fff);transform-origin:100% 0;transform:rotate(-45deg)}#tooltip.top:after{z-index:10;box-shadow:-3px 3px 3px 0 var(--px-tooltip-shadow-color,#000)}#tooltip.top:before{z-index:-10}.tooltip-container{background-color:var(--px-tooltip-background-color,#fff);color:var(--px-tooltip-text-color,#000);border:1px solid var(--px-tooltip-border-color,#000);box-shadow:0 3px 3px 0 var(--px-tooltip-shadow-color,#000);pointer-events:none;outline:0;padding:15px 20px;max-width:var(--px-tooltip-max-width,400px);white-space:normal;word-wrap:break-word}.tooltip-container #message{line-height:1}
 </style>
 </template>
 </dom-module>