sccoreui 6.2.55 → 6.2.58

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 (4) hide show
  1. package/dist/App.scss +121 -4
  2. package/dist/assets/sccoreui.css +3 -3
  3. package/dist/components/ag-grid/advancedFeature/grouping.js +1 -1
  4. package/package.json +1 -1
package/dist/App.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  @import url("./assets/flex.css");
6
6
  @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
7
7
  @import url("./assets/sccoreicons.css");
8
- @import "./mixin.scss";
9
8
 
10
9
  // variables
11
10
 
@@ -48,6 +47,124 @@
48
47
  --grey-bg: #101828;
49
48
  --border-none: border-none;
50
49
  --box-shadow-none: none;
50
+ --_primary-800: #0e184f;
51
+ --_primary-700: #111c5b;
52
+ --_primary-600: #132067;
53
+ --_primary-500: #162578;
54
+ --_primary-300: #d0d5dd;
55
+ --_primary-100: #ced4f6;
56
+ --_primary-200: #8794db;
57
+ --_primary-50: #e2e5fa;
58
+ --_primary-25: #f5f6fd;
59
+
60
+ --_gray-700: #344054;
61
+ --_gray-800: #1d2939;
62
+ --_gray-200: #eaecf0;
63
+ --_gray-300: #d0d5dd;
64
+ --_gray-50: #f9fafb;
65
+ --_base-white: #fff;
66
+
67
+ --_text-secondary-600: #475467;
68
+ --_outline-800: #1d2939;
69
+ --_outline-200: #eaecf0;
70
+ --_outline-300: #d0d5dd;
71
+ --_outline-50: #f9fafb;
72
+ --_base-white: #fff;
73
+ }
74
+
75
+ @mixin flex($justify: flex-start, $align: center, $direction: row) {
76
+ display: flex;
77
+ justify-content: $justify;
78
+ align-items: $align;
79
+ flex-direction: $direction;
80
+ }
81
+
82
+ @mixin auto__h($height: 0px) {
83
+ height: calc(100vh - $height);
84
+ overflow-y: auto;
85
+ }
86
+
87
+ @mixin grid__responsive($minWidth: 350px, $maxWidth: 500px) {
88
+ display: var(--_d-grid);
89
+ grid-template-columns: repeat(auto-fill, min($minWidth, $maxWidth));
90
+ width: 100%;
91
+ & > div {
92
+ width: 100%;
93
+ }
94
+ }
95
+
96
+ .p-button {
97
+ border: 0 !important;
98
+ &.btn-primary {
99
+ background-color: var(--_primary-500);
100
+ color: var(--_base-white);
101
+ padding: 8px 14px;
102
+ &:hover {
103
+ background-color: var(--_primary-700);
104
+ }
105
+ &:focus {
106
+ background-color: var(--_primary-700);
107
+ }
108
+ &:disabled {
109
+ background-color: var(--_primary-200);
110
+ color: var(--_base-white);
111
+ }
112
+ }
113
+
114
+ &.btn-outline {
115
+ background-color: var(--base-white);
116
+ color: var(--_gray-600);
117
+ border: 1px solid var(--_gray-300) !important;
118
+ padding: 6px 12px;
119
+ &:hover {
120
+ background-color: var(--_gray-50) !important;
121
+ color: var(--_gray-700) !important;
122
+ }
123
+ &:focus {
124
+ background-color: var(--gray-50);
125
+ }
126
+ &:disabled {
127
+ background-color: var(--_gray-200);
128
+ color: var(--_base-white);
129
+ }
130
+ }
131
+
132
+ &.btn-secondary {
133
+ background-color: var(--_primary-50);
134
+ color: var(--_primary-500);
135
+ padding: 8px 14px;
136
+ &:hover {
137
+ background-color: var(--_primary-100) !important;
138
+ color: var(--_primary-800) !important;
139
+ }
140
+ &:focus {
141
+ background-color: var(--_primary-100);
142
+ }
143
+ &:disabled {
144
+ background-color: var(--_primary-50);
145
+ color: var(--_gray-300);
146
+ }
147
+ }
148
+
149
+ &.btn-text {
150
+ background-color: var(--_base-white);
151
+ color: var(--_gray-600);
152
+ padding: 8px 14px;
153
+ border: 0 !important;
154
+ &:hover {
155
+ background-color: var(--_gray-50) !important;
156
+ color: var(--_gray-700) !important;
157
+ }
158
+ &:focus {
159
+ background-color: var(--_gray-50);
160
+ color: var(--_gray-700);
161
+ border: 0px !important;
162
+ }
163
+ &:disabled {
164
+ background-color: var(--_primary-50) !important;
165
+ color: var(--_gray-300);
166
+ }
167
+ }
51
168
  }
52
169
 
53
170
  // height and width utility classes
@@ -2156,13 +2273,13 @@ button[aria-expanded="true"] {
2156
2273
 
2157
2274
  .p-button {
2158
2275
  &.p-button-secondary {
2159
- padding: 8px 12px !important;
2276
+ padding: 8px 12px;
2160
2277
  }
2161
2278
  &.p-button-outline {
2162
- padding: 8px 12px !important;
2279
+ padding: 8px 12px;
2163
2280
  }
2164
2281
 
2165
- padding: 8px 12px !important;
2282
+ padding: 8px 12px;
2166
2283
 
2167
2284
  .p-button-label {
2168
2285
  font-weight: 600;
package/dist/assets/sccoreui.css CHANGED
@@ -2349,7 +2349,7 @@ a {
2349
2349
  width: auto;
2350
2350
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
2351
2351
  box-shadow 0.2s;
2352
- border-radius: 8px;
2352
+ border-radius: 6px;
2353
2353
  border: 1px solid var(--primary-500);
2354
2354
  }
2355
2355
  .p-button:enabled:hover,
@@ -8223,12 +8223,12 @@ button:after {
8223
8223
  opacity: 0.2;
8224
8224
  }
8225
8225
  20% {
8226
- transform: scale(15, 15);
8226
+ transform: scale(20, 20);
8227
8227
  opacity: 0.2;
8228
8228
  }
8229
8229
  100% {
8230
8230
  opacity: 0.2;
8231
- transform: scale(20, 20);
8231
+ transform: scale(40, 40);
8232
8232
  }
8233
8233
  }
8234
8234
  /* @-webkit-keyframes ripple {
package/dist/components/ag-grid/advancedFeature/grouping.js CHANGED
@@ -31,6 +31,6 @@ function Grouping() {
31
31
  const nodeTemplate = (node) => {
32
32
  return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-center w-full border-round block w-full p-3 text-primary-400 font-semibold ${checked && "bg-primary-25"}` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => setChecked(e.checked), checked: checked }), (0, jsx_runtime_1.jsx)("span", { children: node.label })] })));
33
33
  };
34
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "h-40 text-primary-400", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01" }), onClick: (e) => columnGroupRef.current.toggle(e) }), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column_group_overlay w-20rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0" }, { children: "Select any 2 grouping options only" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 border-bottom-1 border-top-1 border-gray-200 bg-gray-50" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Search by column or attribute name", className: "w-full" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 border-top-1 border-gray-200 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, label: "Remove Grouping" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Save Grouping", disabled: true })] }))] }))] }));
34
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "h-40 text-primary-400", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01" }), onClick: (e) => columnGroupRef.current.toggle(e) }), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column_group_overlay w-20rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0" }, { children: "Select any 2 grouping options only" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 border-bottom-1 border-top-1 border-gray-200 bg-gray-50" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Search by column or attribute name", className: "w-full" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 border-top-1 border-gray-200 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Remove Grouping", className: "btn-text" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-primary", label: "Save Grouping", disabled: true })] }))] }))] }));
35
35
  }
36
36
  exports.default = Grouping;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "6.2.55",
3
+ "version": "6.2.58",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",