mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 16:22:44 +00:00
Merge branch 'master' into marked-justifiedParagraphs
This commit is contained in:
David Bolack
@@ -9,6 +9,8 @@ import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHead
|
||||
import { markedEmoji as MarkedEmojis } from 'marked-emoji';
|
||||
import MarkedAlignedParagraphs from 'marked-alignment-paragraphs';
|
||||
import MarkedSubSuperText from 'marked-subsuper-text';
|
||||
import { romanize } from 'romans';
|
||||
import writtenNumber from 'written-number';
|
||||
|
||||
//Icon fonts included so they can appear in emoji autosuggest dropdown
|
||||
import diceFont from '../../themes/fonts/iconFonts/diceFont.js';
|
||||
@@ -60,9 +62,57 @@ mathParser.functions.signed = function (a) {
|
||||
if(a >= 0) return `+${a}`;
|
||||
return `${a}`;
|
||||
};
|
||||
// Add Roman numeral functions
|
||||
mathParser.functions.toRomans = function (a) {
|
||||
return romanize(a);
|
||||
};
|
||||
mathParser.functions.toRomansUpper = function (a) {
|
||||
return romanize(a).toUpperCase();
|
||||
};
|
||||
mathParser.functions.toRomansLower = function (a) {
|
||||
return romanize(a).toLowerCase();
|
||||
};
|
||||
// Add character functions
|
||||
mathParser.functions.toChar = function (a) {
|
||||
if(a <= 0) return a;
|
||||
const genChars = function (i) {
|
||||
return (i > 26 ? genChars(Math.floor((i - 1) / 26)) : '') + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[(i - 1) % 26];
|
||||
};
|
||||
return genChars(a);
|
||||
};
|
||||
mathParser.functions.toCharUpper = function (a) {
|
||||
return mathParser.functions.toChar(a).toUpperCase();
|
||||
};
|
||||
mathParser.functions.toCharLower = function (a) {
|
||||
return mathParser.functions.toChar(a).toLowerCase();
|
||||
};
|
||||
// Add word functions
|
||||
mathParser.functions.toWords = function (a) {
|
||||
return writtenNumber(a);
|
||||
};
|
||||
mathParser.functions.toWordsUpper = function (a) {
|
||||
return mathParser.functions.toWords(a).toUpperCase();
|
||||
};
|
||||
mathParser.functions.toWordsLower = function (a) {
|
||||
return mathParser.functions.toWords(a).toLowerCase();
|
||||
};
|
||||
mathParser.functions.toWordsCaps = function (a) {
|
||||
const words = mathParser.functions.toWords(a).split(' ');
|
||||
return words.map((word)=>{
|
||||
return word.replace(/(?:^|\b|\s)(\w)/g, function(w, index) {
|
||||
return index === 0 ? w.toLowerCase() : w.toUpperCase();
|
||||
});
|
||||
}).join(' ');
|
||||
};
|
||||
|
||||
// Normalize variable names; trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const normalizeVarNames = (label)=>{
|
||||
return label.trim().replace(/\s+/g, ' ');
|
||||
};
|
||||
|
||||
//Processes the markdown within an HTML block if it's just a class-wrapper
|
||||
renderer.html = function (html) {
|
||||
renderer.html = function (token) {
|
||||
let html = token.text;
|
||||
if(_.startsWith(_.trim(html), '<div') && _.endsWith(_.trim(html), '</div>')){
|
||||
const openTag = html.substring(0, html.indexOf('>')+1);
|
||||
html = html.substring(html.indexOf('>')+1);
|
||||
@@ -73,18 +123,21 @@ renderer.html = function (html) {
|
||||
};
|
||||
|
||||
// Don't wrap {{ Spans alone on a line, or {{ Divs in <p> tags
|
||||
renderer.paragraph = function(text){
|
||||
renderer.paragraph = function(token){
|
||||
let match;
|
||||
const text = this.parser.parseInline(token.tokens);
|
||||
if(text.startsWith('<div') || text.startsWith('</div'))
|
||||
return `${text}`;
|
||||
else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/span>)$/)) {
|
||||
else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/span>)$/))
|
||||
return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`;
|
||||
} else
|
||||
else
|
||||
return `<p>${text}</p>\n`;
|
||||
};
|
||||
|
||||
//Fix local links in the Preview iFrame to link inside the frame
|
||||
renderer.link = function (href, title, text) {
|
||||
renderer.link = function (token) {
|
||||
let { href, title, tokens } = token;
|
||||
const text = this.parser.parseInline(tokens);
|
||||
let self = false;
|
||||
if(href[0] == '#') {
|
||||
self = true;
|
||||
@@ -96,7 +149,7 @@ renderer.link = function (href, title, text) {
|
||||
}
|
||||
let out = `<a href="${escape(href)}"`;
|
||||
if(title) {
|
||||
out += ` title="${title}"`;
|
||||
out += ` title="${escape(title)}"`;
|
||||
}
|
||||
if(self) {
|
||||
out += ' target="_self"';
|
||||
@@ -106,8 +159,8 @@ renderer.link = function (href, title, text) {
|
||||
};
|
||||
|
||||
// Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
|
||||
renderer.image = function (href, title, text) {
|
||||
href = cleanUrl(href);
|
||||
renderer.image = function (token) {
|
||||
const { href, title, text } = token;
|
||||
if(href === null)
|
||||
return text;
|
||||
|
||||
@@ -352,7 +405,7 @@ const forcedParagraphBreaks = {
|
||||
}
|
||||
},
|
||||
renderer(token) {
|
||||
return `<br>\n`.repeat(token.length);
|
||||
return `<div class='blank'></div>\n`.repeat(token.length);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -470,7 +523,7 @@ const replaceVar = function(input, hoist=false, allowUnresolved=false) {
|
||||
const match = regex.exec(input);
|
||||
|
||||
const prefix = match[1];
|
||||
const label = match[2];
|
||||
const label = normalizeVarNames(match[2]); // Ensure the label name is normalized as it should be in the var stack.
|
||||
|
||||
//v=====--------------------< HANDLE MATH >-------------------=====v//
|
||||
const mathRegex = /[a-z]+\(|[+\-*/^(),]/g;
|
||||
@@ -625,8 +678,8 @@ function MarkedVariables() {
|
||||
});
|
||||
}
|
||||
if(match[3]) { // Block Definition
|
||||
const label = match[4] ? match[4].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const label = match[4] ? normalizeVarNames(match[4]) : null;
|
||||
const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Normalize text content (except newlines for block-level content)
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varDefBlock',
|
||||
@@ -635,7 +688,7 @@ function MarkedVariables() {
|
||||
});
|
||||
}
|
||||
if(match[6]) { // Block Call
|
||||
const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const label = match[7] ? normalizeVarNames(match[7]) : null;
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varCallBlock',
|
||||
@@ -644,7 +697,7 @@ function MarkedVariables() {
|
||||
});
|
||||
}
|
||||
if(match[8]) { // Inline Definition
|
||||
const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const label = match[10] ? normalizeVarNames(match[10]) : null;
|
||||
let content = match[11] || null;
|
||||
|
||||
// In case of nested (), find the correct matching end )
|
||||
@@ -676,7 +729,7 @@ function MarkedVariables() {
|
||||
});
|
||||
}
|
||||
if(match[12]) { // Inline Call
|
||||
const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
|
||||
const label = match[13] ? normalizeVarNames(match[13]) : null;
|
||||
|
||||
varsQueue.push(
|
||||
{ type : 'varCallInline',
|
||||
@@ -738,7 +791,7 @@ Marked.use(mustacheInjectBlock);
|
||||
Marked.use(MarkedAlignedParagraphs());
|
||||
Marked.use(MarkedSubSuperText());
|
||||
Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
|
||||
Marked.use(MarkedExtendedTables({interruptPatterns : tableTerminators}), MarkedGFMHeadingId({ globalSlugs: true }),
|
||||
Marked.use(MarkedExtendedTables({ interruptPatterns: tableTerminators }), MarkedGFMHeadingId({ globalSlugs: true }),
|
||||
MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
|
||||
|
||||
function cleanUrl(href) {
|
||||
@@ -803,12 +856,12 @@ const processStyleTags = (string)=>{
|
||||
obj[key.trim()] = value.trim();
|
||||
return obj;
|
||||
}, {}) || null;
|
||||
const styles = tags?.length ? tags.reduce((styleObj, style) => {
|
||||
const index = style.indexOf(':');
|
||||
const [key, value] = [style.substring(0, index), style.substring(index + 1)];
|
||||
styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim();
|
||||
return styleObj;
|
||||
}, {}) : null;
|
||||
const styles = tags?.length ? tags.reduce((styleObj, style)=>{
|
||||
const index = style.indexOf(':');
|
||||
const [key, value] = [style.substring(0, index), style.substring(index + 1)];
|
||||
styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim();
|
||||
return styleObj;
|
||||
}, {}) : null;
|
||||
|
||||
return {
|
||||
id : id,
|
||||
@@ -824,8 +877,8 @@ const extractHTMLStyleTags = (htmlString)=>{
|
||||
const id = firstElementOnly.match(/id="([^"]*)"/)?.[1] || null;
|
||||
const classes = firstElementOnly.match(/class="([^"]*)"/)?.[1] || null;
|
||||
const styles = firstElementOnly.match(/style="([^"]*)"/)?.[1]
|
||||
?.split(';').reduce((styleObj, style) => {
|
||||
if (style.trim() === '') return styleObj;
|
||||
?.split(';').reduce((styleObj, style)=>{
|
||||
if(style.trim() === '') return styleObj;
|
||||
const index = style.indexOf(':');
|
||||
const [key, value] = [style.substring(0, index), style.substring(index + 1)];
|
||||
styleObj[key.trim()] = value.trim();
|
||||
@@ -835,7 +888,7 @@ const extractHTMLStyleTags = (htmlString)=>{
|
||||
?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
|
||||
.reduce((obj, attr)=>{
|
||||
const index = attr.indexOf('=');
|
||||
let [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
|
||||
const [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
|
||||
obj[key.trim()] = value.replace(/"/g, '');
|
||||
return obj;
|
||||
}, {}) || null;
|
||||
@@ -848,7 +901,7 @@ const extractHTMLStyleTags = (htmlString)=>{
|
||||
};
|
||||
};
|
||||
|
||||
const mergeHTMLTags = (originalTags, newTags) => {
|
||||
const mergeHTMLTags = (originalTags, newTags)=>{
|
||||
return {
|
||||
id : newTags.id || originalTags.id || null,
|
||||
classes : [originalTags.classes, newTags.classes].join(' ').trim() || null,
|
||||
@@ -864,7 +917,13 @@ let globalPageNumber = 0;
|
||||
const Markdown = {
|
||||
marked : Marked,
|
||||
render : (rawBrewText, pageNumber=0)=>{
|
||||
globalVarsList[pageNumber] = {}; //Reset global links for current page, to ensure values are parsed in order
|
||||
const lastPageNumber = pageNumber > 0 ? globalVarsList[pageNumber - 1].HB_pageNumber.content : 0;
|
||||
globalVarsList[pageNumber] = { //Reset global links for current page, to ensure values are parsed in order
|
||||
'HB_pageNumber' : { //Add document variables for this page
|
||||
content : !isNaN(Number(lastPageNumber)) ? Number(lastPageNumber) + 1 : lastPageNumber,
|
||||
resolved : true
|
||||
}
|
||||
};
|
||||
varsQueue = []; //Could move into MarkedVariables()
|
||||
globalPageNumber = pageNumber;
|
||||
if(pageNumber==0) {
|
||||
|
||||
@@ -12,8 +12,8 @@ const Nav = {
|
||||
displayName : 'Nav.base',
|
||||
render : function(){
|
||||
return <nav>
|
||||
{this.props.children}
|
||||
</nav>;
|
||||
{this.props.children}
|
||||
</nav>;
|
||||
}
|
||||
}),
|
||||
logo : function(){
|
||||
|
||||
@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
|
||||
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
|
||||
|
||||
//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
|
||||
const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
|
||||
|
||||
const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
|
||||
|
||||
const handleUp =(e)=>{
|
||||
e.preventDefault();
|
||||
if(isDragging) {
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
background-color : #BBBBBB;
|
||||
.dots {
|
||||
display : table-cell;
|
||||
text-align : center;
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
i {
|
||||
display : block !important;
|
||||
margin : 10px 0px;
|
||||
|
||||
@@ -3,127 +3,127 @@
|
||||
@defaultEasing : ease;
|
||||
|
||||
//Animates all properties on an element
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: all @duration @easing;
|
||||
-moz-transition: all @duration @easing;
|
||||
-o-transition: all @duration @easing;
|
||||
transition: all @duration @easing;
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transition : all @duration @easing;
|
||||
-moz-transition : all @duration @easing;
|
||||
-o-transition : all @duration @easing;
|
||||
transition : all @duration @easing;
|
||||
}
|
||||
//Animates Specific property
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: @prop @duration @easing;
|
||||
-moz-transition: @prop @duration @easing;
|
||||
-o-transition: @prop @duration @easing;
|
||||
transition: @prop @duration @easing;
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transition : @prop @duration @easing;
|
||||
-moz-transition : @prop @duration @easing;
|
||||
-o-transition : @prop @duration @easing;
|
||||
transition : @prop @duration @easing;
|
||||
}
|
||||
|
||||
.animateMany(...){
|
||||
.animateMany(...) {
|
||||
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
|
||||
-webkit-transition-property: @value;
|
||||
-moz-transition-property: @value;
|
||||
-o-transition-property: @value;
|
||||
transition-property: @value;
|
||||
-webkit-transition-property : @value;
|
||||
-moz-transition-property : @value;
|
||||
-o-transition-property : @value;
|
||||
transition-property : @value;
|
||||
|
||||
.animateDuration();
|
||||
.animateEasing();
|
||||
}
|
||||
|
||||
.animateDuration(@duration : @defaultDuration){
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
.animateDuration(@duration : @defaultDuration) {
|
||||
-webkit-transition-duration : @duration;
|
||||
-moz-transition-duration : @duration;
|
||||
-o-transition-duration : @duration;
|
||||
transition-duration : @duration;
|
||||
}
|
||||
|
||||
.animateEasing(@easing : @defaultEasing){
|
||||
-webkit-transition-timing-function: @easing;
|
||||
-moz-transition-timing-function: @easing;
|
||||
-o-transition-timing-function: @easing;
|
||||
transition-timing-function: @easing;
|
||||
.animateEasing(@easing : @defaultEasing) {
|
||||
-webkit-transition-timing-function : @easing;
|
||||
-moz-transition-timing-function : @easing;
|
||||
-o-transition-timing-function : @easing;
|
||||
transition-timing-function : @easing;
|
||||
}
|
||||
|
||||
|
||||
.transition (@prop, @duration: @defaultDuration) {
|
||||
-webkit-transition: @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition: @prop @duration, -moz-transform @duration;
|
||||
-o-transition: @prop @duration, -o-transform @duration;
|
||||
-ms-transition: @prop @duration, -ms-transform @duration;
|
||||
transition: @prop @duration, transform @duration;
|
||||
-webkit-transition : @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition : @prop @duration, -moz-transform @duration;
|
||||
-o-transition : @prop @duration, -o-transform @duration;
|
||||
-ms-transition : @prop @duration, -ms-transform @duration;
|
||||
transition : @prop @duration, transform @duration;
|
||||
}
|
||||
.transform (@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-moz-transform: @transform;
|
||||
-o-transform: @transform;
|
||||
-ms-transform: @transform;
|
||||
transform: @transform;
|
||||
-webkit-transform : @transform;
|
||||
-moz-transform : @transform;
|
||||
-o-transform : @transform;
|
||||
-ms-transform : @transform;
|
||||
transform : @transform;
|
||||
}
|
||||
|
||||
|
||||
.delay(@delay){
|
||||
animation-delay:@delay;
|
||||
-webkit-animation-delay:@delay;
|
||||
transition-delay:@delay;
|
||||
-webkit-transition-delay:@delay;
|
||||
.delay(@delay) {
|
||||
-webkit-transition-delay : @delay;
|
||||
transition-delay : @delay;
|
||||
-webkit-animation-delay : @delay;
|
||||
animation-delay : @delay;
|
||||
}
|
||||
.keep(){
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
-ms-animation-fill-mode:forwards;
|
||||
-o-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
.keep() {
|
||||
-webkit-animation-fill-mode : forwards;
|
||||
-moz-animation-fill-mode : forwards;
|
||||
-ms-animation-fill-mode : forwards;
|
||||
-o-animation-fill-mode : forwards;
|
||||
animation-fill-mode : forwards;
|
||||
}
|
||||
|
||||
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
|
||||
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
|
||||
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
|
||||
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
|
||||
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
|
||||
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
|
||||
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
|
||||
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
|
||||
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
|
||||
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
|
||||
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
|
||||
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
|
||||
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
|
||||
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
|
||||
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
|
||||
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
|
||||
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
|
||||
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
|
||||
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
|
||||
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
|
||||
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s) {
|
||||
&:nth-child(1) {.delay(0*@delayInc + @initialDelay); }
|
||||
&:nth-child(2) {.delay(1*@delayInc + @initialDelay); }
|
||||
&:nth-child(3) {.delay(2*@delayInc + @initialDelay); }
|
||||
&:nth-child(4) {.delay(3*@delayInc + @initialDelay); }
|
||||
&:nth-child(5) {.delay(4*@delayInc + @initialDelay); }
|
||||
&:nth-child(6) {.delay(5*@delayInc + @initialDelay); }
|
||||
&:nth-child(7) {.delay(6*@delayInc + @initialDelay); }
|
||||
&:nth-child(8) {.delay(7*@delayInc + @initialDelay); }
|
||||
&:nth-child(9) {.delay(8*@delayInc + @initialDelay); }
|
||||
&:nth-child(10) {.delay(9*@delayInc + @initialDelay); }
|
||||
&:nth-child(11) {.delay(10*@delayInc + @initialDelay); }
|
||||
&:nth-child(12) {.delay(11*@delayInc + @initialDelay); }
|
||||
&:nth-child(13) {.delay(12*@delayInc + @initialDelay); }
|
||||
&:nth-child(14) {.delay(13*@delayInc + @initialDelay); }
|
||||
&:nth-child(15) {.delay(14*@delayInc + @initialDelay); }
|
||||
&:nth-child(16) {.delay(15*@delayInc + @initialDelay); }
|
||||
&:nth-child(17) {.delay(16*@delayInc + @initialDelay); }
|
||||
&:nth-child(18) {.delay(17*@delayInc + @initialDelay); }
|
||||
&:nth-child(19) {.delay(18*@delayInc + @initialDelay); }
|
||||
&:nth-child(20) {.delay(19*@delayInc + @initialDelay); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.createFrames(@name, @from, @to){
|
||||
.createFrames(@name, @from, @to) {
|
||||
@frames: {
|
||||
from { @from(); }
|
||||
to { @to(); }
|
||||
};
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
}
|
||||
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
animation-name: @name;
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
-webkit-animation-timing-function: @easing;
|
||||
-moz-animation-timing-function: @easing;
|
||||
-ms-animation-timing-function: @easing;
|
||||
animation-timing-function: @easing;
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-animation-name : @name;
|
||||
-moz-animation-name : @name;
|
||||
-ms-animation-name : @name;
|
||||
animation-name : @name;
|
||||
-webkit-animation-duration : @duration;
|
||||
-moz-animation-duration : @duration;
|
||||
-ms-animation-duration : @duration;
|
||||
animation-duration : @duration;
|
||||
-webkit-animation-timing-function : @easing;
|
||||
-moz-animation-timing-function : @easing;
|
||||
-ms-animation-timing-function : @easing;
|
||||
animation-timing-function : @easing;
|
||||
}
|
||||
|
||||
|
||||
@@ -132,82 +132,82 @@
|
||||
Standard Animations
|
||||
****************************/
|
||||
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeIn; @duration; @easing);
|
||||
.createFrames(fadeIn,
|
||||
{ opacity : 0; },
|
||||
{ opacity : 0; },
|
||||
{ opacity : 1; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInDown; @duration; @easing);
|
||||
.createFrames(fadeInDown,
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInTop; @duration; @easing);
|
||||
.createFrames(fadeInTop,
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInLeft; @duration; @easing);
|
||||
.createFrames(fadeInLeft,
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInRight; @duration; @easing);
|
||||
.createFrames(fadeInRight,
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOut; @duration; @easing);
|
||||
.createFrames(fadeOut,
|
||||
{ opacity : 1; },
|
||||
{ opacity : 1; },
|
||||
{ opacity : 0; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutDown; @duration; @easing);
|
||||
.createFrames(fadeOutDown,
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutTop; @duration; @easing);
|
||||
.createFrames(fadeOutTop,
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutLeft; @duration; @easing);
|
||||
.createFrames(fadeOutLeft,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(-20px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutRight; @duration; @easing);
|
||||
.createFrames(fadeOutRight,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(20px));}
|
||||
);
|
||||
}
|
||||
@@ -219,50 +219,50 @@
|
||||
Fun Animations
|
||||
****************************/
|
||||
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(spin, @duration, @easing);
|
||||
.spinKeyFrames(){
|
||||
.spinKeyFrames() {
|
||||
from { .transform(rotate(0deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
}
|
||||
@-webkit-keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
}
|
||||
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(bounce, @duration, @easing);
|
||||
.bounceKeyFrames(){
|
||||
.bounceKeyFrames() {
|
||||
0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
|
||||
40% { .transform(translateY(-30px));}
|
||||
60% { .transform(translateY(-15px));}
|
||||
}
|
||||
@-webkit-keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
}
|
||||
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(pulse, @duration, @easing);
|
||||
.pulseKeyFrames(){
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
.pulseKeyFrames() {
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
}
|
||||
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(rubberBand, @duration, @easing);
|
||||
.rubberBandKeyFrames(){
|
||||
.rubberBandKeyFrames() {
|
||||
0% {.transform(scale(1));}
|
||||
30% {.transform(scaleX(1.25) scaleY(0.75));}
|
||||
40% {.transform(scaleX(0.75) scaleY(1.25));}
|
||||
@@ -270,32 +270,32 @@
|
||||
100% {.transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
}
|
||||
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(shake, @duration, @easing);
|
||||
.shakeKeyFrames(){
|
||||
.shakeKeyFrames() {
|
||||
0%, 100% {.transform( translateX(0));}
|
||||
10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
|
||||
20%, 40%, 60%, 80% {.transform( translateX(10px));}
|
||||
}
|
||||
@-webkit-keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
}
|
||||
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transform-origin : top center;
|
||||
-ms-transform-origin : top center;
|
||||
transform-origin : top center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
.swingKeyFrames() {
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
@@ -303,18 +303,18 @@
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transform-origin : center center;
|
||||
-ms-transform-origin : center center;
|
||||
transform-origin : center center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
.swingKeyFrames() {
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
@@ -322,15 +322,15 @@
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(wobble, @duration, @easing);
|
||||
.wobbleKeyFrames(){
|
||||
.wobbleKeyFrames() {
|
||||
0% {.transform(translateX(0%));}
|
||||
15% {.transform(translateX(-25%) rotate(-5deg));}
|
||||
30% {.transform(translateX(20%) rotate(3deg));}
|
||||
@@ -340,22 +340,22 @@
|
||||
100% {.transform(translateX(0%));}
|
||||
}
|
||||
@-webkit-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
}
|
||||
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(popIn, @duration, @easing);
|
||||
.popInKeyFrames(){
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
.popInKeyFrames() {
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
}
|
||||
|
||||
@@ -23,47 +23,47 @@
|
||||
@grey : #7F8C8D;
|
||||
|
||||
#backgroundColors {
|
||||
&.tealLight{ background-color : @tealLight };
|
||||
&.teal{ background-color : @teal };
|
||||
&.greenLight{ background-color : @greenLight };
|
||||
&.green{ background-color : @green };
|
||||
&.blueLight{ background-color : @blueLight };
|
||||
&.blue{ background-color : @blue };
|
||||
&.purpleLight{ background-color : @purpleLight };
|
||||
&.purple{ background-color : @purple };
|
||||
&.steelLight{ background-color : @steelLight };
|
||||
&.steel{ background-color : @steel };
|
||||
&.yellowLight{ background-color : @yellowLight };
|
||||
&.yellow{ background-color : @yellow };
|
||||
&.orangeLight{ background-color : @orangeLight };
|
||||
&.orange{ background-color : @orange };
|
||||
&.redLight{ background-color : @redLight };
|
||||
&.red{ background-color : @red };
|
||||
&.silverLight{ background-color : @silverLight };
|
||||
&.silver{ background-color : @silver };
|
||||
&.greyLight{ background-color : @greyLight };
|
||||
&.grey{ background-color : @grey };
|
||||
&.tealLight { background-color : @tealLight; };
|
||||
&.teal { background-color : @teal; };
|
||||
&.greenLight { background-color : @greenLight; };
|
||||
&.green { background-color : @green; };
|
||||
&.blueLight { background-color : @blueLight; };
|
||||
&.blue { background-color : @blue; };
|
||||
&.purpleLight { background-color : @purpleLight; };
|
||||
&.purple { background-color : @purple; };
|
||||
&.steelLight { background-color : @steelLight; };
|
||||
&.steel { background-color : @steel; };
|
||||
&.yellowLight { background-color : @yellowLight; };
|
||||
&.yellow { background-color : @yellow; };
|
||||
&.orangeLight { background-color : @orangeLight; };
|
||||
&.orange { background-color : @orange; };
|
||||
&.redLight { background-color : @redLight; };
|
||||
&.red { background-color : @red; };
|
||||
&.silverLight { background-color : @silverLight; };
|
||||
&.silver { background-color : @silver; };
|
||||
&.greyLight { background-color : @greyLight; };
|
||||
&.grey { background-color : @grey; };
|
||||
}
|
||||
|
||||
#backgroundColorsHover {
|
||||
&.tealLight:hover{ background-color : @tealLight };
|
||||
&.teal:hover{ background-color : @teal };
|
||||
&.greenLight:hover{ background-color : @greenLight };
|
||||
&.green:hover{ background-color : @green };
|
||||
&.blueLight:hover{ background-color : @blueLight };
|
||||
&.blue:hover{ background-color : @blue };
|
||||
&.purpleLight:hover{ background-color : @purpleLight };
|
||||
&.purple:hover{ background-color : @purple };
|
||||
&.steelLight:hover{ background-color : @steelLight };
|
||||
&.steel:hover{ background-color : @steel };
|
||||
&.yellowLight:hover{ background-color : @yellowLight };
|
||||
&.yellow:hover{ background-color : @yellow };
|
||||
&.orangeLight:hover{ background-color : @orangeLight };
|
||||
&.orange:hover{ background-color : @orange };
|
||||
&.redLight:hover{ background-color : @redLight };
|
||||
&.red:hover{ background-color : @red };
|
||||
&.silverLight:hover{ background-color : @silverLight };
|
||||
&.silver:hover{ background-color : @silver };
|
||||
&.greyLight:hover{ background-color : @greyLight };
|
||||
&.grey:hover{ background-color : @grey };
|
||||
&.tealLight:hover { background-color : @tealLight; };
|
||||
&.teal:hover { background-color : @teal; };
|
||||
&.greenLight:hover { background-color : @greenLight; };
|
||||
&.green:hover { background-color : @green; };
|
||||
&.blueLight:hover { background-color : @blueLight; };
|
||||
&.blue:hover { background-color : @blue; };
|
||||
&.purpleLight:hover { background-color : @purpleLight; };
|
||||
&.purple:hover { background-color : @purple; };
|
||||
&.steelLight:hover { background-color : @steelLight; };
|
||||
&.steel:hover { background-color : @steel; };
|
||||
&.yellowLight:hover { background-color : @yellowLight; };
|
||||
&.yellow:hover { background-color : @yellow; };
|
||||
&.orangeLight:hover { background-color : @orangeLight; };
|
||||
&.orange:hover { background-color : @orange; };
|
||||
&.redLight:hover { background-color : @redLight; };
|
||||
&.red:hover { background-color : @red; };
|
||||
&.silverLight:hover { background-color : @silverLight; };
|
||||
&.silver:hover { background-color : @silver; };
|
||||
&.greyLight:hover { background-color : @greyLight; };
|
||||
&.grey:hover { background-color : @grey; };
|
||||
}
|
||||
@@ -12,37 +12,31 @@
|
||||
font-family : 'CodeBold';
|
||||
src : data-uri('naturalcrit/styles/CODE Bold.otf') format('opentype');
|
||||
}
|
||||
html,body, #reactRoot{
|
||||
html,body, #reactRoot {
|
||||
height : 100vh;
|
||||
min-height : 100vh;
|
||||
margin : 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
}
|
||||
*{
|
||||
box-sizing : border-box;
|
||||
}
|
||||
.colorButton(@backgroundColor : @green){
|
||||
* { box-sizing : border-box; }
|
||||
.colorButton(@backgroundColor : @green) {
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 0.8em;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
border : none;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @backgroundColor;
|
||||
border : none;
|
||||
&:hover { background-color : darken(@backgroundColor, 5%); }
|
||||
&:active { background-color : darken(@backgroundColor, 10%); }
|
||||
&:disabled {
|
||||
cursor : not-allowed;
|
||||
background-color : @silver !important;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +1,76 @@
|
||||
|
||||
@containerWidth : 1000px;
|
||||
|
||||
html, body{
|
||||
html, body {
|
||||
position : relative;
|
||||
height : 100%;
|
||||
min-height : 100%;
|
||||
background-color : #eee;
|
||||
font-family : 'Lato', sans-serif;
|
||||
color : @copyGrey;
|
||||
background-color : #EEEEEE;
|
||||
}
|
||||
.container{
|
||||
.container {
|
||||
position : relative;
|
||||
max-width : @containerWidth;
|
||||
margin : 0 auto;
|
||||
padding-right : 20px;
|
||||
padding-left : 20px;
|
||||
margin : 0 auto;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 2em;
|
||||
}
|
||||
h2{
|
||||
h2 {
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 1.5em;
|
||||
font-weight : 900;
|
||||
}
|
||||
h3{
|
||||
h3 {
|
||||
margin-top : 5px;
|
||||
margin-bottom : 7px;
|
||||
font-size : 1em;
|
||||
font-weight : 900;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
margin-bottom : 1em;
|
||||
font-size : 16px;
|
||||
color : @copyGrey;
|
||||
line-height : 1.5em;
|
||||
color : @copyGrey;
|
||||
}
|
||||
code{
|
||||
background-color : #F8F8F8;
|
||||
font-family : 'Courier', mono;
|
||||
code {
|
||||
font-family : 'Courier', "mono";
|
||||
color : black;
|
||||
white-space : pre;
|
||||
background-color : #F8F8F8;
|
||||
}
|
||||
a{
|
||||
color : inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight : bold;
|
||||
}
|
||||
button{
|
||||
a { color : inherit; }
|
||||
strong { font-weight : bold; }
|
||||
button {
|
||||
.button();
|
||||
}
|
||||
.button(@backgroundColor : @green){
|
||||
.button(@backgroundColor : @green) {
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : "Lato", Helvetica, Arial, sans-serif;
|
||||
font-family : 'Lato', "Helvetica", "Arial", sans-serif;
|
||||
font-size : 15px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
border : none;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @silver !important;
|
||||
}
|
||||
}
|
||||
.iconButton(@backgroundColor : @green){
|
||||
padding : 0.6em;
|
||||
cursor : pointer;
|
||||
outline : none;
|
||||
background-color : @backgroundColor;
|
||||
border : none;
|
||||
&:hover { background-color : darken(@backgroundColor, 5%); }
|
||||
&:active { background-color : darken(@backgroundColor, 10%); }
|
||||
&:disabled { background-color : @silver !important; }
|
||||
}
|
||||
.iconButton(@backgroundColor : @green) {
|
||||
padding : 0.6em;
|
||||
font-size : 14px;
|
||||
color : white;
|
||||
text-align : center;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
}
|
||||
@@ -1,33 +1,23 @@
|
||||
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){
|
||||
border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0
|
||||
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video) {padding : 0;margin : 0;font : inherit;font-size : 100%;vertical-align : baseline;
|
||||
border : 0;
|
||||
}
|
||||
|
||||
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section){
|
||||
display:block
|
||||
}
|
||||
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section) { display : block; }
|
||||
|
||||
:where(body){
|
||||
line-height:1
|
||||
}
|
||||
:where(body) { line-height : 1; }
|
||||
|
||||
:where(ol,ul){
|
||||
list-style:none
|
||||
}
|
||||
:where(ol,ul) { list-style : none; }
|
||||
|
||||
:where(blockquote,q){
|
||||
quotes:none
|
||||
}
|
||||
:where(blockquote,q) { quotes : none; }
|
||||
|
||||
:where(blockquote:before,blockquote:after,q:before,q:after){
|
||||
content:none
|
||||
}
|
||||
:where(blockquote::before,blockquote::after,q::before,q::after) { content : none; }
|
||||
|
||||
:where(table){
|
||||
border-collapse:collapse;border-spacing:0
|
||||
:where(table) {border-spacing : 0;
|
||||
border-collapse : collapse;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
background-color: unset;
|
||||
text-transform: unset;
|
||||
color: unset;
|
||||
color : unset;
|
||||
text-transform : unset;
|
||||
background-color : unset;
|
||||
}
|
||||
|
||||
@@ -2,116 +2,115 @@
|
||||
@tooltipColor : #383838;
|
||||
@arrowSize : 6px;
|
||||
@arrowPosition : 18px;
|
||||
[data-tooltip]{
|
||||
[data-tooltip] {
|
||||
.tooltip(attr(data-tooltip));
|
||||
}
|
||||
[data-tooltip-top]{
|
||||
[data-tooltip-top] {
|
||||
.tooltipTop(attr(data-tooltip-top));
|
||||
}
|
||||
[data-tooltip-bottom]{
|
||||
[data-tooltip-bottom] {
|
||||
.tooltipBottom(attr(data-tooltip-bottom));
|
||||
}
|
||||
[data-tooltip-left]{
|
||||
[data-tooltip-left] {
|
||||
.tooltipLeft(attr(data-tooltip-left));
|
||||
}
|
||||
[data-tooltip-right]{
|
||||
[data-tooltip-right] {
|
||||
.tooltipRight(attr(data-tooltip-right));
|
||||
}
|
||||
.tooltip(@content){
|
||||
.tooltip(@content) {
|
||||
.tooltipBottom(@content);
|
||||
}
|
||||
.tooltipTop(@content){
|
||||
.tooltipTop(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-bottom : -@arrowSize * 2;
|
||||
border-top-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after{
|
||||
&::after { margin-left : -18px; }
|
||||
&::before, &::after {
|
||||
bottom : 100%;
|
||||
left : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateY(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
.tooltipBottom(@content){
|
||||
.tooltipBottom(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-top : -@arrowSize * 2;
|
||||
border-bottom-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after{
|
||||
&::after { margin-left : -18px; }
|
||||
&::before, &::after {
|
||||
top : 100%;
|
||||
left : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateY(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
.tooltipLeft(@content){
|
||||
.tooltipLeft(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-right : -@arrowSize * 2;
|
||||
margin-bottom : -@arrowSize;
|
||||
border-left-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
&::after { margin-bottom : -14px;}
|
||||
&::before, &::after {
|
||||
right : 100%;
|
||||
bottom : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateX(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
.tooltipRight(@content){
|
||||
.tooltipRight(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-bottom : -@arrowSize;
|
||||
margin-left : -@arrowSize * 2;
|
||||
border-right-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
&::after { margin-bottom : -14px;}
|
||||
&::before, &::after {
|
||||
bottom : 50%;
|
||||
left : 100%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateX(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
.tooltipShow(){
|
||||
}
|
||||
.tooltipBase(@content){
|
||||
.tooltipShow(){ }
|
||||
.tooltipBase(@content) {
|
||||
//position: relative;
|
||||
&:before, &:after{
|
||||
&::before, &::after {
|
||||
.animateAll();
|
||||
position : absolute;
|
||||
z-index : 1000000;
|
||||
opacity : 0;
|
||||
pointer-events : none;
|
||||
opacity : 0;
|
||||
}
|
||||
//Arrow
|
||||
&:before{
|
||||
content : '';
|
||||
&::before {
|
||||
z-index : 1000001;
|
||||
content : '';
|
||||
background : transparent;
|
||||
border : @arrowSize solid transparent;
|
||||
}
|
||||
//Box
|
||||
&:after{
|
||||
content : @content;
|
||||
&::after {
|
||||
visibility : hidden;
|
||||
padding : 8px 10px;
|
||||
background : @tooltipColor;
|
||||
font-size : 12px;
|
||||
color : white;
|
||||
line-height : 12px;
|
||||
color : white;
|
||||
white-space : nowrap;
|
||||
content : @content;
|
||||
background : @tooltipColor;
|
||||
}
|
||||
&:hover:before, &:hover:after {
|
||||
&:hover::before, &:hover::after {
|
||||
visibility : visible;
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user