{"version":3,"file":"PNotifyStyleMaterial.js","sources":["src/PNotifyStyleMaterial.html"],"sourcesContent":["<script>\n  import PNotify from \"./PNotify.html\";\n\n  export default {\n    setup (Component) {\n      Component.key = \"StyleMaterial\";\n\n      // Register the module with PNotify.\n      PNotify.modules.StyleMaterial = Component;\n      // Prepend this module to the container.\n      PNotify.modulesPrependContainer.push(Component);\n\n      if (!PNotify.styling.material) {\n        PNotify.styling.material = {};\n      }\n      PNotify.styling.material = Object.assign(PNotify.styling.material, {\n        container: \"pnotify-material\",\n        notice: \"pnotify-material-notice\",\n        info: \"pnotify-material-info\",\n        success: \"pnotify-material-success\",\n        error: \"pnotify-material-error\",\n      });\n\n      if (!PNotify.icons.material) {\n        PNotify.icons.material = {};\n      }\n      PNotify.icons.material = Object.assign(PNotify.icons.material, {\n        notice: \"material-icons pnotify-material-icon-notice\",\n        info: \"material-icons pnotify-material-icon-info\",\n        success: \"material-icons pnotify-material-icon-success\",\n        error: \"material-icons pnotify-material-icon-error\",\n        closer: \"material-icons pnotify-material-icon-closer\",\n        pinUp: \"material-icons pnotify-material-icon-sticker\",\n        pinDown: \"material-icons pnotify-material-icon-sticker pnotify-material-icon-stuck\"\n      });\n    }\n  }\n</script>\n\n<style>\n  /*\n  Color Scheme: https://www.google.com/design/spec/style/color.html#color-color-palette\n  */\n  @import url(https://fonts.googleapis.com/css?family=Material+Icons);\n  :global([ui-pnotify] .pnotify-material) {\n    -webkit-border-radius: 0;\n    -moz-border-radius: 0;\n    border-radius: 0;\n    font-size: 14px;\n  }\n  :global([ui-pnotify] .pnotify-material.ui-pnotify-shadow) {\n    -webkit-box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.2);\n    -moz-box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.2);\n    box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.2);\n  }\n  :global([ui-pnotify] .pnotify-material.ui-pnotify-container) {\n    padding: 24px;\n  }\n  :global([ui-pnotify] .pnotify-material .ui-pnotify-title) {\n    font-size: 20px;\n    margin-bottom: 20px;\n  }\n  :global([ui-pnotify] .pnotify-material .ui-pnotify-text) {\n    font-size: 16px;\n  }\n  :global([ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-title),\n  :global([ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-text),\n  :global([ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-confirm) {\n    margin-left: 32px;\n  }\n  :global([dir=rtl] [ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-title),\n  :global([dir=rtl] [ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-text),\n  :global([dir=rtl] [ui-pnotify].ui-pnotify-with-icon .pnotify-material .ui-pnotify-confirm) {\n    margin-right: 32px;\n    margin-left: 0;\n  }\n  :global([ui-pnotify] .pnotify-material .ui-pnotify-action-bar) {\n    margin-top: 20px;\n    margin-right: -16px;\n    margin-bottom: -16px;\n  }\n  :global([dir=rtl] [ui-pnotify] .pnotify-material .ui-pnotify-action-bar) {\n    margin-left: -16px;\n    margin-right: 0;\n  }\n  :global([ui-pnotify] .pnotify-material-notice) {\n    /* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=FFEE58 */\n    background-color: #FFEE58;\n    border: none;\n    color: #000;\n  }\n  :global([ui-pnotify] .pnotify-material-info) {\n    /* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=26C6DA */\n    background-color: #26C6DA;\n    border: none;\n    color: #000;\n  }\n  :global([ui-pnotify] .pnotify-material-success) {\n    /* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=66BB6A */\n    background-color: #66BB6A;\n    border: none;\n    color: #fff;\n  }\n\n  :global([ui-pnotify] .pnotify-material-error) {\n    /* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=EF5350 */\n    background-color: #EF5350;\n    border: none;\n    color: #fff;\n  }\n  :global([ui-pnotify] .pnotify-material-icon-notice),\n  :global([ui-pnotify] .pnotify-material-icon-info),\n  :global([ui-pnotify] .pnotify-material-icon-success),\n  :global([ui-pnotify] .pnotify-material-icon-error),\n  :global([ui-pnotify] .pnotify-material-icon-closer),\n  :global([ui-pnotify] .pnotify-material-icon-sticker) {\n    position: relative;\n  }\n  :global([ui-pnotify] .pnotify-material-icon-closer),\n  :global([ui-pnotify] .pnotify-material-icon-sticker) {\n    height: 20px;\n    width: 20px;\n    font-size: 20px;\n    line-height: 20px;\n    position: relative;\n  }\n  :global([ui-pnotify] .pnotify-material-icon-notice:after),\n  :global([ui-pnotify] .pnotify-material-icon-info:after),\n  :global([ui-pnotify] .pnotify-material-icon-success:after),\n  :global([ui-pnotify] .pnotify-material-icon-error:after),\n  :global([ui-pnotify] .pnotify-material-icon-closer:after),\n  :global([ui-pnotify] .pnotify-material-icon-sticker:after) {\n    font-family: 'Material Icons';\n  }\n  :global([ui-pnotify] .pnotify-material-icon-notice:after) {\n    content: \"announcement\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-info:after) {\n    content: \"info\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-success:after) {\n    content: \"check_circle\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-error:after) {\n    content: \"error\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-closer),\n  :global([ui-pnotify] .pnotify-material-icon-sticker) {\n    display: inline-block;\n  }\n  :global([ui-pnotify] .pnotify-material-icon-closer:after) {\n    top: -4px;\n    content: \"close\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-sticker:after) {\n    top: -5px;\n    content: \"pause\";\n  }\n  :global([ui-pnotify] .pnotify-material-icon-sticker.pnotify-material-icon-stuck:after) {\n    content: \"play_arrow\";\n  }\n\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-prompt-input) {\n    display: block;\n    width: 100%;\n    margin-bottom: 8px;\n\n    padding: 15px 0 8px;\n    background-color: transparent;\n    color: inherit;\n    border-radius: 0;\n\n    border-top: none;\n    border-left: none;\n    border-right: none;\n    border-bottom-style: solid;\n    border-bottom-color: inherit;\n    border-bottom-width: 1px;\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-prompt-input:focus) {\n    outline: none;\n    border-bottom-color: #3F51B5;\n    border-bottom-width: 2px;\n  }\n\n  /* CSS Material Buttons from https://codepen.io/sebj54/pen/oxluI */\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button) {\n    position: relative;\n\n    padding: 0 16px;\n\n    overflow: hidden;\n\n    border-width: 0;\n    outline: none;\n    border-radius: 2px;\n\n    background-color: transparent;\n    color: inherit;\n\n    transition: background-color .3s;\n\n    text-transform: uppercase;\n    height: 36px;\n    margin: 6px;\n    min-width: 64px;\n    font-weight: bold;\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button.ui-pnotify-material-primary) {\n    /* background-color: #3F51B5; */\n    /* color: #ecf0f1; */\n    color: #3F51B5;\n    /* box-shadow: 0 1px 4px rgba(0, 0, 0, .6); */\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button:hover),\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button:focus) {\n    background-color: rgba(0, 0, 0, .12);\n    color: inherit;\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button.ui-pnotify-material-primary:hover),\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button.ui-pnotify-material-primary:focus) {\n    /* background-color: #303F9F; */\n    /* color: #ecf0f1; */\n    color: #303F9F;\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button:before) {\n    content: \"\";\n\n    position: absolute;\n    top: 50%;\n    left: 50%;\n\n    display: block;\n    width: 0;\n    padding-top: 0;\n\n    border-radius: 100%;\n\n    background-color: rgba(153, 153, 153, .4);\n\n    -webkit-transform: translate(-50%, -50%);\n    -moz-transform: translate(-50%, -50%);\n    -ms-transform: translate(-50%, -50%);\n    -o-transform: translate(-50%, -50%);\n    transform: translate(-50%, -50%);\n  }\n  :global([ui-pnotify].ui-pnotify .pnotify-material .ui-pnotify-action-button:active:before) {\n    width: 120%;\n    padding-top: 120%;\n\n    transition: width .2s ease-out, padding-top .2s ease-out;\n  }\n</style>\n"],"names":[],"mappings":";;;cAIU,CAAC,SAAS,EAAE;AACtB,AAAI,EAAE,SAAS,CAAC,GAAG,GAAG,eAAe,CAAC;;AAEtC,AAAI;AACJ,AAAI,EAAE,OAAO,CAAC,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;AAChD,AAAI;AACJ,AAAI,EAAE,OAAO,CAAC,uBAAuB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;AAEtD,AAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE;AACrC,AAAI,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC;AACtC,AAAI,GAAG;AACP,AAAI,EAAE,OAAO,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE;AACzE,AAAI,IAAI,SAAS,EAAE,kBAAkB;AACrC,AAAI,IAAI,MAAM,EAAE,yBAAyB;AACzC,AAAI,IAAI,IAAI,EAAE,uBAAuB;AACrC,AAAI,IAAI,OAAO,EAAE,0BAA0B;AAC3C,AAAI,IAAI,KAAK,EAAE,wBAAwB;AACvC,AAAI,GAAG,CAAC,CAAC;;AAET,AAAI,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE;AACnC,AAAI,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;AACpC,AAAI,GAAG;AACP,AAAI,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrE,AAAI,IAAI,MAAM,EAAE,6CAA6C;AAC7D,AAAI,IAAI,IAAI,EAAE,2CAA2C;AACzD,AAAI,IAAI,OAAO,EAAE,8CAA8C;AAC/D,AAAI,IAAI,KAAK,EAAE,4CAA4C;AAC3D,AAAI,IAAI,MAAM,EAAE,6CAA6C;AAC7D,AAAI,IAAI,KAAK,EAAE,8CAA8C;AAC7D,AAAI,IAAI,OAAO,EAAE,0EAA0E;AAC3F,AAAI,GAAG,CAAC,CAAC;AACT,AAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}