Build css

Author: cp-dharti-r

.github/workflows/publish.yml

@@ -14,7 +14,9 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm publish --access public
+      - run: 
+          npm ci
+          npm npm build-css
+          npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -38,4 +38,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-src/app/style.scss
+# src/app/style.scss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopassoftware/react-file-upload",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "description": "Show the preview of file and manage files data to upload",
   "private": false,
   "main": "/src/app/index.js",

src/app/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultipleFileUpload = exports.SingleFileUpload = void 0;
 require("../../dist/css/output.css");
 require("../../dist/css/style.scss");
-var singleFileUpload_tsx_1 = require("./components/singleFileUpload.tsx");
-exports.SingleFileUpload = singleFileUpload_tsx_1.default;
-var multipleFileUpload_tsx_1 = require("./components/multipleFileUpload.tsx");
-exports.MultipleFileUpload = multipleFileUpload_tsx_1.default;
+var singleFileUpload_js_1 = require("./components/singleFileUpload.js");
+exports.SingleFileUpload = singleFileUpload_js_1.default;
+var multipleFileUpload_js_1 = require("./components/multipleFileUpload.js");
+exports.MultipleFileUpload = multipleFileUpload_js_1.default;

src/app/style.scss

@@ -0,0 +1,64 @@
+@mixin gradient-striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
+    background-image: -webkit-linear-gradient(
+      $angle,
+      $color 25%,
+      transparent 25%,
+      transparent 50%,
+      $color 50%,
+      $color 75%,
+      transparent 75%,
+      transparent
+    );
+    background-image: -o-linear-gradient(
+      $angle,
+      $color 25%,
+      transparent 25%,
+      transparent 50%,
+      $color 50%,
+      $color 75%,
+      transparent 75%,
+      transparent
+    );
+    background-image: linear-gradient(
+      $angle,
+      $color 25%,
+      transparent 25%,
+      transparent 50%,
+      $color 50%,
+      $color 75%,
+      transparent 75%,
+      transparent
+    );
+  }
+  
+  @-webkit-keyframes progress-bar-stripes {
+    from {
+      background-position: 40px 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+  
+  @keyframes progress-bar-stripes {
+    from {
+      background-position: 40px 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+  
+  @mixin animation($animation) {
+    -webkit-animation: $animation;
+    -o-animation: $animation;
+    animation: $animation;
+  }
+  .progress.active .progress-bar {
+    @include animation(progress-bar-stripes 2s linear infinite);
+  }
+  .progress-striped .progress-bar {
+    @include gradient-striped;
+    background-size: 40px 40px;
+  }
+