open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

messagebox

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-10-12 16:29:35 -04:00 committed by GitHub
parent 6474eb178a
commit 4f45e633ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
msgbox/msgbox.css
View File

@ -1,3 +1,8 @@
:root {
--message-box-title: hsl(170, 40%, 69%);
--firebrick: hsl(0, 68%, 42%);
}
#message-box { #message-box {
top: 0; top: 0;
left: 0; left: 0;
@ -5,7 +10,7 @@
bottom: 0; bottom: 0;
display: flex; display: flex;
position: fixed; position: fixed;
background-color: rgba(0, 0, 0, 0.45); background-color: var(--black-alpha-45);
animation: fadein .25s ease-in-out; animation: fadein .25s ease-in-out;
z-index: 9999990; z-index: 9999990;
-moz-user-select: none; -moz-user-select: none;
@ -21,8 +26,7 @@
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: white; box-shadow: 5px 5px 50px var(--black-alpha-25);
box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.225);
z-index: 9999991; z-index: 9999991;
-moz-user-select: text; -moz-user-select: text;
} }
@ -57,7 +61,7 @@
#message-box-title { #message-box-title {
font-weight: bold; font-weight: bold;
background-color: rgb(145, 208, 198); background-color: var(--message-box-title);
padding: .75rem 24px .75rem 52px; padding: .75rem 24px .75rem 52px;
font-size: 1rem; font-size: 1rem;
position: relative; position: relative;
@ -79,8 +83,8 @@
} }
#message-box.danger #message-box-title { #message-box.danger #message-box-title {
background-color: firebrick; background-color: var(--firebrick);
color: white; color: var(--white);
} }
#message-box.danger #message-box-title::before { #message-box.danger #message-box-title::before {
@ -92,11 +96,11 @@
} }
#message-box.danger #message-box-close-icon svg { #message-box.danger #message-box-close-icon svg {
fill: maroon; fill: var(--maroon);
} }
#message-box.danger #message-box-close-icon svg:hover { #message-box.danger #message-box-close-icon svg:hover {
fill: #600; fill: var(--darker-maroon);
} }
#message-box-close-icon { #message-box-close-icon {
@ -117,6 +121,7 @@
position: relative; position: relative;
flex-grow: 9; flex-grow: 9;
overflow-wrap: break-word; overflow-wrap: break-word;
outline: none;
} }
#message-box-contents p:first-child { #message-box-contents p:first-child {
@ -129,7 +134,6 @@
#message-box-buttons { #message-box-buttons {
padding: .75rem .375rem; padding: .75rem .375rem;
background-color: #f0f0f0;
text-align: center; text-align: center;
} }

11
msgbox/msgbox.js
View File

@ -34,12 +34,7 @@ function messageBox({
document.body.appendChild(messageBox.element); document.body.appendChild(messageBox.element);
messageBox.originalFocus = document.activeElement; messageBox.originalFocus = document.activeElement;
// skip external links like feedback moveFocus(messageBox.element, 1);
while ((moveFocus(messageBox.element, 1) || {}).target === '_blank') {/*NOP*/}
// suppress focus outline when invoked via click
if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
document.activeElement.dataset.focusedViaClick = '';
}
if (typeof onshow === 'function') { if (typeof onshow === 'function') {
onshow(messageBox.element); onshow(messageBox.element);
@ -112,7 +107,7 @@ function messageBox({
const id = 'message-box'; const id = 'message-box';
messageBox.element = messageBox.element =
$create({id, className}, [ $create({id, className}, [
$create([ $create('div.main-bg', [
$create(`#${id}-title`, title), $create(`#${id}-title`, title),
$create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon}, $create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
@ -120,7 +115,7 @@ function messageBox({
'5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z', '5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
}))), }))),
$create(`#${id}-contents`, tHTML(contents)), $create(`#${id}-contents`, tHTML(contents)),
$create(`#${id}-buttons`, $create(`#${id}-buttons.truegray-alpha-2`,
buttons.map((content, buttonIndex) => content && buttons.map((content, buttonIndex) => content &&
$create('button', Object.assign({ $create('button', Object.assign({
buttonIndex, buttonIndex,