feat: removed spinner scss files and added styles within spinner comp…

…onent

src/components/FishTankLoaderSpinner.vue

@@ -3,7 +3,7 @@
  <div 
  :class="[gradientClass, spinnerSize, alignClass]" 
  :aria-busy="`${loading}`"
- class="ft-spinner" 
+ class="spinner" 
  role="alert">
  <svg 
  height="100" 
@@ -24,12 +24,12 @@
  </linearGradient>
  </defs>
  <circle 
- class="ft-spinner-base" 
+ class="spinner-base" 
  cx="50" 
  cy="50" />
  <circle
  :style="{strokeDasharray: `${strokeDashArray}`}"
- :class="['ft-spinner-gradient', {'pause-spinner': !loading}]"
+ :class="['spinner-gradient', {'pause-spinner': !loading}]"
  cx="50" 
  cy="50" 
  @stop-spinner="stopSpinner" />
@@ -84,9 +84,9 @@ export default Vue.extend({
  }
  },
  computed:{
- gradientClass: function(){ return "ft-spinner--" + this.theme + "-gradient"},
- spinnerSize: function(){ return "ft-spinner--" + this.size},
- alignClass: function() { return "ft-spinner--align-" + this.align},
+ gradientClass: function(){ return "spinner--" + this.theme + "-gradient"},
+ spinnerSize: function(){ return "spinner--" + this.size},
+ alignClass: function() { return "spinner--align-" + this.align},
  strokeDashArray: function(){
  let countDown = this.size === 'small' ? this.smallDash : 
  this.size === 'medium' ? this.mediumDash :this.largeDash
@@ -116,3 +116,139 @@ export default Vue.extend({
  }
 })
 </script>
+
+<style lang="scss">
+ @import '../styles/mixins';
+ @import "../../node_modules/@fishtank/colors/dist/index";
+ @import "../../node_modules/@fishtank/type/dist/index";
+
+ .spinner{
+ .spinner-base{
+ fill: none;
+ stroke: transparent;
+ }
+ .spinner-gradient{
+ fill: none;
+ stroke-linecap: round;
+ transform: rotate(0deg);
+ transform-origin: center center;
+ animation: loading .75s linear infinite;
+ }
+ .pause-spinner{
+ animation-play-state: paused;
+ }
+ //sizes
+ &.spinner--small{
+ circle.spinner-base, circle.spinner-gradient{
+ r: 8px;
+ stroke-width: 4;
+ }
+ circle.spinner-gradient{
+ stroke-dasharray: 26;
+ }
+ }
+ &.spinner--medium{
+ circle.spinner-base, circle.spinner-gradient{
+ r: 15px;
+ stroke-width: 6;
+ }
+ circle.spinner-gradient{
+ // stroke-dasharray: 50;
+ }
+ }
+ &.spinner--large{
+ circle.spinner-base, circle.spinner-gradient{
+ r: 30px;
+ stroke-width: 12;
+ }
+ circle.spinner-gradient{
+ // stroke-dasharray: 100;
+ }
+ }
+ //colors
+ &.spinner--bgov-gradient{
+ circle.spinner-gradient{
+ stroke: url(#spinner--bgov-gradient);
+ }
+ linearGradient{
+ stop.stop-class-1{
+ stop-color: $color-bgov-navy;
+ }
+ stop.stop-class-2{
+ stop-color: $color-bgov-purple;
+ }
+ }
+ }
+ &.spinner--blaw-gradient{
+ circle.spinner-gradient{
+ stroke: url(#spinner--blaw-gradient);
+ }
+ linearGradient{
+ stop.stop-class-1{
+ stop-color: $color-blaw-blue;
+ }
+ stop.stop-class-2{
+ stop-color: $color-blaw-blue;
+ }
+ }
+ }
+ &.spinner--notification-1-gradient{
+ circle.spinner-gradient{
+ stroke: url(#spinner--notification-1-gradient);
+ }
+ linearGradient{
+ stop.stop-class-1{
+ stop-color: $color-notification-1;
+ }
+ stop.stop-class-2{
+ stop-color: $color-notification-1;
+ }
+ }
+ }
+ &.spinner--notification-2-gradient{
+ circle.spinner-gradient{
+ stroke: url(#spinner--notification-2-gradient);
+ }
+ linearGradient{
+ stop.stop-class-1{
+ stop-color: $color-notification-2;
+ }
+ stop.stop-class-2{
+ stop-color: $color-notification-2;
+ }
+ }
+ }
+ &.spinner--notification-3-gradient{
+ circle.spinner-gradient{
+ stroke: url(#spinner--notification-3-gradient);
+ }
+ linearGradient{
+ stop.stop-class-1{
+ stop-color: $color-notification-3;
+ }
+ stop.stop-class-2{
+ stop-color: $color-notification-3;
+ }
+ }
+ }
+ &.spinner--align-center {
+ text-align: center;
+ }
+ &.spinner--align-left {
+ text-align: left;
+ }
+ &.spinner--align-right {
+ text-align: right;
+ }
+ 
+ @keyframes loading{
+ from{
+ transform: rotate(0deg);
+ }
+ to{
+ transform: rotate(360deg);
+ }
+ }
+}
+
+</style>

src/styles.scss

@@ -1,8 +1,8 @@
 @import "./styles/variables";
 @import "./styles/mixins";
 @import "./styles/fonts";
+
 @import "./styles/components/alerts";
 @import "./styles/components/buttons";
-@import "./styles/components/spinner";
 @import "./styles/components/buttongroup";