maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Snackbars Stacking (#7318)

Browse source 
* stacking snackbars

* stacking snackbars

* pre fix
This commit is contained in:
ludwiczakpawel 2020-04-16 15:28:46 +02:00 • committed by GitHub
parent b830cdc5b8
commit fe334d1de8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/components/snackbars.scss
View file

@ -11,9 +11,7 @@
right: $su-2;
bottom: $su-2;
display: flex;
align-items: center;
justify-content: space-between;
padding: $su-2;
flex-direction: column;
color: var(--body-color-inverted);
@media (min-width: $breakpoint-s) {
@ -24,6 +22,18 @@
bottom: $su-6;
}
&__item {
display: none;
align-items: center;
justify-content: space-between;
padding: $su-2;
border-bottom: 1px solid var(--box-darker);
&:last-child {
border-bottom: none;
}
}
&__body {
padding: 0 $su-2;
}

141
app/views/pages/crayons.html.erb
View file

@ -119,7 +119,7 @@
<p class="lh-tight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.</p>
</div>
<pre><%='
<pre><%= '
<!-- font sizes -->
<p class="fs-xs">...</p> <!-- 12px -->
<p class="fs-s">...</p> <!-- 14px -->
@ -163,7 +163,7 @@
<p class="ff-accent fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
</div>
<pre><%='
<pre><%= '
<!-- font sizes -->
<p class="ff-accent fs-xs">...</p> <!-- 12px -->
<p class="ff-accent fs-s">...</p> <!-- 14px -->
@ -180,7 +180,6 @@
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Cards</h2>
@ -206,7 +205,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-card">
<div class="crayons-card__body">
Hello, I am a primary card.
@ -247,7 +246,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">Card title.</h3>
@ -276,7 +275,7 @@
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
</div>
<pre><%='
<pre><%= '
<input type="text" class="crayons-textfield" placeholder="This is placeholder...">
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
'.rstrip %></pre>
@ -286,7 +285,7 @@
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
</div>
<pre><%='
<pre><%= '
<textarea class="crayons-textfield" placeholder="This is palceholder..."></textarea>
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
'.rstrip %></pre>
@ -298,7 +297,7 @@
<input type="checkbox" class="crayons-checkbox" checked disabled>
</div>
<pre><%='
<pre><%= '
<input type="checkbox" class="crayons-checkbox">
<input type="checkbox" class="crayons-checkbox" checked>
<input type="checkbox" class="crayons-checkbox" disabled>
@ -312,7 +311,7 @@
<input type="radio" name="n2" class="crayons-radio" checked disabled>
</div>
<pre><%='
<pre><%= '
<input type="radio" name="n1" class="crayons-radio">
<input type="radio" name="n1" class="crayons-radio" checked>
<input type="radio" name="n2" class="crayons-radio" disabled>
@ -337,7 +336,7 @@
<p class="crayons-field__description">Another description just in case...</p>
</div>
<pre><%='
<pre><%= '
<div class="crayons-field">
<label for="t1" class="crayons-field__label">
Textfield Label
@ -365,7 +364,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-field crayons-field--checkbox">
<input type="checkbox" id="c2" class="crayons-checkbox">
<label for="c2" class="crayons-field__label">
@ -403,7 +402,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-fields">
<div class="crayons-field crayons-field--checkbox">
<input type="checkbox" id="c3" class="crayons-checkbox">
@ -440,7 +439,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-fields crayons-fields--horizontal">
<div class="crayons-field crayons-field--checkbox">
<input type="checkbox" id="c3" class="crayons-checkbox">
@ -455,7 +454,6 @@
</div>
'.rstrip %></pre>
<div>
<div class="crayons-field crayons-field--radio">
<input type="radio" name="name1" id="r2" class="crayons-radio">
@ -466,7 +464,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-field crayons-field--radio">
<input type="radio" name="name1" id="r2" class="crayons-radio">
<label for="r2" class="crayons-field__label">
@ -504,7 +502,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-fields">
<div class="crayons-field crayons-field--radio">
<input type="radio" name="name2" id="r3" class="crayons-radio">
@ -541,7 +539,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-fields crayons-fields--horizontal">
<div class="crayons-field crayons-field--radio">
<input type="radio" name="name3" id="r6" class="crayons-radio">
@ -577,7 +575,7 @@
<a href="#" class="crayons-btn crayons-btn--secondary crayons-btn--full crayons-btn--icon-left"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon"><path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" /></svg>Button</a>
</div>
<pre><%='
<pre><%= '
<a href="#" class="crayons-btn">Button label</a>
<a href="#" class="... crayons-btn--full">Full Button label</a>
<a href="#" class="... crayons-btn--secondary">Secondary Button label</a>
@ -616,8 +614,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-btn-group">
<a href="#" class="crayons-btn">Action 1</a>
...
@ -640,7 +637,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-dropdown">
Hey, ...
</div>
@ -685,7 +682,7 @@
</div>
</div>
<pre><%='
<pre><%= '
<div class="crayons-modal">
Hey, ...
</div>
@ -725,7 +722,7 @@
<div class="crayons-notice crayons-notice--info">This is Info Notice content.</div>
</div>
<pre><%='
<pre><%= '
<!-- Default -->
<div class="crayons-notice">This...</div>
@ -775,7 +772,7 @@
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--bullet"></span>
</div>
<pre><%='
<pre><%= '
<span class="crayons-indicator">Label</span>
<span class="crayons-indicator">1</span>
<span class="crayons-indicator crayons-indicator--bullet"></span>
@ -810,7 +807,7 @@
<span class="crayons-avatar crayons-avatar--3xl"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
</div>
<pre><%='
<pre><%= '
<span class="crayons-avatar"><img src="..." class="crayons-avatar__image" alt="..." /></span>
<!-- sizes: l, xl, 2xl, 3xl -->
@ -828,7 +825,7 @@
<span class="crayons-logo crayons-logo--3xl"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
</div>
<pre><%='
<pre><%= '
<span class="crayons-logo"><img src="..." class="crayons-logo__image" alt="..." /></span>
<!-- sizes: l, xl, 2xl, 3xl -->
@ -852,7 +849,7 @@
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
</div>
<pre><%='
<pre><%= '
<a href="#" class="crayons-link">Hello, I am default link.</a>
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
'.rstrip %></pre>
@ -877,7 +874,7 @@
<a href="#" class="crayons-link crayons-link--block crayons-link--block--indented">More...</a>
</div>
<pre><%='
<pre><%= '
<a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
<a href="#" class="... crayons-link--block">...</a>
<a href="#" class="... crayons-link--block">... <span class="crayons-indicator">3</span></a>
@ -910,7 +907,7 @@
</a>
</div>
<pre><%='
<pre><%= '
<a href="#" class="crayons-link crayons-link--contentful">
<div>Lorem ...</div>
<span class="crayons-link__secondary">Category ...</span>
@ -930,7 +927,7 @@
<a href="#" class="crayons-link">Latest</a>
</div>
<pre><%='
<pre><%= '
<div class="crayons-tabs">
<a href="#" class="crayons-link crayons-link--current">Feed</a>
<a href="#" class="crayons-link">Popular</a>
@ -944,11 +941,67 @@
<h2>Snackbars</h2>
<p>Snackbars inform users of a process that an app has performed. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.</p>
<p>A Snackbar can contain a single action. Because they disappear automatically, the action shouldn’t be “Dismiss” or “Cancel.”</p>
<p>A Snackbar should disappear after 5 secs. Countdown will be paused when user mouse over the snackbar.</p>
<p>A Snackbar should disappear after at least 5 secs. Countdown will be paused when user mouse over the snackbar.</p>
<p>Snackbars can be stacked on top of each other if there's more of them. New ones show up at the bottom of snackbar. We can display maximum 3 snackbars at a time.</p>
<p>Keep in mind that Snackbar default styling has <code>display: none;</code> applied. To show it you have to overwrite it by applying <code>flex</code> (and not <code>block</code>!) utility class.</p>
</div>
<div class="relative p-10 bg-base-10">
<div class="crayons-snackbar absolute">
<div class="crayons-snackbar__item flex">
<div class="crayons-snackbar__body">
<p>You have just downvoted this article.</p>
</div>
<div class="crayons-snackbar__actions">
<div class="crayons-btn-group">
<button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
</div>
</div>
</div>
<div class="crayons-snackbar__item flex">
<div class="crayons-snackbar__body">
<p>And now upvoted...</p>
</div>
<div class="crayons-snackbar__actions">
<div class="crayons-snackbar__actions">
<button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
</div>
</div>
</div>
<div class="crayons-snackbar__item flex">
<div class="crayons-snackbar__body">
<p>And downvoted again...</p>
</div>
<div class="crayons-snackbar__actions">
<div class="crayons-snackbar__actions">
<button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
</div>
</div>
</div>
</div>
</div>
<div class="relative p-10 bg-base-10">
<div class="crayons-snackbar absolute">
<div class="crayons-snackbar__item flex">
<div class="crayons-snackbar__body">
<p>You have just downvoted this article.</p>
</div>
<div class="crayons-snackbar__actions">
<div class="crayons-btn-group">
<button type="button" class="crayons-btn crayons-btn--secondary">Action 1</button>
<button type="button" class="crayons-btn crayons-btn--secondary">Action 2</button>
</div>
</div>
</div>
</div>
</div>
<pre><%= '
<div class="crayons-snackbar">
<div class="crayons-snackbar__item">
<div class="crayons-snackbar__body">
<p>You have just downvoted this article.</p>
</div>
@ -956,30 +1009,10 @@
<button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
</div>
</div>
</div>
<div class="relative p-10 bg-base-10">
<div class="crayons-snackbar absolute">
<div class="crayons-snackbar__body">
<p>You have just downvoted this article.</p>
</div>
<div class="crayons-snackbar__actions">
<div class="crayons-btn-group">
<button type="button" class="crayons-btn crayons-btn--secondary">Action 1</button>
<button type="button" class="crayons-btn crayons-btn--secondary">Action 2</button>
</div>
</div>
</div>
</div>
<pre><%='
<div class="crayons-snackbar absolute">
<div class="crayons-snackbar__body">
<p>You have just downvoted this article.</p>
</div>
<div class="crayons-snackbar__actions">
<button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
<div class="crayons-snackbar__item">
...
</div>
...
</div>
'.rstrip %></pre>
</div>