Merge pull request #234 from paywteam/master

Merge stable version

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     'plugin:prettier/recommended'
   ],
   rules: {
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-console': ['warn', { allow: ['warn', 'error', 'info'] }],
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'space-before-function-paren': [
       'error',

README.md

@@ -26,20 +26,20 @@ https://eodiro.com
 3. Go to the project's root directory and install dependencies.
 
 ```zsh
-→ yarn install
+→ npm install
 ```
 
 4. Happy developing
 
 ```zsh
 # Development
-→ yarn run dev
+→ npm run dev
 ```
 
 ```zsh
 # Build and start the server
-→ yarn run build
-→ yarn run start
+→ npm run build
+→ npm run start
 ```
 
 ## Contributing

src/assets/styles/scss/global/globalstyle.scss

@@ -2,6 +2,7 @@
 @import '~/assets/styles/scss/global/typography';
 @import '~/assets/styles/scss/global/simplebar-custom';
 @import '~/assets/styles/scss/global/transition';
+@import '~/assets/styles/scss/global/input';
 
 // UI6
 @import '~assets/styles/scss/utilities/ui6';
@@ -138,7 +139,10 @@ input {
   border: none;
 }
 
-input,
+input[type='text'],
+input[type='email'],
+input[type='password'],
+input[type='search'],
 textarea {
   @include input-style;
 }

src/assets/styles/scss/global/input.scss

@@ -0,0 +1,39 @@
+@import '~/assets/styles/scss/main';
+
+input[type='checkbox'] {
+  $checkbox-size: 23px;
+  $indicator-size: 11px;
+
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  border-radius: r(2);
+  @include elm-fill;
+  @include bordered;
+
+  &::before {
+    content: '';
+    display: block;
+    width: $indicator-size;
+    height: $indicator-size;
+    background: $light-blue;
+    border-radius: r(1);
+    opacity: 0;
+    transform: scale(0.7);
+    transition: transform 100ms ease, opacity 100ms ease;
+
+    @include dark-mode {
+      background: $light-yellow;
+    }
+  }
+
+  &:checked {
+    &::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

src/assets/styles/scss/utilities/_ui6.scss

@@ -114,3 +114,20 @@ $gap-props: (
 .block-style {
   @include block-style;
 }
+
+// Flex
+.flex {
+  display: flex;
+
+  &.align-center {
+    align-items: center;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}

src/assets/styles/scss/utilities/_variables.scss

@@ -1,7 +1,7 @@
 // background colors
 // #fff for over white, #000 over black
 $base-white-blue: #f5f6f8;
-$base-black-soft: #181818;
+$base-black-soft: #191919;
 
 // text colors
 $base-white: #f0f0f0;