funuicss 1.9.2 → 1.9.3

package/css/fun.css

@@ -4,17 +4,25 @@
   font-family: "MavenPro";
   src: url(./Maven_Pro/MavenPro.ttf);
 }
+
+
+
 :root {
-  --primaryColor: #0d6efd;
+  --primaryColor: #0d6dfc;
   --white: #fff;
   --dark: #1e1e1e;
   --lightDark: #4e4e4e66;
   --secondaryColor: #6d767e;
   --success: #48c78e;
+  --successLight:#edf7ed;
   --warning: #dc8001cc;
+  --warningLight:#fff4e5 ;
   --danger: #dc1101cc;
+  --dangerLight:#fdeded;
   --info: #5fbbe2;
-  --light: #e0f3f5;
+  --infoLight:#e5f6fd;
+  --light: #ecf5f8;
+  --deepLight: #2fa2b1;
   --bd-font-weight: 400;
   --bdfontSize: 1rem;
   --db-line-height: 1;
@@ -31,7 +39,10 @@
   --sideBarZindex:10;
   --navBarZindex:9;
   --modalZIndex:15;
-  --snackBarZindex:15;
+  --loaderZindex:100;
+  --snackBarZindex:20;
+  --inputHeight:2.1rem;
+  --inputPadding:0.5rem 0;
 
 
 }
@@ -86,6 +97,7 @@ input {
 }
 
 /* Background Color */
+
 .gradient,
 .hover-gradient:hover {
   background: var(--gradient) !important;
@@ -113,6 +125,7 @@ input {
 .light,
 .hover-light:hover {
   background-color: var(--light) !important;
+  color: var(--deepLight);
 }
 .secondary,
 .hover-secondary:hover {
@@ -124,27 +137,50 @@ input {
   background-color: var(--success) !important;
   color: white;
 }
+.light-success,
+.hover-light-success:hover {
+  background-color: var(--successLight) !important;
+  color: var(--success);
+}
 .info,
 .hover-info:hover {
   background-color: var(--info) !important;
   color: white;
 }
+.light-info,
+.hover-light-info:hover {
+  background-color: var(--infoLight) !important;
+  color: var(--info);
+}
 .warning,
 .hover-warning:hover {
   background-color: var(--warning) !important;
   color: white;
 }
+.light-warning,
+.hover-light-warning:hover {
+  background-color: var(--warningLight) !important;
+  color: var(--warning);
+}
 .danger,
 .error,
 .hover-danger:hover {
   background-color: var(--danger) !important;
   color: white;
 }
+.light-danger,
+.hover-lightdanger:hover {
+  background-color: var(--dangerLight) !important;
+  color:var(--danger);
+}
 
 /* outlines */
 .success-outline {
   border: 1px solid var(--success) !important;
 }
+.light-success-outline {
+  border: 1px solid var(--successLight) !important;
+}
 .primary-outline {
   border: 1px solid var(--primaryColor) !important;
 }
@@ -166,12 +202,21 @@ input {
 .info-outline {
   border: 1px solid var(--info) !important;
 }
+.light-info-outline {
+  border: 1px solid var(--infoLight) !important;
+}
 .warning-outline {
   border: 1px solid var(--warning) !important;
 }
+.light-warning-outline {
+  border: 1px solid var(--warningLight) !important;
+}
 .danger-outline {
   border: 1px solid var(--danger) !important;
 }
+.light-danger-outline {
+  border: 1px solid var(--dangerLight) !important;
+}
 
 /* text color */
 .text-light,
@@ -202,17 +247,32 @@ input {
 .hover-text-success:hover {
   color: var(--success) !important;
 }
+.text-light-success,
+.hover-text-light-success:hover {
+  color: var(--successLight) !important;
+}
 .text-info , .hover-text-info:hover {
   color: var(--info);
 }
+.text-light-info , .hover-text-light-info:hover {
+  color: var(--infoLight);
+}
 .text-warning,
 .hover-text-warning:hover {
   color: var(--warning);
 }
+.text-light-warning,
+.hover-text-light-warning:hover {
+  color: var(--warningLight);
+}
 .text-danger,
 .hover-text-danger:hover {
   color: var(--danger);
 }
+.text-light-danger,
+.hover-text-light-danger:hover {
+  color: var(--dangerLight);
+}
 .text-gradient,
 .hover-text-gradient:hover {
   background: -webkit-linear-gradient(var(--gradientColors));
@@ -742,7 +802,8 @@ input {
   font-size: var(--smallFont);
 }
 .article{
-  line-height: 1.2rem;
+  line-height: 1.3rem;
+  letter-spacing: 0.02rem;
 }
 .text-bigger {
   font-size: calc(1.375rem + 2.5vw);
@@ -1440,6 +1501,14 @@ h6,
   bottom: 0;
   left: 0;
   width: 100%;
+  z-index: var(--navBarZindex);
+}
+.fixedTop {
+  position: fixed;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  z-index: var(--navBarZindex);
 }
 .row-flex.center {
   justify-content: center;
@@ -1456,6 +1525,18 @@ h6,
   filter: brightness(90%);
 
 }
+.rightRounded{
+  border-top-right-radius: 300rem !important;
+  border-bottom-right-radius: 300rem !important;
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+.leftRounded{
+  border-top-left-radius: 300rem !important;
+  border-bottom-left-radius: 300rem !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
 /* avatar */
 .avatar {
   display: flex;
@@ -2043,14 +2124,15 @@ h6,
 
 /*inputs*/
 .input {
-  padding: 0.5rem 0;
+  padding: var(--inputPadding);
   outline: none;
   border: 0.1rem transparent;
   border-bottom: var(--border);
   transition: 0.2s linear;
   font-weight: 500;
 }
-.input.flat{border-radius: 0 !important;}
+input , select{height: var(--inputHeight);}
+.input.flat{border-radius: 0;}
 .input:focus {
   border-bottom: 0.1rem solid var(--primaryColor);
 }
@@ -2672,7 +2754,8 @@ th {
   border: var(--border);
 }
 .table.stripped tr:nth-child(even) {
-  background-color: #e3e6e8;
+  background-color: var(--light);
+  color: var(--deepLight);
 }
 .table tr,
 th,
@@ -2680,11 +2763,11 @@ td {
   padding: 0.4rem;
   margin: 0;
 }
-.table.hoverable > tr,
+.table.hoverableTr > tr,
 th {
   transition: 0.3s;
 }
-.table.hoverable > tr:hover {
+.table.hoverableTr > tr:hover {
   filter: var(--hoverable);
 }
 .table.light {
@@ -3131,6 +3214,7 @@ Button,
 .tooltip .tip {
   display: none;
   width: 100%;
+  min-width: 100px;
   max-width: 400px;
   background-color: #555;
   color: #fff;
@@ -3308,3 +3392,42 @@ Button,
     margin-right: 0%;
   }
 }
+
+
+/* Loader */
+.funLoading {
+  width:50px;
+  height:50px;
+  display:inline-block;
+  padding:0px;
+  border-radius:100%;
+  border:5px solid;
+  border-top-color:var(--primaryColor);
+  border-bottom-color:var(--light);
+  border-left-color:var(--primaryColor);
+  border-right-color:var(--light);
+  -webkit-animation: loader4 1s linear infinite;
+  animation: loader4 1s linear infinite;
+}
+.fixedLoader{
+  position: fixed;
+  z-index: var(--loaderZindex);
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fixedLoader.backdropLoader{
+background-color: rgba(0, 0, 0, 0.2);
+}
+@keyframes loader4 {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(360deg);}
+}
+@-webkit-keyframes loader4 {
+  from {-webkit-transform: rotate(0deg);}
+  to {-webkit-transform: rotate(360deg);}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "funuicss",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "React/Next.js component UI Library for creating Easy and good looking websites with fewer lines of code.",
   "main": "index.js",
   "scripts": {