andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Copy button and toast

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-05 18:20:08 +03:00
parent 318f0eacd4
commit 7f9574f0de
1 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/scss/style.scss
View File

@ -497,7 +497,7 @@ $grid-large-breakpoint: 768px;
z-index: 2;
.copy-button {
background: #1E88E5;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background-color:%231E88E5' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
@ -509,7 +509,12 @@ $grid-large-breakpoint: 768px;
right: 0;
margin: calc(2 * var(#{$universal-margin-var}));
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
cursor: pointer;
&:hover {
background-color: #2196F3;
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
}
&:before {
background: #fff;
position: absolute;
@ -545,12 +550,24 @@ $grid-large-breakpoint: 768px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1);
}
.toast {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 2);
margin-bottom: 0;
font-size: 0.8125rem;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: #fff;
background: #212121;
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}
// TODO: Buttons and search form only
// TODO: Top bar - header
// TODO: Side bar - nav
// TODO: Bottom area - footer
// TODO: JS + CSS for side bar functionality
// TODO: New toast
// TODO: New marks
// TODO: Components for statistics
// TODO: JS + CSS for side bar functionality