Wip

php-flasher · Jun 14, 2023 · e4886d8 · e4886d8
1 parent b8bf1e6
commit e4886d8
Show file tree

Hide file tree

Showing 16 changed files with 4,764 additions and 1,753 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,12 +3,12 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    node: true
+    node: true,
   },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: { project: ['./tsconfig.json', './packages/*/tsconfig.json'] },

diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"]
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
diff --git a/package.json b/package.json
@@ -20,9 +20,7 @@
   ],
   "author": "younes KHOUBZA <[email protected]>",
   "license": "MIT",
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": ["packages/*"],
   "scripts": {
     "build:prod": "NODE_ENV=production lerna exec -- rollup -c ../../rollup.config.js",
     "build:dev": "NODE_ENV=development lerna exec -- rollup -c ../../rollup.config.js",
@@ -31,7 +29,7 @@
     "publish": "lerna publish from-package --yes",
     "release": "lerna version --no-private --conventional-commits --conventional-graduate --create-release github --force-publish --yes",
     "lint": "eslint . --ext .ts --fix",
-    "lint:styles": "stylelint '**/*.scss'",
+    "lint:styles": "stylelint '**/*.scss' --fix",
     "format": "prettier --write .",
     "check-deps": "depcheck"
   },
@@ -71,7 +69,9 @@
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.63.4",
     "stylelint": "^15.7.0",
+    "stylelint-config-recess-order": "^4.2.0",
     "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-scss": "^5.0.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.3",

diff --git a/packages/flasher/dist/flasher.css b/packages/flasher/dist/flasher.css
diff --git a/packages/flasher/dist/flasher.min.css b/packages/flasher/dist/flasher.min.css
diff --git a/packages/flasher/styles/_container.scss b/packages/flasher/styles/_container.scss
@@ -1,13 +1,13 @@
 .fl-main-container {
   position: fixed;
-  width: 24em;
   z-index: 99999;
+  width: 24em;
   transition: all 1s ease-in-out;
 
-  @media only screen and (max-width: 480px) {
-    width: auto;
-    left: 0.5em;
+  @media only screen and (width <= 480px) {
     right: 0.5em;
+    left: 0.5em;
+    width: auto;
   }
 
   &[data-position^="top-"] {
@@ -18,6 +18,31 @@
     bottom: 0.5em;
   }
 
+  .fl-container {
+    color: var(--text-color);
+    background-color: var(--background-color);
+    transition: transform 0.3s ease-in-out;
+
+    &.fl-show {
+      transform: translate(0, 0);
+    }
+
+    .fl-progress-bar {
+      display: flex;
+      height: 0.125em;
+      margin-left: -1px;
+    }
+
+    &.fl-rtl {
+      direction: rtl;
+
+      .fl-progress-bar {
+        margin-right: -1px;
+        margin-left: auto;
+      }
+    }
+  }
+
   &[data-position$="-right"] {
     right: 0.5em;
 
@@ -46,29 +71,4 @@
   &[data-position="bottom-center"] .fl-container {
     transform: translateY(100vh);
   }
-
-  .fl-container {
-    background-color: var(--background-color);
-    color: var(--text-color);
-    transition: transform 0.3s ease-in-out;
-
-    &.fl-show {
-      transform: translate(0, 0);
-    }
-
-    .fl-progress-bar {
-      display: flex;
-      height: 0.125em;
-      margin-left: -1px;
-    }
-
-    &.fl-rtl {
-      direction: rtl;
-
-      .fl-progress-bar {
-        margin-right: -1px;
-        margin-left: auto;
-      }
-    }
-  }
 }
diff --git a/packages/flasher/styles/_flasher.scss b/packages/flasher/styles/_flasher.scss
@@ -1,12 +1,11 @@
 .fl-flasher {
+  margin-top: 0.5em;
   line-height: 1.5;
-  background-color: var(--background-color);
   color: var(--text-color);
-  margin-top: 0.5em;
-  cursor: pointer;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
   word-break: break-word;
+  cursor: pointer;
+  background-color: var(--background-color);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
 
   &.fl-rtl {
     border-radius: 0 0.375em 0.375em 0;
@@ -18,8 +17,8 @@
 
   .fl-content {
     display: flex;
-    padding: 0.75em;
     align-items: center;
+    padding: 0.75em;
   }
 
   .fl-icon {
@@ -29,11 +28,11 @@
   .fl-title,
   .fl-message {
     display: block;
-    margin-left: 1em;
     margin-right: 1em;
+    margin-left: 1em;
     line-height: 1.25em;
 
-    &:first-letter {
+    &::first-letter {
       text-transform: uppercase;
     }
   }

diff --git a/packages/flasher/styles/_icons.scss b/packages/flasher/styles/_icons.scss
@@ -1,101 +1,101 @@
 .fl-icon {
   position: relative;
+  box-sizing: border-box;
+  display: inline-block;
   width: 1em;
   min-width: 1em;
   height: 1em;
   min-height: 1em;
   margin: 0;
+  color: white;
   border-radius: 50%;
   transition: all 1s;
-  box-sizing: border-box;
-  display: inline-block;
-  color: white;
 
-  &:before,
-  &:after {
-    content: "";
+  &::before,
+  &::after {
     position: absolute;
-    transition: all 1s;
-    border-width: 0;
     box-sizing: border-box;
+    content: "";
+    border-width: 0;
+    transition: all 1s;
   }
 }
 
 .fl-success .fl-icon {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
+    top: 0.6em;
+    left: 0.35em;
     width: 0.16em;
     height: 0.6em;
-    background-color: currentColor;
+    background-color: currentcolor;
     border-radius: 0.1em;
-    top: 0.6em;
-    left: 0.35em;
     transform: rotate(-135deg);
     transform-origin: 0.08em 0.08em;
   }
 
-  &:after {
+  &::after {
     width: 0.4em;
     height: 0.16em;
   }
 }
 
 .fl-info .fl-icon {
-  &:before,
-  &:after {
-    width: 0.15em;
-    background-color: currentColor;
+  &::before,
+  &::after {
     left: 50%;
-    transform: translateX(-50%);
+    width: 0.15em;
+    background-color: currentcolor;
     border-radius: 0.03em;
+    transform: translateX(-50%);
   }
 
-  &:before {
-    height: 0.38em;
+  &::before {
     top: 0.4em;
+    height: 0.38em;
   }
 
-  &:after {
+  &::after {
+    top: 0.21em;
     height: 0.13em;
     box-shadow: -0.06em 0.19em, -0.06em 0.44em, 0.06em 0.44em;
-    top: 0.21em;
   }
 }
 
 .fl-warning .fl-icon {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
+    left: 50%;
     width: 0.15em;
-    background-color: currentColor;
+    background-color: currentcolor;
     border-radius: 0.03em;
-    left: 50%;
     transform: translateX(-50%);
   }
 
-  &:before {
-    height: 0.38em;
+  &::before {
     top: 0.21em;
+    height: 0.38em;
   }
 
-  &:after {
-    height: 0.13em;
+  &::after {
     top: 0.65em;
+    height: 0.13em;
   }
 }
 
 .fl-error .fl-icon {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
+    top: 50%;
+    left: 50%;
     width: 0.16em;
     height: 0.7em;
-    background-color: currentColor;
+    background-color: currentcolor;
     border-radius: 0.1em;
     transform: translate(-50%, -50%) rotate(-135deg);
-    top: 50%;
-    left: 50%;
   }
 
-  &:after {
+  &::after {
     transform: translate(-50%, -50%) rotate(-45deg);
   }
 }
diff --git a/packages/flasher/styles/_types.scss b/packages/flasher/styles/_types.scss
@@ -22,8 +22,8 @@
     }
 
     &:not(.fl-rtl) {
-      border-left: 0.8em solid var(--#{$type}-color);
       border-right: none;
+      border-left: 0.8em solid var(--#{$type}-color);
     }
 
     .fl-title {

diff --git a/packages/flasher/styles/_variables.scss b/packages/flasher/styles/_variables.scss
@@ -1,14 +1,12 @@
 :root {
-  --background-color: rgb(255, 255, 255);
-  --text-color: rgb(75, 85, 99);
-  --dark-background-color: rgb(15, 23, 42);
-  --dark-text-color: rgb(255, 255, 255);
-
+  --background-color: rgb(255 255 255);
+  --text-color: rgb(75 85 99);
+  --dark-background-color: rgb(15 23 42);
+  --dark-text-color: rgb(255 255 255);
   --success-color: #059669ff;
   --info-color: #2563ebff;
   --warning-color: #d97706ff;
   --error-color: #dc2626ff;
-
   --success-color-light: #70c9a1ff;
   --info-color-light: #609ae5ff;
   --warning-color-light: #eca343ff;