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

Snackbars Improvements (#7412)

Browse source 
* fix stascking

* updated buttons

* adjustments
This commit is contained in:
ludwiczakpawel 2020-04-22 00:31:12 +02:00 • committed by GitHub
parent 556bb565bf
commit b9149ad779
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,17 +2,13 @@
@import '../base/boxes';
.crayons-snackbar {
@extend .crayons-box;
@extend .crayons-box--filled;
@extend .crayons-box--level-1;
position: fixed;
z-index: 9999; // todo: make z-index a variable..
left: $su-2;
right: $su-2;
bottom: $su-2;
display: flex;
flex-direction: column;
color: var(--body-color-inverted);
display: grid;
grid-gap: $su-2;
@media (min-width: $breakpoint-s) {
max-width: 480px;
@ -20,18 +16,18 @@
left: $su-6;
right: auto;
bottom: $su-6;
justify-items: flex-start;
}
&__item {
@extend .crayons-box;
@extend .crayons-box--filled;
@extend .crayons-box--level-1;
color: var(--body-color-inverted);
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 {

4
app/assets/stylesheets/themes/night.scss
View file

@ -147,8 +147,8 @@
--label-secondary: var(--base-60);
// Default box
--box: var(--base-90);
--box-darker: var(--base-100);
--box: var(--base-0);
--box-darker: var(--base-inverted);
// Indicators
--indicator-accent-bg: var(--accent-brand);

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

@ -1116,9 +1116,7 @@
<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>
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
</div>
</div>
@ -1127,9 +1125,7 @@
<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>
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
</div>
</div>
@ -1138,9 +1134,7 @@
<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>
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
</div>
</div>
</div>
@ -1153,10 +1147,8 @@
<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>
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 1</button>
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 2</button>
</div>
</div>
</div>
@ -1169,7 +1161,7 @@
<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>
<button type="button" class="crayons-btn crayons-btn--ghost-success">Undo</button>
</div>
</div>
<div class="crayons-snackbar__item">