armtek-uikit-react 1.0.101 → 1.0.102

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 (5) hide show
  1. package/assets/Loader.scss +40 -33
  2. package/package.json +1 -1
  3. package/ui/Form/Select/Select.js +0 -2
  4. package/ui/Loader/Loader.d.ts +2 -1
  5. package/ui/Loader/Loader.js +5 -102
package/assets/Loader.scss CHANGED
@@ -1,37 +1,44 @@
1
1
  @import "variables";
2
2
 
3
+ @mixin bg ($color:var(--color-gray-800), $size: 2px) {
4
+ background:
5
+ radial-gradient(farthest-side,#ffa516 94%,#0000) top/$size $size no-repeat,
6
+ conic-gradient(#0000 30%, $color);
7
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - $size),#000 0);
8
+ }
9
+
3
10
  .loader{
4
- -webkit-animation: rotating 2s linear infinite;
5
- -moz-animation: rotating 2s linear infinite;
6
- -ms-animation: rotating 2s linear infinite;
7
- -o-animation: rotating 2s linear infinite;
8
- animation: rotating 2s linear infinite;
9
- }
10
- @-webkit-keyframes rotating /* Safari and Chrome */ {
11
- from {
12
- -webkit-transform: rotate(0deg);
13
- -o-transform: rotate(0deg);
14
- transform: rotate(0deg);
15
- }
16
- to {
17
- -webkit-transform: rotate(360deg);
18
- -o-transform: rotate(360deg);
19
- transform: rotate(360deg);
20
- }
21
- }
22
- @keyframes rotating {
23
- from {
24
- -ms-transform: rotate(0deg);
25
- -moz-transform: rotate(0deg);
26
- -webkit-transform: rotate(0deg);
27
- -o-transform: rotate(0deg);
28
- transform: rotate(0deg);
29
- }
30
- to {
31
- -ms-transform: rotate(360deg);
32
- -moz-transform: rotate(360deg);
33
- -webkit-transform: rotate(360deg);
34
- -o-transform: rotate(360deg);
35
- transform: rotate(360deg);
36
- }
11
+ width: 20px;
12
+ height: 20px;
13
+ aspect-ratio: 1;
14
+ border-radius: 50%;
15
+ @include bg();
16
+ animation: s3 1s infinite linear;
17
+ }
18
+ .loader_color_primary{
19
+ @include bg(var(--color-primary));
20
+ }
21
+ .loader_color_secondary{
22
+ @include bg(var(--color-secondary));
23
+ }
24
+ .loader_size_small{
25
+ width: 20px;
26
+ height: 20px;
27
+ }
28
+ .loader_size_medium{
29
+ width: 23px;
30
+ height: 23px;
31
+ }
32
+ .loader_size_large{
33
+ width: 25px;
34
+ height: 25px;
35
+ }
36
+ .loader_size_extraLarge{
37
+ width: 30px;
38
+ height: 30px;
39
+ background-position: top/6px 6px;
40
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
41
+ }
42
+ @keyframes s3{
43
+ 100%{transform: rotate(1turn)}
37
44
  }
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.101","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
1
+ {"name":"armtek-uikit-react","version":"1.0.102","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
package/ui/Form/Select/Select.js CHANGED
@@ -122,8 +122,6 @@ function Select(props) {
122
122
  function handleClose() {
123
123
  if (onClose) onClose();else setActive(false);
124
124
  }
125
- console.log(realActive);
126
- console.log(anchorEl);
127
125
  return /*#__PURE__*/_jsx(_Fragment, {
128
126
  children: /*#__PURE__*/_jsxs("div", {
129
127
  className: className,
package/ui/Loader/Loader.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import { SizeType } from '../../types/theme';
1
+ import { ColorType, SizeType } from '../../types/theme';
2
2
  import { HTMLAttributes } from 'react';
3
3
  export type LoaderProps = {
4
4
  size?: SizeType;
5
+ color?: ColorType;
5
6
  } & HTMLAttributes<HTMLDivElement>;
6
7
  declare const Loader: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element;
7
8
  export default Loader;
package/ui/Loader/Loader.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import clsx from 'clsx';
2
2
  import css from "./Loader.module.scss";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
4
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
5
  const CssClasses = ['loader'];
7
6
 
@@ -10,6 +9,7 @@ const CssClasses = ['loader'];
10
9
  const Loader = props => {
11
10
  let {
12
11
  size,
12
+ color = 'neutral',
13
13
  className,
14
14
  ...divProps
15
15
  } = props;
@@ -18,107 +18,10 @@ const Loader = props => {
18
18
  return /*#__PURE__*/_jsx(_Fragment, {
19
19
  children: /*#__PURE__*/_jsx("div", {
20
20
  ...divProps,
21
- className: clsx(css.loader, 'material_icon', className),
22
- children: /*#__PURE__*/_jsxs("svg", {
23
- xmlns: "http://www.w3.org/2000/svg",
24
- width: width,
25
- height: height,
26
- viewBox: `0 0 ${width} ${height}`,
27
- fill: "none",
28
- children: [/*#__PURE__*/_jsx("circle", {
29
- opacity: "0.3",
30
- cx: "12.0003",
31
- cy: "12",
32
- r: "8.47059",
33
- stroke: "#DFE2E6",
34
- strokeWidth: "1.41176"
35
- }), /*#__PURE__*/_jsx("g", {
36
- filter: "url(#filter0_f_1024_93554)",
37
- children: /*#__PURE__*/_jsx("path", {
38
- fillRule: "evenodd",
39
- clipRule: "evenodd",
40
- d: "M19.575 12.745C20.0016 8.47797 17.0747 4.67221 12.8076 4.24564L12.9481 2.84088C17.9909 3.34501 21.8325 7.87742 21.3283 12.9203C21.2815 13.3888 20.8734 13.7602 20.364 13.7093C19.9468 13.6676 19.5194 13.3009 19.575 12.745Z",
41
- fill: "url(#paint0_radial_1024_93554)"
42
- })
43
- }), /*#__PURE__*/_jsx("path", {
44
- fillRule: "evenodd",
45
- clipRule: "evenodd",
46
- d: "M12.0006 4.23529C7.71225 4.23529 4.23588 7.71167 4.23588 12H2.82411C2.82411 6.93198 6.93256 2.82353 12.0006 2.82353V4.23529Z",
47
- fill: "url(#paint1_radial_1024_93554)"
48
- }), /*#__PURE__*/_jsx("path", {
49
- fillRule: "evenodd",
50
- clipRule: "evenodd",
51
- d: "M19.5805 12.0194C19.5805 7.73103 16.2889 4.23529 12.0006 4.23529V2.82353C17.0686 2.82353 21.3426 6.95133 21.3426 12.0194C21.3426 12.4901 20.9734 12.9004 20.4616 12.9004C20.0422 12.9004 19.5805 12.578 19.5805 12.0194Z",
52
- fill: "url(#paint2_radial_1024_93554)"
53
- }), /*#__PURE__*/_jsxs("defs", {
54
- children: [/*#__PURE__*/_jsxs("filter", {
55
- id: "filter0_f_1024_93554",
56
- x: "9.9841",
57
- y: "0.0173481",
58
- width: "14.2122",
59
- height: "16.5202",
60
- filterUnits: "userSpaceOnUse",
61
- colorInterpolationFilters: "sRGB",
62
- children: [/*#__PURE__*/_jsx("feFlood", {
63
- floodOpacity: "0",
64
- result: "BackgroundImageFix"
65
- }), /*#__PURE__*/_jsx("feBlend", {
66
- mode: "normal",
67
- in: "SourceGraphic",
68
- in2: "BackgroundImageFix",
69
- result: "shape"
70
- }), /*#__PURE__*/_jsx("feGaussianBlur", {
71
- stdDeviation: "1.41176",
72
- result: "effect1_foregroundBlur_1024_93554"
73
- })]
74
- }), /*#__PURE__*/_jsxs("radialGradient", {
75
- id: "paint0_radial_1024_93554",
76
- cx: "0",
77
- cy: "0",
78
- r: "1",
79
- gradientUnits: "userSpaceOnUse",
80
- gradientTransform: "translate(20.3817 13.7111) rotate(-126.186) scale(12.6961 11.7694)",
81
- children: [/*#__PURE__*/_jsx("stop", {
82
- offset: "0.395833",
83
- stopColor: "#98A4B0"
84
- }), /*#__PURE__*/_jsx("stop", {
85
- offset: "1",
86
- stopColor: "#98A4B0",
87
- stopOpacity: "0"
88
- })]
89
- }), /*#__PURE__*/_jsxs("radialGradient", {
90
- id: "paint1_radial_1024_93554",
91
- cx: "0",
92
- cy: "0",
93
- r: "1",
94
- gradientUnits: "userSpaceOnUse",
95
- gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
96
- children: [/*#__PURE__*/_jsx("stop", {
97
- offset: "0.395833",
98
- stopColor: "#98A4B0"
99
- }), /*#__PURE__*/_jsx("stop", {
100
- offset: "1",
101
- stopColor: "#98A4B0",
102
- stopOpacity: "0"
103
- })]
104
- }), /*#__PURE__*/_jsxs("radialGradient", {
105
- id: "paint2_radial_1024_93554",
106
- cx: "0",
107
- cy: "0",
108
- r: "1",
109
- gradientUnits: "userSpaceOnUse",
110
- gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
111
- children: [/*#__PURE__*/_jsx("stop", {
112
- offset: "0.395833",
113
- stopColor: "#98A4B0"
114
- }), /*#__PURE__*/_jsx("stop", {
115
- offset: "1",
116
- stopColor: "#98A4B0",
117
- stopOpacity: "0"
118
- })]
119
- })]
120
- })]
121
- })
21
+ className: clsx(css.loader, {
22
+ [css['loader_size_' + size]]: size,
23
+ [css['loader_color_' + color]]: color
24
+ }, 'material_icon', className)
122
25
  })
123
26
  });
124
27
  };