@steroidsjs/bootstrap 3.0.0-beta.26 → 3.0.0-beta.27

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 (32) hide show
  1. package/content/Accordion/AccordionItemView.js +1 -1
  2. package/content/Accordion/AccordionItemView.scss +11 -2
  3. package/content/Accordion/AccordionView.scss +2 -2
  4. package/content/Alert/AlertView.scss +13 -4
  5. package/content/Avatar/AvatarView.scss +0 -1
  6. package/content/Badge/BadgeView.scss +19 -1
  7. package/content/Calendar/CaptionElement.scss +4 -5
  8. package/content/Detail/DetailView.scss +74 -52
  9. package/content/Icon/IconView.js +2 -2
  10. package/form/Button/ButtonView.js +5 -2
  11. package/form/Button/ButtonView.scss +41 -3
  12. package/form/CheckboxField/CheckboxFieldView.scss +10 -11
  13. package/form/FieldLayout/FieldLayoutView.js +11 -3
  14. package/form/FieldLayout/FieldLayoutView.scss +128 -24
  15. package/form/InputField/InputFieldView.js +32 -13
  16. package/form/InputField/InputFieldView.scss +270 -98
  17. package/form/NumberField/NumberFieldView.js +19 -13
  18. package/form/NumberField/NumberFieldView.scss +213 -88
  19. package/form/RadioListField/RadioListFieldView.js +7 -3
  20. package/form/RadioListField/RadioListFieldView.scss +133 -1
  21. package/form/TextField/TextFieldView.js +10 -2
  22. package/form/TextField/TextFieldView.scss +145 -2
  23. package/icons/index.js +3 -0
  24. package/icons/svgs/arrow.svg +3 -0
  25. package/icons/svgs/field-close.svg +4 -0
  26. package/icons/svgs/user.svg +4 -0
  27. package/package.json +4 -3
  28. package/scss/mixins/button.scss +8 -8
  29. package/scss/variables/common/colors.scss +41 -38
  30. package/scss/variables/components/input.scss +1 -1
  31. package/scss/variables/index.scss +1 -0
  32. package/scss/variables/normalize.scss +21 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.0-beta.26",
3
+ "version": "3.0.0-beta.27",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -23,6 +23,7 @@
23
23
  "date-fns": "^2.29.3",
24
24
  "lodash": "^4.17.20",
25
25
  "lodash-es": "^4.17.20",
26
+ "normalize.css": "^8.0.1",
26
27
  "rc-slider": "^9.7.4",
27
28
  "react": "^18.2.0",
28
29
  "react-collapse": "^5.0.1",
@@ -34,7 +35,7 @@
34
35
  "react-use": "^17.4.0"
35
36
  },
36
37
  "devDependencies": {
37
- "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9",
38
+ "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13",
38
39
  "@steroidsjs/eslint-config": "^2.1.4",
39
40
  "@types/enzyme": "^3.10.8",
40
41
  "@types/googlemaps": "^3.43.3",
@@ -52,6 +53,6 @@
52
53
  "typescript": "^4.9.5"
53
54
  },
54
55
  "peerDependencies": {
55
- "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9"
56
+ "@steroidsjs/core": "^3.0 || >=3.0.0-beta.13"
56
57
  }
57
58
  }
package/scss/mixins/button.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  background-color: map-get($colorMap, color);
3
3
  color: map-get($colorMap, text-color);
4
4
 
5
- &:hover {
5
+ &:not(:disabled):hover {
6
6
  background-color: map-get($colorMap, color-dark);
7
7
  }
8
- &:focus,
9
- &:focus-visible {
8
+ &:not(:disabled):focus,
9
+ &:not(:disabled):focus-visible {
10
10
  border: 4px solid map-get($colorMap, color-light);
11
11
  }
12
- &:active {
12
+ &:not(:disabled):active {
13
13
  background-color: map-get($colorMap, color-light);
14
14
  }
15
15
 
@@ -31,15 +31,15 @@
31
31
  color: map-get($colorMap, color);
32
32
  border: 1px solid map-get($colorMap, color);
33
33
 
34
- &:hover {
34
+ &:not(:disabled):hover {
35
35
  color: map-get($colorMap, color-dark);
36
36
  border-color: map-get($colorMap, color-dark);
37
37
  }
38
- &:focus {
38
+ &:not(:disabled):focus {
39
39
  box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
40
40
  border: none;
41
41
  }
42
- &:active {
42
+ &:not(:disabled):active {
43
43
  color: map-get($colorMap, color-light);
44
44
  border-color: map-get($colorMap, color-light);
45
45
  box-shadow: none;
@@ -47,7 +47,7 @@
47
47
 
48
48
  @if ($colorName == "basic") {
49
49
  color: $text-color;
50
- }
50
+ }
51
51
 
52
52
  #{$root}__loader {
53
53
  svg {
package/scss/variables/common/colors.scss CHANGED
@@ -23,14 +23,15 @@
23
23
  --light-gray: #f8f8f8;
24
24
  --dark: #6f6b76;
25
25
  --light: #9088a1;
26
- --text-color: #312C3A;
26
+ --text-color: #312c3a;
27
27
  --background-color: #fff;
28
- --is-dark: 'false';
28
+ --is-dark: "false";
29
29
  --border-color: #eef1f2;
30
30
  --border-color-hover: #e5e9eb;
31
31
  --placeholder-color: rgba(0, 0, 0, 0.3);
32
32
  --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
33
33
  --background-disabled-color: #eef1f2;
34
+ --element-background-color: #FFFFFF;
34
35
  }
35
36
 
36
37
  html[data-theme="dark"] {
@@ -58,51 +59,53 @@ html[data-theme="dark"] {
58
59
  --light-gray: #928b9d;
59
60
  --dark: #6b6477;
60
61
  --light: #b7afc7;
61
- --text-color: #FFFFFF;
62
+ --text-color: #ffffff;
62
63
  --background-color: #414141;
63
- --is-dark: 'true';
64
- --border-color: #eef1f2;
64
+ --is-dark: "true";
65
+ --border-color: #5B5C6B;
65
66
  --border-color-hover: #4e4f57;
66
67
  --placeholder-color: rgba(255, 255, 255, 0.3);
67
68
  --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
68
69
  --background-disabled-color: #5b5c6b;
70
+ --element-background-color: #414141;
69
71
  }
70
72
 
71
73
  /*
72
74
  * SCSS variables implementation
73
75
  */
74
- $primary: var(--primary) !default;
75
- $primary-dark: var(--primary-dark) !default;
76
- $primary-light: var(--primary-light) !default;
77
- $secondary: var(--secondary) !default;
78
- $secondary-dark: var(--secondary-dark) !default;
79
- $secondary-light: var(--secondary-light) !default;
80
- $success: var(--success) !default;
81
- $success-dark: var(--success-dark) !default;
82
- $success-light: var(--success-light) !default;
83
- $danger: var(--danger) !default;
84
- $danger-dark: var(--danger-dark) !default;
85
- $danger-light: var(--danger-light) !default;
86
- $info: var(--info) !default;
87
- $info-dark: var(--info-dark) !default;
88
- $info-light: var(--info-light) !default;
89
- $warning: var(--warning) !default;
90
- $warning-dark: var(--warning-dark) !default;
91
- $warning-light: var(--warning-light) !default;
92
- $graphite: var(--graphite) !default;
93
- $gray-dark: var(--gray-dark) !default;
94
- $gray: var(--gray) !default;
95
- $light-gray: var(--light-gray) !default;
96
- $dark: var(--dark) !default;
97
- $light: var(--light) !default;
98
- $text-color: var(--text-color) !default;
99
- $background-color: var(--background-color) !default;
100
- $is-dark: var(--is-dark) !default;
101
- $border-color: var(--border-color) !default;
102
- $border-color-hover: var(--border-color-hover) !default;
103
- $placeholder-color: var(--placeholder-color) !default;
104
- $placeholder-disabled-color: var(--placeholder-disabled-color) !default;
105
- $background-disabled-color: var(--background-disabled-color) !default;
76
+ $primary: var(--primary);
77
+ $primary-dark: var(--primary-dark);
78
+ $primary-light: var(--primary-light);
79
+ $secondary: var(--secondary);
80
+ $secondary-dark: var(--secondary-dark);
81
+ $secondary-light: var(--secondary-light);
82
+ $success: var(--success);
83
+ $success-dark: var(--success-dark);
84
+ $success-light: var(--success-light);
85
+ $danger: var(--danger);
86
+ $danger-dark: var(--danger-dark);
87
+ $danger-light: var(--danger-light);
88
+ $info: var(--info);
89
+ $info-dark: var(--info-dark);
90
+ $info-light: var(--info-light);
91
+ $warning: var(--warning);
92
+ $warning-dark: var(--warning-dark);
93
+ $warning-light: var(--warning-light);
94
+ $graphite: var(--graphite);
95
+ $gray-dark: var(--gray-dark);
96
+ $gray: var(--gray);
97
+ $light-gray: var(--light-gray);
98
+ $dark: var(--dark);
99
+ $light: var(--light);
100
+ $text-color: var(--text-color);
101
+ $background-color: var(--background-color);
102
+ $is-dark: var(--is-dark);
103
+ $border-color: var(--border-color);
104
+ $border-color-hover: var(--border-color-hover);
105
+ $placeholder-color: var(--placeholder-color);
106
+ $placeholder-disabled-color: var(--placeholder-disabled-color);
107
+ $background-disabled-color: var(--background-disabled-color);
108
+ $element-background-color: var(--element-background-color);
106
109
 
107
110
  /*
108
111
  * Common colors
@@ -117,7 +120,7 @@ $white: #fff !default;
117
120
 
118
121
  $link-color: #2ba3fb !default;
119
122
 
120
- $gradient-blue: linear-gradient(180deg, #651FFF, #BA9BFF) !default;
123
+ $gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
121
124
 
122
125
  $color-themes: () !default;
123
126
  $color-themes: map-merge(
package/scss/variables/components/input.scss CHANGED
@@ -64,4 +64,4 @@ $input-border-radius: 4px !default;
64
64
  $input-padding-y: 0 !default;
65
65
  $input-padding-x: 8px !default;
66
66
  $input-addon-padding: 0.6rem !default;
67
- $input-text-padding: 0.4rem !default;
67
+ $input-text-padding: 0.4rem !default;
package/scss/variables/index.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @import 'normalize.scss';
1
2
  @import 'common/colors';
2
3
  @import 'common/media';
3
4
  @import 'common/typography';
package/scss/variables/normalize.scss ADDED
@@ -0,0 +1,21 @@
1
+ @import-normalize;
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ a {
10
+ text-decoration: none;
11
+ color: inherit;
12
+ font-family: inherit;
13
+ }
14
+
15
+ button {
16
+ font-family: inherit;
17
+ }
18
+
19
+ input {
20
+ outline: none;
21
+ }