@infonomic/uikit 5.30.0 → 5.31.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/README.md
CHANGED
|
@@ -52,11 +52,12 @@ And then in your application in a global.css or other root CSS file...
|
|
|
52
52
|
|
|
53
53
|
```css
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
56
|
-
* colors, scales, utils etc., which can be
|
|
55
|
+
* Optional reset and core styles including var system for
|
|
56
|
+
* breakpoints, colors, scales, utils etc., which can be
|
|
57
57
|
* integrated with Tailwind (colors, breakpoints etc.) via
|
|
58
58
|
* Tailwind theme configuration.
|
|
59
59
|
*/
|
|
60
|
+
@import '@infonomic/uikit/reset.css';
|
|
60
61
|
@import '@infonomic/uikit/styles.css';
|
|
61
62
|
|
|
62
63
|
/**
|
|
@@ -98,33 +99,6 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
|
|
|
98
99
|
|
|
99
100
|
@custom-variant dark (&:is(.dark *));
|
|
100
101
|
|
|
101
|
-
/*
|
|
102
|
-
Set the utility class in Tailwind to match our own, as for now
|
|
103
|
-
at least, we add the 'container' class attribute to our container
|
|
104
|
-
component - which conflicts with Tailwind's own container utility.
|
|
105
|
-
*/
|
|
106
|
-
@utility container {
|
|
107
|
-
width: 100%;
|
|
108
|
-
padding: 0 16px;
|
|
109
|
-
margin: 0 auto;
|
|
110
|
-
max-width: 960px;
|
|
111
|
-
|
|
112
|
-
/* Large */
|
|
113
|
-
@media (min-width: 1050px) {
|
|
114
|
-
max-width: 1024px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/* X-Large */
|
|
118
|
-
@media (min-width: 1230px) {
|
|
119
|
-
max-width: 1190px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/* 2X-Large */
|
|
123
|
-
@media (min-width: 1500px) {
|
|
124
|
-
max-width: 1400px;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
102
|
@theme {
|
|
129
103
|
--breakpoint-*: initial;
|
|
130
104
|
--breakpoint-sm: 640px;
|
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@ export const Default = (): React.JSX.Element => {
|
|
|
19
19
|
onDateChange={handleDateChange}
|
|
20
20
|
id="published_on"
|
|
21
21
|
name="published_on"
|
|
22
|
+
yearsInPast={70}
|
|
22
23
|
variant="outlined"
|
|
23
24
|
helpText="Select published on date."
|
|
24
25
|
/>
|
|
@@ -32,6 +33,7 @@ export const Default = (): React.JSX.Element => {
|
|
|
32
33
|
id="published_on"
|
|
33
34
|
name="published_on"
|
|
34
35
|
variant="outlined"
|
|
36
|
+
yearsInPast={70}
|
|
35
37
|
helpText="Select published on date."
|
|
36
38
|
/>
|
|
37
39
|
</div>
|