@steroidsjs/bootstrap 3.0.0-beta.62 → 3.0.0-beta.64

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 (46) hide show
  1. package/content/Accordion/AccordionItemView.scss +96 -53
  2. package/content/Accordion/AccordionView.scss +23 -9
  3. package/content/Alert/AlertView.scss +48 -18
  4. package/content/Avatar/AvatarView.scss +1 -1
  5. package/content/Badge/BadgeView.scss +10 -4
  6. package/content/Calendar/CalendarView.scss +7 -3
  7. package/content/Calendar/CaptionElement.scss +1 -1
  8. package/content/Card/CardView.scss +5 -5
  9. package/content/Detail/DetailView.scss +7 -10
  10. package/content/DropDown/DropDownView.js +1 -0
  11. package/content/DropDown/DropDownView.scss +20 -8
  12. package/form/AutoCompleteField/AutoCompleteFieldView.scss +5 -5
  13. package/form/CheckboxField/CheckboxFieldView.scss +2 -2
  14. package/form/DateField/DateFieldView.js +1 -1
  15. package/form/DateField/DateFieldView.scss +9 -1
  16. package/form/DateRangeField/DateRangeFieldView.js +1 -1
  17. package/form/DateRangeField/DateRangeFieldView.scss +4 -0
  18. package/form/DateTimeField/DateTimeFieldView.js +1 -1
  19. package/form/DateTimeField/DateTimeFieldView.scss +5 -0
  20. package/form/DateTimeRangeField/DateTimeRangeFieldView.js +1 -1
  21. package/form/DateTimeRangeField/DateTimeRangeFieldView.scss +5 -0
  22. package/form/DropDownField/DropDownFieldView.scss +6 -13
  23. package/form/DropDownFieldItem/DropDownFieldItemView.scss +2 -2
  24. package/form/FieldList/FieldListView.scss +63 -55
  25. package/form/FileField/FileFieldView.scss +34 -34
  26. package/form/InputField/InputFieldView.scss +7 -7
  27. package/form/NumberField/NumberFieldView.scss +7 -7
  28. package/form/PasswordField/PasswordFieldView.scss +16 -11
  29. package/form/RadioField/RadioFieldView.scss +6 -6
  30. package/form/TextField/TextFieldView.scss +7 -7
  31. package/index.d.ts +3 -0
  32. package/index.js +3 -0
  33. package/index.scss +3 -2
  34. package/layout/ProgressBar/LineProgressBarView.scss +1 -1
  35. package/list/FlexGrid/FlexGridView.d.ts +2 -0
  36. package/list/FlexGrid/FlexGridView.js +71 -0
  37. package/list/FlexGrid/FlexGridView.scss +57 -0
  38. package/list/Grid/GridView.scss +12 -9
  39. package/list/Grid/views/ContentColumnView/ContentColumnView.scss +1 -1
  40. package/list/Pagination/PaginationButtonView.scss +21 -23
  41. package/modal/Modal/ModalView.scss +11 -1
  42. package/package.json +3 -3
  43. package/scss/mixins/date.scss +38 -17
  44. package/scss/variables/common/colors.scss +84 -72
  45. package/scss/variables/common/media.scss +1 -0
  46. package/scss/variables/components/calendar.scss +0 -1
package/scss/variables/common/colors.scss CHANGED
@@ -1,3 +1,4 @@
1
+ //** Themed colors **//
1
2
  :root {
2
3
  --primary: #651fff;
3
4
  --primary-dark: #5218d0;
@@ -17,42 +18,48 @@
17
18
  --warning: #ffe457;
18
19
  --warning-dark: #ebd251;
19
20
  --warning-light: #fff6c6;
21
+
22
+ --graphite-dark: #2b2828;
20
23
  --graphite: #323232;
24
+ --mouse: #626262;
21
25
  --gray-dark: #cbd5db;
22
26
  --gray: #dbe2e6;
23
27
  --light-gray: #f1f5f7;
24
- --dark: #6f6b76;
25
- --light: #9088a1;
28
+
29
+ --additional-gray-dark: #26272f;
30
+ --additional-light-gray: #f8f8f8;
31
+ --additional-light-blue: #f9fcff;
32
+
26
33
  --text-color: #312c3a;
27
- --background-color: #fff;
28
- --is-dark: "false";
29
- --border-color: #dbe2e6;
30
- --border-color-hover: #e5e9eb;
31
- --placeholder-color: rgba(0, 0, 0, 0.3);
32
- --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
33
- --background-disabled-color: #f1f5f7;
34
+ --link-color: #2BA3FB;
35
+ --link-color-hover: #00c2ff;
36
+
37
+ --background-color: #EDF0F1;
38
+
39
+ --element-placeholder-color: rgba(0, 0, 0, 0.3);
40
+ --element-placeholder-color-disabled: rgba(0, 0, 0, 0.1);
41
+ --element-border-color: #dbe2e6;
42
+ --element-border-color-hover: #cbd5db;
34
43
  --element-background-color: #FFFFFF;
35
- --additional-gray-dark: #6F6B76;
36
- --additional-gray: #E6E6E6;
37
- --additional-light-gray: #F8F8F8;
38
- --additional-light: #9088A1;
39
- --additional-light-blue: #F9FCFF;
40
- --scroll-thumb-color: #e5e9eb;
41
- --scroll-track-color: #f5f8fa;
44
+ --element-background-color-disabled: #f1f5f7;
45
+ --element-field-background-color: #FFFFFF;
46
+
47
+ --scroll-thumb-color: #cbd5db;
48
+ --scroll-track-color: #f1f5f7;
42
49
  }
43
50
 
44
51
  html[data-theme="dark"] {
45
- --primary: #8b57ff;
46
- --primary-dark: #6648a7;
47
- --primary-light: #ba9bff;
52
+ --primary: #9362ff;
53
+ --primary-dark: #8256e4;
54
+ --primary-light: #b898ff;
48
55
  --secondary: #9ea8db;
49
- --secondary-dark: #616a95;
56
+ --secondary-dark: #727eb7;
50
57
  --secondary-light: #bcc3e9;
51
- --success: #3cf25a;
52
- --success-dark: #34cc4d;
53
- --success-light: #74ff8b;
54
- --danger: #fc6666;
55
- --danger-dark: #dc5858;
58
+ --success: #5ecc71;
59
+ --success-dark: #5b9966;
60
+ --success-light: #89e699;
61
+ --danger: #f76e6e;
62
+ --danger-dark: #e95b5b;
56
63
  --danger-light: #ffa1a1;
57
64
  --info: #9ae1f1;
58
65
  --info-dark: #77c4d6;
@@ -60,33 +67,36 @@ html[data-theme="dark"] {
60
67
  --warning: #ffe457;
61
68
  --warning-dark: #ebd251;
62
69
  --warning-light: #fff6c8;
63
- --graphite: #414141;
64
- --gray-dark: #4e4f57;
65
- --gray: #5b5c6b;
66
- --light-gray: #928b9d;
67
- --dark: #6b6477;
68
- --light: #b7afc7;
70
+
71
+ --graphite-dark: #16171b;
72
+ --graphite: #191b1f;
73
+ --mouse: #adacac;
74
+ --gray-dark: #272a37;
75
+ --gray: #333646;
76
+ --light-gray: #4b4e5e;
77
+
78
+ --additional-gray-dark: #26272f;
79
+ --additional-light-gray: #f8f8f8;
80
+ --additional-light-blue: #f9fcff;
81
+
69
82
  --text-color: #ffffff;
70
- --background-color: #323030;
71
- --is-dark: "true";
72
- --border-color: #5B5C6B;
73
- --border-color-hover: #4e4f57;
74
- --placeholder-color: rgba(255, 255, 255, 0.3);
75
- --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
76
- --background-disabled-color: #5b5c6b;
77
- --element-background-color: #414141;
78
- --additional-gray-dark: #6B6477;
79
- --additional-gray: #595959;
80
- --additional-light-gray: #4A4B53;
81
- --additional-light: #B7AFC7;
82
- --additional-light-blue: #DAEAF6;
83
- --scroll-thumb-color: #5b5c6b;
84
- --scroll-track-color: #444147;
83
+ --link-color: #2BA3FB;
84
+ --link-color-hover: #00c2ff;
85
+
86
+ --background-color: #101216;
87
+
88
+ --element-placeholder-color: rgba(255, 255, 255, 0.3);
89
+ --element-placeholder-color-disabled: rgba(255, 255, 255, 0.1);
90
+ --element-border-color: #333646;
91
+ --element-border-color-hover: #272a37;
92
+ --element-background-color: #191B1F;
93
+ --element-background-color-disabled: #333646;
94
+ --element-field-background-color: #101216;
95
+
96
+ --scroll-thumb-color: #333646;
97
+ --scroll-track-color: #26272f;
85
98
  }
86
99
 
87
- /*
88
- * SCSS variables implementation
89
- */
90
100
  $primary: var(--primary);
91
101
  $primary-dark: var(--primary-dark);
92
102
  $primary-light: var(--primary-light);
@@ -105,34 +115,38 @@ $info-light: var(--info-light);
105
115
  $warning: var(--warning);
106
116
  $warning-dark: var(--warning-dark);
107
117
  $warning-light: var(--warning-light);
118
+
119
+ $graphite-dark: var(--graphite-dark);
108
120
  $graphite: var(--graphite);
121
+ $mouse: var(--mouse);
109
122
  $gray-dark: var(--gray-dark);
110
123
  $gray: var(--gray);
111
124
  $light-gray: var(--light-gray);
112
- $dark: var(--dark);
113
- $light: var(--light);
125
+
126
+ $additional-gray-dark: var(--additional-gray-dark);
127
+ $additional-light-gray: var(--additional-gray);
128
+ $additional-light-blue: var(--additional-light-blue);
129
+
114
130
  $text-color: var(--text-color);
115
- $text-color-revert: var(--text-color-revert);
131
+ $link-color: var(--link-color);
132
+ $link-color-hover: var(--link-color-hover);
133
+
116
134
  $background-color: var(--background-color);
117
- $is-dark: var(--is-dark);
118
- $border-color: var(--border-color);
119
- $border-color-hover: var(--border-color-hover);
120
- $placeholder-color: var(--placeholder-color);
121
- $placeholder-disabled-color: var(--placeholder-disabled-color);
122
- $background-disabled-color: var(--background-disabled-color);
135
+
136
+ $element-placeholder-color: var(--element-placeholder-color);
137
+ $element-placeholder-color-disabled: var(--element-placeholder-color-disabled);
138
+ $element-border-color: var(--element-border-color);
139
+ $element-border-color-hover: var(--element-border-color-hover);
123
140
  $element-background-color: var(--element-background-color);
124
- $additional-gray-dark: var(--additional-gray-dark);
125
- $additional-gray: var(--additional-gray);
126
- $additional-light-gray: var(--additional-light-gray);
127
- $additional-light: var(--additional-light);
128
- $additional-light-blue: var(--additional-light-blue);
141
+ $element-background-color-disabled: var(--element-background-color-disabled);
142
+ $element-field-background-color: var(--element-field-background-color);
143
+
144
+
129
145
  $scroll-thumb-color: var(--scroll-thumb-color);
130
146
  $scroll-track-color: var(--scroll-track-color);
147
+ //** Themed colors **//
131
148
 
132
- /*
133
- * Common colors
134
- */
135
-
149
+ //! Base colors !//
136
150
  $black: rgba(#000, 1) !default;
137
151
  $black-60: rgba(#000, 0.6) !default;
138
152
  $black-30: rgba(#000, 0.3) !default;
@@ -143,11 +157,9 @@ $white-60: rgba(#ffffff, 0.6) !default;
143
157
  $white-30: rgba(#ffffff, 0.3) !default;
144
158
  $white-10: rgba(#ffffff, 0.1) !default;
145
159
  $white-4: rgba(#ffffff, 0.04) !default;
146
-
147
- $link-color: #2ba3fb !default;
148
- $link-color-hover: #00c2ff !default;
149
-
150
- $gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
160
+ $gradient-blue: linear-gradient(180deg, #651fff, #ba9bff);
161
+ $static-text-color: #312C3A !default;
162
+ //! Base colors !//
151
163
 
152
164
  $color-themes: () !default;
153
165
  $color-themes: map-merge(
package/scss/variables/common/media.scss CHANGED
@@ -1,2 +1,3 @@
1
1
  $mobile-width: 540px !default;
2
2
  $tablet-width: 960px !default;
3
+ $desktop-width: 1920px !default;
package/scss/variables/components/calendar.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  $calendar-primary-color: $primary !default;
2
2
  $calendar-primary-light-color: $primary-light !default;
3
3
  $calendar-secondary-color: $border-default !default;
4
- $calendar-secondary-light-color: $light !default;
5
4
  $calendar-text-color: $heading !default;
6
5
  $calendar-selected-text-color: $white !default;
7
6