sccoreui 4.1.8 → 4.2.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.
package/dist/App.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  // import Home from './pages/home';
5
5
  require("./App.scss");
6
+ // import Home from "./pages/home";
6
7
  const App = () => {
7
8
  return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}) }));
8
9
  };
package/dist/App.scss CHANGED
@@ -31,29 +31,30 @@ body {
31
31
  font-family: 'Lato', sans-serif;
32
32
  -webkit-font-smoothing: antialiased;
33
33
  -moz-osx-font-smoothing: grayscale;
34
- line-height: var(--lh);
34
+ line-height: 20px;
35
35
  padding: 0;
36
36
  margin: 0;
37
+ color: var(--gray-700);
37
38
  }
38
39
 
39
40
  code {
40
41
  font-family: 'Lato', sans-serif;
41
42
  }
42
43
 
43
- h1 {
44
- font-size: var(--fs-24);
45
- font-weight: var(--fw-600);
46
- }
44
+ // h1 {
45
+ // font-size: var(--fs-24);
46
+ // font-weight: var(--fw-600);
47
+ // }
47
48
 
48
- h2 {
49
- font-size: var(--fs-18);
50
- font-weight: var(--fw-600);
51
- }
49
+ // h2 {
50
+ // font-size: var(--fs-18);
51
+ // font-weight: var(--fw-600);
52
+ // }
52
53
 
53
- h3 {
54
- font-size: var(--fs-16);
55
- font-weight: var(--fw-400);
56
- }
54
+ // h3 {
55
+ // font-size: var(--fs-16);
56
+ // font-weight: var(--fw-400);
57
+ // }
57
58
 
58
59
  // ============= custom progress steps =============== //
59
60
 
@@ -8533,18 +8533,22 @@
8533
8533
 
8534
8534
  .text-sm {
8535
8535
  font-size: 12px !important;
8536
+ line-height: 20px;
8536
8537
  }
8537
8538
 
8538
8539
  .text-base {
8539
8540
  font-size: 14px !important;
8541
+ line-height: 20px;
8540
8542
  }
8541
8543
 
8542
8544
  .text-lg {
8543
8545
  font-size: 16px !important;
8546
+ line-height: 24px;
8544
8547
  }
8545
8548
 
8546
8549
  .text-xl {
8547
- font-size: 20px !important;
8550
+ font-size: 18px !important;
8551
+ line-height: 28px;
8548
8552
  }
8549
8553
 
8550
8554
  .text-2xl {
@@ -8575,6 +8579,36 @@
8575
8579
  font-size: 48px !important;
8576
8580
  }
8577
8581
 
8582
+ .display-xs {
8583
+ font-size: 20px;
8584
+ line-height: 30px;
8585
+ }
8586
+
8587
+ .display-sm {
8588
+ font-size: 24px;
8589
+ line-height: 32px;
8590
+ }
8591
+
8592
+ .display-md {
8593
+ font-size: 30px;
8594
+ line-height: 38px;
8595
+ }
8596
+
8597
+ .display-lg {
8598
+ font-size: 36px;
8599
+ line-height: 44px;
8600
+ }
8601
+
8602
+ .display-xl {
8603
+ font-size: 48px;
8604
+ line-height: 60px;
8605
+ }
8606
+
8607
+ .display-2xl {
8608
+ font-size: 60px;
8609
+ line-height: 72px;
8610
+ }
8611
+
8578
8612
  @media screen and (min-width: 576px) {
8579
8613
  .sm\:text-xs {
8580
8614
  font-size: 10px !important;
@@ -55,8 +55,12 @@
55
55
  box-sizing: border-box;
56
56
  }
57
57
 
58
+ body {
59
+ line-height: 20px;
60
+ }
61
+
58
62
  p {
59
- color: var(--text-color);
63
+ color: var(--gray-700);
60
64
  }
61
65
  h1,
62
66
  h2,
@@ -64,7 +68,25 @@ h3,
64
68
  h4,
65
69
  h5,
66
70
  h6 {
67
- color: var(--heading-color);
71
+ color: var(--gray-900);
72
+ }
73
+
74
+ h1 {
75
+ font-size: 24px;
76
+ line-height: 32px;
77
+ font-weight: var(--fw-600);
78
+ }
79
+
80
+ h2 {
81
+ font-size: 18px;
82
+ line-height: 28px;
83
+ font-weight: var(--fw-600);
84
+ }
85
+
86
+ h3 {
87
+ font-size: 16px;
88
+ line-height: 24px;
89
+ font-weight: var(--fw-600);
68
90
  }
69
91
 
70
92
  label {
@@ -81,6 +103,10 @@ a {
81
103
  text-decoration: none;
82
104
  }
83
105
 
106
+ .help-text {
107
+ color: var(--gray-500);
108
+ }
109
+
84
110
  .p-component-overlay {
85
111
  background-color: rgba(0, 0, 0, 0.4);
86
112
  transition-duration: 0.2s;
@@ -20,7 +20,7 @@ const InputNumberField = (props) => {
20
20
  };
21
21
  const InputCurrencyField = (props) => {
22
22
  const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled } = props;
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: `full_form_field ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: `full_form_field ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
24
24
  };
25
25
  const InputTextAreaField = (props) => {
26
26
  const [charCount, setCharCount] = (0, react_1.useState)(0);