diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss index fccad8420..d902f1606 100644 --- a/src/styles/common-radio-styles.scss +++ b/src/styles/common-radio-styles.scss @@ -38,7 +38,7 @@ } } //Add spinner. Specify width and height - @include loader(); + //@include loader(); } } } diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss index ab4ba18a5..267abb64b 100644 --- a/src/styles/mixins/customMixins.scss +++ b/src/styles/mixins/customMixins.scss @@ -4,66 +4,3 @@ @mixin blue-gradient { background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); } - -//Spinner -//Choose color and position -@mixin loader() { - .loader { - display: flex; - //Open an overlay to prevent page interaction - &:before { - content: ''; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: transparent; - z-index: 9999; - cursor: default; - } - //Spinner basics - &:after { - content: ''; - mask: url(../../assets/img/icons/spinner.svg); - mask-size: cover; - position: relative; - width: 100%; - height: 100%; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - //Spinner position - &.center { - left: 0; - right: 0; - margin: 0 auto; - } - &.right { - margin: 0 0 0 auto; - } - &.left { - margin: 0 auto 0 0; - } - //Spinner color - &:after { //Default spinner color (blue) if no other color is specified from the options below - background-color: $blue; - } - &.red:after { - background-color: $red; - } - &.green:after { - background-color: $green; - } - &.white:after { - background-color: $white; - } - &.black:after { - background-color: $black; - } - } -} diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index eeabeb604..448e39b78 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -27,5 +27,62 @@ export default {