dibk-design 4.1.0 → 4.2.0
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.
- package/dist/assets/svg/error-sign.svg +15 -0
- package/dist/components/CheckBoxInput.module.scss +2 -0
- package/dist/components/CheckBoxListItem.module.scss +2 -1
- package/dist/components/DragAndDropFileInput.module.scss +3 -2
- package/dist/components/ErrorMessage.js +6 -1
- package/dist/components/ErrorMessage.module.scss +21 -9
- package/dist/components/Paper.module.scss +1 -1
- package/dist/components/RadioButtonInput.module.scss +2 -0
- package/dist/components/RadioButtonListItem.module.scss +2 -1
- package/dist/components/Table.module.scss +3 -2
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
|
|
2
|
+
<g clip-path="url(#clip0_1089_7422)">
|
|
3
|
+
<mask id="mask0_1089_7422" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" style="mask-type: alpha;">
|
|
4
|
+
<rect width="20" height="20" style="fill: white;"></rect>
|
|
5
|
+
</mask>
|
|
6
|
+
<g mask="url(#mask0_1089_7422)">
|
|
7
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.4775 4.4775 0 10 0C15.5225 0 20 4.4775 20 10C20 15.5225 15.5225 20 10 20C4.4775 20 0 15.5225 0 10ZM11 14.0766C11 14.8122 10.5188 15.3333 9.83335 15.3333C9.13335 15.3333 8.66669 14.8122 8.66669 14.0766C8.66669 13.341 9.13335 12.8046 9.83335 12.8046C10.5188 12.8046 11 13.341 11 14.0766ZM10.65 11.9463H8.98752L8.75419 4.66663H10.8834L10.65 11.9463Z" style="fill: rgb(219, 0, 0);"></path>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
<defs>
|
|
11
|
+
<clipPath id="clip0_1089_7422">
|
|
12
|
+
<rect width="20" height="20" fill="white"></rect>
|
|
13
|
+
</clipPath>
|
|
14
|
+
</defs>
|
|
15
|
+
</svg>
|
|
@@ -11,11 +11,12 @@
|
|
|
11
11
|
|
|
12
12
|
.dragAndDropContainer {
|
|
13
13
|
@include transition(all 0.1s ease-in-out);
|
|
14
|
-
border: 2px dashed
|
|
14
|
+
border: 2px dashed $color-secondary-light;
|
|
15
15
|
border-radius: 20px;
|
|
16
16
|
width: 100%;
|
|
17
17
|
padding: 20px;
|
|
18
18
|
text-align: center;
|
|
19
|
+
background-color: #fff;
|
|
19
20
|
|
|
20
21
|
input {
|
|
21
22
|
display: none;
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
&.highlighted {
|
|
29
|
-
background: $color-
|
|
30
|
+
background: $color-secondary-x-light;
|
|
30
31
|
border-color: $color-primary;
|
|
31
32
|
}
|
|
32
33
|
}
|
|
@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _theme = require("../functions/theme");
|
|
10
10
|
var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
|
|
11
|
+
var _errorSign = _interopRequireDefault(require("../assets/svg/error-sign.svg?url"));
|
|
11
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
13
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
14
|
const ErrorMessage = props => {
|
|
@@ -26,7 +27,11 @@ const ErrorMessage = props => {
|
|
|
26
27
|
};
|
|
27
28
|
return _react.default.createElement("span", _extends({
|
|
28
29
|
"aria-live": "polite"
|
|
29
|
-
}, getErrorElementProps()),
|
|
30
|
+
}, getErrorElementProps()), _react.default.createElement("img", {
|
|
31
|
+
src: _errorSign.default,
|
|
32
|
+
alt: "",
|
|
33
|
+
className: _ErrorMessageModule.default.errorSign
|
|
34
|
+
}), props.content ? props.content : "");
|
|
30
35
|
};
|
|
31
36
|
ErrorMessage.propTypes = {
|
|
32
37
|
id: _propTypes.default.string,
|
|
@@ -1,16 +1,28 @@
|
|
|
1
1
|
@import "../style/global.scss";
|
|
2
2
|
|
|
3
|
+
@keyframes messageIn {
|
|
4
|
+
0% {
|
|
5
|
+
opacity: 0;
|
|
6
|
+
transform: translateX(2em);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
3
10
|
.errorMessage {
|
|
4
|
-
display:
|
|
5
|
-
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
font-family: $default-font;
|
|
6
14
|
font-size: 16px;
|
|
7
15
|
font-weight: 400;
|
|
8
|
-
line-height:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
line-height: 24px;
|
|
17
|
+
letter-spacing: 0.01em;
|
|
18
|
+
color: $color-error;
|
|
19
|
+
margin: 12px 0 0;
|
|
20
|
+
animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
|
|
21
|
+
.errorSign {
|
|
22
|
+
width: 20px;
|
|
23
|
+
height: 20px;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
vertical-align: middle;
|
|
26
|
+
margin-right: 0.5em;
|
|
15
27
|
}
|
|
16
28
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
font-weight: normal;
|
|
10
10
|
font-style: italic;
|
|
11
11
|
line-height: 1;
|
|
12
|
-
font-size:
|
|
12
|
+
font-size: 17px;
|
|
13
13
|
color: $color-primary;
|
|
14
14
|
}
|
|
15
15
|
&.captionSide-top {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
}
|
|
42
42
|
thead {
|
|
43
43
|
tr {
|
|
44
|
-
background-color:
|
|
44
|
+
background-color: $color-default-background;
|
|
45
45
|
border: 1px solid $color-secondary;
|
|
46
46
|
th {
|
|
47
47
|
text-align: left;
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
}
|
|
53
53
|
tbody {
|
|
54
54
|
tr {
|
|
55
|
+
background-color: $color-default-background;
|
|
55
56
|
border: 1px solid $color-secondary;
|
|
56
57
|
td {
|
|
57
58
|
padding: 10px;
|