diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js index ec5b24ff..2394b37e 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js +++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js @@ -4,6 +4,7 @@ import i18n from 'lib-app/i18n'; import Header from 'core-components/header'; import Listing from 'core-components/listing'; +import Loading from 'core-components/loading'; class AdminPanelCustomResponses extends React.Component { @@ -13,6 +14,7 @@ class AdminPanelCustomResponses extends React.Component {
+
diff --git a/client/src/core-components/button.scss b/client/src/core-components/button.scss index d7514668..32531824 100644 --- a/client/src/core-components/button.scss +++ b/client/src/core-components/button.scss @@ -30,7 +30,8 @@ background-color: $secondary-blue; } - &_disabled { + &_disabled, + &_disabled:hover { background-color: #ec9696; } diff --git a/client/src/core-components/loading.js b/client/src/core-components/loading.js new file mode 100644 index 00000000..da79fb77 --- /dev/null +++ b/client/src/core-components/loading.js @@ -0,0 +1,25 @@ +import React from 'react'; +import classNames from 'classnames'; + +class Loading extends React.Component { + + render() { + return ( +
+ +
+ ); + } + + getClass() { + let classes = { + 'loading': true + }; + + classes[this.props.className] = (this.props.className); + + return classNames(classes); + } +} + +export default Loading; \ No newline at end of file diff --git a/client/src/core-components/loading.scss b/client/src/core-components/loading.scss new file mode 100644 index 00000000..6273b184 --- /dev/null +++ b/client/src/core-components/loading.scss @@ -0,0 +1,55 @@ +$color: white; + +.loading { + display: inline-block; + width: 100%; + height: 100%; + position: relative; + + &-icon { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + font-size: 4px; + border-top: 1.1em solid rgba($color, 0.2); + border-right: 1.1em solid rgba($color, 0.2); + border-bottom: 1.1em solid rgba($color, 0.2); + border-left: 1.1em solid $color; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: turnAnimation 1.1s infinite linear; + animation: turnAnimation 1.1s infinite linear; + + &, + &:after { + border-radius: 50%; + width: 30px; + height: 30px; + } + } + + @-webkit-keyframes turnAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes turnAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } +} diff --git a/client/src/core-components/submit-button.js b/client/src/core-components/submit-button.js index 171351de..77f21aea 100644 --- a/client/src/core-components/submit-button.js +++ b/client/src/core-components/submit-button.js @@ -5,6 +5,7 @@ import classNames from 'classnames'; // CORE LIBS import Button from 'core-components/button'; +import Loading from 'core-components/loading'; class SubmitButton extends React.Component { @@ -30,7 +31,7 @@ class SubmitButton extends React.Component { renderLoading() { return ( -
+ ); } diff --git a/client/src/core-components/submit-button.scss b/client/src/core-components/submit-button.scss index f75110f1..652847c0 100644 --- a/client/src/core-components/submit-button.scss +++ b/client/src/core-components/submit-button.scss @@ -1,46 +1,3 @@ .submit-button { position: relative; - - &__loader { - position: absolute; - top: 7px; - left: 103px; - - font-size: 4px; - border-top: 1.1em solid rgba(255, 255, 255, 0.2); - border-right: 1.1em solid rgba(255, 255, 255, 0.2); - border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); - border-left: 1.1em solid #ffffff; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: turnAnimation 1.1s infinite linear; - animation: turnAnimation 1.1s infinite linear; - } - &__loader, - &__loader:after { - border-radius: 50%; - width: 30px; - height: 30px; - } - @-webkit-keyframes turnAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } - @keyframes turnAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } } \ No newline at end of file