Started working on project

Author: mrastiak

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Carrene
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package-lock.json

@@ -1,28 +1,19 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <loading-checkbox />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import LoadingCheckbox from './components/LoadingCheckbox'
 
 export default {
-  name: 'app',
+  name: 'App',
   components: {
-    HelloWorld
+    LoadingCheckbox
   }
 }
 </script>
 
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="sass">
 </style>

src/App.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="loadingCheckbox" :style="containerStyles">
+    <div class="checkbox" :class="status" :style="checkboxStyles">
+      <div class="loading" v-if="status === 'loading'" :style="loadingStyle"></div>
+      <div class="check" v-else-if="status === 'checked'" :style="checkStyles"></div>
+      <div class="unchecked" v-else></div>
+    </div>
+    <p class="label" v-if="label" :style="labelStyles">{{ label }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PendingCheckbox',
+  props: {
+    status: {
+      type: String,
+      default: 'unchecked'
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: Number,
+      default: 30
+    },
+    fontSize: {
+      type: Number,
+      default: null
+    },
+    gap: {
+      type: Number,
+      default: null
+    }
+  },
+  computed: {
+    checkboxStyles () {
+      return Object.assign(
+        {
+          width: `${this.size}px`,
+          height: `${this.size}px`,
+          borderWidth: '1px',
+          borderColor: 'black',
+          borderStyle: 'solid',
+          position: 'relative'
+        },
+        this.checkedStyles
+      )
+    },
+    checkedStyles () {
+      if (this.status === 'checked') {
+        return {
+          background: 'red'
+        }
+      } else {
+        return {}
+      }
+    },
+    checkStyles () {
+      return {
+        position: 'absolute',
+        border: 'solid white',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-60%, -65%) rotate(45deg)',
+        transformOrigin: '55% 55%',
+        width: `${this.size * 0.33}px`,
+        height: `${this.size * 0.66}px`,
+        borderWidth: `0 ${this.size * 0.1 >= 2 ? this.size * 0.1 : 2}px ${this.size * 0.1 >= 2 ? this.size * 0.1 : 2}px 0`
+      }
+    },
+    loadingStyle () {
+      return {
+        border: '6px solid #f3f3f3',
+        borderRadius: '50%',
+        borderTop: '16px solid #3498db',
+        width: '20px',
+        height: '20px',
+        animation: 'spin 2s linear infinite'
+      }
+    },
+    containerStyles () {
+      return Object.assign(
+        {
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr',
+          alignItems: 'center',
+          width: 'fit-content',
+          cursor: 'pointer'
+        },
+        this.computedGap
+      )
+    },
+    labelStyles () {
+      if (this.fontSize) {
+        return {
+          fontSize: `${this.fontSize}px`,
+          lineHeight: `${this.fontSize}px`
+        }
+      } else {
+        return {
+          fontSize: `${this.size * 1.1}px`,
+          lineHeight: `${this.size * 1.1}px`
+        }
+      }
+    },
+    computedGap () {
+      if (this.gap) {
+        return {
+          gridColumnGap: `${this.gap}px`
+        }
+      } else {
+        return {
+          gridColumnGap: `${this.size * 0.2}px`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+  *
+    padding: 0
+    margin: 0
+
+  #loadingCheckbox
+    @-webkit-keyframes spin
+      0%
+        -webkit-transform: rotate(0deg)
+      100%
+        -webkit-transform: rotate(360deg)
+
+    @keyframes spin
+      0%
+        transform: rotate(0deg)
+      100%
+        transform: rotate(360deg)
+
+</style>