@carbon/element-styles 0.2.0 → 0.2.1
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 +77 -13
- package/css/prebuilt/editorial.css +1 -1
- package/css/prebuilt/expressive.css +1 -1
- package/css/prebuilt/productive.css +1 -1
- package/package.json +3 -4
- package/scss/elements/_input/index.scss +1 -0
- package/scss/elements/button/index.scss +16 -2
- package/scss/elements/date-input/index.scss +4 -0
- package/scss/elements/date-time-input/index.scss +4 -0
- package/scss/elements/header-navigation/index.scss +3 -3
- package/scss/elements/time-input/index.scss +4 -0
- package/scss/elements/toggle/index.scss +2 -0
- package/scss/elements/unordered-list/index.scss +1 -1
package/README.md
CHANGED
|
@@ -15,6 +15,21 @@
|
|
|
15
15
|
npm i @carbon/element-styles
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
#### CDN
|
|
19
|
+
|
|
20
|
+
You can also use any of the [prebuilt stylesheets](#using-prebuilts) via our CDN:
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<!-- specific version (recommended) -->
|
|
24
|
+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/element-styles/version/v[x.y.z]/prebuilt/expressive.css" />
|
|
25
|
+
|
|
26
|
+
<!-- "latest" tag -->
|
|
27
|
+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/element-styles/tag/v0/latest/prebuilt/expressive.css" />
|
|
28
|
+
|
|
29
|
+
<!-- "next" tag -->
|
|
30
|
+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/element-styles/tag/v0/next/prebuilt/expressive.css" />
|
|
31
|
+
```
|
|
32
|
+
|
|
18
33
|
### Importing individual elements
|
|
19
34
|
|
|
20
35
|
To make use of individual elements, import them via `@use` and include their `styles` mixin in your Sass stylesheets:
|
|
@@ -83,19 +98,68 @@ Combining these options with custom selectors means you can emit multiple varian
|
|
|
83
98
|
|
|
84
99
|
This library offers several prebuilt (opinionated) stylesheets you can use out-of-the-box:
|
|
85
100
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
#### Productive
|
|
102
|
+
|
|
103
|
+
Includes all available elements with their default selectors. Uses a productive style with medium sized elements. Intended for interaction-heavy pages.
|
|
104
|
+
|
|
105
|
+
<table>
|
|
106
|
+
<tbody>
|
|
107
|
+
<tr>
|
|
108
|
+
<th>SCSS</th>
|
|
109
|
+
<td><code>/scss/prebuilt/productive.scss</code></td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<th>CSS</th>
|
|
113
|
+
<td><code>/css/prebuilt/productive.css</code></td>
|
|
114
|
+
</tr>
|
|
115
|
+
<tr>
|
|
116
|
+
<th>CDN</th>
|
|
117
|
+
<td>https://1.www.s81c.com/common/carbon/element-styles/tag/v0/latest/prebuilt/productive.css</td>
|
|
118
|
+
</tr>
|
|
119
|
+
</tbody>
|
|
120
|
+
</table>
|
|
121
|
+
|
|
122
|
+
#### Expressive
|
|
123
|
+
|
|
124
|
+
Includes all available elements with their default selectors. Uses an expressive style with large sized elements. Intended for content-heavy pages such as marketing or documentation.
|
|
125
|
+
|
|
126
|
+
<table>
|
|
127
|
+
<tbody>
|
|
128
|
+
<tr>
|
|
129
|
+
<th>SCSS</th>
|
|
130
|
+
<td><code>/scss/prebuilt/expressive.scss</code></td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<th>CSS</th>
|
|
134
|
+
<td><code>/css/prebuilt/expressive.css</code></td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<th>CDN</th>
|
|
138
|
+
<td>https://1.www.s81c.com/common/carbon/element-styles/tag/v0/latest/prebuilt/expressive.css</td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody>
|
|
141
|
+
</table>
|
|
142
|
+
|
|
143
|
+
#### Editorial
|
|
144
|
+
|
|
145
|
+
Only includes non-interactive elements with their default selectors. Uses an expressive style with large elements. Intended for content-only pages such as blogs and styling raw markdown.
|
|
146
|
+
|
|
147
|
+
<table>
|
|
148
|
+
<tbody>
|
|
149
|
+
<tr>
|
|
150
|
+
<th>SCSS</th>
|
|
151
|
+
<td><code>/scss/prebuilt/editorial.scss</code></td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<th>CSS</th>
|
|
155
|
+
<td><code>/css/prebuilt/editorial.css</code></td>
|
|
156
|
+
</tr>
|
|
157
|
+
<tr>
|
|
158
|
+
<th>CDN</th>
|
|
159
|
+
<td>https://1.www.s81c.com/common/carbon/element-styles/tag/v0/latest/prebuilt/editorial.css</td>
|
|
160
|
+
</tr>
|
|
161
|
+
</tbody>
|
|
162
|
+
</table>
|
|
99
163
|
|
|
100
164
|
## Emit Carbon tokens
|
|
101
165
|
|