funuicss 1.9.21 → 1.9.22

package/component/Input.jsx

@@ -193,6 +193,32 @@ var Input = /*#__PURE__*/function (_Component) {
             rows: this.props.rows ? this.props.rows : 2
           });
         }
+      } else if (this.props.file) {
+        return /*#__PURE__*/external_react_default().createElement("div", {
+          className: "fileInputContainer ".concat(this.props.noBorder ? 'borderless' : '')
+        }, /*#__PURE__*/external_react_default().createElement("div", null, this.props.icon ? this.props.icon : /*#__PURE__*/external_react_default().createElement("i", {
+          className: "fas icon size-big text-secondary fa-upload"
+        }), /*#__PURE__*/external_react_default().createElement("br", null), /*#__PURE__*/external_react_default().createElement("div", {
+          className: "text-secondary",
+          style: {
+            margin: "0.3rem 0"
+          }
+        }, this.props.label)), /*#__PURE__*/external_react_default().createElement("div", {
+          className: "fileInput"
+        }, this.props.button ? this.props.button : /*#__PURE__*/external_react_default().createElement("button", {
+          className: "primary button full-width"
+        }, " Upload File"), /*#__PURE__*/external_react_default().createElement("input", {
+          id: this.props.id,
+          className: "\n        \n        ".concat(this.props.status === "success" ? "success-input" : "", "\n        ").concat(this.props.status === "warning" ? "warning-input" : "", "\n        ").concat(this.props.status === "danger" ? "danger-input" : "", "\n        input\n        ").concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n        ").concat(this.props.leftRounded ? "leftRounded" : this.props.rightRounded ? "rightRounded" : "", "\n        borderedInput\n        filedInput\n        "),
+          onChange: this.props.onChange,
+          type: "file",
+          name: this.props.name,
+          style: {
+            borderRadius: "".concat(this.props.rounded ? "400rem" : ""),
+            width: "".concat(this.props.fullWidth ? "100%" : "")
+          },
+          value: this.props.value
+        })));
       } else {
         if (this.props.bordered) {
           return /*#__PURE__*/external_react_default().createElement("input", {

package/css/fun.css

@@ -32,7 +32,7 @@
   --fontFamily: 'Poppins', sans-serif;
   --smallFont: 0.8em;
   --smallerFont: 0.7em;
-  --navHeight: 50px !important ;
+  --navHeight: 45px !important ;
   --borderColor:#ddd;
   --border: 0.1rem solid var(--borderColor);
   --inputBorder:0.12rem;
@@ -829,10 +829,11 @@ h6,
 /*buttons*/
 .button {
   border: none;
-  transition: 1s linear;
-  padding: 0.5rem;
+  padding: 0.35rem;
   background-color: inherit;
   border-radius: 0.2rem;
+  transition: filter 0.5s linear;
+
 }
 .button:hover {
   cursor: pointer;
@@ -962,7 +963,6 @@ h6,
   padding: 0.5rem 5%;
   height: var(--navHeight);
   gap: 2rem;
-  background-color: var(--raiseThemes);
 }
 #funSideBar{
   position: fixed;
@@ -1021,11 +1021,11 @@ h6,
 }
 .navbar-link {
   cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.2rem 0.6rem;
   transition: 0.2s linear;
 }
 .navbar-link.hover:hover {
-  background-color: var(--light);
+  background-color: var(--lighter);
   border-radius: 0.3rem;
 }
 
@@ -1284,6 +1284,35 @@ h6,
   background-color: var(--raiseThemes);
   color: var(--bd-color);
 }
+.fileInputContainer{
+  border: var(--inputBorder) dashed var(--borderColor);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: stretch;
+  justify-content: center;
+  text-align: center;
+  margin: 1rem 0;
+  transition: 0.1s linear;
+}
+.fileInputContainer:hover{
+  outline: 0.2rem solid var(--inputOutline);
+  border: var(--inputBorder) dashed var(--primaryColor);
+}
+.fileInput{
+  position: relative;
+}
+.filedInput{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
 .input.success-input{
   border-bottom:var(--inputBorder) solid var(--success) !important;
 }
@@ -1305,6 +1334,7 @@ input , select{height: var(--inputHeight);}
   transition: 0.1s linear;
   padding: 0.5rem;
 }
+.borderless{border: none !important;outline: none !important;}
  .success-input.borderedInput{
   border: var(--inputBorder) solid var(--success) !important;
 }
@@ -1344,10 +1374,8 @@ input , select{height: var(--inputHeight);}
 }
 .icon-container {
   position: relative;
-  transform: translateX(0.3rem);
 }
-.icon-container .leftIcon,
-.rightIcon {
+.icon-container .leftIcon,.rightIcon {
   height: calc(100%) !important;
   width: 2rem;
   display: flex;
@@ -1377,6 +1405,7 @@ input , select{height: var(--inputHeight);}
   bottom: 0;
   overflow: hidden;
   min-width: 1.9rem;
+  
 }
 .icon-container.left .input {
   padding-left: 2.2rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "funuicss",
-  "version": "1.9.21",
+  "version": "1.9.22",
   "description": "React/Next.js component UI Library for creating Easy and good looking websites with fewer lines of code.",
   "main": "index.js",
   "keywords": ["funui" , "React Component", "Next Component", "react" , "react and next component Library"],