dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hook multifile to ui

Browse source
This commit is contained in:
Emily 2018-07-31 11:09:18 -07:00
parent e42ad175db
commit c9ae76b209
77 changed files with 1528 additions and 1111 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/templates/popup/index.js
View file

@ -2,19 +2,17 @@ const html = require('choo/html');
module.exports = function(msg, confirmText, cancelText, confirmCallback) {
return html`
<div class="popup__wrapper">
<div class="popup" onblur=${hide} tabindex="-1">
<div class="popup__message">${msg}</div>
<div class="popup__action">
<span class="popup__no" onclick=${hide}>
${cancelText}
</span>
<span class="popup__yes" onclick=${confirmCallback}>
${confirmText}
</span>
<div>
<span class="popup__no" onclick=${hide}>${cancelText}</span>
</div>
<div>
<span class="popup__yes" onclick=${confirmCallback}>${confirmText}</span>
</div>
</div>
</div>
</div>`;
</div>`;
function hide(e) {
e.stopPropagation();

111
app/templates/popup/popup.css
View file

@ -1,122 +1,79 @@
.popup {
visibility: hidden;
min-width: 204px;
min-height: 105px;
background-color: var(--pageBGColor);
display: block;
width: 100%;
height: 70px;
background-color: var(--errorColor);
color: var(--textColor);
border: 1px solid #d7d7db;
padding: 15px 24px;
box-sizing: content-box;
padding: 0;
box-sizing: border-box;
text-align: center;
border-radius: 5px;
position: absolute;
z-index: 1;
bottom: 20px;
left: -40px;
border-radius: 4px;
transition: opacity 0.5s;
opacity: 0;
outline: 0;
box-shadow: 3px 3px 7px rgba(136, 136, 136, 0.3);
opacity: 0;
visibility: hidden;
}
.popup::after {
content: '';
position: absolute;
bottom: -11px;
left: 20px;
background-color: #fff;
display: block;
width: 20px;
height: 20px;
transform: rotate(45deg);
border-radius: 0 0 5px;
border-right: 1px solid #d7d7db;
border-bottom: 1px solid #d7d7db;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}
.popup__wrapper {
position: absolute;
display: inline-block;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: 8px solid;
border-color: var(--errorColor) transparent transparent;
margin-left: -8px;
pointer-events: none;
}
.popup__message {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px #ebebeb solid;
color: var(--textColor);
padding: 10px;
box-sizing: border-box;
text-align: center;
color: var(--primaryControlFGColor);
font-size: 15px;
font-weight: normal;
padding-bottom: 15px;
font-style: italic;
white-space: nowrap;
width: calc(100% + 48px);
margin-left: -24px;
}
.popup__action {
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
text-transform: uppercase;
}
.popup__action > div {
flex: auto;
}
.popup__no {
color: #4a4a4a;
background-color: #fbfbfb;
border: 1px #c1c1c1 solid;
border-radius: 5px;
padding: 5px 25px;
font-weight: normal;
min-width: 94px;
box-sizing: border-box;
color: var(--primaryControlFGColor);
padding: 5px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
.popup__no:hover {
background-color: #efeff1;
text-decoration: underline;
}
.popup__yes {
color: var(--primaryControlFGColor);
background-color: var(--primaryControlBGColor);
border-radius: 5px;
padding: 5px 25px;
padding: 5px;
font-weight: normal;
cursor: pointer;
min-width: 94px;
box-sizing: border-box;
white-space: nowrap;
margin-left: 12px;
}
.popup__yes:hover {
background-color: var(--primaryControlHoverColor);
text-decoration: underline;
}
.popup--show {
visibility: visible;
opacity: 1;
}
@media (max-device-width: 992px), (max-width: 992px) {
.popup {
left: auto;
right: -40px;
}
.popup::after {
left: auto;
right: 36px;
}
}
@media (max-device-width: 520px), (max-width: 520px) {
.popup::after {
left: 125px;
}
pointer-events: auto;
}