funuicss 1.9.21 → 1.9.23

package/component/CloseModal.jsx

@@ -82,7 +82,7 @@ function CloseModal(_ref) {
     className: "".concat(funcss, " closeModal"),
     onClick: onClick
   }, /*#__PURE__*/external_react_default().createElement(Icon, {
-    icon: "fas fa-times"
+    icon: "bx bx-x"
   }));
 }
 module.exports = __webpack_exports__;

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

@@ -1,7 +1,8 @@
 /* Imports */
 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
-  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 :root {
   /* Colors */
   --primaryColor: #0d6dfc;
@@ -10,7 +11,7 @@
   --bd-theme:#fff;
   --dark: #1e1e1e;
   --lightDark: #4e4e4e66;
-  --secondaryColor: #6d767e;
+  --secondaryColor: #333333;
   --success: #48c78e;
   --successLight:#edf7ed;
   --warning: #dc8001cc;
@@ -32,7 +33,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;
@@ -51,15 +52,13 @@
   --mediumScreen:1000px;
   --largeScreen: calc(var(var(--mediumScreen)) + 1px);
   --shadowMedium:0 0.8rem 2rem 0 rgba(0, 0, 0, 0.1);
-  --card:0 2rem 3rem 0 rgba(0, 0, 0, 0.2);
+  --card:0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
 
   /* medium Screen body */
   --midBdFontSize:0.8rem;
 
 }
 
-
-
 /* DarkTheme */
 :root{
   --raiseThemes:#FFFFFF;
@@ -829,10 +828,11 @@ h6,
 /*buttons*/
 .button {
   border: none;
-  transition: 1s linear;
-  padding: 0.5rem;
+  padding: 0.35rem 0.5rem;
   background-color: inherit;
   border-radius: 0.2rem;
+  transition:filter 0.5s linear;
+
 }
 .button:hover {
   cursor: pointer;
@@ -864,11 +864,11 @@ h6,
   filter: var(--hoverable);
 }
 .button.smallBtn {
-  padding: 0.256rem !important;
+  padding: 0.256rem 0.4rem !important;
   font-size: var(--smallFont) ;
 }
 .button.smallerBtn{
-  padding: 0.156rem !important;
+  padding: 0.156rem 0.3rem !important;
   font-size: var(--smallerFont) ;
 }
 .button.bigBtn {
@@ -883,7 +883,7 @@ h6,
 
 /*cards*/
 .card {
-  box-shadow: var(--shadowMedium);
+  box-shadow: var(--card);
   transition: 0.3s;
   background-color: var(--raiseThemes);
 }
@@ -962,7 +962,6 @@ h6,
   padding: 0.5rem 5%;
   height: var(--navHeight);
   gap: 2rem;
-  background-color: var(--raiseThemes);
 }
 #funSideBar{
   position: fixed;
@@ -1021,11 +1020,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 +1283,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 +1333,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 +1373,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 +1404,7 @@ input , select{height: var(--inputHeight);}
   bottom: 0;
   overflow: hidden;
   min-width: 1.9rem;
+  
 }
 .icon-container.left .input {
   padding-left: 2.2rem;
@@ -2091,9 +2119,10 @@ th {
   cursor: pointer;
 }
 .closeModal {
-  width: 2.5rem;
-  height: 2.5rem;
-  background-color: var(--danger);
+  width: 2.2rem;
+  height: 2.2rem;
+  background-color: var(--dangerLight);
+  color: var(--danger);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2102,15 +2131,13 @@ th {
   top: 0;
   right: 0;
   transform: translate(1.25rem, -1.25rem);
-  color: var(--white);
   transition: 0.3s linear;
+  cursor: pointer;
+  border: 0.1rem solid var(--borderColor);
 }
 .closeModal:hover {
-  color: var(--white);
-  background-color: var(--danger);
-  cursor: pointer;
+filter: brightness(90%);
 }
-
 .modal-title {
   padding: 0.5rem;
   border-bottom: 1.5px solid var(--borderColor);
@@ -2130,6 +2157,7 @@ th {
   max-height: calc(100vh - 200px) ;
   overflow: auto;
 }
+
 .modal-action {
   padding: 0.7rem;
   text-align: right;
@@ -2205,57 +2233,7 @@ th {
   background-color: black;
   opacity: 0.1;
 }
-/*slide panel*/
-.slide-panel {
-  position: relative;
-  overflow: hidden;
-}
-.slide-panel-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  transition: transform 0.3s ease;
-}
-.slide-panel.slide-top:hover .slide-panel-content {
-  transform: translate(0, 0);
-}
-.slide-panel.slide-top .slide-panel-content {
-  transform: translate(0, -100%);
-}
-.slide-panel.slide-bottom:hover .slide-panel-content {
-  transform: translate(0, 0);
-}
-.slide-panel.slide-bottom .slide-panel-content {
-  transform: translate(0, 100%);
-}
-.slide-panel.slide-left:hover .slide-panel-content {
-  transform: translate(0, 0);
-}
-.slide-panel.slide-left .slide-panel-content {
-  transform: translate(-100%, 0);
-}
-.slide-panel.slide-right:hover .slide-panel-content {
-  transform: translate(0, 0);
-}
-.slide-panel.slide-right .slide-panel-content {
-  transform: translate(100%, 0);
-}
-.icon-start {
-  display: relative;
-}
-.icon-start > i {
-  display: absolute;
-  top: 0;
-  left: 0;
-}
-.icon.fit {
-  transform: translateY(20%);
-}
+
 
 /*hide and show on screen */
 @media(max-width: 600px) {
@@ -2351,7 +2329,7 @@ th {
   background-color: var(--lighter);
   position: relative;
   border-radius: 0.2rem;
-  height: 20px;
+  height: 0.6rem;
 }
 .progressInner {
   position: absolute;
@@ -2360,7 +2338,6 @@ th {
   border-radius: 0.2rem;
   height: 100%;
   font-size: var(--smallerFont);
-  font-weight: bold;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -2495,7 +2472,7 @@ th {
   max-width: 90%;
   width: fit-content;
   max-height: 2.5rem;
-  height: fit-content;
+  height: 100%;
   color: var(--white);
   box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
   z-index: var(--snackBarZindex);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "funuicss",
-  "version": "1.9.21",
+  "version": "1.9.23",
   "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"],