diff --git a/README.md b/README.md index f4e6f17..5ccdfbd 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - **Social icons** and network specific **share methods** - OnPress ripple effect - Look and feel customisable and extendable in two ways: via **CSS custom properties** or **SASS** variables and lists ([scss config file](https://github.com/rcaferati/react-awesome-button/blob/master/src/styles/default.scss)). -- Use it with **CSSModules** or **Plain CSS +- Use it with **CSSModules** or **Plain CSS** ## Live demo @@ -74,7 +74,7 @@ function Button() { ### `AwesomeButton` rendered with a button tag Renders the component with a `Button` tag and an onPress prop called on animation release. -Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Primary). +Checkout this example live on the [storybook](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Primary). ```jsx import { AwesomeButton } from "react-awesome-button"; import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss"; @@ -97,9 +97,9 @@ function Button() { ### `AwesomeButton` rendered with an anchor tag -Render the component with an `anchor` tag setting the href and target attributes. +Render the component with an `anchor` tag setting the **href** and **target** attributes. -Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Link). +Checkout this example live on the [storybook](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButton&selectedStory=Link). ```jsx import { AwesomeButton } from "react-awesome-button"; @@ -135,7 +135,7 @@ function Button() { ### `AwesomeButtonProgress` basic example -Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonProgress&selectedStory=Success). +Checkout this example live on the [storybook](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonProgress&selectedStory=Success). ```jsx import { AwesomeButtonProgress } from 'react-awesome-button'; @@ -169,7 +169,7 @@ Being a wrapper on the **`AwesomeButton`** component, it accepts its props plus ### `AwesomeButtonSocial` basic example -Checkout this example live on the [storyboard](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonSocial&selectedStory=Facebook). +Checkout this example live on the [storybook](https://caferati.me/demo/react-awesome-button/storybook/?selectedKind=AwesomeButtonSocial&selectedStory=Facebook). ```jsx import { AwesomeButtonSocial } from 'react-awesome-button'; diff --git a/demo/public/website/react-awesome-slider.css b/demo/public/website/react-awesome-slider.css index b9a5e8b..4e2e67a 100644 --- a/demo/public/website/react-awesome-slider.css +++ b/demo/public/website/react-awesome-slider.css @@ -785,7 +785,7 @@ pre[class*="language-"] { --transform-speed: 0.175s; --button-primary-color: #FFB300; --button-primary-color-dark: #cc8f00; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #f2aa00; --button-primary-color-active: #cc8f00; --button-primary-border: none; @@ -797,7 +797,7 @@ pre[class*="language-"] { --button-secondary-border: none; --button-anchor-color: #FF6F00; --button-anchor-color-dark: #b34e00; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #f56b00; --button-anchor-color-active: #e66400; --button-anchor-border: none; @@ -1721,7 +1721,7 @@ span.aws-btn__bubble--Zt4- { --transform-speed: 0.175s; --button-primary-color: #1e88e5; --button-primary-color-dark: #1360a4; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #187bd1; --button-primary-color-active: #166dba; --button-primary-border: none; @@ -1733,7 +1733,7 @@ span.aws-btn__bubble--Zt4- { --button-secondary-border: none; --button-anchor-color: #0e4f88; --button-anchor-color-dark: #072743; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #0d4a7f; --button-anchor-color-active: #0c4271; --button-anchor-border: none; @@ -2660,7 +2660,7 @@ span.aws-btn__bubble--36XZ { --transform-speed: 0.175s; --button-primary-color: #5e6fbf; --button-primary-color-dark: #3b4b95; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #4c5fb8; --button-primary-color-active: #4354a7; --button-primary-border: none; @@ -2672,7 +2672,7 @@ span.aws-btn__bubble--36XZ { --button-secondary-border: none; --button-anchor-color: #55a1b6; --button-anchor-color-dark: #397585; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #4e9db3; --button-anchor-color-active: #4994a9; --button-anchor-border: none; @@ -5483,7 +5483,7 @@ span.aws-btn__bubble--2bLu { --transform-speed: 0.15s; --button-primary-color: #1E88E5; --button-primary-color-dark: #1360a4; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #187bd1; --button-primary-color-active: #166dba; --button-primary-border: none; @@ -5495,7 +5495,7 @@ span.aws-btn__bubble--2bLu { --button-secondary-border: 2px solid #1E88E5; --button-anchor-color: #0e4f88; --button-anchor-color-dark: #072743; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #0d4a7f; --button-anchor-color-active: #0c4271; --button-anchor-border: none; @@ -6431,7 +6431,7 @@ span.aws-btn__bubble--1m7t { --button-secondary-border: none; --button-anchor-color: #3D5AFE; --button-anchor-color-dark: #0125ed; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #3351fe; --button-anchor-color-active: #2444fe; --button-anchor-border: none; @@ -7355,7 +7355,7 @@ span.aws-btn__bubble--3bDC { --transform-speed: 0.165s; --button-primary-color: #f44336; --button-primary-color-dark: #ba160a; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #f3382a; --button-primary-color-active: #ea1c0d; --button-primary-border: none; @@ -7367,7 +7367,7 @@ span.aws-btn__bubble--3bDC { --button-secondary-border: none; --button-anchor-color: #c62828; --button-anchor-color-dark: #470e0e; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #be2626; --button-anchor-color-active: #b12424; --button-anchor-border: none; diff --git a/dist/index.js b/dist/index.js index 0f89376..2acc94f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -!function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports["react-awesome-button"]=t(require("react"),require("prop-types")):e["react-awesome-button"]=t(e.React,e.PropTypes)}(this,(function(e,t){return function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}return __webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.t=function(e,t){if(1&t&&(e=__webpack_require__(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)__webpack_require__.d(n,r,function(t){return e[t]}.bind(null,r));return n},__webpack_require__.n=function(e){var t=e&&e.__esModule?function getDefault(){return e.default}:function getModuleExports(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=5)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(6);Object.defineProperty(t,"AwesomeButton",{enumerable:!0,get:function get(){return _interopRequireDefault(r).default}});var o=n(7);Object.defineProperty(t,"AwesomeButtonSocial",{enumerable:!0,get:function get(){return _interopRequireDefault(o).default}});var i=n(10);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"AwesomeButtonProgress",{enumerable:!0,get:function get(){return _interopRequireDefault(i).default}})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var _slicedToArray=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function sliceIterator(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var c,s=e[Symbol.iterator]();!(r=(c=s.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{!r&&s.return&&s.return()}finally{if(o)throw i}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};t.serialize=function serialize(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"&";return Object.entries(e).map((function(e){var t=_slicedToArray(e,2);return t[0]+"="+t[1]})).join(t)},t.classToModules=classToModules,t.getClassName=function getClassName(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments[1];if(t)return t[e]||e;return e},t.setCssEndEvent=setCssEndEvent,t.toggleMoveClasses=function toggleMoveClasses(e){var t=e.element,n=e.root,o=e.cssModule,i=void 0===o?null:o,c=e.state,s=void 0===c?null:c;if(!t)return!1;if(!s)return t.classList.remove(classToModules([n+"--"+r[0]],i),classToModules([n+"--"+r[1]],i),classToModules([n+"--"+r[2]],i)),!1;var l=r.filter((function(e){return e!==s})),a=l.length;for(;a--;)t.classList.remove(classToModules([n+"--"+l[a]],i));return t.classList.add(classToModules([n+"--"+s],i)),!0},t.createBubbleEffect=function createBubbleEffect(e){var t=e.event,n=e.button,r=e.content,o=e.className,i=n.getBoundingClientRect(),c=window.pageYOffset||document.documentElement.scrolltop||0,s=document.createElement("span"),l=i.width<50?3*i.width:2*i.width;s.className=o,s.style.top="-"+(l/2-(t.pageY-i.top-c))+"px",s.style.left="-"+(l/2-(t.pageX-i.left))+"px",s.style.width=l+"px",s.style.height=l+"px",setCssEndEvent(s,"animation",(function(){window.requestAnimationFrame((function(){r.removeChild(s)}))})),window.requestAnimationFrame((function(){r.appendChild(s)}))};var r=["middle","left","right"];function classToModules(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(!t)return e.join(" ").trim();for(var n=[],r=e.length;r--;)t[e[r]]&&n.push(t[e[r]]);return n.join(" ").trim()}function setCssEndEvent(e,t,n){if(!e)return!1;var r=t.charAt(0).toUpperCase()+t.slice(1);return void 0!==e.style["Webkit"+r]?e.addEventListener("webkit"+r+"End",n):void 0!==e.style.OTransition?e.addEventListener("o"+t+"End",n):e.addEventListener(t+"End",n)}},function(e,t,n){e.exports=function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(t){return e[t]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function o(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.tolerance,o=void 0===r?0:r,i=n.propertyName;return new Promise((function(n){if(e){var r=null,s=t.charAt(0).toUpperCase()+t.slice(1),l=0;void 0!==e.style["Webkit"+s]&&(r="webkit"+s+"End"),void 0!==e.style.OTransition&&(r="o"+t+"End"),void 0!==e.style[t]&&(r=t+"end"),e.clearCssEndEvent&&e.clearCssEndEvent(),e.clearCssEndEvent=function(){e.removeEventListener(r,c)},e.addEventListener(r,c)}else n(!1);function c(t){if((t.srcElement||t.target)===e){if(l>=o){if(i&&i!==t.propertyName)return;e.removeEventListener(r,c),n(t)}l+=1}}}))}function r(e){window&&window.requestAnimationFrame((function(){window.requestAnimationFrame(e)}))}Object.defineProperty(t,"__esModule",{value:!0}),t.setCssEndEvent=o,t.beforeCssLayout=function(e){window&&window.requestAnimationFrame(e)},t.beforeNextCssLayout=r,t.beforeFutureCssLayout=function(e,t){!function e(t,n){window&&t&&Number.isInteger(t)&&t>0?window.requestAnimationFrame((function(){e(t-1,n)})):n()}(e+1,t)},t.onceNextCssLayout=function(){return new Promise((function(e){r(e)}))},t.onceTransitionEnd=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise((function(n){o(e,"transition",t).then(n)}))},t.onceAnimationEnd=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise((function(n){o(e,"animation",t).then(n)}))}}])},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},n=t.force,r=void 0!==n&&n,o=t.leave,i=void 0!==o&&o;(0,l.toggleMoveClasses)({element:this.container,root:this.rootElement,cssModule:this.props.cssModule});var c=this.props.active&&!r?this.rootElement+"--active":null;null===c&&!1===i&&(0,s.setCssEndEvent)(this.content,"transition",{tolerance:1}).then((function(){e.props.onReleased&&e.props.onReleased(e.container)})),this.setState({pressPosition:c})}},{key:"pressIn",value:function pressIn(){!0!==this.state.disabled&&!0!==this.props.blocked&&(this.pressed=(new Date).getTime(),this.setState({pressPosition:this.rootElement+"--active"}))}},{key:"pressOut",value:function pressOut(e){var t=this;this.clearTimer&&clearTimeout(this.clearTimer);var n=(new Date).getTime()-this.pressed;if(!0===this.props.ripple&&this.createBubble(e),"undefined"!=typeof window&&this.button){var r=new Event("action");this.button.dispatchEvent(r)}this.action(),this.clearTimer=setTimeout((function(){t.clearPress()}),100-n)}},{key:"action",value:function action(){var e=this.props,action=e.action,t=e.onPress;if(this.button){if(action)return void action(this.container);t&&t(this.container)}}},{key:"createBubble",value:function createBubble(e){(0,l.createBubbleEffect)({event:e,button:this.button,content:this.content,className:(0,l.getClassName)(this.rootElement+"__bubble",this.props.cssModule)})}},{key:"moveEvents",value:function moveEvents(){var e=this,t={onClick:function onClick(t){e.props.href&&e.state.disabled&&(t.preventDefault(),t.stopPropagation())},onMouseLeave:function onMouseLeave(){e.clearPress({leave:!0})},onMouseDown:function onMouseDown(t){t&&1!==t.nativeEvent.which||e.pressIn()},onMouseUp:function onMouseUp(t){if(!0===e.state.disabled||!0===e.props.blocked)return t.preventDefault(),void t.stopPropagation();e.pressOut(t)}};return!0===this.props.moveEvents?t.onMouseMove=function(t){if(!0!==e.state.disabled){var n=e.button,r=n.getBoundingClientRect().left,o=n.offsetWidth,i=t.pageXr+.65*o?"right":"middle";(0,l.toggleMoveClasses)({element:e.container,root:e.rootElement,cssModule:e.props.cssModule,state:i})}}:t.onMouseEnter=function(){(0,l.toggleMoveClasses)({element:e.container,root:e.rootElement,cssModule:e.props.cssModule,state:"middle"})},t}},{key:"render",value:function render(){var e=this,t=this.renderComponent,n=this.props,o=n.title,c=n.style,s=n.cssModule,a=n.children;return i.default.createElement(t,r({style:c,className:this.getRootClassName(),role:"button",title:o},this.extraProps,this.moveEvents()),i.default.createElement("span",{ref:function ref(t){e.button=t},className:(0,l.getClassName)(this.rootElement+"__wrapper",s)},i.default.createElement("span",{ref:function ref(t){e.content=t},className:(0,l.getClassName)(this.rootElement+"__content",s)},i.default.createElement("span",{ref:function ref(t){e.child=t}},a))))}}]),AwesomeButton}(i.default.Component);f.propTypes={action:c.default.func,onPress:c.default.func,onReleased:c.default.func,ripple:c.default.bool,children:c.default.node,disabled:c.default.bool,element:c.default.func,href:c.default.string,placeholder:c.default.bool,title:c.default.string,rootElement:c.default.string,moveEvents:c.default.bool,size:c.default.string,style:c.default.object,cssModule:c.default.object,className:c.default.string,target:c.default.string,to:c.default.string,type:c.default.string,visible:c.default.bool,active:c.default.bool,blocked:c.default.bool},f.defaultProps={action:null,onPress:null,onReleased:null,ripple:!1,blocked:!1,cssModule:null,children:null,disabled:!1,title:null,element:null,href:null,className:null,moveEvents:!0,placeholder:!1,rootElement:a,size:null,style:{},target:null,to:null,type:"primary",visible:!0,active:!1},t.default=f},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["children","icon","type","action","onPress","iconWidth","iconHeight","href"]);return i.default.createElement(s.AwesomeButton,r({type:o,action:this.action,href:u},d),n&&(0,a.default)({type:o,width:c,height:l,color:this.props.disabled?"rgba(255,255,255,0.35)":"#FFF"})," ",t)}}]),AwesomeButtonSocial}(i.default.Component);u.propTypes={action:c.default.func,onPress:c.default.func,children:c.default.node,disabled:c.default.bool,href:c.default.string,icon:c.default.bool,iconHeight:c.default.number,iconWidth:c.default.number,image:c.default.string,message:c.default.string,phone:c.default.string,type:c.default.string.isRequired,url:c.default.string,user:c.default.string},u.defaultProps={action:null,onPress:null,children:null,disabled:!1,href:null,icon:!0,iconHeight:23,iconWidth:30,image:null,message:null,phone:null,url:null,user:null},t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0])||arguments[0],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.setState({loadingEnd:!0,loadingError:!e,errorLabel:t}),this.animationStage=1}},{key:"startLoading",value:function startLoading(){var e=this;this.loading=!0,this.setState({blocked:!0,active:!0},(function(){(0,s.beforeFutureCssLayout)(2,(function(){e.setState({loadingStart:!0})}))}))}},{key:"clearLoading",value:function clearLoading(e){this.loading=!1,this.setState({loadingStart:!1,loadingEnd:!1,active:!1},e)}},{key:"moveEvents",value:function moveEvents(){var e=this;return{onMouseDown:function onMouseDown(t){!0===e.props.disabled||!0===e.loading||!0===e.state.blocked||t&&1!==t.nativeEvent.which||(e.loading=!0)},onMouseUp:function onMouseUp(t){if(!0===e.props.disabled||!0===e.loading||!0===e.state.blocked)return t.preventDefault(),void t.stopPropagation();e.action()}}}},{key:"render",value:function render(){var e=this,t=this.props,n=t.children,o=t.size,c=t.cssModule,s=t.loadingLabel,u=t.resultLabel,d=(t.action,t.type),f=function _objectWithoutProperties(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(t,["children","size","cssModule","loadingLabel","resultLabel","action","type"]),p=this.state,h=p.active,v=p.blocked,m=p.errorLabel;return i.default.createElement(l.AwesomeButton,r({size:o,type:d,className:this.getRootClassName(),action:this.action,cssModule:c,active:h,blocked:v},this.moveEvents(),f),i.default.createElement("span",{ref:function ref(t){e.content=t},"data-loading":s||null,"data-status":m||u||null,className:(0,a.getClassName)(this.rootElement+"__progress",c)},i.default.createElement("span",null,n)))}}]),AwesomeButtonProgress}(i.default.Component);f.propTypes={action:c.default.func,onPress:c.default.func,loadingLabel:c.default.string,resultLabel:c.default.string,rootElement:c.default.node,cssModule:c.default.object,children:c.default.node,disabled:c.default.bool,size:c.default.string,type:c.default.string,fakePress:c.default.bool,releaseDelay:c.default.number},f.defaultProps={action:null,onPress:null,rootElement:null,loadingLabel:"Wait..",resultLabel:"Success!",disabled:!1,cssModule:null,fakePress:!1,children:null,size:null,type:null,releaseDelay:500},t.default=f}])})); \ No newline at end of file +!function webpackUniversalModuleDefinition(n,i){"object"==typeof exports&&"object"==typeof module?module.exports=i(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],i):"object"==typeof exports?exports["react-awesome-button"]=i(require("react"),require("prop-types")):n["react-awesome-button"]=i(n.React,n.PropTypes)}(this,(function(n,i){return function(n){var i={};function __webpack_require__(s){if(i[s])return i[s].exports;var l=i[s]={i:s,l:!1,exports:{}};return n[s].call(l.exports,l,l.exports,__webpack_require__),l.l=!0,l.exports}return __webpack_require__.m=n,__webpack_require__.c=i,__webpack_require__.d=function(n,i,s){__webpack_require__.o(n,i)||Object.defineProperty(n,i,{enumerable:!0,get:s})},__webpack_require__.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},__webpack_require__.t=function(n,i){if(1&i&&(n=__webpack_require__(n)),8&i)return n;if(4&i&&"object"==typeof n&&n&&n.__esModule)return n;var s=Object.create(null);if(__webpack_require__.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:n}),2&i&&"string"!=typeof n)for(var l in n)__webpack_require__.d(s,l,function(i){return n[i]}.bind(null,l));return s},__webpack_require__.n=function(n){var i=n&&n.__esModule?function getDefault(){return n.default}:function getModuleExports(){return n};return __webpack_require__.d(i,"a",i),i},__webpack_require__.o=function(n,i){return Object.prototype.hasOwnProperty.call(n,i)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=5)}([function(i,s){i.exports=n},function(n,s){n.exports=i},function(n,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var l=s(6);Object.defineProperty(i,"AwesomeButton",{enumerable:!0,get:function get(){return _interopRequireDefault(l).default}});var a=s(7);Object.defineProperty(i,"AwesomeButtonSocial",{enumerable:!0,get:function get(){return _interopRequireDefault(a).default}});var u=s(10);function _interopRequireDefault(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(i,"AwesomeButtonProgress",{enumerable:!0,get:function get(){return _interopRequireDefault(u).default}})},function(n,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var _slicedToArray=function(n,i){if(Array.isArray(n))return n;if(Symbol.iterator in Object(n))return function sliceIterator(n,i){var s=[],l=!0,a=!1,u=void 0;try{for(var d,f=n[Symbol.iterator]();!(l=(d=f.next()).done)&&(s.push(d.value),!i||s.length!==i);l=!0);}catch(n){a=!0,u=n}finally{try{!l&&f.return&&f.return()}finally{if(a)throw u}}return s}(n,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")};i.serialize=function serialize(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"&";return Object.entries(n).map((function(n){var i=_slicedToArray(n,2);return i[0]+"="+i[1]})).join(i)},i.classToModules=classToModules,i.getClassName=function getClassName(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments[1];if(i)return i[n]||n;return n},i.setCssEndEvent=setCssEndEvent,i.toggleMoveClasses=function toggleMoveClasses(n){var i=n.element,s=n.root,a=n.cssModule,u=void 0===a?null:a,d=n.state,f=void 0===d?null:d;if(!i)return!1;if(!f)return i.classList.remove(classToModules([s+"--"+l[0]],u),classToModules([s+"--"+l[1]],u),classToModules([s+"--"+l[2]],u)),!1;var p=l.filter((function(n){return n!==f})),h=p.length;for(;h--;)i.classList.remove(classToModules([s+"--"+p[h]],u));return i.classList.add(classToModules([s+"--"+f],u)),!0},i.createBubbleEffect=function createBubbleEffect(n){var i=n.event,s=n.button,l=n.content,a=n.className,u=s.getBoundingClientRect(),d=window.pageYOffset||document.documentElement.scrolltop||0,f=document.createElement("span"),p=u.width<50?3*u.width:2*u.width;f.className=a,f.style.top="-"+(p/2-(i.pageY-u.top-d))+"px",f.style.left="-"+(p/2-(i.pageX-u.left))+"px",f.style.width=p+"px",f.style.height=p+"px",setCssEndEvent(f,"animation",(function(){window.requestAnimationFrame((function(){l.removeChild(f)}))})),window.requestAnimationFrame((function(){l.appendChild(f)}))};var l=["middle","left","right"];function classToModules(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if(!i)return n.join(" ").trim();for(var s=[],l=n.length;l--;)i[n[l]]&&s.push(i[n[l]]);return s.join(" ").trim()}function setCssEndEvent(n,i,s){if(!n)return!1;var l=i.charAt(0).toUpperCase()+i.slice(1);return void 0!==n.style["Webkit"+l]?n.addEventListener("webkit"+l+"End",s):void 0!==n.style.OTransition?n.addEventListener("o"+i+"End",s):n.addEventListener(i+"End",s)}},function(n,i,s){n.exports=function(n){var i={};function t(s){if(i[s])return i[s].exports;var l=i[s]={i:s,l:!1,exports:{}};return n[s].call(l.exports,l,l.exports,t),l.l=!0,l.exports}return t.m=n,t.c=i,t.d=function(n,i,s){t.o(n,i)||Object.defineProperty(n,i,{enumerable:!0,get:s})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,i){if(1&i&&(n=t(n)),8&i)return n;if(4&i&&"object"==typeof n&&n&&n.__esModule)return n;var s=Object.create(null);if(t.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:n}),2&i&&"string"!=typeof n)for(var l in n)t.d(s,l,function(i){return n[i]}.bind(null,l));return s},t.n=function(n){var i=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(i,"a",i),i},t.o=function(n,i){return Object.prototype.hasOwnProperty.call(n,i)},t.p="",t(t.s=0)}([function(n,i,s){"use strict";function o(n,i){var s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},l=s.tolerance,a=void 0===l?0:l,u=s.propertyName;return new Promise((function(s){if(n){var l=null,d=i.charAt(0).toUpperCase()+i.slice(1),f=0;void 0!==n.style["Webkit"+d]&&(l="webkit"+d+"End"),void 0!==n.style.OTransition&&(l="o"+i+"End"),void 0!==n.style[i]&&(l=i+"end"),n.clearCssEndEvent&&n.clearCssEndEvent(),n.clearCssEndEvent=function(){n.removeEventListener(l,c)},n.addEventListener(l,c)}else s(!1);function c(i){if((i.srcElement||i.target)===n){if(f>=a){if(u&&u!==i.propertyName)return;n.removeEventListener(l,c),s(i)}f+=1}}}))}function r(n){window&&window.requestAnimationFrame((function(){window.requestAnimationFrame(n)}))}Object.defineProperty(i,"__esModule",{value:!0}),i.setCssEndEvent=o,i.beforeCssLayout=function(n){window&&window.requestAnimationFrame(n)},i.beforeNextCssLayout=r,i.beforeFutureCssLayout=function(n,i){!function e(n,i){window&&n&&Number.isInteger(n)&&n>0?window.requestAnimationFrame((function(){e(n-1,i)})):i()}(n+1,i)},i.onceNextCssLayout=function(){return new Promise((function(n){r(n)}))},i.onceTransitionEnd=function(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise((function(s){o(n,"transition",i).then(s)}))},i.onceAnimationEnd=function(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise((function(s){o(n,"animation",i).then(s)}))}}])},function(n,i,s){n.exports=s(2)},function(n,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var l=Object.assign||function(n){for(var i=1;i0&&void 0!==arguments[0]?arguments[0]:{},s=i.force,l=void 0!==s&&s,a=i.leave,u=void 0!==a&&a;(0,p.toggleMoveClasses)({element:this.container,root:this.rootElement,cssModule:this.props.cssModule});var d=this.props.active&&!l?this.rootElement+"--active":null;null===d&&!1===u&&(0,f.setCssEndEvent)(this.content,"transition",{tolerance:1}).then((function(){n.props.onReleased&&n.props.onReleased(n.container)})),this.setState({pressPosition:d})}},{key:"pressIn",value:function pressIn(){!0!==this.state.disabled&&!0!==this.props.blocked&&(this.pressed=(new Date).getTime(),this.setState({pressPosition:this.rootElement+"--active"}))}},{key:"pressOut",value:function pressOut(n){var i=this;this.clearTimer&&clearTimeout(this.clearTimer);var s=(new Date).getTime()-this.pressed;if(!0===this.props.ripple&&this.createBubble(n),"undefined"!=typeof window&&this.button){var l=new Event("action");this.button.dispatchEvent(l)}this.action(),this.clearTimer=setTimeout((function(){i.clearPress()}),100-s)}},{key:"action",value:function action(){var n=this.props,action=n.action,i=n.onPress;if(this.button){if(action)return void action(this.container);i&&i(this.container)}}},{key:"createBubble",value:function createBubble(n){(0,p.createBubbleEffect)({event:n,button:this.button,content:this.content,className:(0,p.getClassName)(this.rootElement+"__bubble",this.props.cssModule)})}},{key:"moveEvents",value:function moveEvents(){var n=this,i={onClick:function onClick(i){n.props.href&&n.state.disabled&&(i.preventDefault(),i.stopPropagation())},onMouseLeave:function onMouseLeave(){n.clearPress({leave:!0})},onMouseDown:function onMouseDown(i){i&&1!==i.nativeEvent.which||n.pressIn()},onMouseUp:function onMouseUp(i){if(!0===n.state.disabled||!0===n.props.blocked)return i.preventDefault(),void i.stopPropagation();n.pressOut(i)}};return!0===this.props.moveEvents?i.onMouseMove=function(i){if(!0!==n.state.disabled){var s=n.button,l=s.getBoundingClientRect().left,a=s.offsetWidth,u=i.pageXl+.65*a?"right":"middle";(0,p.toggleMoveClasses)({element:n.container,root:n.rootElement,cssModule:n.props.cssModule,state:u})}}:i.onMouseEnter=function(){(0,p.toggleMoveClasses)({element:n.container,root:n.rootElement,cssModule:n.props.cssModule,state:"middle"})},i}},{key:"render",value:function render(){var n=this,i=this.renderComponent,s=this.props,a=s.title,d=s.style,f=s.cssModule,h=s.children;return u.default.createElement(i,l({style:d,className:this.getRootClassName(),role:"button",title:a},this.extraProps,this.moveEvents()),u.default.createElement("span",{ref:function ref(i){n.button=i},className:(0,p.getClassName)(this.rootElement+"__wrapper",f)},u.default.createElement("span",{ref:function ref(i){n.content=i},className:(0,p.getClassName)(this.rootElement+"__content",f)},u.default.createElement("span",{ref:function ref(i){n.child=i}},h))))}}]),AwesomeButton}(u.default.Component);m.propTypes={action:d.default.func,onPress:d.default.func,onReleased:d.default.func,ripple:d.default.bool,children:d.default.node,disabled:d.default.bool,element:d.default.func,href:d.default.string,placeholder:d.default.bool,title:d.default.string,rootElement:d.default.string,moveEvents:d.default.bool,size:d.default.string,style:d.default.object,cssModule:d.default.object,className:d.default.string,target:d.default.string,to:d.default.string,type:d.default.string,visible:d.default.bool,active:d.default.bool,blocked:d.default.bool},m.defaultProps={action:null,onPress:null,onReleased:null,ripple:!1,blocked:!1,cssModule:null,children:null,disabled:!1,title:null,element:null,href:null,className:null,moveEvents:!0,placeholder:!1,rootElement:"aws-btn",size:null,style:{},target:null,to:null,type:"primary",visible:!0,active:!1},i.default=m},function(n,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var l=Object.assign||function(n){for(var i=1;i=0||Object.prototype.hasOwnProperty.call(n,l)&&(s[l]=n[l]);return s}(n,["children","icon","type","action","onPress","iconWidth","iconHeight","href"]);return u.default.createElement(f.AwesomeButton,l({type:a,action:this.action,href:v},m),s&&(0,h.default)({type:a,width:d,height:p,color:this.props.disabled?"rgba(255,255,255,0.35)":"#FFF"})," ",i)}}]),AwesomeButtonSocial}(u.default.Component);v.propTypes={action:d.default.func,onPress:d.default.func,children:d.default.node,disabled:d.default.bool,href:d.default.string,icon:d.default.bool,iconHeight:d.default.number,iconWidth:d.default.number,image:d.default.string,message:d.default.string,phone:d.default.string,type:d.default.string.isRequired,url:d.default.string,user:d.default.string},v.defaultProps={action:null,onPress:null,children:null,disabled:!1,href:null,icon:!0,iconHeight:23,iconWidth:30,image:null,message:null,phone:null,url:null,user:null},i.default=v},function(n,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var l=Object.assign||function(n){for(var i=1;i0&&void 0!==arguments[0])||arguments[0],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.setState({loadingEnd:!0,loadingError:!n,errorLabel:i}),this.animationStage=1}},{key:"startLoading",value:function startLoading(){var n=this;this.loading=!0,this.setState({blocked:!0,active:!0},(function(){(0,f.beforeFutureCssLayout)(2,(function(){n.setState({loadingStart:!0})}))}))}},{key:"clearLoading",value:function clearLoading(n){this.loading=!1,this.setState({loadingStart:!1,loadingEnd:!1,active:!1},n)}},{key:"moveEvents",value:function moveEvents(){var n=this;return{onMouseDown:function onMouseDown(i){!0===n.props.disabled||!0===n.loading||!0===n.state.blocked||i&&1!==i.nativeEvent.which||(n.loading=!0)},onMouseUp:function onMouseUp(i){if(!0===n.props.disabled||!0===n.loading||!0===n.state.blocked)return i.preventDefault(),void i.stopPropagation();n.action()}}}},{key:"render",value:function render(){var n=this,i=this.props,s=i.children,a=i.size,d=i.cssModule,f=i.loadingLabel,v=i.resultLabel,m=(i.action,i.type),b=function _objectWithoutProperties(n,i){var s={};for(var l in n)i.indexOf(l)>=0||Object.prototype.hasOwnProperty.call(n,l)&&(s[l]=n[l]);return s}(i,["children","size","cssModule","loadingLabel","resultLabel","action","type"]),g=this.state,w=g.active,y=g.blocked,_=g.errorLabel;return u.default.createElement(p.AwesomeButton,l({size:a,type:m,className:this.getRootClassName(),action:this.action,cssModule:d,active:w,blocked:y},this.moveEvents(),b),u.default.createElement("span",{ref:function ref(i){n.content=i},"data-loading":f||null,"data-status":_||v||null,className:(0,h.getClassName)(this.rootElement+"__progress",d)},u.default.createElement("span",null,s)))}}]),AwesomeButtonProgress}(u.default.Component);v.propTypes={action:d.default.func,onPress:d.default.func,loadingLabel:d.default.string,resultLabel:d.default.string,rootElement:d.default.node,cssModule:d.default.object,children:d.default.node,disabled:d.default.bool,size:d.default.string,type:d.default.string,fakePress:d.default.bool,releaseDelay:d.default.number},v.defaultProps={action:null,onPress:null,rootElement:null,loadingLabel:"Wait..",resultLabel:"Success!",disabled:!1,cssModule:null,fakePress:!1,children:null,size:null,type:null,releaseDelay:500},i.default=v}])})); \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css index 0d88a6b..af14998 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -27,7 +27,7 @@ --transform-speed: 0.15s; --button-primary-color: #1E88E5; --button-primary-color-dark: #1360a4; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #187bd1; --button-primary-color-active: #166dba; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: 2px solid #1E88E5; --button-anchor-color: #0e4f88; --button-anchor-color-dark: #072743; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #0d4a7f; --button-anchor-color-active: #0c4271; --button-anchor-border: none; diff --git a/dist/themes/theme-amber.css b/dist/themes/theme-amber.css index c0dc7d8..95a2b13 100644 --- a/dist/themes/theme-amber.css +++ b/dist/themes/theme-amber.css @@ -27,7 +27,7 @@ --transform-speed: 0.175s; --button-primary-color: #FFB300; --button-primary-color-dark: #cc8f00; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #f2aa00; --button-primary-color-active: #cc8f00; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: none; --button-anchor-color: #FF6F00; --button-anchor-color-dark: #b34e00; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #f56b00; --button-anchor-color-active: #e66400; --button-anchor-border: none; diff --git a/dist/themes/theme-blue.css b/dist/themes/theme-blue.css index b46b2d8..5d2e638 100644 --- a/dist/themes/theme-blue.css +++ b/dist/themes/theme-blue.css @@ -27,7 +27,7 @@ --transform-speed: 0.175s; --button-primary-color: #1e88e5; --button-primary-color-dark: #1360a4; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #187bd1; --button-primary-color-active: #166dba; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: none; --button-anchor-color: #0e4f88; --button-anchor-color-dark: #072743; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #0d4a7f; --button-anchor-color-active: #0c4271; --button-anchor-border: none; diff --git a/dist/themes/theme-bojack.css b/dist/themes/theme-bojack.css index 6207e62..608a534 100644 --- a/dist/themes/theme-bojack.css +++ b/dist/themes/theme-bojack.css @@ -27,7 +27,7 @@ --transform-speed: 0.175s; --button-primary-color: #5e6fbf; --button-primary-color-dark: #3b4b95; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #4c5fb8; --button-primary-color-active: #4354a7; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: none; --button-anchor-color: #55a1b6; --button-anchor-color-dark: #397585; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #4e9db3; --button-anchor-color-active: #4994a9; --button-anchor-border: none; diff --git a/dist/themes/theme-flat.css b/dist/themes/theme-flat.css index c113cad..1832185 100644 --- a/dist/themes/theme-flat.css +++ b/dist/themes/theme-flat.css @@ -27,7 +27,7 @@ --transform-speed: 0.15s; --button-primary-color: #1E88E5; --button-primary-color-dark: #1360a4; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #187bd1; --button-primary-color-active: #166dba; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: 2px solid #1E88E5; --button-anchor-color: #0e4f88; --button-anchor-color-dark: #072743; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #0d4a7f; --button-anchor-color-active: #0c4271; --button-anchor-border: none; diff --git a/dist/themes/theme-indigo.css b/dist/themes/theme-indigo.css index fda0c8d..320f9ae 100644 --- a/dist/themes/theme-indigo.css +++ b/dist/themes/theme-indigo.css @@ -39,7 +39,7 @@ --button-secondary-border: none; --button-anchor-color: #3D5AFE; --button-anchor-color-dark: #0125ed; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #3351fe; --button-anchor-color-active: #2444fe; --button-anchor-border: none; diff --git a/dist/themes/theme-one.css b/dist/themes/theme-one.css index 9c86650..e5d9077 100644 --- a/dist/themes/theme-one.css +++ b/dist/themes/theme-one.css @@ -31,13 +31,13 @@ --button-primary-border: none; --button-secondary-color: #afafaf; --button-secondary-color-dark: #898989; - --button-secondary-color-light: white; + --button-secondary-color-light: #ffffff; --button-secondary-color-hover: #a2a2a2; --button-secondary-color-active: #969696; --button-secondary-border: none; --button-anchor-color: #afafaf; --button-anchor-color-dark: #898989; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #a2a2a2; --button-anchor-color-active: #969696; --button-anchor-border: none; diff --git a/dist/themes/theme-orange.css b/dist/themes/theme-orange.css index bc9f080..ee4c027 100644 --- a/dist/themes/theme-orange.css +++ b/dist/themes/theme-orange.css @@ -31,13 +31,13 @@ --button-primary-border: none; --button-secondary-color: #afafaf; --button-secondary-color-dark: #898989; - --button-secondary-color-light: white; + --button-secondary-color-light: #ffffff; --button-secondary-color-hover: #a2a2a2; --button-secondary-color-active: #969696; --button-secondary-border: none; --button-anchor-color: #afafaf; --button-anchor-color-dark: #898989; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #a2a2a2; --button-anchor-color-active: #969696; --button-anchor-border: none; diff --git a/dist/themes/theme-red.css b/dist/themes/theme-red.css index 221d2b6..cd3c9d2 100644 --- a/dist/themes/theme-red.css +++ b/dist/themes/theme-red.css @@ -27,7 +27,7 @@ --transform-speed: 0.165s; --button-primary-color: #f44336; --button-primary-color-dark: #ba160a; - --button-primary-color-light: white; + --button-primary-color-light: #ffffff; --button-primary-color-hover: #f3382a; --button-primary-color-active: #ea1c0d; --button-primary-border: none; @@ -39,7 +39,7 @@ --button-secondary-border: none; --button-anchor-color: #c62828; --button-anchor-color-dark: #470e0e; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #be2626; --button-anchor-color-active: #b12424; --button-anchor-border: none; diff --git a/dist/themes/theme-three.css b/dist/themes/theme-three.css index 4a90732..7ad0abf 100644 --- a/dist/themes/theme-three.css +++ b/dist/themes/theme-three.css @@ -31,13 +31,13 @@ --button-primary-border: none; --button-secondary-color: #afafaf; --button-secondary-color-dark: #898989; - --button-secondary-color-light: white; + --button-secondary-color-light: #ffffff; --button-secondary-color-hover: #a2a2a2; --button-secondary-color-active: #969696; --button-secondary-border: none; --button-anchor-color: #afafaf; --button-anchor-color-dark: #898989; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #a2a2a2; --button-anchor-color-active: #969696; --button-anchor-border: none; diff --git a/dist/themes/theme-two.css b/dist/themes/theme-two.css index 535e8f9..63411c3 100644 --- a/dist/themes/theme-two.css +++ b/dist/themes/theme-two.css @@ -31,13 +31,13 @@ --button-primary-border: none; --button-secondary-color: #afafaf; --button-secondary-color-dark: #898989; - --button-secondary-color-light: white; + --button-secondary-color-light: #ffffff; --button-secondary-color-hover: #a2a2a2; --button-secondary-color-active: #969696; --button-secondary-border: none; --button-anchor-color: #afafaf; --button-anchor-color-dark: #898989; - --button-anchor-color-light: white; + --button-anchor-color-light: #ffffff; --button-anchor-color-hover: #a2a2a2; --button-anchor-color-active: #969696; --button-anchor-border: none;