Skip to content

Instantly share code, notes, and snippets.

@andyfitz

andyfitz/code.gs

Last active Jun 25, 2019
Embed
What would you like to do?
GSApp doc to jive
//
function onOpen(){
var ui = DocumentApp.getUi();
ui.createMenu('🔥AOT Tools 🔥')
.addItem('⚓️ Sidebar 🧰', 'showSidebar')
// .addItem("html 2 drive", "exportAsHTML")
.addItem("➡ Post to Jive", "postToMojo")
.addToUi()
.showSidebar(); }
function showSidebar(){
var html = HtmlService.createHtmlOutputFromFile('sidebar');
DocumentApp.getUi().showSidebar(html); }
//
function postToMojo() {
var encode = Utilities.base64Encode('USER:PASSWORD', Utilities.Charset.UTF_8);
var docbody = exportAsHTML();
var subject = DocumentApp.getActiveDocument().getName();
var url = "https://JIVEURLHERE.com/api/core/v3/places/XXXXXXX/contents";
var option = {
headers : {
authorization: "Basic " + encode
},
contentType: "application/json",
method: 'post',
payload : JSON.stringify( {
subject: subject,
type: "document",
content: {
type: 'text/html',
text: docbody
},
})
}
var response = UrlFetchApp.fetch(url, option).getContentText()
}
function exportAsHTML(){
var forDriveScope = DriveApp.getStorageUsed(); //needed to get Drive Scope requested
var docID = DocumentApp.getActiveDocument().getId();
var url = "https://docs.google.com/feeds/download/documents/export/Export?id="+docID+"&exportFormat=html";
var param = {
method : "get",
headers : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
muteHttpExceptions:true,
};
var html = UrlFetchApp.fetch(url,param).getContentText();
var file = DriveApp.createFile(docID + ".html", html);
return html;
}
function sendEmail(){
var docbody = exportAsHTML();
var subject = DocumentApp.getActiveDocument().getName();
MailApp.sendEmail({
to: "frank.feldmann@redhat.com",
subject: subject,
htmlBody: docbody });
}
<div id="feedback"></div>
<h1>GDocs Tools</h1>
<script>
function onEmail(sendEmail) {
var div = document.getElementById('feedback');
div.innerHTML = '<div class="woo">email sent</div>';
}
function onSync(postToMojo) {
var div = document.getElementById('feedback');
div.innerHTML = '<div class="woo">Mojo synced</div>';
}
</script>
<input type="radio" name="view" id="show-format" checked/>
<label for="show-format"> Format </label>
<input type="radio" name="view" id="show-email" />
<label for="show-email"> Email</label>
<input type="radio" name="view" id="show-mojo" />
<label for="show-mojo"> Mojo </label>
<br>
<span class="indicator"></span>
<section id="mojo-view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
<path fill="#c00" d="M-1.3 0H101v20H-1.3z"/>
<path fill="#fff" d="M53.9 3.8h32.3v12.1H54z"/>
<path fill="#fff" d="M17 12.2h1v-1.5h.8l.8 1.5h1.2l-1-1.7c.6-.2.9-.6.9-1.2 0-.7-.6-1.3-1.5-1.3H17v4.2zm2-3.3c.4 0 .6.2.6.4 0 .3-.2.5-.5.5h-1v-1h1zM22.3 12.2h3.4v-1h-2.3v-.7h1.5v-.9h-1.5V9h2.3V8h-3.4v4.3zM27.4 12.2h1.8c1.2 0 2.2-1 2.2-2.1 0-1.2-1-2.1-2.2-2.1h-1.8v4.2zm1.7-3.3c.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2h-.6V8.9h.6zM35.4 12.2h1v-1.7h1.8v1.7h1V8h-1v1.6h-1.8V8h-1v4.2zM40.6 12.2h1.1l.4-1h1.7l.3 1h1.2L43.6 8h-1.2l-1.8 4.2zm1.8-1.9L43 9l.6 1.3h-1zM45.6 8.9H47v3.3h1V8.9h1.4v-1h-3.8v1z" />
<path fill="#e00" d="M60.3 11.9l1.4-2.6v2.9h1V8h-1.3l-1 2-1.1-2H58v4.2h1V9.3l1.3 2.6zM68.9 10c0-1.1-1-2.1-2.3-2.1-1.3 0-2.2 1-2.2 2.2 0 1.2 1 2.2 2.2 2.2 1.3 0 2.3-1 2.3-2.2zm-1.1 0c0 .8-.5 1.3-1.2 1.3s-1.2-.5-1.2-1.2.5-1.2 1.2-1.2 1.2.5 1.2 1.2zM73.7 10.5V8h-1v2.5c0 .5-.3.8-.8.8-.4 0-.7-.2-.8-.7l-1 .4c.3.8 1 1.2 1.8 1.2 1 0 1.8-.6 1.8-1.7zM79.8 10c0-1.1-1-2.1-2.2-2.1-1.3 0-2.3 1-2.3 2.2 0 1.2 1 2.2 2.3 2.2 1.3 0 2.2-1 2.2-2.2zm-1 0c0 .8-.5 1.3-1.2 1.3s-1.2-.5-1.2-1.2.5-1.2 1.2-1.2 1.2.5 1.2 1.2z"/>
</svg>
<select>
<option>AOT Main Space</option>
<option>Platform Space</option>
<option>Ansible Space</option>
<option>Enablement Space</option>
</select>
<br>
<button id="postmojo" class="primary" onclick="google.script.run.withSuccessHandler(onSync).postToMojo()" > Send to Mojo</button> <br> <br>
</section>
<section id="email-view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" style="max-width: 6rem; margin: 0 auto; fill:#bbb">
<path d="M91.3 3H8.9a6.3 6.3 0 0 0-6.5 6.3v51.3c0 3.8 2.3 6.4 6.2 6.4h82.7c3.6 0 6.3-2.6 6.3-6.4V9.3C97.6 6 95.4 3 91.3 3zM62.5 35.2L95 7.2c.4.6.6 1.5.6 2.3V61c0 .9-.2 1.7-.6 2.3l-32.5-28zm28.8-30a5 5 0 0 1 2 .5L53.5 40c-2 1.7-5 1.7-7.2 0L7 5.7c.4-.3 1-.5 2-.5zm-86 58c-.5-.6-.7-1.4-.7-2.3V9.5c0-.8.2-1.7.7-2.3l32.5 28zM7 64.7l32.3-28 5.8 5a8.1 8.1 0 0 0 10 0l5.6-5 32.5 28c-.6.3-1.3.5-2 .5H8.6c-.4 0-1-.2-1.5-.5z" />
</svg>
<select disabled>
<option>Send to me only</option>
<option>APAC Sales List</option>
<option>Announce List</option>
<option>AOT Team List</option>
</select>
<button id="emailbtn" class="primary" onclick="google.script.run.withSuccessHandler(onEmail).sendEmail()" > Send Email</button> <br> <br>
</section>
<section id="format-view">
<h1>Work in Progress</h1>
<br />
<svg class="illustration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 40">
<path class="drawit" d="M8.4 4.7v30.4h23.4V12l-7.2-7.3zM13 15.6H27M13 20.2H27M13 25H27M13 29.6h7m4.6-24.9V12h7.2" />
<path class="drawit pulse" d="m 133.5,21.61 c 2.6,0 6.4,-0.51 6.4,-3.59 a 2.72,2.72 0 0 0 -0.1,-0.73 l -1.5,-6.67 c -0.4,-1.482 -0.7,-2.149 -3.3,-3.443 -2,-1.021 -6.4,-2.715 -7.6,-2.715 -1.2,0 -1.6,1.54 -3,1.54 -1.5,0 -2.4,-1.139 -3.7,-1.139 -1.4,0 -2.1,0.846 -2.7,2.566 0,0 -1.8,4.901 -2,5.611 a 1.391,1.391 0 0 0 0,0.4 c 0,1.91 7.5,8.16 17.5,8.16 m 6.8,-2.36 a 10.35,10.35 0 0 1 0.3,2.09 c 0,2.9 -3.2,4.5 -7.5,4.5 -9.7,0 -18.1,-5.65 -18.1,-9.4 a 3.778,3.778 0 0 1 0.3,-1.54 c -3.5,0.22 -8,0.86 -8,4.81 0,6.5 15.4,14.53 27.6,14.53 9.4,0 11.7,-4.24 11.7,-7.58 0,-2.63 -2.2,-5.61 -6.3,-7.39" />
<g>
<path d="M93 14.6L98 20 93 25.5" />
<path d="M76.6 14.6l5.1 5.4-5.1 5.5"/>
<path d="M60.2 14.6l5.1 5.4-5.1 5.5" />
<path d="M84.2 14.6l5.2 5.4-5.2 5.5"/>
<path d="M67.8 14.6L73 20l-5.2 5.5" />
<path d="M51.4 14.6l5.2 5.4-5.2 5.5"/>
</g>
<style>
</style>
</svg>
<br /> <br /> <br /> <br />
<!-- <h2>Clear Style: </h2>
<button>Formatting</button>
<button>Markup</button> <br>
<h2>Custom Theme</h2>
<select>
<option>Article</option>
<option>Documentation</option>
<option>One Stop</option>
</select>
<button>Apply Theme</button>
<h2>Insert: </h2>
<button>Org Chart</button> <button>Headshot</button> <button>Logo</button>
-->
</section>
<svg style="max-height: 6rem; position:absolute; top: 0; left:0; right:0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70">
<path d="M6.51 17.65l3.53-7.97 16.21 2.24 2.36 9.24z"/>
<path style="fill:#e00" d="M22.27 16.76c1.84 0 4.55-.37 4.55-2.57a1.96 1.96 0 0 0 0-.52l-1.14-4.8c-.25-1.07-.51-1.55-2.35-2.47-1.43-.73-4.59-1.95-5.51-1.95-.84 0-1.1 1.1-2.13 1.1-1.06 0-1.76-.84-2.68-.84-.95 0-1.47.63-1.94 1.88 0 0-1.25 3.52-1.4 4.04a1 1 0 0 0-.04.25c0 1.4 5.4 5.88 12.64 5.88m4.85-1.69a7.45 7.45 0 0 1 .22 1.51c0 2.09-2.32 3.23-5.4 3.23-6.94 0-13.04-4.08-13.04-6.76a2.72 2.72 0 0 1 .22-1.1c-2.46.14-5.73.62-5.73 3.45 0 4.67 11.09 10.43 19.87 10.43 6.72 0 8.45-3.05 8.45-5.43 0-1.88-1.65-4.04-4.59-5.33"/>
<path d="M89.45 63.11h1.39v-3.67c.22-.29.55-.48.96-.48.62 0 .99.44.99 1.1v3.05h1.36v-3.27-.36c.22-.33.55-.52.99-.52.63 0 .99.44.99 1.1v3.05h1.36v-3.27c0-1.21-.81-2.05-1.98-2.05-.7 0-1.29.25-1.73.77a1.9 1.9 0 0 0-1.58-.77c-.55 0-.99.14-1.36.47v-.36h-1.39v5.21zm-3.9.1c.59 0 1.07-.15 1.51-.44v.36h1.36v-3.38c0-1.28-.85-1.94-2.24-1.94-.77 0-1.51.18-2.32.55l.52 1.03c.59-.3 1.1-.44 1.58-.44.73 0 1.1.29 1.1.91v.37a3.45 3.45 0 0 0-1.29-.22c-1.28 0-2.13.59-2.13 1.62 0 .92.78 1.58 1.91 1.58zm-.58-1.62c0-.44.4-.66.99-.66.44 0 .77.1 1.1.18v.81c-.33.22-.7.33-1.14.33-.59 0-.95-.26-.95-.66zM77.8 60.5a2.73 2.73 0 0 0 2.8 2.72c.84 0 1.47-.25 2.13-.77l-.92-.81c-.26.26-.7.41-1.14.41-.74 0-1.29-.44-1.47-1.1h3.86v-.33c0-1.62-1.1-2.83-2.57-2.83a2.68 2.68 0 0 0-2.69 2.71zm2.65-1.57c.62 0 1.1.4 1.28 1.06h-2.57c.19-.66.66-1.06 1.29-1.06zm-8.04-1.55h2.35v5.73h1.47v-5.73h2.35V56.1h-6.17v1.28zm-6.03 5.95c-.18.48-.55.7-1.03.7h-.47v1.18c.18 0 .44.1.62.1 1.21 0 1.8-.58 2.31-1.76l2.39-5.58h-1.47l-1.5 3.52-1.29-3.52h-1.51l2.02 5.25-.1.18zm-5.29-.18c.52 0 1.03-.18 1.43-.48v.41c0 .69-.44 1.06-1.24 1.06-.55 0-1.07-.15-1.66-.44l-.47 1.07c.62.33 1.39.47 2.16.47 1.66 0 2.57-.73 2.57-2.13V57.9h-1.36v.33c-.4-.3-.88-.44-1.39-.44a2.64 2.64 0 0 0-2.68 2.68 2.64 2.64 0 0 0 2.64 2.68zm-1.28-2.68c0-.85.66-1.51 1.5-1.51.48 0 .92.19 1.21.48v2.06c-.33.29-.73.47-1.21.47-.88 0-1.5-.66-1.5-1.5zm-7.53 0a2.73 2.73 0 0 0 2.79 2.72 2.75 2.75 0 0 0 2.79-2.72 2.72 2.72 0 0 0-2.79-2.71 2.7 2.7 0 0 0-2.79 2.71zm4.22 0c0 .85-.62 1.51-1.43 1.51-.81 0-1.47-.66-1.47-1.51 0-.88.66-1.54 1.47-1.54.81 0 1.43.66 1.43 1.54zm-5.03-4.73l-1.4.33v7.01h1.4v-7.34zm-7.79 4.73a2.73 2.73 0 0 0 2.79 2.72c1.58 0 2.8-1.21 2.8-2.72a2.7 2.7 0 0 0-2.8-2.71 2.7 2.7 0 0 0-2.79 2.71zm4.23 0c0 .85-.63 1.51-1.44 1.51-.8 0-1.43-.66-1.43-1.51 0-.88.63-1.54 1.43-1.54.81 0 1.44.66 1.44 1.54zm-9.96 2.61h1.36v-3.63c.26-.33.63-.52 1.1-.52.66 0 1.07.44 1.07 1.1v3.05h1.36v-3.27c0-1.21-.81-2.05-2.06-2.05-.55 0-1.06.18-1.47.51v-.4h-1.36v5.21zm-2.42 0h1.36v-3.27c0-1.21-.85-2.05-2.06-2.05-.59 0-1.06.18-1.47.51v-2.53l-1.36.33v7.01h1.36v-3.63c.26-.33.63-.52 1.07-.52.69 0 1.1.44 1.1 1.1v3.05zm-6.28-1.1c-.81 0-1.44-.66-1.44-1.51 0-.88.59-1.54 1.4-1.54.48 0 .92.22 1.29.66l.84-.91a2.93 2.93 0 0 0-2.17-.92 2.66 2.66 0 0 0-2.71 2.71 2.68 2.68 0 0 0 2.71 2.72c.81 0 1.58-.36 2.13-.95l-.8-.85c-.37.41-.78.59-1.25.59zm-8.71-1.48a2.73 2.73 0 0 0 2.79 2.72 3.2 3.2 0 0 0 2.13-.77l-.91-.81c-.3.26-.7.41-1.14.41-.74 0-1.32-.44-1.51-1.1h3.89v-.33c0-1.62-1.1-2.83-2.57-2.83a2.66 2.66 0 0 0-2.68 2.71zm2.65-1.57c.62 0 1.1.4 1.28 1.06H21.9c.19-.66.66-1.06 1.29-1.06zm-8.05-1.55h2.35v5.73h1.47v-5.73h2.35V56.1h-6.17v1.28zm67.55-11.35v1.14h1.17v4.08h1.36v-4.08h1.44v-1.14h-1.44v-.47c0-.48.26-.7.78-.7.25 0 .44 0 .66.11v-1.18c-.22 0-.55-.1-.81-.1-1.32 0-1.99.66-1.99 1.8V46h-1.17zm-5.8 2.61a2.73 2.73 0 0 0 2.79 2.72 2.7 2.7 0 0 0 2.79-2.72c0-1.5-1.21-2.72-2.79-2.72a2.76 2.76 0 0 0-2.79 2.72zm4.26 0c0 .85-.66 1.51-1.47 1.51-.81 0-1.43-.66-1.43-1.51 0-.84.62-1.5 1.43-1.5.81 0 1.47.66 1.47 1.5zm-12.16 0a2.74 2.74 0 0 0 2.83 2.72c.81 0 1.47-.22 2.09-.77l-.88-.81c-.29.26-.7.4-1.18.4a1.5 1.5 0 0 1-1.46-1.06h3.89v-.37c0-1.61-1.1-2.83-2.61-2.83a2.68 2.68 0 0 0-2.68 2.72zm2.68-1.58c.59 0 1.1.44 1.25 1.07h-2.53c.14-.66.62-1.07 1.28-1.07zm-4.99 3.09c-.81 0-1.44-.63-1.44-1.51 0-.84.59-1.5 1.4-1.5.48 0 .88.18 1.28.62l.85-.92a2.93 2.93 0 0 0-2.17-.92 2.7 2.7 0 0 0-2.72 2.72 2.67 2.67 0 0 0 2.72 2.72 2.8 2.8 0 0 0 2.13-.96l-.81-.84c-.4.4-.77.59-1.24.59zm-4.34-4.74c.44 0 .81-.37.81-.77a.82.82 0 0 0-.81-.81c-.4 0-.77.37-.77.81 0 .4.37.77.77.77zm.7.62h-1.36v5.22h1.36v-5.22zm-6.02 0v1.14h1.13v4.08h1.4v-4.08h1.43v-1.14h-1.43v-.47c0-.48.26-.7.77-.7.26 0 .44 0 .66.11v-1.18c-.25 0-.55-.1-.81-.1-1.32 0-2.02.66-2.02 1.8V46h-1.13zm-4.45 0v1.14h1.18v4.08h1.36v-4.08h1.43v-1.14h-1.43v-.47c0-.48.25-.7.8-.7.22 0 .41 0 .63.11v-1.18c-.22 0-.55-.1-.81-.1-1.32 0-1.98.66-1.98 1.8V46h-1.18zm-.51 1.73a3.65 3.65 0 0 0-3.75-3.64 3.64 3.64 0 0 0-3.71 3.64c0 2.02 1.65 3.6 3.71 3.6a3.65 3.65 0 0 0 3.75-3.6zm-1.51 0a2.2 2.2 0 0 1-2.24 2.28 2.2 2.2 0 0 1-2.2-2.28c0-1.32.95-2.31 2.2-2.31 1.29 0 2.24.99 2.24 2.31zM39.16 50a2.2 2.2 0 0 1-2.27-2.24c0-1.32.95-2.31 2.24-2.31.73 0 1.43.33 1.94.95l.96-.95a3.8 3.8 0 0 0-2.9-1.33 3.62 3.62 0 1 0 0 7.24c1.1 0 2.2-.51 2.86-1.29l-.95-.95c-.48.59-1.14.88-1.88.88zm-11.12 1.25h1.5l.74-1.84h2.86l.74 1.84h1.57l-2.86-7.02H30.9l-2.86 7.02zm2.68-3.01l.99-2.57.99 2.57h-1.98zm-7.79 3.01h1.47V48.6h2.06c1.39 0 2.35-.91 2.35-2.16 0-1.29-.96-2.21-2.35-2.21h-3.53v7.02zm3.38-5.77c.62 0 1.03.41 1.03.96s-.41.95-1.03.95H24.4v-1.91h1.91zm-11.39 5.77h1.51l.73-1.84h2.9l.7 1.84h1.58l-2.86-7.02h-1.69l-2.87 7.02zm2.68-3.01l1.03-2.57.99 2.57H17.6zm34.02-10.58c0 1.25.73 1.84 2.09 1.84a5.44 5.44 0 0 0 1.21-.19v-1.43a2.57 2.57 0 0 1-.81.15c-.55 0-.73-.19-.73-.7v-2.21h1.58v-1.46h-1.58v-1.84l-1.76.37v1.47h-1.18v1.46h1.18zm-5.48 0c0-.37.37-.56.96-.56a4.39 4.39 0 0 1 1.03.11v.74a2.23 2.23 0 0 1-1.07.29c-.59 0-.92-.22-.92-.58m.55 1.8a2.68 2.68 0 0 0 1.58-.45v.37H50v-3.67c0-1.43-.92-2.2-2.5-2.2a6.4 6.4 0 0 0-2.68.62l.63 1.29a4.68 4.68 0 0 1 1.72-.45c.74 0 1.1.3 1.1.85v.29a5.13 5.13 0 0 0-1.28-.14c-1.51 0-2.39.58-2.39 1.72 0 .99.81 1.77 2.09 1.77m-9.55-.1h1.84v-2.97h3.16v2.97h1.87v-7.6h-1.87v2.9h-3.16v-2.9h-1.84zm-7.12-2.9a1.46 1.46 0 0 1 1.5-1.43 1.8 1.8 0 0 1 1.22.44v2.02a1.7 1.7 0 0 1-1.22.44 1.47 1.47 0 0 1-1.5-1.47m2.75 2.9h1.73v-8.01l-1.76.41v2.17a2.9 2.9 0 0 0-1.47-.41 2.96 2.96 0 0 0 0 5.92 2.6 2.6 0 0 0 1.51-.52zm-8-4.41a1.28 1.28 0 0 1 1.21.92h-2.39a1.2 1.2 0 0 1 1.18-.92m-2.94 1.55a3.02 3.02 0 0 0 3.12 2.97 3.45 3.45 0 0 0 2.39-.88l-1.14-.97a1.56 1.56 0 0 1-1.18.44 1.48 1.48 0 0 1-1.39-.92h4.11v-.44c0-1.83-1.25-3.12-2.9-3.12a2.95 2.95 0 0 0-3.01 2.98m-3.05-3.16c.62 0 .95.4.95.88 0 .44-.33.84-.95.84h-1.84V33.4zm-3.71 6.02h1.87v-2.79h1.44l1.43 2.79h2.05l-1.65-3.05a2.3 2.3 0 0 0 1.43-2.13c0-1.36-1.06-2.42-2.68-2.42h-3.89z" />
</svg>
<style>
@font-face {
font-family: RedHatText;
src: url(https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/RedHatText/RedHatText-Regular.woff);
}
* {
font-family: RedHatText, sans-serif
}
.illustration {
display: block;
bottom: 0rem;
height: 6rem;
width: 80%;
margin:1rem auto
}
.illustration path {
fill: none;
stroke: #aaa;
stroke-width: 1px;
stroke-linejoin: round;
stroke-linecap: round;
}
.illustration g path {
animation: pulse .5s linear infinite
}
.illustration g path {
animation: pulse .5s linear infinite;
}
.illustration g path:nth-child(1n) {
animation-delay: -.2s
}
.illustration g path:nth-child(2n) {
animation-delay: -.4s
}
.illustration g path:nth-child(3n) {
animation-delay: -.6s
}
.illustration g path:nth-child(4n) {
animation-delay: -.8s
}
.illustration g path:nth-child(5n) {
animation-delay: -1s
}
.illustration g path:nth-child(6n) {
animation-delay: -1.2s
}
@keyframes pulse {
0% {
opacity: 0;
transform: translatex(-2px)
}
20% {
opacity: 0
}
50% {
opacity: 1;
;
}
80% {
opacity: 0
}
100% {
opacity: 0;
transform: translatex(2px)
}
}
.drawit {
animation: drawit 3s linear infinite;
stroke-dasharray: 60 0
}
@keyframes drawit {
0% {
stroke-dashoffset: -60
}
30% {
stroke-dasharray: 30 30
}
100% {
stroke-dashoffset: 60
}
}
.pulse {
stroke: none !important;
animation: load 2s ease infinite
}
@keyframes load {
0% {
fill: transparent;
stroke-dasharray: 0 50;
stroke: #aaa
}
100% {
stroke-width: 1;
stroke-dasharray: 50 0;
stroke-dashoffset: -25;
stroke: #aaa
}
}
::root {
font-size: 2rem
}
* {
font-size: 1em;
font-family: RedHatText, sans-serif;
box-sizing: border-box;
font-size: 1rem;
appearance: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
line-height: 1.5em;
}
h1 {
color: #333;
font-size: 1.5em;
font-weight: 200;
margin: .5rem;
}
h2 {
margin: 2rem 0 1rem;
font-weight: 300;
}
body {
user-select:none;
text-align: center;
font-family: RedHatText, sans-serif;
font-size: 1rem;
padding-top: 7rem;
background-color:#f4f4f4;
}
label {
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
[name="view"] {
position: absolute;
z-index: -1;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
}
[name="view"]+label {
width: 30vw;
background-color: transparent;
padding: 1.5em 0;
margin: 0;
color: #444;
display: inline-block;
}
[name="view"]+label:hover {
transition: background 1s ease ;
}
label{position:relative; overflow:hidden;}
label:after{content:""; background-color:#fff; border-radius: 50%; left:50%; margin-left:-1.5rem; top:0; pointer-events:none; z-index:-1; opacity:0; display:block; width: 3rem; height:3rem; position:absolute;}
input:focus + label:after{animation: touchy .4s linear forwards}
@keyframes touchy{
0%{transform:scale(.1)}
50%{opacity:.7;}
100%{transform: scale(6) translatey(.5rem); opacity:0}
}
.indicator {
display: inline-block;
height: .15em;
background-color: transparent;
width: 10vw;
transition: all 0.25s cubic-bezier(0.5, 0.1, 0.1, 1.3);
}
input {
width: 100%;
border: none;
}
[type="text"]{box-shadow: inset 0 -.12em #ccc; margin-bottom:.5rem;}
[type="text"]:focus{box-shadow: inset 0 -.12em #e00;}
[name="view"]:checked+label {
color: #e00;
}
#show-mojo:checked~.indicator {
transform: translate(302%, -1.5em) scale(2.5, 1);
background-color: #e00;
}
#show-email:checked~.indicator {
transform: translate(0, -1.5em) scale(2.5, 1);
background-color: #e00;
}
#show-format:checked~.indicator {
transform: translate(-302%, -1.5em) scale(2.5, 1);
background-color: #e00;
}
select,
input,
button {
display: inline-block;
border-radius: 0;
border: 0;
padding: 1em 1em 1em 1em;
outline: 0;
cursor: pointer;
}
select {
margin: 1rem; box-shadow: 0 .2rem .5rem rgba(0,0,0,0.1);
border-radius: .4rem;
display:block;
margin: 1rem auto;
padding: 1em 3em 1em 1em;
width: 100%;
}
section {
user-select:none;
transition: all 0.23s cubic-bezier(0.7, 0.2, 0.2, 1.1);
opacity: 0;
background-color: #f8f8f8;
box-shadow: 0 .3em 2em rgba(0, 0, 0, 0.15);
pointer-events: none;
position: absolute;
top: 15rem;
transform: scale(0.95);
width: 95%;
left: 2.5%;
padding: 2.5%;
padding-bottom:1rem;
text-align: center;
}
#show-mojo:checked~#mojo-view {
opacity: 1;
pointer-events: all;
transform: scale(1);
}
#show-mojo:not(:checked)~#mojo-view {
transform: translate(25%, 0);
}
#show-email:checked~#email-view {
opacity: 1;
pointer-events: all;
transform: scale(1);
}
#show-email:not(:checked)~#email-view {
transform: scale(0.7) translate(0%, 5%);
}
#show-format:checked~#format-view {
opacity: 1;
pointer-events: all;
transform: scale(1);
}
#show-format:not(:checked)~#format-view {
transform: translate(-25%, 0);
}
button {
background-color: #888;
color: #fff;
}
select,
input[type="text"] {
background-color: #fff;
}
button {
}
button:hover {
transform: scale(1);
transition: background .12s ease;
box-shadow: 0 .15em .25em rgba(0,0,0,0.23); text-shadow: 0 .1em .2em rgba(0,0,0,0.25);
}
.primary{background-color:#e00; font-size: 1.5em; font-weight: 600; border-radius:.3rem; padding: 1.25rem 3rem}
@media (min-width:40rem){
section{ width: 60%; left: 20%;}
}
#feedback{position:fixed; top:0; left:0; right:0; z-index:999; pointer-events:none; }
#feedback > div{ min-height:3em; background-color: #3a5; color:white; line-height:3em; text-align:center; font-size: 2rem;
animation: fadeout 3s ease 1s forwards; }
@keyframes fadeout{
30%{transform:none; opacity:1}
100%{opacity:0; transform: translatey(1em)}
}
.primary {
cursor: pointer;
appearance: none;
display: inline-block;
color: #c00;
background-color: transparent;
border: 0;
border-radius: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
box-shadow: inset 0 0 0 1px #c00;
font-weight: 500;
text-transform: capitalize;
outline: 0;
border-color: #e00;
background: linear-gradient(-45deg, transparent 50%, #c00 50.01%, #c00 100%);
background-size: 250%;
background-position: 99% 99%;
transition: transform 320ms ease, background-position 160ms linear, color 160ms ease-out, background-color 80ms ease-out 0s;
}
.primary:focus,
.primary:hover {
background-color: #e00;
transform: translate(0, -0.05em);
color: white;
text-shadow: 0 0.1em #990000;
box-shadow: inset 0 -0.15em maroon, inset 0 0 0 0.1em #c00, 0 0.4em 0.25em -0.2em rgba(0, 0, 0, 0.15);
}
.primary:active,
.primary:focus,
.primary:hover {
background-position: 0% 0%;
color: #fff;
transition: transform 400ms ease, background-position 160ms linear, color 160ms ease-out, text-shadow 160ms ease-out, background-color 80ms ease-out 160ms;
}
button:active{animation: active .25s linear alternate infinite;
}
@keyframes active{
0%{background-position: -0%}
50%{transform:scale(.95)}
100%{background-position: 100%}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.