funuicss 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +3 -3
  2. package/component/Avatar.jsx +3 -3
  3. package/component/Button.jsx +6 -2
  4. package/component/Input.jsx +9 -9
  5. package/component/SideBar.jsx +77 -0
  6. package/component/SideBarContent.jsx +50 -0
  7. package/component/SideBarFooter.jsx +50 -0
  8. package/component/SideBarTop.jsx +71 -0
  9. package/css/fun.css +115 -88
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- <h1>Go to Our Website</h1>
1
+ <h1>FunUi For React And Next Apps</h1>
2
2
  <center><img src="https://funui.netlify.app/favicon.png" width="50"></center>
3
3
  <h3>Learn how to use the framework at our official website 👎</h3>
4
4
  https://funui.netlify.app
@@ -22,14 +22,14 @@ import 'funuicss/css/fun.css'
22
22
  You can use the CDN for your HTML file, you can only use our css defined classes
23
23
 
24
24
  <pre>
25
- https://github.com/FunUi-io/cdn.git'
25
+ https://cdn.jsdelivr.net/gh/FunUi-io/cdn@main/css/fun.css
26
26
  </pre>
27
27
 
28
28
  <h3>Import CDN</h3>
29
29
  You can also import the CDN in your CSS file
30
30
 
31
31
  <pre>
32
- @import url('https://github.com/FunUi-io/cdn.git');'
32
+ @import url('https://cdn.jsdelivr.net/gh/FunUi-io/cdn@main/css/fun.css');
33
33
  </pre>
34
34
 
35
35
  <h3>Download</h3>
package/component/Avatar.jsx CHANGED
@@ -69,10 +69,10 @@ function Avatar(_ref) {
69
69
  return /*#__PURE__*/external_react_default().createElement("div", {
70
70
  className: "avatar ".concat(funcss, " ").concat(bg),
71
71
  style: {
72
- width: "".concat(width),
73
- height: "".concat(height)
72
+ width: "".concat(width ? width : "2.3rem"),
73
+ height: "".concat(height ? height : "2.3rem")
74
74
  }
75
- }, children, content);
75
+ }, /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, content ? content : children));
76
76
  }
77
77
  module.exports = __webpack_exports__;
78
78
  /******/ })()
package/component/Button.jsx CHANGED
@@ -76,9 +76,13 @@ function Button(_ref) {
76
76
  _float = _ref["float"],
77
77
  hoverUp = _ref.hoverUp,
78
78
  fullWidth = _ref.fullWidth,
79
- outlined = _ref.outlined;
79
+ outlined = _ref.outlined,
80
+ small = _ref.small,
81
+ big = _ref.big,
82
+ flat = _ref.flat,
83
+ hoverNone = _ref.hoverNone;
80
84
  return /*#__PURE__*/external_react_default().createElement("button", {
81
- className: "button\ntext-".concat(color, "\n").concat(funcss, "\n").concat(rounded ? "roundBtn" : "", "\n").concat(_float ? "floatBtn" : "", "\n").concat(raised ? "card" : "", "\n").concat(hoverUp ? "hover-up" : "", "\n").concat(outlined ? "".concat(bg, "-outline outlined text-").concat(bg) : bg, "\n\n"),
85
+ className: "button\ntext-".concat(color, "\n").concat(funcss, "\n").concat(rounded ? "roundBtn" : "", "\n").concat(_float ? "floatBtn" : "", "\n").concat(raised ? "card" : "", "\n").concat(hoverUp ? "hover-up" : "", "\n").concat(flat ? "flat" : "", "\n").concat(hoverNone ? "hoverNone" : "", "\n").concat(small ? "smallBtn" : "", "\n").concat(big ? "bigBtn" : "", "\n").concat(outlined ? "".concat(bg, "-outline outlined text-").concat(bg) : bg, "\n\n"),
82
86
  onClick: onClick,
83
87
  onChange: onChange,
84
88
  style: {
package/component/Input.jsx CHANGED
@@ -86,7 +86,7 @@ var Input = /*#__PURE__*/function (_Component) {
86
86
  if (this.props.select) {
87
87
  if (this.props.bordered) {
88
88
  return /*#__PURE__*/external_react_default().createElement("select", _extends({}, this.props.disabled ? "disabled" : "", {
89
- className: "\n input\n ".concat(this.props.funcss, "\n bordered\n "),
89
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n bordered\n "),
90
90
  onChange: this.props.onChange,
91
91
  defaultValue: this.props.defaultValue,
92
92
  type: this.props.type,
@@ -104,7 +104,7 @@ var Input = /*#__PURE__*/function (_Component) {
104
104
  }) : "");
105
105
  } else if (this.props.bordereless) {
106
106
  return /*#__PURE__*/external_react_default().createElement("select", _extends({}, this.props.disabled ? "disabled" : "", {
107
- className: "\n input\n ".concat(this.props.funcss, "\n borderless\n "),
107
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n borderless\n "),
108
108
  onChange: this.props.onChange,
109
109
  defaultValue: this.props.defaultValue,
110
110
  type: this.props.type,
@@ -123,7 +123,7 @@ var Input = /*#__PURE__*/function (_Component) {
123
123
  }) : "");
124
124
  } else {
125
125
  return /*#__PURE__*/external_react_default().createElement("select", _extends({}, this.props.disabled ? "disabled" : "", {
126
- className: "\n input\n ".concat(this.props.funcss, "\n "),
126
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n "),
127
127
  onChange: this.props.onChange,
128
128
  defaultValue: this.props.defaultValue,
129
129
  type: this.props.type,
@@ -144,7 +144,7 @@ var Input = /*#__PURE__*/function (_Component) {
144
144
  } else if (this.props.multiline) {
145
145
  if (this.props.bordered) {
146
146
  return /*#__PURE__*/external_react_default().createElement("textarea", _extends({}, this.props.disabled ? "disabled" : "", {
147
- className: "\n input\n ".concat(this.props.funcss, "\n bordered\n "),
147
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n bordered\n "),
148
148
  onChange: this.props.onChange,
149
149
  defaultValue: this.props.defaultValue,
150
150
  type: this.props.type,
@@ -159,7 +159,7 @@ var Input = /*#__PURE__*/function (_Component) {
159
159
  }));
160
160
  } else if (this.props.bordereless) {
161
161
  return /*#__PURE__*/external_react_default().createElement("textarea", _extends({}, this.props.disabled ? "disabled" : "", {
162
- className: "\n input\n ".concat(this.props.funcss, "\n borderless\n "),
162
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n borderless\n "),
163
163
  onChange: this.props.onChange,
164
164
  defaultValue: this.props.defaultValue,
165
165
  type: this.props.type,
@@ -174,7 +174,7 @@ var Input = /*#__PURE__*/function (_Component) {
174
174
  }));
175
175
  } else {
176
176
  return /*#__PURE__*/external_react_default().createElement("textarea", _extends({}, this.props.disabled ? "disabled" : "", {
177
- className: "\n input\n ".concat(this.props.funcss, "\n "),
177
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n "),
178
178
  onChange: this.props.onChange,
179
179
  defaultValue: this.props.defaultValue,
180
180
  type: this.props.type,
@@ -191,7 +191,7 @@ var Input = /*#__PURE__*/function (_Component) {
191
191
  } else {
192
192
  if (this.props.bordered) {
193
193
  return /*#__PURE__*/external_react_default().createElement("input", _extends({}, this.props.disabled ? "disabled" : "", {
194
- className: "\n input\n ".concat(this.props.funcss, "\n bordered\n "),
194
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n bordered\n "),
195
195
  onChange: this.props.onChange,
196
196
  defaultValue: this.props.defaultValue,
197
197
  type: this.props.type,
@@ -205,7 +205,7 @@ var Input = /*#__PURE__*/function (_Component) {
205
205
  }));
206
206
  } else if (this.props.bordereless) {
207
207
  return /*#__PURE__*/external_react_default().createElement("input", _extends({}, this.props.disabled ? "disabled" : "", {
208
- className: "\n input\n ".concat(this.props.funcss, "\n borderless\n "),
208
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n borderless\n "),
209
209
  onChange: this.props.onChange,
210
210
  defaultValue: this.props.defaultValue,
211
211
  type: this.props.type,
@@ -219,7 +219,7 @@ var Input = /*#__PURE__*/function (_Component) {
219
219
  }));
220
220
  } else {
221
221
  return /*#__PURE__*/external_react_default().createElement("input", _extends({}, this.props.disabled ? "disabled" : "", {
222
- className: "\n input\n ".concat(this.props.funcss, "\n "),
222
+ className: "\n input\n ".concat(this.props.funcss, " ").concat(this.props.flat ? "flat" : "", "\n "),
223
223
  onChange: this.props.onChange,
224
224
  defaultValue: this.props.defaultValue,
225
225
  type: this.props.type,
package/component/SideBar.jsx ADDED
@@ -0,0 +1,77 @@
1
+ /******/ (() => { // webpackBootstrap
2
+ /******/ "use strict";
3
+ /******/ // The require scope
4
+ /******/ var __webpack_require__ = {};
5
+ /******/
6
+ /************************************************************************/
7
+ /******/ /* webpack/runtime/compat get default export */
8
+ /******/ (() => {
9
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
10
+ /******/ __webpack_require__.n = (module) => {
11
+ /******/ var getter = module && module.__esModule ?
12
+ /******/ () => (module['default']) :
13
+ /******/ () => (module);
14
+ /******/ __webpack_require__.d(getter, { a: getter });
15
+ /******/ return getter;
16
+ /******/ };
17
+ /******/ })();
18
+ /******/
19
+ /******/ /* webpack/runtime/define property getters */
20
+ /******/ (() => {
21
+ /******/ // define getter functions for harmony exports
22
+ /******/ __webpack_require__.d = (exports, definition) => {
23
+ /******/ for(var key in definition) {
24
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
25
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
26
+ /******/ }
27
+ /******/ }
28
+ /******/ };
29
+ /******/ })();
30
+ /******/
31
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
32
+ /******/ (() => {
33
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
34
+ /******/ })();
35
+ /******/
36
+ /******/ /* webpack/runtime/make namespace object */
37
+ /******/ (() => {
38
+ /******/ // define __esModule on exports
39
+ /******/ __webpack_require__.r = (exports) => {
40
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
41
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
42
+ /******/ }
43
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
44
+ /******/ };
45
+ /******/ })();
46
+ /******/
47
+ /************************************************************************/
48
+ var __webpack_exports__ = {};
49
+ // ESM COMPAT FLAG
50
+ __webpack_require__.r(__webpack_exports__);
51
+
52
+ // EXPORTS
53
+ __webpack_require__.d(__webpack_exports__, {
54
+ "default": () => (/* binding */ SideBar)
55
+ });
56
+
57
+ ;// CONCATENATED MODULE: external "react"
58
+ const external_react_namespaceObject = require("react");
59
+ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
60
+ ;// CONCATENATED MODULE: ../Funcss/Components/SideBar.js
61
+
62
+ function SideBar(_ref) {
63
+ var funcss = _ref.funcss,
64
+ content = _ref.content,
65
+ children = _ref.children,
66
+ open = _ref.open;
67
+ if (open) {
68
+ return /*#__PURE__*/external_react_default().createElement("div", {
69
+ id: "funSideBar"
70
+ }, /*#__PURE__*/external_react_default().createElement("div", {
71
+ className: "navSidebar ".concat(funcss)
72
+ }, content ? content : children));
73
+ } else return "";
74
+ }
75
+ module.exports = __webpack_exports__;
76
+ /******/ })()
77
+ ;
package/component/SideBarContent.jsx ADDED
@@ -0,0 +1,50 @@
1
+ /******/ (() => { // webpackBootstrap
2
+ /******/ "use strict";
3
+ /******/ // The require scope
4
+ /******/ var __webpack_require__ = {};
5
+ /******/
6
+ /************************************************************************/
7
+ /******/ /* webpack/runtime/define property getters */
8
+ /******/ (() => {
9
+ /******/ // define getter functions for harmony exports
10
+ /******/ __webpack_require__.d = (exports, definition) => {
11
+ /******/ for(var key in definition) {
12
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
13
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
14
+ /******/ }
15
+ /******/ }
16
+ /******/ };
17
+ /******/ })();
18
+ /******/
19
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
20
+ /******/ (() => {
21
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
22
+ /******/ })();
23
+ /******/
24
+ /******/ /* webpack/runtime/make namespace object */
25
+ /******/ (() => {
26
+ /******/ // define __esModule on exports
27
+ /******/ __webpack_require__.r = (exports) => {
28
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
29
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
30
+ /******/ }
31
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
32
+ /******/ };
33
+ /******/ })();
34
+ /******/
35
+ /************************************************************************/
36
+ var __webpack_exports__ = {};
37
+ __webpack_require__.r(__webpack_exports__);
38
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
39
+ /* harmony export */ "default": () => (/* binding */ SideBarContent)
40
+ /* harmony export */ });
41
+ function SideBarContent(_ref) {
42
+ var funcss = _ref.funcss,
43
+ children = _ref.children;
44
+ return /*#__PURE__*/React.createElement("div", {
45
+ className: "sideBarContent ".concat(funcss)
46
+ }, children);
47
+ }
48
+ module.exports = __webpack_exports__;
49
+ /******/ })()
50
+ ;
package/component/SideBarFooter.jsx ADDED
@@ -0,0 +1,50 @@
1
+ /******/ (() => { // webpackBootstrap
2
+ /******/ "use strict";
3
+ /******/ // The require scope
4
+ /******/ var __webpack_require__ = {};
5
+ /******/
6
+ /************************************************************************/
7
+ /******/ /* webpack/runtime/define property getters */
8
+ /******/ (() => {
9
+ /******/ // define getter functions for harmony exports
10
+ /******/ __webpack_require__.d = (exports, definition) => {
11
+ /******/ for(var key in definition) {
12
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
13
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
14
+ /******/ }
15
+ /******/ }
16
+ /******/ };
17
+ /******/ })();
18
+ /******/
19
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
20
+ /******/ (() => {
21
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
22
+ /******/ })();
23
+ /******/
24
+ /******/ /* webpack/runtime/make namespace object */
25
+ /******/ (() => {
26
+ /******/ // define __esModule on exports
27
+ /******/ __webpack_require__.r = (exports) => {
28
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
29
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
30
+ /******/ }
31
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
32
+ /******/ };
33
+ /******/ })();
34
+ /******/
35
+ /************************************************************************/
36
+ var __webpack_exports__ = {};
37
+ __webpack_require__.r(__webpack_exports__);
38
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
39
+ /* harmony export */ "default": () => (/* binding */ SideBarFooter)
40
+ /* harmony export */ });
41
+ function SideBarFooter(_ref) {
42
+ var funcss = _ref.funcss,
43
+ children = _ref.children;
44
+ return /*#__PURE__*/React.createElement("div", {
45
+ className: "sideBarFooter ".concat(funcss)
46
+ }, children);
47
+ }
48
+ module.exports = __webpack_exports__;
49
+ /******/ })()
50
+ ;
package/component/SideBarTop.jsx ADDED
@@ -0,0 +1,71 @@
1
+ /******/ (() => { // webpackBootstrap
2
+ /******/ "use strict";
3
+ /******/ // The require scope
4
+ /******/ var __webpack_require__ = {};
5
+ /******/
6
+ /************************************************************************/
7
+ /******/ /* webpack/runtime/compat get default export */
8
+ /******/ (() => {
9
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
10
+ /******/ __webpack_require__.n = (module) => {
11
+ /******/ var getter = module && module.__esModule ?
12
+ /******/ () => (module['default']) :
13
+ /******/ () => (module);
14
+ /******/ __webpack_require__.d(getter, { a: getter });
15
+ /******/ return getter;
16
+ /******/ };
17
+ /******/ })();
18
+ /******/
19
+ /******/ /* webpack/runtime/define property getters */
20
+ /******/ (() => {
21
+ /******/ // define getter functions for harmony exports
22
+ /******/ __webpack_require__.d = (exports, definition) => {
23
+ /******/ for(var key in definition) {
24
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
25
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
26
+ /******/ }
27
+ /******/ }
28
+ /******/ };
29
+ /******/ })();
30
+ /******/
31
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
32
+ /******/ (() => {
33
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
34
+ /******/ })();
35
+ /******/
36
+ /******/ /* webpack/runtime/make namespace object */
37
+ /******/ (() => {
38
+ /******/ // define __esModule on exports
39
+ /******/ __webpack_require__.r = (exports) => {
40
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
41
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
42
+ /******/ }
43
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
44
+ /******/ };
45
+ /******/ })();
46
+ /******/
47
+ /************************************************************************/
48
+ var __webpack_exports__ = {};
49
+ // ESM COMPAT FLAG
50
+ __webpack_require__.r(__webpack_exports__);
51
+
52
+ // EXPORTS
53
+ __webpack_require__.d(__webpack_exports__, {
54
+ "default": () => (/* binding */ SideBarTop)
55
+ });
56
+
57
+ ;// CONCATENATED MODULE: external "react"
58
+ const external_react_namespaceObject = require("react");
59
+ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
60
+ ;// CONCATENATED MODULE: ../Funcss/Components/SideBarTop.js
61
+
62
+ function SideBarTop(_ref) {
63
+ var funcss = _ref.funcss,
64
+ children = _ref.children;
65
+ return /*#__PURE__*/external_react_default().createElement("div", {
66
+ className: "sideBarTop ".concat(funcss)
67
+ }, children);
68
+ }
69
+ module.exports = __webpack_exports__;
70
+ /******/ })()
71
+ ;
package/css/fun.css CHANGED
@@ -19,15 +19,19 @@
19
19
  --bdfontSize: 1rem;
20
20
  --db-line-height: 1;
21
21
  --fontFamily: "MavenPro", sans-serif;
22
- --smallFont: 0.875em;
23
- --smallerFont: 0.775em;
22
+ --smallFont: 0.775em;
23
+ --smallerFont: 0.675em;
24
24
  --navHeight: 50px !important ;
25
25
  --border: 0.1rem solid #ddd;
26
- --hoverable: rgba(221, 221, 221, 0.2);
26
+ --hoverable: brightness(90%);
27
27
  --gradient:linear-gradient(90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%);
28
28
  --gradientColors:90deg, var(--secondaryColor) 0%, var(--primaryColor) 100%;
29
29
  --linkColor:rgb(110, 168, 254);
30
30
  --linkHover:(139, 185, 254;);
31
+ --sideBarZindex:10;
32
+ --navBarZindex:9;
33
+ --modalZIndex:15;
34
+ --snackBarZindex:15;
31
35
 
32
36
 
33
37
  }
@@ -198,7 +202,7 @@ input {
198
202
  .hover-text-success:hover {
199
203
  color: var(--success) !important;
200
204
  }
201
- .text-info .hover-text-info:hover {
205
+ .text-info , .hover-text-info:hover {
202
206
  color: var(--info);
203
207
  }
204
208
  .text-warning,
@@ -218,6 +222,9 @@ input {
218
222
 
219
223
 
220
224
  /* width */
225
+ .width{width:var(--width)}
226
+ .max-width{max-width:var(--maxWidth)}
227
+ .min-width{min-width:var(--minWidth)}
221
228
  .width-10-p {
222
229
  width: 10% !important;
223
230
  }
@@ -523,6 +530,9 @@ input {
523
530
  }
524
531
 
525
532
  /*Heights*/
533
+ .height{height:var(--height)}
534
+ .max-height{max-height:var(--maxHeight)}
535
+ .min-height{min-height:var(--minHeight)}
526
536
  .height-10-p {
527
537
  height: 10%;
528
538
  }
@@ -731,6 +741,9 @@ input {
731
741
  .text-small {
732
742
  font-size: var(--smallFont);
733
743
  }
744
+ .article{
745
+ line-height: 1.2rem;
746
+ }
734
747
  .text-bigger {
735
748
  font-size: calc(1.375rem + 2.5vw);
736
749
  font-weight: 900;
@@ -824,6 +837,7 @@ h6,
824
837
  }
825
838
 
826
839
  /*margin*/
840
+ .margin{margin:var(--margin)}
827
841
  .margin {
828
842
  margin: 10px !important;
829
843
  }
@@ -993,6 +1007,7 @@ h6,
993
1007
  margin-bottom: 100px;
994
1008
  }
995
1009
  /*padding*/
1010
+ .padding{padding:var(--padding)}
996
1011
  .padding {
997
1012
  padding: 10px !important;
998
1013
  }
@@ -1242,12 +1257,16 @@ h6,
1242
1257
  .hover-opacity-9:hover {
1243
1258
  opacity: 0.1;
1244
1259
  }
1245
- .hr {
1260
+ .hr,.bb {
1246
1261
  border-bottom: var(--border);
1247
1262
  }
1248
- .vr {
1263
+ .vr, .bl {
1249
1264
  border-left: var(--border);
1250
1265
  }
1266
+ .bt{
1267
+ border-top: var(--border);
1268
+ }
1269
+ .br{border-right: var(--border);}
1251
1270
  .vertical-scroll {
1252
1271
  overflow-y: scroll;
1253
1272
  }
@@ -1288,7 +1307,7 @@ h6,
1288
1307
  width: 100%;
1289
1308
  height: auto;
1290
1309
  }
1291
- .row-flex {
1310
+ .row-flex{
1292
1311
  display: flex;
1293
1312
  flex-direction: row;
1294
1313
  align-items: center;
@@ -1338,15 +1357,16 @@ h6,
1338
1357
  position: -webkit-sticky;
1339
1358
  position: sticky;
1340
1359
  top: 0px;
1341
- z-index: 5;
1360
+ z-index: var(--navBarZindex);
1342
1361
  width: 100%;
1343
1362
  }
1344
1363
  .fixed-top {
1345
1364
  position: fixed;
1346
1365
  top: 0px;
1347
- z-index: 5;
1366
+ z-index: var(--navBarZindex);
1348
1367
  width: 100%;
1349
1368
  }
1369
+
1350
1370
  .relative {
1351
1371
  position: relative;
1352
1372
  }
@@ -1429,6 +1449,13 @@ h6,
1429
1449
  align-items: center;
1430
1450
  justify-content: center;
1431
1451
  }
1452
+ .hoverable{
1453
+ transition: 0.1s linear;
1454
+ }
1455
+ .hoverable:hover{
1456
+ filter: brightness(90%);
1457
+
1458
+ }
1432
1459
  /* avatar */
1433
1460
  .avatar {
1434
1461
  display: flex;
@@ -1453,22 +1480,9 @@ h6,
1453
1480
  .container {
1454
1481
  margin: 0 10%;
1455
1482
  }
1456
- @media (min-width: 993px) {
1457
- .container {
1458
- margin-left: 10%;
1459
- margin-right: 10%;
1460
- }
1461
- }
1462
- @media (max-width: 992px) {
1463
- .container {
1464
- margin-left: 10%;
1465
- margin-right: 10%;
1466
- }
1467
- }
1468
- @media (max-width: 500px) {
1483
+ @media (max-width: 600px) {
1469
1484
  .container {
1470
- margin-left: 5%;
1471
- margin-right: 5%;
1485
+ margin: 0 5%;
1472
1486
  }
1473
1487
  }
1474
1488
 
@@ -1482,6 +1496,9 @@ h6,
1482
1496
  width: 100%;
1483
1497
  flex-direction: row;
1484
1498
  }
1499
+ .col{
1500
+ flex: 1 0 0%;
1501
+ }
1485
1502
  .row.gap .col {
1486
1503
  padding: 0.5rem;
1487
1504
  }
@@ -1641,16 +1658,16 @@ h6,
1641
1658
 
1642
1659
  /*buttons*/
1643
1660
  .button {
1644
- border: 0.1rem solid transparent;
1661
+ border: none;
1645
1662
  transition: 1s;
1646
- padding: 10px;
1663
+ padding: 0.5rem;
1647
1664
  background-color: inherit;
1648
- border-radius: 5px;
1665
+ border-radius: 0.2rem;
1649
1666
  font-weight: bold;
1650
1667
  }
1651
1668
  .button:hover {
1652
1669
  cursor: pointer;
1653
- background: #ddd;
1670
+ filter: brightness(90%);
1654
1671
  }
1655
1672
  .block-button {
1656
1673
  width: 100%;
@@ -1661,6 +1678,7 @@ h6,
1661
1678
  align-items: center !important;
1662
1679
  justify-content: center !important;
1663
1680
  padding: 0 !important;
1681
+ margin: 0;
1664
1682
  }
1665
1683
  .button.full-width {
1666
1684
  width: 100%;
@@ -1673,18 +1691,7 @@ h6,
1673
1691
  text-decoration: none;
1674
1692
  overflow: hidden;
1675
1693
  }
1676
- .button:after {
1677
- content: "";
1678
- background: #ddd;
1679
- display: block;
1680
- position: absolute;
1681
- padding-top: 300%;
1682
- padding-left: 350%;
1683
- margin-left: -20px !important;
1684
- margin-top: -120%;
1685
- opacity: 0;
1686
- transition: all 0.8s;
1687
- }
1694
+
1688
1695
  .button.ripple:active:after {
1689
1696
  padding: 0;
1690
1697
  margin: 0;
@@ -1698,28 +1705,21 @@ h6,
1698
1705
  background-color: transparent;
1699
1706
  }
1700
1707
  .button.outlined:hover {
1701
- background-color: var(--hoverable);
1702
- }
1703
- .button.small {
1704
- padding: 5px !important;
1705
- }
1706
- .button.medium {
1707
- padding: 10px !important;
1708
+ filter: var(--hoverable);
1708
1709
  }
1709
- .button.large {
1710
- padding: 15px !important;
1711
- }
1712
- .button.larger {
1713
- padding: 20px !important;
1714
- }
1715
- .button-x-large {
1716
- padding: 25px !important;
1710
+ .button.smallBtn {
1711
+ padding: 0.256rem !important;
1712
+ font-size: var(--smallFont);
1717
1713
  }
1718
- .button.xx-large {
1719
- padding: 30px !important;
1714
+ .button.bigBtn {
1715
+ padding: 2rem !important;
1716
+ font-size: 2rem;
1720
1717
  }
1721
1718
 
1722
1719
 
1720
+ .button.flat{border-radius: none !important;}
1721
+ .button.hoverNone:hover{background-color: initial !important;}
1722
+
1723
1723
 
1724
1724
  /*cards*/
1725
1725
  .card {
@@ -1735,37 +1735,13 @@ h6,
1735
1735
  }
1736
1736
  .card-body,
1737
1737
  .card-header {
1738
- padding: 0.1rem 1rem;
1738
+ padding: 0.3rem 1rem;
1739
1739
  }
1740
1740
 
1741
1741
  .card-footer {
1742
1742
  padding: 1rem 1rem 1.5rem 1rem;
1743
1743
  }
1744
- .card-title {
1745
- position: absolute;
1746
- bottom: 10px;
1747
- left: 10px;
1748
- }
1749
- .card-title.top-left {
1750
- position: absolute;
1751
- top: 10px;
1752
- left: 10px;
1753
- }
1754
- .card-title.top-right {
1755
- position: absolute;
1756
- top: 10px;
1757
- right: 10px;
1758
- }
1759
- .card-title.bottom-left {
1760
- position: absolute;
1761
- bottom: 10px;
1762
- left: 10px;
1763
- }
1764
- .card-title.bottom-right {
1765
- position: absolute;
1766
- bottom: 10px;
1767
- right: 10px;
1768
- }
1744
+
1769
1745
  .card-fab {
1770
1746
  position: absolute;
1771
1747
  bottom: 0;
@@ -1822,9 +1798,59 @@ h6,
1822
1798
  display: -ms-flexbox;
1823
1799
  justify-content: space-between;
1824
1800
  align-items: center;
1825
- padding: 0.5rem;
1801
+ padding: 0.5rem 5%;
1826
1802
  height: var(--navHeight);
1827
1803
  }
1804
+ #funSideBar{
1805
+ position: fixed;
1806
+ z-index: var(--sideBarZindex);
1807
+ top: 0;
1808
+ left: 0;
1809
+ width: 100%;
1810
+ height: 100%;
1811
+ background-color: rgba(0, 0, 0, 0.3);
1812
+ }
1813
+ .navSidebar{
1814
+ position: absolute;
1815
+ top: 0;
1816
+ left: 0;
1817
+ width: 250px;
1818
+ background-color: var(--white);
1819
+ height: 100vh;
1820
+ box-shadow: 0 2rem 3rem 0 rgba(0, 0, 0, 0.2);
1821
+ animation: showNav 0.3s linear;
1822
+ }
1823
+
1824
+ @keyframes showNav {
1825
+ from{
1826
+ transform: translateX(-110%);
1827
+ }
1828
+ to{
1829
+ transform: translateX(0%);
1830
+ }
1831
+ }
1832
+ .sideBarTop , .sideBarFooter{
1833
+ position: absolute;
1834
+ left: 0;
1835
+ width: 100%;
1836
+ height: 50px;
1837
+ padding: 0.5rem;
1838
+ }
1839
+ .sideBarTop{
1840
+ top: 0;
1841
+ }
1842
+ .sideBarFooter{
1843
+ position: absolute;
1844
+ bottom: 0;
1845
+ }
1846
+ .sideBarContent{
1847
+ position: absolute;
1848
+ top: 50px;
1849
+ left: 0;
1850
+ width: 100%;
1851
+ height: calc(100vh - 100px);
1852
+ overflow: auto;
1853
+ }
1828
1854
  .sidebar-trigger {
1829
1855
  display: none;
1830
1856
  cursor: pointer;
@@ -2024,6 +2050,7 @@ h6,
2024
2050
  transition: 0.2s linear;
2025
2051
  font-weight: 500;
2026
2052
  }
2053
+ .input.flat{border-radius: 0 !important;}
2027
2054
  .input:focus {
2028
2055
  border-bottom: 0.1rem solid var(--primaryColor);
2029
2056
  }
@@ -2658,7 +2685,7 @@ th {
2658
2685
  transition: 0.3s;
2659
2686
  }
2660
2687
  .table.hoverable > tr:hover {
2661
- background-color: var(--hoverable);
2688
+ filter: var(--hoverable);
2662
2689
  }
2663
2690
  .table.light {
2664
2691
  background-color: var(--light);
@@ -2679,7 +2706,7 @@ th {
2679
2706
  border-collapse: collapse;
2680
2707
  }
2681
2708
  .list.hoverable li:hover {
2682
- background-color: var(--hoverable);
2709
+ filter: var(--hoverable);
2683
2710
  }
2684
2711
  .list.bordered li {
2685
2712
  border-top: var(--border);
@@ -2783,7 +2810,7 @@ th {
2783
2810
  align-items: center;
2784
2811
  left: 0;
2785
2812
  padding: 0px 10%;
2786
- z-index: 100;
2813
+ z-index: var(--modalZIndex);
2787
2814
  width: 100%;
2788
2815
  height: 100%;
2789
2816
  min-height: 100vh;
@@ -3179,7 +3206,7 @@ Button,
3179
3206
  max-width: 400px;
3180
3207
  color: white;
3181
3208
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
3182
- z-index: 20;
3209
+ z-index: var(--snackBarZindex);
3183
3210
  display: flex;
3184
3211
  align-items: center;
3185
3212
  font-size: var(--smallFont);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "funuicss",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "description": "React/Next.js component UI Library for creating Easy and good looking websites with fewer lines of code.",
5
5
  "main": "index.js",
6
6
  "scripts": {