intelicoreact 0.0.66 → 0.0.71

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 (81) hide show
  1. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
  2. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  3. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
  4. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +48 -17
  5. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -6
  7. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +16 -43
  8. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  9. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +3 -156
  10. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +4 -4
  11. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +3 -3
  12. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -7
  13. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  14. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  15. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  16. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  17. package/dist/Atomic/UI/Arrow/Arrow.js +7 -8
  18. package/dist/Atomic/UI/Calendar/Calendar.js +3 -2
  19. package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
  20. package/dist/Atomic/UI/Status/Status.scss +1 -1
  21. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  22. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  23. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  24. package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
  25. package/dist/scss/_vars.scss +3 -1
  26. package/dist/scss/main.scss +1 -1
  27. package/package.json +6 -4
  28. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  29. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  30. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  31. package/src/Atomic/FormElements/Dropdown/Dropdown.js +53 -19
  32. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
  33. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +28 -15
  34. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +187 -214
  35. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  36. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +35 -123
  37. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +2 -2
  38. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -1
  39. package/src/Atomic/FormElements/InputDateRange/dependencies.js +6 -6
  40. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  41. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  42. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  43. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  44. package/src/Atomic/UI/Arrow/Arrow.js +5 -5
  45. package/src/Atomic/UI/Calendar/Calendar.js +2 -2
  46. package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
  47. package/src/Atomic/UI/Status/Status.scss +1 -1
  48. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  49. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  50. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  51. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  52. package/src/scss/_vars.scss +3 -1
  53. package/src/scss/main.scss +1 -1
  54. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  55. package/dist/scss/anme/_anme-elements.scss +0 -269
  56. package/dist/scss/anme/_anme-grid.scss +0 -111
  57. package/dist/scss/anme/_anme-justify.scss +0 -111
  58. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  59. package/dist/scss/anme/_anme-mixins.scss +0 -166
  60. package/dist/scss/anme/_anme-normalize.scss +0 -8
  61. package/dist/scss/anme/_anme-overall.scss +0 -34
  62. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  63. package/dist/scss/anme/_anme-table.scss +0 -81
  64. package/dist/scss/anme/_anme-theme.scss +0 -275
  65. package/dist/scss/anme/_anme-vars.scss +0 -91
  66. package/dist/scss/anme/_code-styling.scss +0 -23
  67. package/dist/scss/anme/styles.scss +0 -12
  68. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  69. package/src/scss/anme/_anme-elements.scss +0 -269
  70. package/src/scss/anme/_anme-grid.scss +0 -111
  71. package/src/scss/anme/_anme-justify.scss +0 -111
  72. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  73. package/src/scss/anme/_anme-mixins.scss +0 -166
  74. package/src/scss/anme/_anme-normalize.scss +0 -8
  75. package/src/scss/anme/_anme-overall.scss +0 -34
  76. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  77. package/src/scss/anme/_anme-table.scss +0 -81
  78. package/src/scss/anme/_anme-theme.scss +0 -275
  79. package/src/scss/anme/_anme-vars.scss +0 -91
  80. package/src/scss/anme/_code-styling.scss +0 -23
  81. package/src/scss/anme/styles.scss +0 -12
@@ -1,269 +0,0 @@
1
- //---------------------BUTTONS---------------------//
2
- .btn {
3
- display: inline-block;
4
- font-weight: 400;
5
- color: #212529;
6
- text-align: center;
7
- vertical-align: middle;
8
- -webkit-user-select: none;
9
- -ms-user-select: none;
10
- user-select: none;
11
- background-color: transparent;
12
- border: 1px solid transparent;
13
- padding: .375rem .75rem;
14
- font-size: 1rem;
15
- line-height: 1.5;
16
- border-radius: .25rem;
17
- cursor: pointer;
18
-
19
- &:hover {
20
- filter: brightness(1.1);
21
- }
22
- }
23
-
24
- .btn-primary {
25
- background-color: #707000;
26
- border-color: #707000;
27
- color: #fff;
28
- transform: none !important;
29
-
30
- &:active {
31
- background-color: #6e85a2 !important;
32
- border-color: #738dae !important;
33
- }
34
- }
35
-
36
- .btn-default {
37
- background-color: transparent;
38
- }
39
-
40
- .btn-outline-primary {
41
- color: #3f4d67;
42
- border-color: #3f4d67;
43
- transform: none !important;
44
-
45
- &:active {
46
- background-color: #6e85a2 !important;
47
- border-color: #738dae !important;
48
- }
49
- }
50
-
51
- .btn-secondary {
52
- color: #fff;
53
- background-color: #6c757d;
54
- border-color: #6c757d;
55
- }
56
-
57
- .btn-success {
58
- color: #fff;
59
- background-color: #28a745;
60
- border-color: #28a745;
61
- }
62
-
63
- .btn-warning {
64
- color: #212529;
65
- background-color: #ffc107;
66
- border-color: #ffc107;
67
- }
68
-
69
- .btn-danger {
70
- color: #fff;
71
- background-color: #dc3545;
72
- border-color: #dc3545;
73
- }
74
-
75
- .btn-info {
76
- color: #fff;
77
- background-color: #17a2b8;
78
- border-color: #17a2b8;
79
- }
80
-
81
- .btn-light {
82
- color: #212529;
83
- background-color: #f8f9fa;
84
- border-color: #f8f9fa;
85
- }
86
-
87
- .btn-dark {
88
- color: #fff;
89
- background-color: #343a40;
90
- border-color: #343a40;
91
- }
92
-
93
- .btn-link {
94
- font-weight: 400;
95
- color: #007bff;
96
- text-decoration: none;
97
- }
98
-
99
- //---------------------BORDER---------------------//
100
- .border {
101
- border: 1px solid $color--border !important;
102
- }
103
-
104
- .border-top {
105
- border-top: 1px solid $color--border !important;
106
- }
107
-
108
- .border-top-none {
109
- border-top: none !important;
110
- }
111
-
112
- .border-bottom {
113
- border-bottom: 1px solid $color--border !important;
114
- }
115
-
116
- .border-bottom-none {
117
- border-bottom: none !important;
118
- }
119
-
120
- .border-left-none {
121
- border-left: none;
122
- }
123
-
124
- //---------------------FONT---------------------//
125
- .strong {
126
- font-weight: 700;
127
- }
128
-
129
- .text-align-right {
130
- text-align: right;
131
- }
132
-
133
- //---------------------FORMS---------------------//
134
- .form-group {
135
- margin-bottom: 0;
136
- display: flex;
137
- flex-direction: column;
138
- justify-content: space-between;
139
-
140
- .form-control {
141
- margin: 10px;
142
- padding: 5px;
143
- min-height: 30px;
144
- width: 100%;
145
- border-radius: 5px;
146
- }
147
- }
148
-
149
- .form-control--toggler {
150
- border: none;
151
- padding-left: 0;
152
- padding-right: 0;
153
- height: auto;
154
- background-color: inherit !important;
155
- }
156
-
157
- .input-toggler-box {
158
- display: flex;
159
- align-items: flex-start;
160
- margin-bottom: 0;
161
- margin-top: 5px;
162
- }
163
-
164
- .input-toggler {
165
- cursor: pointer;
166
- font-size: 20px;
167
- line-height: 22px;
168
- margin-right: 10px;
169
- color: $color--pause;
170
-
171
- &.ftl-toggle-on {
172
- color: $color--success;
173
- }
174
- }
175
-
176
- .input-box {
177
- display: flex;
178
- margin-top: 10px;
179
- margin-bottom: 10px;
180
-
181
- .input {
182
- padding: 5px;
183
- min-height: 40px;
184
- width: 100%;
185
- border-radius: 4px;
186
- border: 1px solid;
187
- box-sizing: border-box;
188
-
189
- &:focus {
190
- outline: none;
191
- border-color: #00B7FF !important;
192
- }
193
- }
194
- }
195
-
196
- .inputError {
197
- color: red;
198
- }
199
-
200
- //---------------------OTHER---------------------//
201
- .no-wrap, .text-nowrap {
202
- white-space: nowrap;
203
- }
204
-
205
- .flex-nowrap {
206
- display: flex;
207
- flex-wrap: nowrap;
208
- }
209
-
210
- .no-user-select {
211
- user-select: none;
212
- }
213
-
214
- .fieldError {
215
- font-size: 12px;
216
- color: red;
217
- }
218
-
219
- .avatar {
220
- max-width: 50px;
221
- max-height: 50px;
222
- border-radius: 25px;
223
- margin-right: 10px;
224
- }
225
-
226
- svg {
227
- max-width: 100%;
228
- max-height: 100%;
229
- }
230
- /*
231
- .tokens-url{
232
- align-items: center;
233
- line-height: 23px;
234
- font-size: 11px;
235
-
236
- & > span {
237
- align-items: center;
238
- height: 24px;
239
- }
240
-
241
- &--rename {
242
- color: $color--froly;
243
- background-color: $color--wisp-pinky;
244
- padding: 4px;
245
- }
246
-
247
- &--warning {
248
- @extend .tokens-url--rename;
249
- width: 24px;
250
- background-image: url(/media/images/alert-circle.svg);
251
- background-repeat: no-repeat;
252
- background-size: 16px 16px;
253
- transform: translateY(8px);
254
- background-position: center;
255
-
256
- & > span {
257
- visibility: hidden;
258
- }
259
- }
260
- } */
261
-
262
- .inactive {
263
- pointer-events: none;
264
- opacity: 0.3;
265
- }
266
-
267
- .hidden {
268
- display: none!important;
269
- }
@@ -1,111 +0,0 @@
1
- @import "anme-vars";
2
- // Container
3
- .container {
4
- box-sizing: border-box;
5
-
6
- &.box {
7
- padding-left: ($gAir*2);
8
- padding-right: ($gAir*2);
9
- }
10
-
11
- &.tiles {
12
- &.box {
13
- padding-top: $gAir;
14
- padding-bottom: $gAir;
15
- }
16
-
17
- > .row {
18
- > .col, > [class*="col-"] {
19
- padding-top: $gAir;
20
- padding-bottom: $gAir;
21
- }
22
- }
23
-
24
- }
25
-
26
- .col.tile, [class*="col-"].tile {
27
- margin: 0;
28
- padding-top: $gAir;
29
- padding-bottom: $gAir;
30
- }
31
-
32
- &.sm {
33
- padding-left: $gAir;
34
- padding-right: $gAir;
35
-
36
- .row {
37
- margin-left: -($gAir/2);
38
- margin-right: -($gAir/2);
39
-
40
- .col, [class*="col-"] {
41
- padding-left: ($gAir/2);
42
- padding-right: ($gAir/2);
43
- }
44
- }
45
-
46
- &.tiles {
47
- padding-top: ($gAir/2);
48
- padding-bottom: ($gAir/2);
49
-
50
- > .row {
51
- > .col, > [class*="col-"] {
52
- padding-top: ($gAir/2);
53
- padding-bottom: ($gAir/2);
54
- }
55
- }
56
-
57
- }
58
-
59
- .col.tile, [class*="col-"].tile {
60
- padding-top: ($gAir/2);
61
- padding-bottom: ($gAir/2);
62
- }
63
- }
64
-
65
- &.no-padding, &.zero {
66
- padding: 0;
67
- }
68
-
69
- .col.no-tile, .no-tile {
70
- padding-top: 0 !important;
71
- padding-bottom: 0 !important;
72
- }
73
- }
74
-
75
- //Columns
76
- .col-5pct, .col-20items {
77
- flex-basis: 5%;
78
- max-width: 5%;
79
- }
80
-
81
- .col-10pct, .col-10items {
82
- flex-basis: 10%;
83
- max-width: 10%;
84
- }
85
-
86
- .col-20pct, .col-5items {
87
- flex-basis: 20%;
88
- max-width: 20%;
89
- }
90
-
91
- .col-8items {
92
- flex-basis: 12.5%;
93
- max-width: 12.5%;
94
- }
95
-
96
- .display {
97
- height: 100vh;
98
- width: 100vw;
99
- }
100
-
101
- .wrap {
102
- display: flex;
103
- flex-wrap: wrap;
104
- }
105
-
106
-
107
-
108
-
109
-
110
-
111
-
@@ -1,111 +0,0 @@
1
- /*JUSTIFY*/
2
- .df {
3
- display: flex;
4
- }
5
-
6
- .dfc {
7
- display: flex;
8
- flex-direction: column;
9
- }
10
-
11
- .dfc-jc {
12
- display: flex;
13
- flex-direction: column;
14
- justify-content: center;
15
- }
16
-
17
- .j7 {
18
- display: flex;
19
- justify-content: flex-start;
20
- align-items: flex-start;
21
- }
22
-
23
- .j8 {
24
- display: flex;
25
- justify-content: center;
26
- align-items: flex-start;
27
- }
28
-
29
- .j9 {
30
- display: flex;
31
- justify-content: flex-end;
32
- align-items: flex-start;
33
- }
34
-
35
- .j79 {
36
- display: flex;
37
- justify-content: space-between;
38
- align-items: flex-start;
39
- }
40
-
41
- .j789 {
42
- display: flex;
43
- justify-content: space-around;
44
- align-items: flex-start;
45
- }
46
-
47
- .j4 {
48
- display: flex;
49
- justify-content: flex-start;
50
- align-items: center;
51
- }
52
-
53
- .j6 {
54
- display: flex;
55
- justify-content: flex-end;
56
- align-items: center;
57
- }
58
-
59
- .j46 {
60
- display: flex;
61
- justify-content: space-between;
62
- align-items: center;
63
- }
64
-
65
- .j456 {
66
- display: flex;
67
- justify-content: space-around;
68
- align-items: center;
69
- }
70
-
71
- .j5 {
72
- display: flex;
73
- justify-content: center;
74
- align-items: center;
75
- }
76
-
77
- .j1 {
78
- display: flex;
79
- justify-content: flex-start;
80
- align-items: flex-end;
81
- }
82
-
83
- .j11 {
84
- display: flex;
85
- justify-content: flex-start;
86
- align-items: baseline;
87
- }
88
-
89
- .j2 {
90
- display: flex;
91
- justify-content: center;
92
- align-items: flex-end;
93
- }
94
-
95
- .j3 {
96
- display: flex;
97
- justify-content: flex-end;
98
- align-items: flex-end;
99
- }
100
-
101
- .j13 {
102
- display: flex;
103
- justify-content: space-between;
104
- align-items: flex-end;
105
- }
106
-
107
- .j123 {
108
- display: flex;
109
- justify-content: space-around;
110
- align-items: flex-end;
111
- }
@@ -1,116 +0,0 @@
1
- $screen-mode-xs: 360px;
2
- $screen-mode-sm: 576px;
3
- $screen-mode-md: 768px;
4
- $screen-mode-lg: 992px;
5
- $screen-mode-xl: 1280px;
6
- $screen-mode-xxl: 1440px;
7
- $screen-mode-xxxl: 1620px;
8
-
9
-
10
- // ---------- media queries (from x to infinity) ----------
11
- @mixin xs {
12
- @media (min-width: #{$screen-mode-xs}) {
13
- @content;
14
- }
15
- }
16
-
17
- @mixin sm {
18
- @media (min-width: #{$screen-mode-sm}) {
19
- @content;
20
- }
21
- }
22
-
23
- @mixin md {
24
- @media (min-width: #{$screen-mode-md}) {
25
- @content;
26
- }
27
- }
28
-
29
- @mixin lg {
30
- @media (min-width: #{$screen-mode-lg}) {
31
- @content;
32
- }
33
- }
34
-
35
- @mixin xl {
36
- @media (min-width: #{$screen-mode-xl}) {
37
- @content;
38
- }
39
- }
40
-
41
- @mixin xxl {
42
- @media (min-width: #{$screen-mode-xxl}) {
43
- @content;
44
- }
45
- }
46
-
47
- @mixin xxxl {
48
- @media (min-width: #{$screen-mode-xxxl}) {
49
- @content;
50
- }
51
- }
52
-
53
-
54
- // ---------- media queries (from x to 0) ----------
55
- @mixin xxxlDown {
56
- @media (max-width: #{$screen-mode-xxxl - 1px}) {
57
- @content;
58
- }
59
- }
60
-
61
- @mixin xxlDown {
62
- @media (max-width: #{$screen-mode-xxl - 1px}) {
63
- @content;
64
- }
65
- }
66
-
67
- @mixin xlDown {
68
- @media (max-width: #{$screen-mode-xl - 1px}) {
69
- @content;
70
- }
71
- }
72
-
73
- @mixin lgDown {
74
- @media (max-width: #{$screen-mode-lg - 1px}) {
75
- @content;
76
- }
77
- }
78
-
79
- @mixin mdDown {
80
- @media (max-width: #{$screen-mode-md - 1px}) {
81
- @content;
82
- }
83
- }
84
-
85
- @mixin smDown {
86
- @media (max-width: #{$screen-mode-sm - 1px}) {
87
- @content;
88
- }
89
- }
90
-
91
- @mixin xsDown {
92
- @media (max-width: #{$screen-mode-xs - 1px}) {
93
- @content;
94
- }
95
- }
96
-
97
-
98
- // ---------- media queries (from x to y) ----------
99
-
100
- @mixin forMobile {
101
- @media (max-width: #{$screen-mode-md -1}) {
102
- @content;
103
- }
104
- }
105
-
106
- @mixin forTablet {
107
- @media (min-width: #{$screen-mode-md}) and (max-width: #{$screen-mode-xl - 1px}) {
108
- @content;
109
- }
110
- }
111
-
112
- @mixin forDesktop {
113
- @media (min-width: #{$screen-mode-xl}) {
114
- @content;
115
- }
116
- }