cortex-react-ui 0.1.112 → 0.1.113

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/lib/styles/BarLoader/index.scss +103 -92
  2. package/lib/styles/Selected/index.scss +75 -66
  3. package/lib/styles/index.scss +2 -0
  4. package/package.json +1 -1
package/lib/styles/BarLoader/index.scss CHANGED
@@ -1,108 +1,119 @@
1
- .loader {
2
- position:relative;
3
- padding:2px;
4
- text-align: center;
5
- font-size: 15px;
6
- font-weight: bold;
1
+ @import "../global.scss";
7
2
 
8
- :before {
9
- content:'';
10
- position:absolute;
11
- top:-1px;
12
- right:-4px;
13
- bottom:-1px;
14
- left:-4px;
15
- }
3
+ @mixin barLoader($props: null, $options: null) {
4
+ $internal-options: $default-options;
5
+
6
+ $internal-props: ();
16
7
 
17
- &.loader-color-red{
18
- background-color:rgba(255, 0, 0, 0.2);
8
+ $internal-props: safe-map-merge($internal-props, $props);
9
+ $internal-options: safe-map-merge($internal-options, $options);
10
+
11
+ .loader {
12
+ position:relative;
13
+ padding:2px;
14
+ text-align: center;
15
+ font-size: 15px;
16
+ font-weight: bold;
19
17
 
20
- &.completed{
21
- z-index: 3;
22
- background: red !important;
18
+ :before {
19
+ content:'';
20
+ position:absolute;
21
+ top:-1px;
22
+ right:-4px;
23
+ bottom:-1px;
24
+ left:-4px;
23
25
  }
24
- }
25
-
26
- &.loader-color-yellow{
27
- background-color:rgba(0, 255, 0, 0.2);
28
26
 
29
- &.completed{
30
- z-index: 3;
31
- background: yellow !important;
27
+ &.loader-color-red{
28
+ background-color:rgba(255, 0, 0, 0.2);
29
+
30
+ &.completed{
31
+ z-index: 3;
32
+ background: red !important;
33
+ }
32
34
  }
33
- }
34
-
35
- &.loader-color-blue{
36
- background-color:rgba(14, 190, 255, 0.2);
37
35
 
38
- &.completed{
39
- z-index: 3;
40
- background: #0ebeff !important;
36
+ &.loader-color-yellow{
37
+ background-color:rgba(0, 255, 0, 0.2);
38
+
39
+ &.completed{
40
+ z-index: 3;
41
+ background: yellow !important;
42
+ }
41
43
  }
42
- }
43
-
44
- &.loader-color-orange{
45
- background-color:rgba(255, 165, 0, 0.2);
46
44
 
47
- &.completed{
48
- z-index: 3;
49
- background: orange !important;
45
+ &.loader-color-blue{
46
+ background-color:rgba(14, 190, 255, 0.2);
47
+
48
+ &.completed{
49
+ z-index: 3;
50
+ background: #0ebeff !important;
51
+ }
52
+ }
53
+
54
+ &.loader-color-orange{
55
+ background-color:rgba(255, 165, 0, 0.2);
56
+
57
+ &.completed{
58
+ z-index: 3;
59
+ background: orange !important;
60
+ }
50
61
  }
51
62
  }
52
- }
53
-
54
- .loaderBar {
55
- position:absolute;
56
- top:0;
57
- right:100%;
58
- bottom:0;
59
- left:0;
60
- background:#0ebeff;
61
- width:0;
62
- animation:borealisBar 1s linear infinite;
63
- z-index: 2;
64
-
65
- &.loaderBar-color-red{
66
- background:red !important;
67
- }
68
-
69
- &.loaderBar-color-blue{
70
- background:#0ebeff !important;
71
- }
72
-
73
- &.loaderBar-color-yellow{
74
- background:yellow !important;
75
- }
76
-
77
- &.loaderBar-color-orange{
78
- background:orange !important;
79
- }
80
- }
81
-
82
- .loaderBar-title{
83
- text-align: center;
84
- padding-top: 2px
85
- }
86
-
87
- @keyframes borealisBar {
88
- 0% {
89
- left:0%;
63
+
64
+ .loaderBar {
65
+ position:absolute;
66
+ top:0;
90
67
  right:100%;
91
- width:0%;
92
- }
93
- 10% {
94
- left:0%;
95
- right:75%;
96
- width:25%;
68
+ bottom:0;
69
+ left:0;
70
+ background:#0ebeff;
71
+ width:0;
72
+ animation:borealisBar 1s linear infinite;
73
+ z-index: 2;
74
+
75
+ &.loaderBar-color-red{
76
+ background:red !important;
77
+ }
78
+
79
+ &.loaderBar-color-blue{
80
+ background:#0ebeff !important;
81
+ }
82
+
83
+ &.loaderBar-color-yellow{
84
+ background:yellow !important;
85
+ }
86
+
87
+ &.loaderBar-color-orange{
88
+ background:orange !important;
89
+ }
97
90
  }
98
- 90% {
99
- right:0%;
100
- left:75%;
101
- width:25%;
91
+
92
+ .loaderBar-title{
93
+ text-align: center;
94
+ padding-top: 2px
102
95
  }
103
- 100% {
104
- left:100%;
105
- right:0%;
106
- width:0%;
96
+
97
+ @keyframes borealisBar {
98
+ 0% {
99
+ left:0%;
100
+ right:100%;
101
+ width:0%;
102
+ }
103
+ 10% {
104
+ left:0%;
105
+ right:75%;
106
+ width:25%;
107
+ }
108
+ 90% {
109
+ right:0%;
110
+ left:75%;
111
+ width:25%;
112
+ }
113
+ 100% {
114
+ left:100%;
115
+ right:0%;
116
+ width:0%;
117
+ }
107
118
  }
108
119
  }
package/lib/styles/Selected/index.scss CHANGED
@@ -1,69 +1,78 @@
1
1
  @import "../global.scss";
2
2
 
3
- .ui-selected-params {
4
- float: left;
5
- color: black;
6
- margin: 15px;
7
- border: 1px solid black;
8
- width: 250px;
9
- }
10
-
11
- .ui-selected-title {
12
- color: black;
13
- font-weight: bold;
14
- font-size: 15px;
15
- margin-left: 5px;
16
- display: table;
17
- margin-top: -10px;
18
- background-color: white;
19
- padding-right: 5px;
20
- padding-left: 5px;
21
- }
22
-
23
- .ui-selected-content {
24
- color: black;
25
- margin: 10px;
26
- }
27
-
28
- .ui-selected-button {
29
- display: inline;
30
- }
31
-
32
- .ui-selected-btn {
33
- width: 28%;
34
- border-radius: 5px;
35
- height: 30px;
36
- margin: 5px;
37
- margin-left: 7px;
38
- font-weight: bold;
39
- cursor: pointer;
40
- background-color: #75c475;
41
- color: white;
42
- border: none;
43
- }
44
-
45
- .ui-not-selected {
46
- width: 28%;
47
- border-radius: 5px;
48
- height: 30px;
49
- margin: 5px;
50
- margin-left: 7px;
51
- font-weight: bold;
52
- cursor: pointer;
53
- background-color: black;
54
- color: white;
55
- border: none;
56
- }
57
-
58
- .ui-new-selected {
59
- width: 28%;
60
- border-radius: 5px;
61
- height: 30px;
62
- margin: 5px;
63
- margin-left: 7px;
64
- font-weight: bold;
65
- cursor: pointer;
66
- background-color: red;
67
- color: white;
68
- border: none;
3
+ @mixin selected($props: null, $options: null) {
4
+ $internal-options: $default-options;
5
+
6
+ $internal-props: ();
7
+
8
+ $internal-props: safe-map-merge($internal-props, $props);
9
+ $internal-options: safe-map-merge($internal-options, $options);
10
+
11
+ .ui-selected-params {
12
+ float: left;
13
+ color: black;
14
+ margin: 15px;
15
+ border: 1px solid black;
16
+ width: 250px;
17
+ }
18
+
19
+ .ui-selected-title {
20
+ color: black;
21
+ font-weight: bold;
22
+ font-size: 15px;
23
+ margin-left: 5px;
24
+ display: table;
25
+ margin-top: -10px;
26
+ background-color: white;
27
+ padding-right: 5px;
28
+ padding-left: 5px;
29
+ }
30
+
31
+ .ui-selected-content {
32
+ color: black;
33
+ margin: 10px;
34
+ }
35
+
36
+ .ui-selected-button {
37
+ display: inline;
38
+ }
39
+
40
+ .ui-selected-btn {
41
+ width: 28%;
42
+ border-radius: 5px;
43
+ height: 30px;
44
+ margin: 5px;
45
+ margin-left: 7px;
46
+ font-weight: bold;
47
+ cursor: pointer;
48
+ background-color: #75c475;
49
+ color: white;
50
+ border: none;
51
+ }
52
+
53
+ .ui-not-selected {
54
+ width: 28%;
55
+ border-radius: 5px;
56
+ height: 30px;
57
+ margin: 5px;
58
+ margin-left: 7px;
59
+ font-weight: bold;
60
+ cursor: pointer;
61
+ background-color: black;
62
+ color: white;
63
+ border: none;
64
+ }
65
+
66
+ .ui-new-selected {
67
+ width: 28%;
68
+ border-radius: 5px;
69
+ height: 30px;
70
+ margin: 5px;
71
+ margin-left: 7px;
72
+ font-weight: bold;
73
+ cursor: pointer;
74
+ background-color: red;
75
+ color: white;
76
+ border: none;
77
+ }
69
78
  }
package/lib/styles/index.scss CHANGED
@@ -24,6 +24,8 @@
24
24
  @include dialog();
25
25
  @include button();
26
26
  @include toggleButton();
27
+ @include selected();
28
+ @include barLoader();
27
29
 
28
30
  // @include popper();
29
31
  // @include popper(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cortex-react-ui",
3
- "version": "0.1.112",
3
+ "version": "0.1.113",
4
4
  "description": "React UI",
5
5
  "author": "Anthony",
6
6
  "license": "MIT",