Skip to content

Commit 0d49e72

Browse files
Daniel WDaniel W
Daniel W
authored and
Daniel W
committed
fix: use tokens for components
wip to transfer the components styles to work with tokens, so that theming can be done and darkmode should also work by css only and not via extra js. Theming has to be set via JS or can also be imported by a custom css vars file
1 parent 04c79dc commit 0d49e72

13 files changed

Lines changed: 181 additions & 297 deletions

‎auto-init.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@
2020

2121
<div id="initialization" class="scrollspy section">
2222
<h3 class="header">Initialization</h3>
23-
<pre><code class="language-javascript">
24-
M.AutoInit();
25-
</code></pre>
23+
<pre><code class="language-javascript">M.AutoInit();</code></pre>
2624
</div>
2725

2826
<div id="options" class="scrollspy section">

‎buttons.html‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,32 @@
1111
<div class="row">
1212
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
1313
<p class="caption">There are main button types described in material design - the elevated button, the filled, text and floating button.</p>
14+
<a tabindex="0" class="btn">Standard Button</a>
1415
<!-- ### -->
1516
<div id="filled" class="section scrollspy">
16-
<h3 class="header">Filled (standard)</h3>
17+
<h3 class="header">Filled <small class="secondary-text">(Standard)</small></h3>
1718
<p>
1819
The filled buttons communicates <b>high</b> emphasized actions. This is the Stadard Button Design. You can add the class <u>filled</u> to the button to provide this
1920
style. This should be the main Actions on a Page, so be carful. A good rule of thumb is to add just one primary action per page or field of view.
2021
</p>
2122

22-
<a class="btn">Standard Button</a>
23-
<a class="btn filled">Create</a>
24-
<a class="btn filled icon-left"> <i class="material-icons">add</i>Create </a>
25-
<a class="btn filled icon-right rounded waves-effect waves-light"> <i class="material-icons">edit</i>Update </a>
23+
<div style="display: flex; gap: 1rem">
24+
<a tabindex="0" class="btn filled">Create</a>
25+
<a tabindex="0" class="btn filled icon-left"> <i class="material-icons">add</i>Create </a>
26+
<a tabindex="0" class="btn filled icon-right rounded waves-effect waves-light"> <i class="material-icons">edit</i>Update </a>
27+
</div>
2628

2729
<pre style="padding-top: 0px">
2830
<span class="copyMessage">Copied!</span>
2931
<i class="material-icons copyButton">content_copy</i>
30-
<code class="language-markup copiedText">
31-
<xmp>
32-
<a class="btn">Standard Button</a>
33-
<a class="btn filled">Create</a>
34-
<a class="btn filled icon-left">
32+
<code class="language-markup copiedText"><xmp><a class="btn">Standard Button</a>
33+
<a tabindex="0" class="btn filled">Create</a>
34+
<a tabindex="0" class="btn filled icon-left">
3535
<i class="material-icons">add</i>Create
3636
</a>
37-
<a class="btn filled icon-right rounded waves-effect waves-light">
37+
<a tabindex="0" class="btn filled icon-right rounded waves-effect waves-light">
3838
<i class="material-icons">edit</i>Update
39-
</a>
40-
</xmp>
41-
</code>
42-
</pre>
39+
</a></xmp></code></pre>
4340
</div>
4441
<!-- ### -->
4542
<div id="filled-tonal" class="section scrollspy">
@@ -49,20 +46,22 @@ <h3>Tonal</h3>
4946
additional Actions next to the primary actions.
5047
</p>
5148

52-
<a class="btn tonal">Create</a>
53-
<a class="btn tonal icon-left"> <i class="material-icons">add</i>Create </a>
54-
<a class="btn tonal icon-right waves-effect waves-light"> <i class="material-icons">add</i>Create </a>
49+
<div style="display: flex; gap: 1rem">
50+
<a tabindex="0" class="btn tonal">Create</a>
51+
<a tabindex="0" class="btn tonal icon-left"> <i class="material-icons">add</i>Create </a>
52+
<a tabindex="0" class="btn tonal icon-right waves-effect waves-light"> <i class="material-icons">add</i>Create </a>
53+
</div>
5554

5655
<pre style="padding-top: 0px">
5756
<span class="copyMessage">Copied!</span>
5857
<i class="material-icons copyButton">content_copy</i>
5958
<code class="language-markup copiedText">
6059
<xmp>
61-
<a class="btn tonal">Create</a>
62-
<a class="btn tonal icon-left">
60+
<a tabindex="0" class="btn tonal">Create</a>
61+
<a tabindex="0" class="btn tonal icon-left">
6362
<i class="material-icons">add</i>Create
6463
</a>
65-
<a class="btn tonal icon-right waves-effect waves-light">
64+
<a tabindex="0" class="btn tonal icon-right waves-effect waves-light">
6665
<i class="material-icons">add</i>Create
6766
</a>
6867
</xmp></code>
@@ -73,20 +72,22 @@ <h3>Tonal</h3>
7372
<h3 class="header">Outlined</h3>
7473
<p>The outlined button communicates a <b>medium</b> emphasized action. Just add the class outlined to the button.</p>
7574

76-
<a class="btn outlined">Create</a>
77-
<a class="btn outlined icon-left"> <i class="material-icons">add</i>Create </a>
78-
<a class="btn outlined icon-right waves-effect waves-light"> <i class="material-icons">add</i>Create </a>
75+
<div style="display: flex; gap: 1rem">
76+
<a tabindex="0" class="btn outlined">Create</a>
77+
<a tabindex="0" class="btn outlined icon-left"> <i class="material-icons">add</i>Create </a>
78+
<a tabindex="0" class="btn outlined icon-right waves-effect waves-light"> <i class="material-icons">add</i>Create </a>
79+
</div>
7980

8081
<pre style="padding-top: 0px">
8182
<span class="copyMessage">Copied!</span>
8283
<i class="material-icons copyButton">content_copy</i>
8384
<code class="language-markup copiedText">
8485
<xmp>
85-
<a class="btn outlined">Create</a>
86-
<a class="btn outlined icon-left">
86+
<a tabindex="0" class="btn outlined">Create</a>
87+
<a tabindex="0" class="btn outlined icon-left">
8788
<i class="material-icons">add</i>Create
8889
</a>
89-
<a class="btn outlined icon-right waves-effect waves-light">
90+
<a tabindex="0" class="btn outlined icon-right waves-effect waves-light">
9091
<i class="material-icons">add</i>Create
9192
</a>
9293
</xmp>
@@ -100,26 +101,29 @@ <h3 class="header">Elevated</h3>
100101
The elevated button is a tonal button with a shadow. This button that signify <b>medium</b> emphazied actions and seek to give depth to a mostly flat page. Try to
101102
only use shadows when absolutely neccessary, to prevent shadow creep. Also keep in mind that on darker backgrounds the shadows are not really good visible.
102103
</p>
103-
<a class="btn elevated">Create</a>
104-
<a class="btn elevated icon-left"> <i class="material-icons">add</i>Create </a>
105-
<a class="btn elevated icon-right"> <i class="material-icons">add</i>Create </a>
106-
<a class="btn elevated rounded">Create</a>
107-
<a class="btn elevated icon-left rounded"><i class="material-icons">add</i>Create</a>
104+
105+
<div style="display: flex; gap: 1rem">
106+
<a tabindex="0" class="btn elevated">Create</a>
107+
<a tabindex="0" class="btn elevated icon-left"> <i class="material-icons">add</i>Create </a>
108+
<a tabindex="0" class="btn elevated icon-right"> <i class="material-icons">add</i>Create </a>
109+
<a tabindex="0" class="btn elevated rounded">Create</a>
110+
<a tabindex="0" class="btn elevated icon-left rounded"><i class="material-icons">add</i>Create</a>
111+
</div>
108112

109113
<pre style="padding-top: 0px">
110114
<span class="copyMessage">Copied!</span>
111115
<i class="material-icons copyButton">content_copy</i>
112116
<code class="language-markup copiedText">
113117
<xmp>
114-
<a class="btn elevated">Create</a>
115-
<a class="btn elevated">
118+
<a tabindex="0" class="btn elevated">Create</a>
119+
<a tabindex="0" class="btn elevated">
116120
<i class="material-icons left">add</i>Create
117121
</a>
118-
<a class="btn elevated">
122+
<a tabindex="0" class="btn elevated">
119123
<i class="material-icons right">add</i>Create
120124
</a>
121-
<a class="btn elevated rounded">Create</a>
122-
<a class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
125+
<a tabindex="0" class="btn elevated rounded">Create</a>
126+
<a tabindex="0" class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
123127
</xmp></code>
124128
</pre>
125129
</div>
@@ -131,9 +135,11 @@ <h3 class="header">Text</h3>
131135
modal so there are not too many overlapping shadows.
132136
</p>
133137

134-
<a tabindex="0" class="btn text">Create</a>
135-
<button class="btn text icon-left"><i class="material-icons">add</i>Create</button>
136-
<a tabindex="0" class="btn text icon-right waves-effect"> <i class="material-icons">add</i>Create </a>
138+
<div style="display: flex; gap: 1rem">
139+
<a tabindex="0" class="btn text">Create</a>
140+
<button class="btn text icon-left"><i class="material-icons">add</i>Create</button>
141+
<a tabindex="0" class="btn text icon-right waves-effect"> <i class="material-icons">add</i>Create </a>
142+
</div>
137143

138144
<pre style="padding-top: 0px">
139145
<span class="copyMessage">Copied!</span>
@@ -152,6 +158,7 @@ <h3 class="header">Text</h3>
152158
</pre>
153159
</div>
154160
<!-- ### -->
161+
155162
<div id="floating" class="section scrollspy">
156163
<h3 class="header">Floating</h3>
157164
<a class="btn-floating btn-large waves-effect waves-light">
@@ -171,6 +178,7 @@ <h3 class="header">Floating</h3>
171178
<h5>Floating Action Button</h5>
172179
<p>A circular material button that lifts and displays an ink reaction on press. See the documentation on <a href="floating-action-button.html">this page</a></p>
173180
</div>
181+
174182
<!-- Helpers -->
175183
<div id="helpers" class="section scrollspy">
176184
<h3 class="header">Helpers</h3>
@@ -243,27 +251,24 @@ <h4 class="header">Small</h4>
243251
<h3 class="header">Disabled</h3>
244252
<p>This style can be applied to all button types</p>
245253

246-
<a class="btn-large disabled">Button</a>
247-
<a class="btn disabled">Button</a>
248-
<a class="btn-flat disabled">Button</a>
249-
<a class="btn-floating disabled">
250-
<i class="material-icons">add</i>
251-
</a>
254+
<div style="display: flex; gap: 1rem">
255+
<a class="btn-large disabled">Button</a>
256+
<a class="btn disabled">Button</a>
257+
<a class="btn-flat disabled">Button</a>
258+
<a class="btn-floating disabled">
259+
<i class="material-icons">add</i>
260+
</a>
261+
</div>
252262

253263
<pre style="padding-top: 0px">
254264
<span class="copyMessage">Copied!</span>
255265
<i class="material-icons copyButton">content_copy</i>
256-
<code class="language-markup copiedText">
257-
<xmp>
258-
<a class="btn-large disabled">Button</a>
266+
<code class="language-markup copiedText"><xmp><a class="btn-large disabled">Button</a>
259267
<a class="btn disabled">Button</a>
260268
<a class="btn-flat disabled">Button</a>
261269
<a class="btn-floating disabled">
262270
<i class="material-icons">add</i>
263-
</a>
264-
</xmp>
265-
</code>
266-
</pre>
271+
</a></xmp></code></pre>
267272
</div>
268273
</div>
269274

‎carousel.html‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,7 @@ <h3 class="header">Methods</h3>
161161
<pre style="padding-top: 0px;">
162162
<span class="copyMessage">Copied!</span>
163163
<i class="material-icons copyButton">content_copy</i>
164-
<code class="language-javascript copiedText">
165-
var instance = M.Carousel.getInstance(elem);
166-
</code>
164+
<code class="language-javascript copiedText">var instance = M.Carousel.getInstance(elem);</code>
167165
</pre>
168166
</blockquote>
169167
<h5 class="method-header">
@@ -177,10 +175,10 @@ <h6>Arguments</h6>
177175
<p>
178176
<b>Integer (optional):</b> How many times the carousel slides.
179177
</p>
180-
<pre><code class="language-javascript col s12">
181-
instance.next();
178+
<pre>
179+
<code class="language-javascript col s12">instance.next();
182180
instance.next(3); // Move next n times.
183-
</code></pre>
181+
</code></pre>
184182

185183
<h5 class="method-header">
186184
.prev();
@@ -193,29 +191,25 @@ <h6>Arguments</h6>
193191
<p>
194192
<b>Integer (optional):</b> How many times the carousel slides.
195193
</p>
196-
<pre><code class="language-javascript col s12">
197-
instance.prev();
194+
<pre><code class="language-javascript col s12">instance.prev();
198195
instance.prev(3); // Move previous n times.
199-
</code></pre>
196+
</code></pre>
200197

201198
<h5 class="method-header">
202199
.set();
203200
</h5>
204201
<p>Move carousel to nth slide</p>
205202
<h6>Arguments</h6>
206203
<p><b>Integer:</b> Index of slide.</p>
207-
<pre><code class="language-javascript col s12">
208-
instance.set();
204+
<pre><code class="language-javascript col s12">instance.set();
209205
instance.set(3); // Set to nth slide.
210-
</code></pre>
206+
</code></pre>
211207

212208
<h5 class="method-header">
213209
.destroy();
214210
</h5>
215211
<p>Destroy plugin instance and teardown</p>
216-
<pre><code class="language-javascript col s12">
217-
instance.destroy();
218-
</code></pre>
212+
<pre><code class="language-javascript col s12">instance.destroy();</code></pre>
219213
</div>
220214

221215
<div id="properties" class="scrollspy section">

0 commit comments

Comments
 (0)