dibk-design 0.4.43 → 0.4.44

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 (87) hide show
  1. package/LICENSE +674 -674
  2. package/README.md +3 -3
  3. package/dist/components/Accordion.md +15 -15
  4. package/dist/components/Accordion.module.scss +205 -205
  5. package/dist/components/Button.md +75 -75
  6. package/dist/components/Button.module.scss +232 -216
  7. package/dist/components/CheckBoxIcon.js +109 -103
  8. package/dist/components/CheckBoxIcon.md +38 -38
  9. package/dist/components/CheckBoxIcon.module.scss +62 -62
  10. package/dist/components/CheckBoxInput.js +104 -101
  11. package/dist/components/CheckBoxInput.md +58 -51
  12. package/dist/components/CheckBoxInput.module.scss +24 -24
  13. package/dist/components/CheckBoxListItem.md +82 -82
  14. package/dist/components/CheckBoxListItem.module.scss +71 -71
  15. package/dist/components/ContentBox.md +46 -46
  16. package/dist/components/ContentBox.module.scss +116 -116
  17. package/dist/components/Dialog.md +5 -5
  18. package/dist/components/Dialog.module.scss +78 -71
  19. package/dist/components/DragAndDropFileInput.md +13 -13
  20. package/dist/components/DragAndDropFileInput.module.scss +45 -45
  21. package/dist/components/Footer.md +7 -7
  22. package/dist/components/Footer.module.scss +11 -11
  23. package/dist/components/Header.md +11 -11
  24. package/dist/components/Header.module.scss +64 -64
  25. package/dist/components/InputField.md +41 -41
  26. package/dist/components/InputField.module.scss +95 -83
  27. package/dist/components/Label.md +9 -9
  28. package/dist/components/Label.module.scss +16 -16
  29. package/dist/components/List.md +10 -10
  30. package/dist/components/List.module.scss +18 -18
  31. package/dist/components/LoadingAnimation.md +5 -5
  32. package/dist/components/LoadingAnimation.module.scss +26 -26
  33. package/dist/components/NavigationBar.md +42 -42
  34. package/dist/components/NavigationBar.module.scss +176 -176
  35. package/dist/components/NavigationBarListItem.md +15 -15
  36. package/dist/components/Paper.md +9 -9
  37. package/dist/components/Paper.module.scss +18 -18
  38. package/dist/components/RadioButtonIcon.md +41 -41
  39. package/dist/components/RadioButtonIcon.module.scss +44 -44
  40. package/dist/components/RadioButtonInput.md +30 -30
  41. package/dist/components/RadioButtonInput.module.scss +26 -26
  42. package/dist/components/RadioButtonListItem.md +70 -70
  43. package/dist/components/RadioButtonListItem.module.scss +71 -71
  44. package/dist/components/Select.md +28 -28
  45. package/dist/components/Select.module.scss +100 -101
  46. package/dist/components/Textarea.md +27 -27
  47. package/dist/components/Textarea.module.scss +72 -64
  48. package/dist/components/Theme.md +12 -12
  49. package/dist/components/Theme.module.scss +76 -76
  50. package/dist/components/WizardNavigation/Step.module.scss +75 -75
  51. package/dist/components/WizardNavigation.md +84 -84
  52. package/dist/components/WizardNavigation.module.scss +3 -3
  53. package/dist/fonts/Altis-Light.svg +326 -326
  54. package/dist/fonts/open-sans-v27-latin-ext_latin-300.svg +346 -346
  55. package/dist/fonts/open-sans-v27-latin-ext_latin-300italic.svg +377 -377
  56. package/dist/fonts/open-sans-v27-latin-ext_latin-700.svg +349 -349
  57. package/dist/fonts/open-sans-v27-latin-ext_latin-700italic.svg +379 -379
  58. package/dist/fonts/open-sans-v27-latin-ext_latin-italic.svg +379 -379
  59. package/dist/fonts/open-sans-v27-latin-ext_latin-regular.svg +349 -349
  60. package/dist/images/dibk-logo-mobile.svg +91 -91
  61. package/dist/images/dibk-logo.svg +991 -991
  62. package/dist/images/spinner.svg +56 -56
  63. package/dist/style/abstracts/_all.scss +1 -1
  64. package/dist/style/abstracts/mixins/_all.scss +12 -12
  65. package/dist/style/abstracts/mixins/_animation.scss +6 -6
  66. package/dist/style/abstracts/mixins/_appearance.scss +5 -5
  67. package/dist/style/abstracts/mixins/_border-radius.scss +31 -31
  68. package/dist/style/abstracts/mixins/_box-shadow.scss +5 -5
  69. package/dist/style/abstracts/mixins/_box-sizing.scss +5 -5
  70. package/dist/style/abstracts/mixins/_calc.scss +5 -5
  71. package/dist/style/abstracts/mixins/_keyframes.scss +14 -14
  72. package/dist/style/abstracts/mixins/_opacity.scss +5 -5
  73. package/dist/style/abstracts/mixins/_placeholder.scss +17 -17
  74. package/dist/style/abstracts/mixins/_scrollbar.scss +26 -26
  75. package/dist/style/abstracts/mixins/_transform.scss +6 -6
  76. package/dist/style/abstracts/mixins/_transition.scss +34 -34
  77. package/dist/style/abstracts/variables/_all.scss +2 -2
  78. package/dist/style/abstracts/variables/_colors.scss +29 -29
  79. package/dist/style/abstracts/variables/_typography.scss +1 -1
  80. package/dist/style/abstracts/variables/_viewports.scss +14 -14
  81. package/dist/style/base/_all.scss +1 -1
  82. package/dist/style/base/_reset.scss +15 -15
  83. package/dist/style/base/_typography.scss +6 -6
  84. package/dist/style/base/fonts.css +95 -95
  85. package/dist/style/global.scss +3 -3
  86. package/dist/style/layout/_containers.scss +9 -9
  87. package/package.json +43 -42
package/dist/components/Button.module.scss CHANGED
@@ -1,216 +1,232 @@
1
- @import "../style/global.scss";
2
- @include keyframes(pushnext) {
3
- 0% {
4
- @include transform(rotate(45deg) translate3d(0, 0, 0));
5
- }
6
-
7
- 50% {
8
- @include transform(rotate(45deg) translate3d(2px, -2px, 0));
9
- }
10
-
11
- 100% {
12
- @include transform(rotate(45deg) translate3d(0, 0, 0));
13
- }
14
- }
15
- @include keyframes(pushprev) {
16
- 0% {
17
- @include transform(rotate(-135deg) translate3d(0, 0, 0));
18
- }
19
-
20
- 50% {
21
- @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
22
- }
23
-
24
- 100% {
25
- @include transform(rotate(-135deg) translate3d(0, 0, 0));
26
- }
27
- }
28
-
29
- :local(.button) {
30
- @include appearance(none);
31
- @include border-radius(0);
32
- @include transition(
33
- filter 300ms ease-out,
34
- background-color 300ms ease-out,
35
- color 300ms ease-out,
36
- border-color 300ms ease-out
37
- );
38
- font-family: "Altis", sans-serif;
39
- border-style: solid;
40
- border-width: 1px;
41
- $border-color: $color-primary;
42
- cursor: pointer;
43
- line-height: 1;
44
- position: relative;
45
- text-align: center;
46
- text-decoration: none;
47
- display: inline-block;
48
- margin-right: 5px;
49
- margin-bottom: 5px;
50
- font-size: 20px;
51
- font-weight: 500;
52
-
53
- &:local(.hasTheme) {
54
- &:hover,
55
- &:focus {
56
- filter: brightness(90%);
57
- }
58
-
59
- &:active {
60
- filter: brightness(85%);
61
- }
62
- }
63
-
64
- &:local(.regular) {
65
- padding: 17px 32px;
66
- }
67
-
68
- &:local(.small) {
69
- padding: 6px 32px;
70
- min-width: 80px;
71
- line-height: 21px;;
72
- }
73
-
74
- &:local(.default) {
75
- background-color: #fff;
76
- color: $color-primary;
77
- &:not(:local(.hasTheme)) {
78
- &:hover:not(:local(.noHover)),
79
- &:active {
80
- background-color: $color-primary;
81
- color: #fff;
82
- &:after,
83
- &:before {
84
- border-color: #fff;
85
- }
86
- }
87
- }
88
- }
89
-
90
- &:local(.primary) {
91
- background-color: $color-primary;
92
- color: #fff;
93
- &:not(:local(.hasTheme)) {
94
- &:hover:not(:local(.noHover)),
95
- &:active {
96
- background-color: #fff;
97
- color: $color-primary;
98
- &:after,
99
- &:before {
100
- border-color: $color-primary;
101
- }
102
- }
103
- }
104
- }
105
-
106
- &:disabled {
107
- &:local(.hasTheme),
108
- &:not(:local(.hasTheme)) {
109
- &:local(.default) {
110
- background-color: #fff;
111
- cursor: default;
112
- opacity: 0.6;
113
- color: #afaba8;
114
- border: 1px solid #e5e3e1;
115
- &:hover,
116
- &:focus,
117
- &:active {
118
- background-color: #fff;
119
- cursor: default;
120
- opacity: 0.6;
121
- color: #afaba8;
122
- border: 1px solid #e5e3e1;
123
- &:before,
124
- &:after {
125
- border-color: #afaba8;
126
- }
127
- }
128
- &:before,
129
- &:after {
130
- border-color: #afaba8;
131
- }
132
- }
133
- &:local(.primary) {
134
- background-color: $color-primary;
135
- cursor: default;
136
- opacity: 0.6;
137
- color: #fff;
138
- border: 1px solid $color-primary;
139
- &:hover,
140
- &:focus,
141
- &:active {
142
- background-color: $color-primary;
143
- cursor: default;
144
- opacity: 0.6;
145
- color: #fff;
146
- border: 1px solid $color-primary;
147
- &:before,
148
- &:after {
149
- border-color: $color-primary;
150
- }
151
- }
152
- &:before,
153
- &:after {
154
- border-color: $color-primary;
155
- }
156
- }
157
- }
158
- }
159
-
160
- &:local(.rounded){
161
- border-radius: 20px;
162
- }
163
-
164
- &:local(.hasArrowLeft) {
165
- &:before {
166
- @include transform(rotate(-135deg));
167
- @include calc("top", "50% - 0.3rem");
168
- content: " ";
169
- display: inline-block;
170
- position: absolute;
171
- left: 1em;
172
- right: auto;
173
- width: 0.5rem;
174
- height: 0.5rem;
175
- vertical-align: middle;
176
- border: 2px solid white;
177
- border-width: 2px 2px 0 0;
178
- margin-right: 1em;
179
- }
180
-
181
- &:hover {
182
- &:before {
183
- @include animation(pushprev 0.8s linear infinite);
184
- }
185
- }
186
- &:local(.default) {
187
- &:before {
188
- border-color: $color-primary;
189
- }
190
- }
191
- }
192
-
193
- &:local(.hasArrowRight) {
194
- &:after {
195
- @include transform(rotate(45deg));
196
- @include calc("top", "50% - 0.3rem");
197
- content: " ";
198
- display: inline-block;
199
- position: absolute;
200
- left: auto;
201
- right: 1em;
202
- width: 0.5rem;
203
- height: 0.5rem;
204
- vertical-align: middle;
205
- border: 2px solid white;
206
- border-width: 2px 2px 0 0;
207
- margin-left: 1em;
208
- }
209
-
210
- &:hover {
211
- &:after {
212
- @include animation(pushnext 0.8s linear infinite);
213
- }
214
- }
215
- }
216
- }
1
+ @import "../style/global.scss";
2
+ @include keyframes(pushnext) {
3
+ 0% {
4
+ @include transform(rotate(45deg) translate3d(0, 0, 0));
5
+ }
6
+
7
+ 50% {
8
+ @include transform(rotate(45deg) translate3d(2px, -2px, 0));
9
+ }
10
+
11
+ 100% {
12
+ @include transform(rotate(45deg) translate3d(0, 0, 0));
13
+ }
14
+ }
15
+ @include keyframes(pushprev) {
16
+ 0% {
17
+ @include transform(rotate(-135deg) translate3d(0, 0, 0));
18
+ }
19
+
20
+ 50% {
21
+ @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
22
+ }
23
+
24
+ 100% {
25
+ @include transform(rotate(-135deg) translate3d(0, 0, 0));
26
+ }
27
+ }
28
+
29
+ :local(.button) {
30
+ @include appearance(none);
31
+ @include border-radius(0);
32
+ @include transition(
33
+ filter 300ms ease-out,
34
+ background-color 300ms ease-out,
35
+ color 300ms ease-out,
36
+ border-color 300ms ease-out
37
+ );
38
+ font-family: "Altis", sans-serif;
39
+ border-style: solid;
40
+ border-width: 1px;
41
+ $border-color: $color-primary;
42
+ cursor: pointer;
43
+ line-height: 1;
44
+ position: relative;
45
+ text-align: center;
46
+ text-decoration: none;
47
+ display: inline-block;
48
+ margin-right: 5px;
49
+ margin-bottom: 5px;
50
+ font-size: 17px;
51
+ font-weight: 500;
52
+ @media only screen and (min-width: $screen-sm) {
53
+ font-size: 20px;
54
+ }
55
+
56
+ &:local(.hasTheme) {
57
+ &:hover,
58
+ &:focus {
59
+ filter: brightness(90%);
60
+ }
61
+
62
+ &:active {
63
+ filter: brightness(85%);
64
+ }
65
+ }
66
+
67
+ &:local(.regular) {
68
+ padding: 14px 24px;
69
+ @media only screen and (min-width: $screen-sm) {
70
+ padding: 17px 32px;
71
+ }
72
+ }
73
+
74
+ &:local(.small) {
75
+ padding: 6px 24px;
76
+ min-width: 80px;
77
+ line-height: 18px;
78
+ @media only screen and (min-width: $screen-sm) {
79
+ line-height: 21px;
80
+ padding: 6px 32px;
81
+ }
82
+ }
83
+
84
+ &:local(.default) {
85
+ background-color: #fff;
86
+ color: $color-primary;
87
+ &:not(:local(.hasTheme)) {
88
+ &:hover:not(:local(.noHover)),
89
+ &:active {
90
+ background-color: $color-primary;
91
+ color: #fff;
92
+ &:after,
93
+ &:before {
94
+ border-color: #fff;
95
+ }
96
+ }
97
+ }
98
+ }
99
+
100
+ &:local(.primary) {
101
+ background-color: $color-primary;
102
+ color: #fff;
103
+ &:not(:local(.hasTheme)) {
104
+ &:hover:not(:local(.noHover)),
105
+ &:active {
106
+ background-color: #fff;
107
+ color: $color-primary;
108
+ &:after,
109
+ &:before {
110
+ border-color: $color-primary;
111
+ }
112
+ }
113
+ }
114
+ }
115
+
116
+ &:disabled {
117
+ &:local(.hasTheme),
118
+ &:not(:local(.hasTheme)) {
119
+ &:local(.default) {
120
+ background-color: #fff;
121
+ cursor: default;
122
+ opacity: 0.6;
123
+ color: #afaba8;
124
+ border: 1px solid #e5e3e1;
125
+ &:hover,
126
+ &:focus,
127
+ &:active {
128
+ background-color: #fff;
129
+ cursor: default;
130
+ opacity: 0.6;
131
+ color: #afaba8;
132
+ border: 1px solid #e5e3e1;
133
+ &:before,
134
+ &:after {
135
+ border-color: #afaba8;
136
+ }
137
+ }
138
+ &:before,
139
+ &:after {
140
+ border-color: #afaba8;
141
+ }
142
+ }
143
+ &:local(.primary) {
144
+ background-color: $color-primary;
145
+ cursor: default;
146
+ opacity: 0.6;
147
+ color: #fff;
148
+ border: 1px solid $color-primary;
149
+ &:hover,
150
+ &:focus,
151
+ &:active {
152
+ background-color: $color-primary;
153
+ cursor: default;
154
+ opacity: 0.6;
155
+ color: #fff;
156
+ border: 1px solid $color-primary;
157
+ &:before,
158
+ &:after {
159
+ border-color: $color-primary;
160
+ }
161
+ }
162
+ &:before,
163
+ &:after {
164
+ border-color: $color-primary;
165
+ }
166
+ }
167
+ }
168
+ }
169
+
170
+ &:local(.rounded) {
171
+ border-radius: 20px;
172
+ }
173
+
174
+ &:local(.hasArrowLeft) {
175
+ &:before {
176
+ @include transform(rotate(-135deg));
177
+ @include calc("top", "50% - 0.4rem");
178
+ content: " ";
179
+ display: inline-block;
180
+ position: absolute;
181
+ right: auto;
182
+ left: 0.55em;
183
+ width: 0.5rem;
184
+ height: 0.5rem;
185
+ vertical-align: middle;
186
+ border: 2px solid white;
187
+ border-width: 2px 2px 0 0;
188
+ margin-right: 1em;
189
+ @media only screen and (min-width: $screen-sm) {
190
+ left: 1em;
191
+ }
192
+ }
193
+
194
+ &:hover {
195
+ &:before {
196
+ @include animation(pushprev 0.8s linear infinite);
197
+ }
198
+ }
199
+ &:local(.default) {
200
+ &:before {
201
+ border-color: $color-primary;
202
+ }
203
+ }
204
+ }
205
+
206
+ &:local(.hasArrowRight) {
207
+ &:after {
208
+ @include transform(rotate(45deg));
209
+ @include calc("top", "50% - 0.4rem");
210
+ content: " ";
211
+ display: inline-block;
212
+ position: absolute;
213
+ left: auto;
214
+ right: 0.55em;
215
+ width: 0.5rem;
216
+ height: 0.5rem;
217
+ vertical-align: middle;
218
+ border: 2px solid white;
219
+ border-width: 2px 2px 0 0;
220
+ margin-left: 1em;
221
+ @media only screen and (min-width: $screen-sm) {
222
+ right: 1em;
223
+ }
224
+ }
225
+
226
+ &:hover {
227
+ &:after {
228
+ @include animation(pushnext 0.8s linear infinite);
229
+ }
230
+ }
231
+ }
232
+ }