https://github.com/heliomar-pena/calculadora-flotante-vuejs

Floating calculator component for @vuejs
https://github.com/heliomar-pena/calculadora-flotante-vuejs

calculator component float-calculator vuejs vuejs-component

Last synced: 18 days ago
JSON representation

Floating calculator component for @vuejs

• Host: GitHub
• URL: https://github.com/heliomar-pena/calculadora-flotante-vuejs
• Owner: heliomar-pena
• Created: 2020-09-24T22:30:26.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-29T03:46:58.000Z (about 4 years ago)
• Last Synced: 2024-06-13T04:13:29.700Z (5 months ago)
• Topics: calculator, component, float-calculator, vuejs, vuejs-component
• Language: JavaScript
• Homepage:
• Size: 1.18 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Calculadora-flotante-VueJS

It is a VueJS component easy to add to your code, which will allow you to have a floating calculator that you can move to any part of the screen where it is comfortable for you and will save the position when you change pages.

[Online example](https://github.com/Katsote/Calculadora-flotante-VueJS)

### How to use

You can see a example to use in the [Index html file](index.html) of the repository

```

//Font Awesome CDN example (You need to use your own FontAwesome CDN. This might not work)

//VueJs CDN

//Calculator archives

```

### Personalize

[Sass archive](sass/calc.scss) has added to the repository. Now you can change easily the color of the entire component using the variables at the beginning of the code.

```

  // Colores

  $base_color:#FFC0CB;

  $input_color: #EEEEEE;

  $input_shadow_color: #D76D88;

  $input_text_color: #968484;

  $btn_color: #FCD9A6;

  $btn_active_color: #F9CE8F;

  $btn_border_color: #FFFFFF;

  $btn_text_color: #FFFFFF;

```

### Built with :hammer_and_wrench:

[VueJs](https://es.vuejs.org/v2/guide/installation.html#CDN) - Used web framework

[FontAwesome](https://fontawesome.com/start) - Calculator icon in open button

[Sass](https://sass-lang.com/) - Css preprocessor