Skip to content

Commit

Permalink
fix: use tokens for components
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
Daniel W authored and Daniel W committed May 25, 2024
1 parent 04c79dc commit 0d49e72
Show file tree
Hide file tree
Showing 13 changed files with 181 additions and 297 deletions.
4 changes: 1 addition & 3 deletions auto-init.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@

<div id="initialization" class="scrollspy section">
<h3 class="header">Initialization</h3>
<pre><code class="language-javascript">
M.AutoInit();
</code></pre>
<pre><code class="language-javascript">M.AutoInit();</code></pre>
</div>

<div id="options" class="scrollspy section">
Expand Down
111 changes: 58 additions & 53 deletions buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,32 @@
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<p class="caption">There are main button types described in material design - the elevated button, the filled, text and floating button.</p>
<a tabindex="0" class="btn">Standard Button</a>
<!-- ### -->
<div id="filled" class="section scrollspy">
<h3 class="header">Filled (standard)</h3>
<h3 class="header">Filled <small class="secondary-text">(Standard)</small></h3>
<p>
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
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.
</p>

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

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
<xmp>
<a class="btn">Standard Button</a>
<a class="btn filled">Create</a>
<a class="btn filled icon-left">
<code class="language-markup copiedText"><xmp><a class="btn">Standard Button</a>
<a tabindex="0" class="btn filled">Create</a>
<a tabindex="0" class="btn filled icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn filled icon-right rounded waves-effect waves-light">
<a tabindex="0" class="btn filled icon-right rounded waves-effect waves-light">
<i class="material-icons">edit</i>Update
</a>
</xmp>
</code>
</pre>
</a></xmp></code></pre>
</div>
<!-- ### -->
<div id="filled-tonal" class="section scrollspy">
Expand All @@ -49,20 +46,22 @@ <h3>Tonal</h3>
additional Actions next to the primary actions.
</p>

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

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
<xmp>
<a class="btn tonal">Create</a>
<a class="btn tonal icon-left">
<a tabindex="0" class="btn tonal">Create</a>
<a tabindex="0" class="btn tonal icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn tonal icon-right waves-effect waves-light">
<a tabindex="0" class="btn tonal icon-right waves-effect waves-light">
<i class="material-icons">add</i>Create
</a>
</xmp></code>
Expand All @@ -73,20 +72,22 @@ <h3>Tonal</h3>
<h3 class="header">Outlined</h3>
<p>The outlined button communicates a <b>medium</b> emphasized action. Just add the class outlined to the button.</p>

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

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
<xmp>
<a class="btn outlined">Create</a>
<a class="btn outlined icon-left">
<a tabindex="0" class="btn outlined">Create</a>
<a tabindex="0" class="btn outlined icon-left">
<i class="material-icons">add</i>Create
</a>
<a class="btn outlined icon-right waves-effect waves-light">
<a tabindex="0" class="btn outlined icon-right waves-effect waves-light">
<i class="material-icons">add</i>Create
</a>
</xmp>
Expand All @@ -100,26 +101,29 @@ <h3 class="header">Elevated</h3>
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
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.
</p>
<a class="btn elevated">Create</a>
<a class="btn elevated icon-left"> <i class="material-icons">add</i>Create </a>
<a class="btn elevated icon-right"> <i class="material-icons">add</i>Create </a>
<a class="btn elevated rounded">Create</a>
<a class="btn elevated icon-left rounded"><i class="material-icons">add</i>Create</a>

<div style="display: flex; gap: 1rem">
<a tabindex="0" class="btn elevated">Create</a>
<a tabindex="0" class="btn elevated icon-left"> <i class="material-icons">add</i>Create </a>
<a tabindex="0" class="btn elevated icon-right"> <i class="material-icons">add</i>Create </a>
<a tabindex="0" class="btn elevated rounded">Create</a>
<a tabindex="0" class="btn elevated icon-left rounded"><i class="material-icons">add</i>Create</a>
</div>

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
<xmp>
<a class="btn elevated">Create</a>
<a class="btn elevated">
<a tabindex="0" class="btn elevated">Create</a>
<a tabindex="0" class="btn elevated">
<i class="material-icons left">add</i>Create
</a>
<a class="btn elevated">
<a tabindex="0" class="btn elevated">
<i class="material-icons right">add</i>Create
</a>
<a class="btn elevated rounded">Create</a>
<a class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
<a tabindex="0" class="btn elevated rounded">Create</a>
<a tabindex="0" class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
</xmp></code>
</pre>
</div>
Expand All @@ -131,9 +135,11 @@ <h3 class="header">Text</h3>
modal so there are not too many overlapping shadows.
</p>

<a tabindex="0" class="btn text">Create</a>
<button class="btn text icon-left"><i class="material-icons">add</i>Create</button>
<a tabindex="0" class="btn text icon-right waves-effect"> <i class="material-icons">add</i>Create </a>
<div style="display: flex; gap: 1rem">
<a tabindex="0" class="btn text">Create</a>
<button class="btn text icon-left"><i class="material-icons">add</i>Create</button>
<a tabindex="0" class="btn text icon-right waves-effect"> <i class="material-icons">add</i>Create </a>
</div>

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
Expand All @@ -152,6 +158,7 @@ <h3 class="header">Text</h3>
</pre>
</div>
<!-- ### -->

<div id="floating" class="section scrollspy">
<h3 class="header">Floating</h3>
<a class="btn-floating btn-large waves-effect waves-light">
Expand All @@ -171,6 +178,7 @@ <h3 class="header">Floating</h3>
<h5>Floating Action Button</h5>
<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>
</div>

<!-- Helpers -->
<div id="helpers" class="section scrollspy">
<h3 class="header">Helpers</h3>
Expand Down Expand Up @@ -243,27 +251,24 @@ <h4 class="header">Small</h4>
<h3 class="header">Disabled</h3>
<p>This style can be applied to all button types</p>

<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled">
<i class="material-icons">add</i>
</a>
<div style="display: flex; gap: 1rem">
<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled">
<i class="material-icons">add</i>
</a>
</div>

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
<xmp>
<a class="btn-large disabled">Button</a>
<code class="language-markup copiedText"><xmp><a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled">
<i class="material-icons">add</i>
</a>
</xmp>
</code>
</pre>
</a></xmp></code></pre>
</div>
</div>

Expand Down
24 changes: 9 additions & 15 deletions carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,7 @@ <h3 class="header">Methods</h3>
<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-javascript copiedText">
var instance = M.Carousel.getInstance(elem);
</code>
<code class="language-javascript copiedText">var instance = M.Carousel.getInstance(elem);</code>
</pre>
</blockquote>
<h5 class="method-header">
Expand All @@ -177,10 +175,10 @@ <h6>Arguments</h6>
<p>
<b>Integer (optional):</b> How many times the carousel slides.
</p>
<pre><code class="language-javascript col s12">
instance.next();
<pre>
<code class="language-javascript col s12">instance.next();
instance.next(3); // Move next n times.
</code></pre>
</code></pre>

<h5 class="method-header">
.prev();
Expand All @@ -193,29 +191,25 @@ <h6>Arguments</h6>
<p>
<b>Integer (optional):</b> How many times the carousel slides.
</p>
<pre><code class="language-javascript col s12">
instance.prev();
<pre><code class="language-javascript col s12">instance.prev();
instance.prev(3); // Move previous n times.
</code></pre>
</code></pre>

<h5 class="method-header">
.set();
</h5>
<p>Move carousel to nth slide</p>
<h6>Arguments</h6>
<p><b>Integer:</b> Index of slide.</p>
<pre><code class="language-javascript col s12">
instance.set();
<pre><code class="language-javascript col s12">instance.set();
instance.set(3); // Set to nth slide.
</code></pre>
</code></pre>

<h5 class="method-header">
.destroy();
</h5>
<p>Destroy plugin instance and teardown</p>
<pre><code class="language-javascript col s12">
instance.destroy();
</code></pre>
<pre><code class="language-javascript col s12">instance.destroy();</code></pre>
</div>

<div id="properties" class="scrollspy section">
Expand Down
Loading

0 comments on commit 0d49e72

Please sign in to comment.