siam-ui-utils 2.0.26 → 2.0.27

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.
@@ -0,0 +1,118 @@
1
+ // Mixin to prefix several properties at once
2
+ // @author Hugo Giraudel
3
+ // @param {Map} $declarations - Declarations to prefix
4
+ // @param {List} $prefixes (()) - List of prefixes to print
5
+ @mixin prefix($declarations, $prefixes: ()) {
6
+ @each $property, $value in $declarations {
7
+ @each $prefix in $prefixes {
8
+ #{'-' + $prefix + '-' + $property}: $value;
9
+ }
10
+ #{$property}: $value;
11
+ }
12
+ }
13
+
14
+ // Gives a card depth effect.
15
+ // @param {Number} $depth - depth level (between 1 and 5)
16
+ // @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
17
+ // @requires {function} top-shadow
18
+ // @requires {function} bottom-shadow
19
+ @mixin depth($depth) {
20
+ @if $depth < 1 {
21
+ box-shadow: none;
22
+ } @else if $depth > 5 {
23
+ @warn "Invalid $depth `#{$depth}` for mixin `card`.";
24
+ } @else {
25
+ box-shadow: bottom-shadow($depth), top-shadow($depth);
26
+ }
27
+ }
28
+
29
+ // Computes a top-shadow for a card effect.
30
+ // @param {Number} $depth - depth level
31
+ // @return {List}
32
+
33
+ @function top-shadow($depth) {
34
+ $primary-offset: nth($shadowOffsetsTop, $depth) * 1px;
35
+ $blur: nth($shadowBlursTop, $depth) * 4px;
36
+ $color: rgba(black, nth($shadowOpacitiesTop, $depth));
37
+
38
+ @return 0 $primary-offset $blur $color;
39
+ }
40
+
41
+ // Computes a bottom-shadow for a card effect.
42
+ // @param {Number} $depth - depth level
43
+ // @return {List}
44
+ @function bottom-shadow($depth) {
45
+ $primary-offset: nth($shadowOffsetsBottom, $depth) * 1px;
46
+ $blur: nth($shadowBlursBottom, $depth) * 5px;
47
+ $color: rgba(black, nth($shadowOpacitiesBottom, $depth));
48
+ @return 0 $primary-offset $blur $color;
49
+ }
50
+
51
+ @mixin clearfix() {
52
+ &::after {
53
+ display: block;
54
+ content: "";
55
+ clear: both;
56
+ }
57
+ }
58
+
59
+
60
+
61
+ //Responsive Breakpoints
62
+
63
+ $breakpoints: (
64
+ xxs: 420px,
65
+ xs: 576px,
66
+ sm: 768px,
67
+ md: 992px,
68
+ lg: 1200px,
69
+ xl: 1440px
70
+ );
71
+
72
+
73
+ @mixin respond-above($breakpoint) {
74
+ // If the breakpoint exists in the map.
75
+ @if map-has-key($breakpoints, $breakpoint) {
76
+ // Get the breakpoint value.
77
+ $breakpoint-value: map-get(
78
+ $breakpoints,
79
+ $breakpoint
80
+ ); // Write the media query.
81
+ @media (min-width: ($breakpoint-value - 1)) {
82
+ @content;
83
+ }
84
+ // If the breakpoint doesn't exist in the map.
85
+ } @else {
86
+ // Log a warning.
87
+ @warn "Invalid breakpoint: #{$breakpoint}.";
88
+ }
89
+ }
90
+
91
+
92
+ @mixin respond-below($breakpoint) {
93
+ // If the breakpoint exists in the map.
94
+ @if map-has-key($breakpoints, $breakpoint) {
95
+ // Get the breakpoint value.
96
+ $breakpoint-value: map-get(
97
+ $breakpoints,
98
+ $breakpoint
99
+ ); // Write the media query.
100
+ @media (max-width: ($breakpoint-value - 1)) {
101
+ @content;
102
+ }
103
+ // If the breakpoint doesn't exist in the map.
104
+ } @else {
105
+ // Log a warning.
106
+ @warn "Invalid breakpoint: #{$breakpoint}.";
107
+ }
108
+ }
109
+
110
+ @function encodecolor($string) {
111
+ @if type-of($string) == 'color' {
112
+ $hex: str-slice(ie-hex-str($string), 4);
113
+ $string:unquote("#{$hex}");
114
+ }
115
+ $string: '%23' + $string;
116
+ @return $string;
117
+ }
118
+
@@ -0,0 +1 @@
1
+ @import "./plugins/react-table.scss";
@@ -0,0 +1,182 @@
1
+ .modal-spinner {
2
+ position: absolute;
3
+ top: 15rem;
4
+ left: 10rem;
5
+ background: transparent;
6
+ }
7
+
8
+ .app-menu {
9
+ top: 10px !important;
10
+ height: 100% !important;
11
+ }
12
+
13
+ .table-icon {
14
+ font-size: 13px;
15
+ color: $theme-color-1;
16
+ margin-right: 5px;
17
+ line-height: inherit;
18
+ vertical-align: middle;
19
+ }
20
+
21
+ .card-icon {
22
+ font-size: 30px;
23
+ line-height: 90px;
24
+ color: $theme-color-1;
25
+ }
26
+
27
+ .logo-app {
28
+ width: 30%;
29
+ margin-left: 35%;
30
+ }
31
+
32
+ .login-label-siam {
33
+ font-size: 3rem;
34
+ color: #900604;
35
+ }
36
+
37
+ .usuario-session-label {
38
+ color: #cccc00;
39
+ }
40
+
41
+ .aplicacion-session-label {
42
+ color: #00cccc;
43
+ }
44
+
45
+ .delegacion-session-label {
46
+ color: #ff0033;
47
+ }
48
+
49
+ .btn-list {
50
+ background: transparent !important;
51
+ font-size: 1rem;
52
+
53
+ &:hover {
54
+ color: red;
55
+ cursor: pointer;
56
+ }
57
+ }
58
+ .btn-mov-pend {
59
+ margin-top: -1.75rem !important;
60
+ }
61
+
62
+ .container-label-mov-pend {
63
+ background-color: #dbdfd6 !important;
64
+ font-size: 1.6rem !important;
65
+ align-items: center !important;
66
+ font-weight: bold !important;
67
+ justify-content: center;
68
+ border-radius: 7px;
69
+ color: black;
70
+ display: flex;
71
+ padding: 0rem;
72
+ border: 1px solid grey;
73
+ width: 200px !important;
74
+ }
75
+
76
+ .infinte-table {
77
+ display: inline-block;
78
+ border-spacing: 0;
79
+
80
+ .th-head {
81
+ box-shadow: initial;
82
+ border: initial;
83
+ text-align: left;
84
+ font-weight: 700;
85
+ padding-top: 8px;
86
+ padding-bottom: 16px;
87
+ padding-left: 10px;
88
+
89
+ &.sorted-asc {
90
+ box-shadow: inset 0 3px 0 0 $theme-color-1;
91
+ }
92
+
93
+ &.sorted-desc {
94
+ box-shadow: inset 0 -3px 0 0 $theme-color-1;
95
+ }
96
+ }
97
+
98
+ .tr {
99
+ :last-child {
100
+ .td {
101
+ border-bottom: 0;
102
+ }
103
+ }
104
+ }
105
+
106
+ .td {
107
+ margin: 0;
108
+ padding: 0.5rem;
109
+ border-bottom: 1px solid $separator-color-light;
110
+ }
111
+
112
+ .tbl-fs-xxs {
113
+ font-size: 10px;
114
+ }
115
+ .tbl-fs-xs {
116
+ font-size: 12px;
117
+ }
118
+ }
119
+
120
+ .check-btn-icon,
121
+ .btn-icon-l {
122
+ border-radius: 10px;
123
+ padding: 0rem 0.2rem 0rem 0.2rem;
124
+
125
+ i {
126
+ color: $theme-color-1;
127
+ }
128
+ }
129
+
130
+ .check-btn-icon-2 {
131
+ background-color: rgba(0, 0, 0, 0.15);
132
+ }
133
+
134
+ .check-btn-icon {
135
+ i {
136
+ font-size: 28px;
137
+ }
138
+ }
139
+
140
+ .btn-icon-l {
141
+ i {
142
+ font-size: 20px;
143
+ }
144
+ }
145
+ .card-margen {
146
+ border: solid 1px gray;
147
+ width: 25rem;
148
+ border-radius: 8px;
149
+ }
150
+
151
+ .label-margen {
152
+ font-size: 13px !important;
153
+ }
154
+ .label-periodo-margen {
155
+ font-size: 14px !important;
156
+ margin-left: 6rem;
157
+ font-weight: bold;
158
+ }
159
+ .label-fecha-margen {
160
+ font-size: 14px !important;
161
+ margin-left: 3rem;
162
+ font-weight: bold;
163
+ }
164
+ .label-margen-final {
165
+ background-color: #cccc00;
166
+ font-size: 20px !important;
167
+ font-weight: bold;
168
+ }
169
+ .dz-disable {
170
+ pointer-events: none;
171
+ cursor: default;
172
+ }
173
+ .dz-eneable {
174
+ pointer-events: visible;
175
+ cursor: default;
176
+ }
177
+ .version-label {
178
+ font-size: 0.75rem;
179
+ font-weight: bold;
180
+ color: #900604;
181
+ top: 5px;
182
+ }
@@ -0,0 +1,11 @@
1
+ @import "./_mixins.scss";
2
+ @import "./_gogo.style.scss";
3
+ @import "./_plugins.scss";
4
+ @import "./ampf_style.scss";
5
+ /** your custom css code **/
6
+ /*
7
+ html {
8
+ background-color: $theme-color-1 !important;
9
+ }
10
+ */
11
+
@@ -0,0 +1,311 @@
1
+ /* 19.Datatable */
2
+ .r-table {
3
+ border: initial;
4
+
5
+ .vuetable-body-wrapper {
6
+ scrollbar-width: thin;
7
+ }
8
+ .vuetable-body-wrapper::-webkit-scrollbar-track {
9
+ background-color: transparent !important;
10
+ border-radius: 5px;
11
+ }
12
+ .vuetable-body-wrapper:hover {
13
+ &::-webkit-scrollbar-thumb {
14
+ background-color: $separator-color !important;
15
+ }
16
+ }
17
+
18
+ .vuetable-body-wrapper::-webkit-scrollbar {
19
+ width: 5px;
20
+ background-color: transparent !important;
21
+ }
22
+
23
+ .vuetable-body-wrapper::-webkit-scrollbar-thumb {
24
+ border-radius: 6px;
25
+ background-color: transparent;
26
+ }
27
+
28
+ th.sortable:hover {
29
+ color: $theme-color-1 !important;
30
+ }
31
+
32
+ thead {
33
+ th {
34
+ box-shadow: initial;
35
+ border: initial;
36
+ text-align: left;
37
+ font-weight: 700;
38
+
39
+ &.sorted-asc {
40
+ box-shadow: inset 0 3px 0 0 $theme-color-1;
41
+ }
42
+
43
+ &.sorted-desc {
44
+ box-shadow: inset 0 -3px 0 0 $theme-color-1;
45
+ }
46
+ }
47
+ }
48
+
49
+ tr {
50
+ td,
51
+ th {
52
+ padding-top: 20px;
53
+ padding-bottom: 16px;
54
+ border: initial;
55
+ }
56
+
57
+ th {
58
+ padding-bottom: 20px;
59
+ }
60
+ }
61
+
62
+ tbody {
63
+ tr {
64
+ td {
65
+ border-bottom: 1px solid $separator-color-light;
66
+ }
67
+ }
68
+
69
+ tr:last-of-type {
70
+ td {
71
+ border-bottom: initial;
72
+ }
73
+ }
74
+ }
75
+ }
76
+
77
+
78
+ .table-divided {
79
+ border-collapse: separate;
80
+ border-spacing: 0px 0.6rem;
81
+ width: 100% !important;
82
+ margin-top: 0 !important;
83
+ margin-bottom: 0 !important;
84
+ -webkit-touch-callout: none;
85
+ -webkit-user-select: none;
86
+ -khtml-user-select: none;
87
+ -moz-user-select: none;
88
+ -ms-user-select: none;
89
+ user-select: none;
90
+
91
+ td {
92
+ padding-top: 20px;
93
+ padding-bottom: 20px;
94
+ border-bottom: 1px solid $separator-color-light;
95
+ outline: initial !important;
96
+ background: $foreground-color;
97
+ }
98
+
99
+ tr:last-of-type td {
100
+ border-bottom: initial;
101
+ }
102
+
103
+ p,
104
+ h6 {
105
+ margin-bottom: initial;
106
+ }
107
+
108
+ tbody {
109
+ > tr[role="row"] > td:first-child:before,
110
+ > tr[role="row"] > th:first-child:before {
111
+ top: unset;
112
+ box-shadow: initial;
113
+ background-color: $theme-color-1;
114
+ font-size: 12px;
115
+ }
116
+
117
+ tr {
118
+ @include depth(1);
119
+ &.selected {
120
+ @include depth(2);
121
+ }
122
+ &.child {
123
+ td {
124
+ padding: 0.75rem 2rem;
125
+
126
+ li {
127
+ padding: 0 !important;
128
+ }
129
+ }
130
+ }
131
+ }
132
+ }
133
+
134
+ td,
135
+ th {
136
+ padding: 1.5rem;
137
+ border: initial;
138
+ }
139
+
140
+ th.empty {
141
+ &:before,
142
+ &:after {
143
+ content: "";
144
+ }
145
+ }
146
+
147
+ .itemCheck {
148
+ text-align: right;
149
+ pointer-events: none;
150
+ }
151
+ }
152
+
153
+ .order-with-arrow {
154
+ thead {
155
+ th {
156
+ padding-top: 0.6em;
157
+ padding-bottom: 0.6em;
158
+ border: initial;
159
+ &.sorted-asc {
160
+ box-shadow: initial !important;
161
+ }
162
+
163
+ &.sorted-desc {
164
+ box-shadow: initial !important;
165
+ }
166
+
167
+ &.sortable {
168
+ // padding-left: 25px;
169
+ }
170
+ }
171
+
172
+ .sortable,
173
+ .sorted-asc,
174
+ .sorted-desc,
175
+ .sorted-asc_disabled,
176
+ .sorted-desc_disabled {
177
+ cursor: pointer;
178
+ position: relative;
179
+ }
180
+
181
+ .sortable:before,
182
+ .sortable:after,
183
+ .sorted-asc:before,
184
+ .sorted-asc:after,
185
+ .sorted-desc:before,
186
+ .sorted-desc:after,
187
+ .sorted-asc_disabled:before,
188
+ .sorted-asc_disabled:after,
189
+ .sorted-desc_disabled:before,
190
+ .sorted-desc_disabled:after {
191
+ position: absolute;
192
+ top: 0.4em;
193
+ display: block;
194
+ opacity: 0.3;
195
+ }
196
+ .sorted-asc:before,
197
+ .sorted-desc:after {
198
+ opacity: 1;
199
+ }
200
+
201
+ .sortable:before,
202
+ .sorted-asc:before,
203
+ .sorted-desc:before,
204
+ .sorted-asc_disabled:before,
205
+ .sorted-desc_disabled:before {
206
+ right: 1em;
207
+ content: "\2191";
208
+ }
209
+ .sortable:after,
210
+ .sorted-asc:after,
211
+ .sorted-desc:after,
212
+ .sorted-asc_disabled:after,
213
+ .sorted-desc_disabled:after {
214
+ right: 0.5em;
215
+ content: "\2193";
216
+ }
217
+ }
218
+ }
219
+
220
+ .rounded {
221
+ .table-divided {
222
+ tr {
223
+ border-radius: $border-radius-rounded;
224
+ }
225
+ td {
226
+ border-radius: initial;
227
+ &:first-child {
228
+ border-top-left-radius: $border-radius-rounded;
229
+ border-bottom-left-radius: $border-radius-rounded;
230
+ }
231
+
232
+ &:last-child {
233
+ border-top-right-radius: $border-radius-rounded;
234
+ border-bottom-right-radius: $border-radius-rounded;
235
+ }
236
+ }
237
+ }
238
+ }
239
+ .rtl {
240
+ .rounded {
241
+ .table-divided {
242
+ &table {
243
+ td {
244
+ border-radius: initial;
245
+ &:first-child {
246
+ border-top-right-radius: $border-radius-rounded;
247
+ border-bottom-right-radius: $border-radius-rounded;
248
+ }
249
+
250
+ &:last-child {
251
+ border-top-left-radius: $border-radius-rounded;
252
+ border-bottom-left-radius: $border-radius-rounded;
253
+ }
254
+ }
255
+ }
256
+ }
257
+ }
258
+ }
259
+
260
+
261
+ .responsive-table{
262
+ @media only screen and (max-width: 800px) {
263
+
264
+ /* Force table to not be like tables anymore */
265
+ table,
266
+ thead,
267
+ tbody,
268
+ th,
269
+ td,
270
+ tr {
271
+ display: block;
272
+ }
273
+
274
+ /* Hide table headers (but not display: none;, for accessibility) */
275
+ thead tr {
276
+ position: absolute;
277
+ top: -9999px;
278
+ left: -9999px;
279
+ }
280
+
281
+ tr { border: 1px solid #ccc; }
282
+
283
+ td {
284
+ /* Behave like a "row" */
285
+ border: none;
286
+ border-bottom: 1px solid #eee;
287
+ position: relative;
288
+ padding-left: 50%;
289
+ white-space: normal;
290
+ text-align:left;
291
+ }
292
+
293
+ td:before {
294
+ /* Now like a table header */
295
+ position: absolute;
296
+ /* Top/left values mimic padding */
297
+ top: 6px;
298
+ left: 6px;
299
+ width: 45%;
300
+ padding-right: 10px;
301
+ white-space: nowrap;
302
+ text-align:left;
303
+ font-weight: bold;
304
+ }
305
+
306
+ /*
307
+ Label the data
308
+ */
309
+ td:before { content: attr(data-title); }
310
+ }
311
+ }
@@ -0,0 +1,40 @@
1
+ $separator-color-light: #e2cdcd;
2
+ $separator-color: #d7d7d7;
3
+ $background-color: white;
4
+ $foreground-color : white;
5
+ $input-background: white;
6
+
7
+ $dark-btn-background: #131113;
8
+ $light-btn-background: #ececec;
9
+
10
+ $button-text-color: #fff;
11
+
12
+ $theme-color-1: #900604;
13
+ $theme-color-2: #e7284a;
14
+ $theme-color-3: #c06b62;
15
+ $theme-color-4: #843a47;
16
+ $theme-color-5: #d8667a;
17
+ $theme-color-6: #f69682;
18
+
19
+ $primary-color: #3a3a3a;
20
+ $secondary-color: #8f8f8f;
21
+ $muted-color: #909090;
22
+
23
+ $gradient-color-1 : #992235;
24
+ $gradient-color-2 : #790503;
25
+ $gradient-color-3 : #900604;
26
+
27
+ $shadowOffsetsTop : 1 3 10 14 19;
28
+ $shadowBlursTop: 1.5 5 10 14 19;
29
+ $shadowOpacitiesTop: 0.04 0.1 0.19 0.25 0.3;
30
+
31
+ $shadowOffsetsBottom : 1 3 6 10 15;
32
+ $shadowBlursBottom: 3 6 6 5 6;
33
+ $shadowOpacitiesBottom: 0.04 0.1 0.2 0.22 0.22;
34
+
35
+ // $logoPath: "/assets/img/logo-black.svg";
36
+ $logoPath: '';
37
+ // $logoPathMobile: "/assets/img/logo-mobile.svg";
38
+ $logoPathMobile: '';
39
+
40
+ @import "../main.scss";
package/src/index.css CHANGED
@@ -3,7 +3,7 @@
3
3
  line-height: 0.2;
4
4
  font-weight: 400;
5
5
 
6
- color-scheme: light dark;
6
+ color-scheme: inherit;
7
7
  color: rgba(255, 255, 255, 0.87);
8
8
  background-color: #242424;
9
9
 
@@ -48,7 +48,7 @@ button {
48
48
  font-size: 1em;
49
49
  font-weight: 500;
50
50
  font-family: inherit;
51
- background-color: #1a1a1a;
51
+ background-color: grey;
52
52
  cursor: pointer;
53
53
  transition: border-color 0.25s;
54
54
  }
package/src/index.js CHANGED
@@ -4,4 +4,3 @@ export * from './bridges';
4
4
  export * from './CustomBootstrap';
5
5
  export * from './CustomSelectInput';
6
6
  export * from './tomar-foto';
7
- export * from './react-notifications';
package/src/main.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createRoot } from 'react-dom/client';
2
2
  import './assets/css/vendor/bootstrap.min.css';
3
3
  import './assets/css/vendor/bootstrap.rtl.only.min.css';
4
-
4
+ import './assets/css/sass/themes/gogo.light.redruby.scss';
5
5
  import App from './App';
6
6
 
7
7
  createRoot(document.getElementById('root')).render(<App />);
package/vite.config.ts CHANGED
@@ -4,6 +4,11 @@ import commonjs from 'vite-plugin-commonjs'
4
4
 
5
5
  export default defineConfig({
6
6
  plugins: [react(), commonjs()],
7
+ server: {
8
+ port: 5173,
9
+ open: true,
10
+ hmr: true
11
+ },
7
12
  css: {
8
13
  preprocessorOptions: {
9
14
  scss: {