mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
13 changed files with 1033 additions and 32 deletions
@ -0,0 +1,479 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>GrapesJS Newsletter Editor</title> |
|||
<link rel="stylesheet" href="./stylesheets/grapes.min.css"> |
|||
<link rel="stylesheet" href="./stylesheets/material.css"> |
|||
<link rel="stylesheet" href="./stylesheets/tooltip.css"> |
|||
<link rel="stylesheet" href="./stylesheets/grapesjs-preset-newsletter.css"> |
|||
|
|||
<script src="./js/jquery.js"></script> |
|||
<script src="./js/grapes.min.js"></script> |
|||
<script src="./js/grapesjs-preset-newsletter.min.js"></script> |
|||
<script src="./js/ajaxable.min.js"></script> |
|||
</head> |
|||
<style> |
|||
body, html{ height: 100%; margin: 0;} |
|||
</style> |
|||
<body> |
|||
|
|||
|
|||
<div id="gjs" style="height:0px; overflow:hidden"></div> |
|||
|
|||
|
|||
<form id="test-form" class="test-form" action="http://grapes.16mb.com/s" method="POST" style="display:none"> |
|||
<div class="putsmail-c"> |
|||
<a href="https://putsmail.com/" target="_blank"> |
|||
<img src="./img/putsmail.png" style="opacity:0.85; width:177px" /> |
|||
</a> |
|||
<div class="gjs-sm-property" style="font-size: 10px"> |
|||
Message delivering offered by PutsMail |
|||
<span class="form-status" style="opacity: 0"> |
|||
<i class="fa fa-refresh anim-spin" aria-hidden="true"></i> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="email" name="email" placeholder="Email" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="text" name="subject" placeholder="Subject" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<input type="hidden" name="body"> |
|||
<button class="gjs-btn-prim gjs-btn-import" style="width: 100%">SEND</button> |
|||
</form> |
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
// Custom template |
|||
var templateImport = ` |
|||
<table class="c654"> |
|||
<tr class="row"> |
|||
<td class="cell"> |
|||
<table class="container"> |
|||
<tr> |
|||
<td class="container-cell"> |
|||
<table class="table100 c1790"> |
|||
<tr> |
|||
<td class="top-cell" id="c1793"> |
|||
<u class="browser-link" id="c307">View in browser |
|||
</u> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="c1766"> |
|||
<tr> |
|||
<td class="cell c1769"> |
|||
<img class="c926" src="https://raw.githubusercontent.com/artf/grapesjs/gh-pages/img/grapesjs-logo.png" alt="GrapesJS."/> |
|||
</td> |
|||
<td class="cell c1776"> |
|||
<div class="c1144 darkerfont">GrapesJS Newsletter Editor |
|||
<br/> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="card"> |
|||
<tr> |
|||
<td class="card-cell"> |
|||
<img class="c1271" src="http://placehold.it/550x250/78c5d6/fff/" alt="Big image here"/> |
|||
<table class="table100 c1357"> |
|||
<tr> |
|||
<td class="card-content"> |
|||
<h1 class="card-title">Build your newsletters faster than ever |
|||
<br/> |
|||
</h1> |
|||
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua |
|||
</p> |
|||
<table class="c1542"> |
|||
<tr> |
|||
<td class="card-footer" id="c1545"> |
|||
<a class="button">Button here |
|||
</a> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<style>.row{ |
|||
vertical-align:top; |
|||
} |
|||
.c654{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
width:100%; |
|||
height:100%; |
|||
background-color:rgb(234, 236, 237); |
|||
} |
|||
.cell{ |
|||
text-align:left; |
|||
font-size:12px; |
|||
font-family:Helvetica,serif; |
|||
font-weight:300; |
|||
color:rgb(111, 119, 125); |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
vertical-align:top; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:0px; |
|||
margin-left:0px; |
|||
} |
|||
.c926{ |
|||
color:rgb(158, 83, 129); |
|||
width:100%; |
|||
font-size:50px; |
|||
} |
|||
.cell.c849{ |
|||
width:11%; |
|||
} |
|||
.c1144{ |
|||
padding-top:10px; |
|||
padding-right:10px; |
|||
padding-bottom:10px; |
|||
padding-left:10px; |
|||
font-size:17px; |
|||
} |
|||
.card{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:20px; |
|||
height:0px; |
|||
} |
|||
.card-cell{ |
|||
background-color:rgb(255, 255, 255); |
|||
overflow-x:hidden; |
|||
overflow-y:hidden; |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
text-align:center; |
|||
} |
|||
.card.sector{ |
|||
background-color:rgb(255, 255, 255); |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
border-collapse:separate; |
|||
} |
|||
.c1271{ |
|||
width:100%; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:15px; |
|||
margin-left:0px; |
|||
font-size:50px; |
|||
color:rgb(120, 197, 214); |
|||
line-height:250px; |
|||
text-align:center; |
|||
} |
|||
.table100{ |
|||
width:100%; |
|||
} |
|||
.c1357{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
} |
|||
.darkerfont{ |
|||
color:rgb(65, 69, 72); |
|||
} |
|||
.button{ |
|||
font-size:12px; |
|||
padding-top:10px; |
|||
padding-right:20px; |
|||
padding-bottom:10px; |
|||
padding-left:20px; |
|||
background-color:rgb(217, 131, 166); |
|||
color:rgb(255, 255, 255); |
|||
text-align:center; |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
font-weight:300; |
|||
} |
|||
.table100.c1437{ |
|||
text-align:left; |
|||
} |
|||
.cell.cell-bottom{ |
|||
text-align:center; |
|||
height:51px; |
|||
} |
|||
.card-title{ |
|||
font-size:25px; |
|||
font-weight:300; |
|||
color:rgb(68, 68, 68); |
|||
} |
|||
.card-content{ |
|||
font-size:13px; |
|||
line-height:20px; |
|||
color:rgb(111, 119, 125); |
|||
padding-top:10px; |
|||
padding-right:20px; |
|||
padding-bottom:0px; |
|||
padding-left:20px; |
|||
} |
|||
.container{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
width:90%; |
|||
max-width:550px; |
|||
} |
|||
.cell.c856{ |
|||
vertical-align:middle; |
|||
} |
|||
.container-cell{ |
|||
vertical-align:top; |
|||
font-size:medium; |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
} |
|||
.c1790{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
} |
|||
.table100.c1790{ |
|||
min-height:30px; |
|||
border-collapse:separate; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:10px; |
|||
margin-left:0px; |
|||
} |
|||
.browser-link{ |
|||
font-size:12px; |
|||
} |
|||
.top-cell{ |
|||
text-align:right; |
|||
color:rgb(152, 156, 165); |
|||
} |
|||
.table100.c1357{ |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:0px; |
|||
margin-left:0px; |
|||
border-collapse:collapse; |
|||
} |
|||
.c1769{ |
|||
width:30%; |
|||
} |
|||
.c1776{ |
|||
width:70%; |
|||
} |
|||
.c1766{ |
|||
margin-top:0px; |
|||
margin-right:auto; |
|||
margin-bottom:10px; |
|||
margin-left:auto; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
width:100%; |
|||
min-height:30px; |
|||
} |
|||
.cell.c1769{ |
|||
width:11%; |
|||
} |
|||
.cell.c1776{ |
|||
vertical-align:middle; |
|||
} |
|||
.c1542{ |
|||
margin-top:0px; |
|||
margin-right:auto; |
|||
margin-bottom:10px; |
|||
margin-left:auto; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
width:100%; |
|||
} |
|||
.card-footer{ |
|||
padding:20px 0px 20px 0px; |
|||
text-align:center; |
|||
} |
|||
.quote { |
|||
color: #6a6a6a; |
|||
font-style: italic; |
|||
font-weight: 200; |
|||
} |
|||
</style> |
|||
`; |
|||
|
|||
// Set up GrapesJS editor with the Newsletter plugin |
|||
var editor = grapesjs.init({ |
|||
height: '100%', |
|||
noticeOnUnload: 0, |
|||
storageManager:{ |
|||
autoload: 0, |
|||
}, |
|||
assetManager: { |
|||
upload: 0, |
|||
uploadText: 'Uploading is not available in this demo', |
|||
}, |
|||
container : '#gjs', |
|||
plugins: ['gjs-preset-newsletter'], |
|||
pluginsOpts: { |
|||
'gjs-preset-newsletter': { |
|||
inlineCss: 0, |
|||
modalLabelImport: 'Paste all your code here below and click import', |
|||
modalLabelExport: 'Copy the code and use it wherever you want', |
|||
codeViewerTheme: 'material', |
|||
defaultTemplate: templateImport, |
|||
importPlaceholder: templateImport |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Let's add in this demo the possibility to test our newsletters |
|||
var mdlClass = 'gjs-mdl-dialog-sm'; |
|||
var pnm = editor.Panels; |
|||
var cmdm = editor.Commands; |
|||
var testContainer = document.getElementById("test-form"); |
|||
var contentEl = testContainer.querySelector('input[name=body]'); |
|||
var md = editor.Modal; |
|||
cmdm.add('send-test', { |
|||
run(editor, sender) { |
|||
sender.set('active', 0); |
|||
var modalContent = md.getContentEl(); |
|||
var mdlDialog = document.querySelector('.gjs-mdl-dialog'); |
|||
var cmdGetCode = cmdm.get('gjs-get-inlined-html'); |
|||
contentEl.value = cmdGetCode && cmdGetCode.run(editor); |
|||
mdlDialog.className += ' ' + mdlClass; |
|||
testContainer.style.display = 'block'; |
|||
md.setTitle('Test your Newsletter'); |
|||
md.setContent(''); |
|||
md.setContent(testContainer); |
|||
md.open(); |
|||
md.getModel().once('change:open', function() { |
|||
mdlDialog.className = mdlDialog.className.replace(mdlClass, ''); |
|||
//clean status |
|||
}) |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'send-test', |
|||
className: 'fa fa-paper-plane', |
|||
command: 'send-test', |
|||
attributes: { |
|||
'title': 'Test Newsletter', |
|||
'data-tooltip-pos': 'bottom', |
|||
}, |
|||
}); |
|||
|
|||
//fa fa-refresh |
|||
var statusFormElC = document.querySelector('.form-status'); |
|||
var statusFormEl = document.querySelector('.form-status i'); |
|||
var ajaxTest = ajaxable(testContainer). |
|||
onStart(function(){ |
|||
statusFormEl.className = 'fa fa-refresh anim-spin'; |
|||
statusFormElC.style.opacity = '1'; |
|||
statusFormElC.className = 'form-status'; |
|||
}) |
|||
.onResponse(function(res){ |
|||
if (res.data) { |
|||
statusFormElC.style.opacity = '0'; |
|||
statusFormEl.removeAttribute('data-tooltip'); |
|||
md.close(); |
|||
} else if(res.errors){ |
|||
statusFormEl.className = 'fa fa-exclamation-circle'; |
|||
statusFormEl.setAttribute('data-tooltip', res.errors); |
|||
statusFormElC.className = 'form-status text-danger'; |
|||
} |
|||
}); |
|||
|
|||
// Add a link to a github page |
|||
cmdm.add('open-github', { |
|||
run(editor, sender) { |
|||
sender.set('active',false); |
|||
window.open('https://github.com/artf/grapesjs','_blank'); |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'view-github', |
|||
className: 'fa fa-github', |
|||
command: 'open-github' |
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
// Beautify tooltips |
|||
$('*[title]').each(function () { |
|||
var el = $(this); |
|||
var title = el.attr('title').trim(); |
|||
if(!title) |
|||
return; |
|||
el.attr('data-tooltip', el.attr('title')); |
|||
el.attr('title', ''); |
|||
}); |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,210 @@ |
|||
/* #008f73 #4c9790 */ |
|||
.gjs-clm-tags .gjs-sm-title, |
|||
.gjs-sm-sector .gjs-sm-title { |
|||
border-top: none; } |
|||
|
|||
.gjs-clm-tags .gjs-clm-tag { |
|||
background-color: #4c9790; |
|||
border: none; |
|||
box-shadow: none; |
|||
padding: 5px 8px; |
|||
text-shadow: none; } |
|||
|
|||
.gjs-field { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
box-shadow: none; } |
|||
|
|||
.gjs-btnt.gjs-pn-active, |
|||
.gjs-pn-btn.gjs-pn-active { |
|||
box-shadow: none; } |
|||
|
|||
.gjs-pn-btn:hover { |
|||
color: rgba(255, 255, 255, 0.75); } |
|||
|
|||
.gjs-btnt.gjs-pn-active, |
|||
.gjs-color-active, |
|||
.gjs-pn-btn.gjs-pn-active, |
|||
.gjs-pn-btn:active, |
|||
.gjs-block:hover { |
|||
color: #35d7bb; } |
|||
|
|||
#gjs-rte-toolbar .gjs-rte-btn, |
|||
.gjs-btn-prim, |
|||
.gjs-btnt, |
|||
.gjs-clm-tags .gjs-sm-composite.gjs-clm-field, |
|||
.gjs-clm-tags .gjs-sm-field.gjs-sm-composite, |
|||
.gjs-clm-tags .gjs-sm-stack #gjs-sm-add, |
|||
.gjs-color-main, |
|||
.gjs-mdl-dialog, |
|||
.gjs-off-prv, |
|||
.gjs-pn-btn, |
|||
.gjs-pn-panel, |
|||
.gjs-sm-sector .gjs-sm-composite.gjs-clm-field, |
|||
.gjs-sm-sector .gjs-sm-field.gjs-sm-composite, |
|||
.gjs-sm-sector .gjs-sm-stack #gjs-sm-add { |
|||
color: #a0aabf; |
|||
/* #a0aabf #d0d6e2 */ } |
|||
|
|||
#gjs-rte-toolbar, |
|||
.gjs-bg-main, |
|||
.gjs-clm-select option, |
|||
.gjs-clm-tags .gjs-sm-colorp-c, |
|||
.gjs-editor, |
|||
.gjs-mdl-dialog, |
|||
.gjs-nv-item .gjs-nv-title-c, |
|||
.gjs-off-prv, |
|||
.gjs-pn-panel, |
|||
.gjs-select option, |
|||
.gjs-sm-sector .gjs-sm-colorp-c, |
|||
.gjs-sm-select option, |
|||
.gjs-sm-unit option, |
|||
.sp-container { |
|||
background-color: #373d49; } |
|||
|
|||
.gjs-import-label, |
|||
.gjs-export-label { |
|||
margin-bottom: 10px; |
|||
font-size: 12px; } |
|||
|
|||
.gjs-mdl-dialog .gjs-btn-import { |
|||
margin-top: 10px; } |
|||
|
|||
.CodeMirror { |
|||
border-radius: 3px; |
|||
height: 450px; |
|||
font-family: sans-serif, monospace; |
|||
letter-spacing: 0.3px; |
|||
font-size: 12px; } |
|||
|
|||
/* Extra */ |
|||
.gjs-block { |
|||
border: 1px solid rgba(0, 0, 0, 0.2); |
|||
border-radius: 3px; |
|||
margin: 10px 2.5% 5px; |
|||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); |
|||
transition: all 0.2s ease 0s; } |
|||
|
|||
.gjs-block:hover { |
|||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); } |
|||
|
|||
#gjs-pn-views-container.gjs-pn-panel { |
|||
padding: 39px 0 0; } |
|||
|
|||
#gjs-pn-views.gjs-pn-panel { |
|||
padding: 0; |
|||
border: none; } |
|||
|
|||
#gjs-pn-views .gjs-pn-btn { |
|||
margin: 0; |
|||
height: 40px; |
|||
padding: 10px; |
|||
width: 25%; |
|||
border-bottom: 2px solid rgba(0, 0, 0, 0.3); } |
|||
|
|||
#gjs-pn-views .gjs-pn-active { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
border-bottom: 2px solid #35d7bb; |
|||
border-radius: 0; } |
|||
|
|||
#gjs-pn-devices-c { |
|||
padding-left: 30px; } |
|||
|
|||
#gjs-pn-options { |
|||
padding-right: 30px; } |
|||
|
|||
.gjs-sm-composite .gjs-sm-properties { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: space-between; } |
|||
|
|||
#gjs-sm-border-top-left-radius, |
|||
#gjs-sm-border-top-right-radius, |
|||
#gjs-sm-border-bottom-left-radius, |
|||
#gjs-sm-border-bottom-right-radius, |
|||
#gjs-sm-margin-top, |
|||
#gjs-sm-margin-bottom, |
|||
#gjs-sm-margin-right, |
|||
#gjs-sm-margin-left, |
|||
#gjs-sm-padding-top, |
|||
#gjs-sm-padding-bottom, |
|||
#gjs-sm-padding-right, |
|||
#gjs-sm-padding-left { |
|||
flex: 999 1 60px; } |
|||
|
|||
#gjs-sm-border-width, |
|||
#gjs-sm-border-style, |
|||
#gjs-sm-border-color { |
|||
flex: 999 1 80px; } |
|||
|
|||
#gjs-sm-margin-left, |
|||
#gjs-sm-padding-left { |
|||
order: 2; } |
|||
|
|||
#gjs-sm-margin-right, |
|||
#gjs-sm-padding-right { |
|||
order: 3; } |
|||
|
|||
#gjs-sm-margin-bottom, |
|||
#gjs-sm-padding-bottom { |
|||
order: 4; } |
|||
|
|||
.gjs-field-radio { |
|||
width: 100%; } |
|||
|
|||
.gjs-field-radio #gjs-sm-input-holder { |
|||
display: flex; } |
|||
|
|||
.gjs-radio-item { |
|||
flex: 1 0 auto; |
|||
text-align: center; } |
|||
|
|||
.gjs-sm-sector .gjs-sm-property.gjs-sm-list { |
|||
width: 50%; } |
|||
|
|||
.gjs-mdl-content { |
|||
border-top: none; } |
|||
|
|||
.gjs-sm-sector .gjs-sm-property .gjs-sm-layer.gjs-sm-active { |
|||
background-color: rgba(255, 255, 255, 0.09); } |
|||
|
|||
/* |
|||
|
|||
#gjs-pn-views-container, |
|||
#gjs-pn-views{ |
|||
min-width: 270px; |
|||
} |
|||
*/ |
|||
.gjs-f-button::before { |
|||
content: 'B'; } |
|||
|
|||
.gjs-f-divider::before { |
|||
content: 'D'; } |
|||
|
|||
.gjs-mdl-dialog-sm { |
|||
width: 300px; } |
|||
|
|||
.gjs-mdl-dialog form .gjs-sm-property { |
|||
font-size: 12px; |
|||
margin-bottom: 15px; } |
|||
|
|||
.gjs-mdl-dialog form .gjs-sm-label { |
|||
margin-bottom: 5px; } |
|||
|
|||
#gjs-clm-status-c { |
|||
display: none; } |
|||
|
|||
.anim-spin { |
|||
animation: 0.5s linear 0s normal none infinite running spin; } |
|||
|
|||
.form-status { |
|||
float: right; |
|||
font-size: 14px; } |
|||
|
|||
.text-danger { |
|||
color: #f92929; } |
|||
|
|||
@keyframes spin { |
|||
0% { |
|||
transform: rotate(0deg); } |
|||
100% { |
|||
transform: rotate(360deg); } } |
|||
@ -0,0 +1,53 @@ |
|||
/* |
|||
|
|||
Name: material |
|||
Author: Michael Kaminsky (http://github.com/mkaminsky11) |
|||
|
|||
Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme) |
|||
|
|||
*/ |
|||
|
|||
.cm-s-material { |
|||
background-color: #263238; |
|||
color: rgba(233, 237, 237, 1); |
|||
} |
|||
.cm-s-material .CodeMirror-gutters { |
|||
background: #263238; |
|||
color: rgb(83,127,126); |
|||
border: none; |
|||
} |
|||
.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); } |
|||
.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } |
|||
.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } |
|||
.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } |
|||
.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } |
|||
.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } |
|||
|
|||
.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } |
|||
.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); } |
|||
.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); } |
|||
.cm-s-material .cm-variable-2 { color: #80CBC4; } |
|||
.cm-s-material .cm-variable-3 { color: #82B1FF; } |
|||
.cm-s-material .cm-builtin { color: #DECB6B; } |
|||
.cm-s-material .cm-atom { color: #F77669; } |
|||
.cm-s-material .cm-number { color: #F77669; } |
|||
.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); } |
|||
.cm-s-material .cm-string { color: #C3E88D; } |
|||
.cm-s-material .cm-string-2 { color: #80CBC4; } |
|||
.cm-s-material .cm-comment { color: #546E7A; } |
|||
.cm-s-material .cm-variable { color: #82B1FF; } |
|||
.cm-s-material .cm-tag { color: #80CBC4; } |
|||
.cm-s-material .cm-meta { color: #80CBC4; } |
|||
.cm-s-material .cm-attribute { color: #FFCB6B; } |
|||
.cm-s-material .cm-property { color: #80CBAE; } |
|||
.cm-s-material .cm-qualifier { color: #DECB6B; } |
|||
.cm-s-material .cm-variable-3 { color: #DECB6B; } |
|||
.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); } |
|||
.cm-s-material .cm-error { |
|||
color: rgba(255, 255, 255, 1.0); |
|||
background-color: #EC5F67; |
|||
} |
|||
.cm-s-material .CodeMirror-matchingbracket { |
|||
text-decoration: underline; |
|||
color: white !important; |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
[data-tooltip] { |
|||
position: relative; |
|||
} |
|||
|
|||
[data-tooltip]::after { |
|||
font-family: Helvetica, sans-serif; |
|||
background: rgba(51, 51, 51, 0.9); |
|||
background: rgba(55, 61, 73, 0.9); |
|||
border-radius: 3px; |
|||
bottom: 100%; |
|||
color: #fff; |
|||
content: attr(data-tooltip); |
|||
display: block; |
|||
font-size: 12px; |
|||
left: 50%; |
|||
line-height: normal; |
|||
max-width: 32rem; |
|||
opacity: 0; |
|||
overflow: hidden; |
|||
padding: 0.6rem 1rem; |
|||
pointer-events: none; |
|||
position: absolute; |
|||
text-overflow: ellipsis; |
|||
-webkit-transform: translate(-50%, 0); |
|||
-ms-transform: translate(-50%, 0); |
|||
transform: translate(-50%, 0); |
|||
transition: all 0.216s ease; |
|||
z-index: 99; |
|||
} |
|||
|
|||
[data-tooltip]:focus::after, |
|||
[data-tooltip]:hover::after { |
|||
opacity: 1; |
|||
-webkit-transform: translate(-50%, -0.5rem); |
|||
-ms-transform: translate(-50%, -0.5rem); |
|||
transform: translate(-50%, -0.5rem); |
|||
} |
|||
|
|||
[data-tooltip][disabled], |
|||
[data-tooltip].disabled { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
[data-tooltip-pos=right]::after { |
|||
bottom: 50%; |
|||
left: 100%; |
|||
-webkit-transform: translate(0, 50%); |
|||
-ms-transform: translate(0, 50%); |
|||
transform: translate(0, 50%); |
|||
} |
|||
|
|||
[data-tooltip-pos=right]:focus::after, |
|||
[data-tooltip-pos=right]:hover::after { |
|||
-webkit-transform: translate(0.5rem, 50%); |
|||
-ms-transform: translate(0.5rem, 50%); |
|||
transform: translate(0.5rem, 50%); |
|||
} |
|||
|
|||
[data-tooltip-pos=bottom]::after { |
|||
bottom: auto; |
|||
top: 100%; |
|||
-webkit-transform: translate(-50%, 0); |
|||
-ms-transform: translate(-50%, 0); |
|||
transform: translate(-50%, 0); |
|||
} |
|||
|
|||
[data-tooltip-pos=bottom]:focus::after, |
|||
[data-tooltip-pos=bottom]:hover::after { |
|||
-webkit-transform: translate(-50%, 0.5rem); |
|||
-ms-transform: translate(-50%, 0.5rem); |
|||
transform: translate(-50%, 0.5rem); |
|||
} |
|||
|
|||
[data-tooltip-pos=left]::after { |
|||
bottom: 50%; |
|||
left: auto; |
|||
right: 100%; |
|||
-webkit-transform: translate(0, 50%); |
|||
-ms-transform: translate(0, 50%); |
|||
transform: translate(0, 50%); |
|||
} |
|||
|
|||
[data-tooltip-pos=left]:focus::after, |
|||
[data-tooltip-pos=left]:hover::after { |
|||
-webkit-transform: translate(-0.5rem, 50%); |
|||
-ms-transform: translate(-0.5rem, 50%); |
|||
transform: translate(-0.5rem, 50%); |
|||
} |
|||
Loading…
Reference in new issue