How to change color / props not assigned correctly

[pixelpeter]

Currently I'm using this code to overwrite the color of the spinner

  .spinner::after {
      background: #c7254e !important;
  }

Looking at the source code I recognized that the component has the prop background for that

...
  props: {
    background: {
      default: '#41b883'
    },
...

So I assume the background could be set like this

<rotate-square2 background="#abcdef"></rotate-square2>

But this property is never used in the css of the component

    &:after {
      content: '';
      width: 100%;
      height: 100%;
      background: #41b883;
      animation: rotate-square-2-animate .5s linear infinite;
      position: absolute;
      bottom:40%;
      left: 0;
      border-radius: 3px;
    }

Am I doing something wrong? Is this the intended behavior or an error?

[nguyenvanduocit]

I defined it, but never use it, I did not work on this lib for a long time, I think it's time to update it. I will update it soon, For now, you can contribute to this or just copy the source code to your project. Thank you

[pixelpeter]

The issue with the RotateSquare*.vuecomponents is that you are using pseudo elements which could not be targeted by Vue.js directly.

The only solution I could come up was to use extra elements for the HTML. Here's my current solution. If you approve it I will update the other components.

Usage

<rotate-square2 background="#abcdef" shadow="#cc0000"></rotate-square2>

Updated code

<template>
    <div v-bind:style="styles" class="spinner spinner--rotate-square-2">
        <div class="shadow" v-bind:style="shadowStyles"></div>
        <div class="square" v-bind:style="squareStyles"></div>
    </div>
</template>

<script>
export default {
  props: {
    size: {
      default: '40px'
    },
    background: {
      default: '#41b883'
    },
    shadow: {
        default: '#000'
    }
  },
  computed: {
    styles () {
      return {
        width: this.size,
        height: this.size,
      }
    },
    squareStyles() {
        return {
            background: this.background
        }
    },
    shadowStyles() {
        return {
            background: this.shadow
        }
    }
  }
}
</script>

<style lang="scss" scoped>
  .spinner {
    position: relative;
    * {
        line-height: 0;
        box-sizing: border-box;
    }
    /*&:before {*/
    .shadow {
      content: '';
      width: 100%;
      height: 20%;
      min-width: 5px;
      background: #000;
      opacity: 0.1;
      position: absolute;
      bottom: 0%;
      left: 0;
      border-radius: 50%;
      animation: rotate-square-2-shadow .5s linear infinite;
    }
    /*&:after {*/
    .square {
      content: '';
      width: 100%;
      height: 100%;
      background: #41b883;
      animation: rotate-square-2-animate .5s linear infinite;
      position: absolute;
      bottom:40%;
      left: 0;
      border-radius: 3px;
    }
  }

  @keyframes rotate-square-2-animate {
    17% {
      border-bottom-right-radius: 3px;
    }
    25% {
      transform: translateY(20%) rotate(22.5deg);
    }
    50% {
      transform: translateY(40%) scale(1, .9) rotate(45deg);
      border-bottom-right-radius: 50%;
    }
    75% {
      transform: translateY(20%) rotate(67.5deg);
    }
    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes rotate-square-2-shadow {
    0%, 100% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1);
    }
  }
</style>

[nguyenvanduocit]

That's cool. Use pseudo just to make the template simpler, but cannot be targeted. Please update other element and make PR. Thank you.

[solicomo]

Hi @nguyenvanduocit ,

Is there any plan for this issue?

[pixelpeter]

While going through the components I've found out that some of them can't be rebuild without using pseudo classes.

The only possible solution seems to import the scss into the component and use the scss variables directly.

This is a major change in architecture of this package therefore @nguyenvanduocit needs to decide on this issue.

[solicomo]

Hi @pixelpeter ,

Thanks for your answer.

Maybe I should copy the source code to my project before @nguyenvanduocit makes this decision.

Anyway, these are awesome spinners.

[prowseed]

Pseudo cannot be targeted, but they can inherit: https://jsfiddle.net/3kz598cf/

[pixelpeter]

@prowseed : Cool. This was far beyond my knowledge. Thanks for this hint. I will try it on some components