ricardozea
4/22/2014 - 5:30 PM
A Pen by Ricardo Zea. To see the last version go here: https://gist.github.com/ricardozea/2929e989464b70219fcd
A Pen by Ricardo Zea. To see the last version go here: https://gist.github.com/ricardozea/2929e989464b70219fcd
@import "compass";
//Mixin for inside border
@mixin ib($thickness:2px,$color:white,$alpha:.1) {
box-shadow:inset 0 0 0 $thickness rgba($color,$alpha);
}
.a { @include ib(); }
.b { @include ib(5px); }
.c { @include ib(10px,$r); }
.d { @include ib(15px,$y,.5); }
.e { @include ib(20px,$b,1); }
//Styling stuff, not needed for demo
//Mixin for same width & height or just width v2 (http://codepen.io/ricardozea/pen/GojnI)
@mixin wh( $width, $height: false ) {
width: $width;
@if( $height ) {
height: $height;
}
@else {
height: $width;
}
}
ol { width: 50%; margin: auto; text-align: left; }
.wrapper { display: flex; justify-content:center; height: 100%; }
.container { display: flex; justify-content:center; align-items:center; @include wh(150px); margin:0 10px; background: rgba(black,.1); }
.a { background: none !important /*sorry had to*/; }
time { font-size: 11px; color:rgba(white,.1); }
pre { display: inline-block; text-align: left; }
.sections { display:flex; justify-content:center; margin-top: 40px; }
.components-demo { margin:0 5px; padding: 20px; background: rgba(black,.1); @include ib(3px, black); border-radius: 3px; }
h2:first-of-type { margin-top: 0; }
/**/// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: #20201d;
$base01: #292824;
$base02: #6e6b5e;
$base03: #7d7a68;
$base04: #999580;
$base05: #a6a28c;
$base06: #e8e4cf;
$base07: #fefbec;
$base08: #d73737;
$base09: #b65611;
$base0A: #cfb017;
$base0B: #60ac39;
$base0C: #1fad83;
$base0D: #6684e1;
$base0E: #b854d4;
$base0F: #d43552;
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.375;
$code-background: $base00;
$code-color: $base05;
$code-color-fade: $base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name: $base09;
$code-color-string: $base0C;
$code-color-name: $base0A;
$code-color-number: $base09;
$code-color-variable: $base0D;
$code-color-selector: $base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/**
* Prism base code highlighter theme using Sass
*
* @author @MoOx
* https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
* slightly adapted by me, Bram de Haan
*/
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
$code-font-size: 14px !default;
$code-line-height: 1.375 !default;
$code-tab-size: 4 !default;
$code-hyphens: none !default;
$code-block-padding: 12px !default;
$code-inline-padding: 2px 6px !default;
$code-border-radius: 5px !default;
$code-border: 1px solid #e1e1e8 !default;
$code-background: #2a2a2a !default;
$code-color: #fff !default;
$code-color-fade: #bebec5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: 1px 1px .3em -.1em #000 inset !default;
$code-color-property: #b58900 !default;
$code-color-important: #cb4b16 !default;
$code-color-tag: #268bd2 !default;
$code-color-atrule: #2aa198 !default;
$code-color-attr-name: #b65611 !default;
// $code-linenums-padding: 7px !default;
// $code-linenums-width: 40px !default;
// $code-linenums-background: #444 !default;
// $code-linenums-border-color: #555 !default;
// $code-linenums-border-width: 1px !default;
@if $code-selector != null {
#{$code-selector} {
-moz-tab-size: $code-tab-size;
-o-tab-size: $code-tab-size;
tab-size: $code-tab-size;
-webkit-hyphens: $code-hyphens;
-moz-hyphens: $code-hyphens;
-ms-hyphens: $code-hyphens;
hyphens: $code-hyphens;
// whitespace management
white-space: pre; // fallback
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
font-family: $code-font-family;
font-size: $code-font-size;
line-height: $code-line-height;
color: $code-color;
// text-shadow: $code-text-shadow;
background: $code-background;
}
}
%code-background {
border-radius: $code-border-radius;
border: $code-border;
box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {
#{$code-selector-block} {
@extend %code-background;
padding: $code-block-padding;
}
}
@if $code-selector-inline != null {
#{$code-selector-inline} {
@extend %code-background;
padding: $code-inline-padding;
}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
// background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string: null !default;
$code-color-name: null !default;
$code-color-number: null !default;
$code-color-variable: null !default;
$code-color-selector: null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {
.namespace {
opacity: .7;
}
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata {
color: $code-color-comment;
}
&.null,
&.operator,
&.boolean,
&.number {
color: $code-color-number;
}
&.string {
color: $code-color-string;
}
&.attr-name {
color: $code-color-attr-name;
}
&.entity,
&.url,
.language-css &.string,
.style &.string {
color: $code-color-string;
}
&.selector {
color: $code-color-selector;
}
&.attr-value,
&.keyword,
&.control,
&.directive,
&.unit {
color: $code-color-keyword;
}
&.important {
color: $code-color-important;
}
&.atrule{
color: $code-color-atrule;
}
&.regex,
&.statement {
color: $code-color-value;
}
&.placeholder,
&.variable {
color: $code-color-variable;
}
&.property,
&.tag {
// font-style: italic;
}
&.property {
color: $code-color-property;
}
&.tag {
color: $code-color-tag;
}
&.important,
&.statement {
font-weight: bold;
}
// todo ?
// &.mixin
// &.gradient
// &.abslength
// &.easing
// &.time
// &.angle
// &.fontfamily
// ruby/vim https://github.com/LeaVerou/prism/pull/18
// &.inst-var
// &.builtin
// &.const
// &.symbol
//
// php https://github.com/LeaVerou/prism/pull/20
// &.deliminator
// &.function
&.punctuation {
color: $code-color-punctuation;
}
&.entity {
cursor: help;
}
// for dev :)
&.debug { color: red }
}
}
// generic demo styles
.header h1 .small {
font: normal 100%/1.375 AvenirNext-Regular, Corbel, "Segoe Ui", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.base00-background { background-color: $base00; }
.base01-background { background-color: $base01; }
.base02-background { background-color: $base02; }
.base03-background { background-color: $base03; }
.base04-background { background-color: $base04; }
.base05-background { background-color: $base05; }
.base06-background { background-color: $base06; }
.base07-background { background-color: $base07; }
.base08-background,
.red-background { background-color: $red; }
.base09-background,
.orange-background { background-color: $orange; }
.base0A-background,
.yellow-background { background-color: $yellow; }
.base0B-background,
.green-background { background-color: $green; }
.base0C-background,
.cyan-background { background-color: $cyan; }
.base0D-background,
.blue-background { background-color: $blue; }
.base0E-background,
.violet-background { background-color: $violet; }
.base0F-background,
.magenta-background { background-color: $magenta; }
.base00 { color: $base00; }
.base01 { color: $base01; }
.base02 { color: $base02; }
.base03 { color: $base03; }
.base04 { color: $base04; }
.base05 { color: $base05; }
.base06 { color: $base06; }
.base07 { color: $base07; }
.base08,
.red { color: $red; }
.base09,
.orange { color: $orange; }
.base0A,
.yellow { color: $yellow; }
.base0B,
.green { color: $green; }
.base0C,
.cyan { color: $cyan; }
.base0D,
.blue { color: $blue; }
.base0E,
.violet { color: $violet; }
.base0F,
.magenta { color: $magenta; }
pre[class*="language"].base00-background {
background-color: $base00;
}
.sh-c {
overflow: auto;
color: #1b1918 !important;
}
.sh-c-comm {
padding: .2em .5em;
display: inline-block;
}
.sh-c-light,
.sh-c-light .comment {
color: #a8a19f !important;
}
.sh-c-dark,
.sh-c-dark .comment {
color: #1b1918 !important;
}
pre[class^="base"] {
padding: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: .5em 0;
}
.language- .break-word {
word-break: break-word;
}
code[class*="language-"] { background: none !important /*sorry had to*/; box-shadow: none; }/* **********************************************
Begin prism-core.js
********************************************** */
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
(function(){
// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
var _ = self.Prism = {
util: {
type: function (o) {
return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
},
// Deep clone a language definition (e.g. to extend it)
clone: function (o) {
var type = _.util.type(o);
switch (type) {
case 'Object':
var clone = {};
for (var key in o) {
if (o.hasOwnProperty(key)) {
clone[key] = _.util.clone(o[key]);
}
}
return clone;
case 'Array':
return o.slice();
}
return o;
}
},
languages: {
extend: function (id, redef) {
var lang = _.util.clone(_.languages[id]);
for (var key in redef) {
lang[key] = redef[key];
}
return lang;
},
// Insert a token before another token in a language literal
insertBefore: function (inside, before, insert, root) {
root = root || _.languages;
var grammar = root[inside];
var ret = {};
for (var token in grammar) {
if (grammar.hasOwnProperty(token)) {
if (token == before) {
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
ret[newToken] = insert[newToken];
}
}
}
ret[token] = grammar[token];
}
}
return root[inside] = ret;
},
// Traverse a language definition with Depth First Search
DFS: function(o, callback) {
for (var i in o) {
callback.call(o, i, o[i]);
if (_.util.type(o) === 'Object') {
_.languages.DFS(o[i], callback);
}
}
}
},
highlightAll: function(async, callback) {
var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
for (var i=0, element; element = elements[i++];) {
_.highlightElement(element, async === true, callback);
}
},
highlightElement: function(element, async, callback) {
// Find language
var language, grammar, parent = element;
while (parent && !lang.test(parent.className)) {
parent = parent.parentNode;
}
if (parent) {
language = (parent.className.match(lang) || [,''])[1];
grammar = _.languages[language];
}
if (!grammar) {
return;
}
// Set language on the element, if not present
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
// Set language on the parent, for styling
parent = element.parentNode;
if (/pre/i.test(parent.nodeName)) {
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
}
var code = element.textContent;
if(!code) {
return;
}
code = code.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
var env = {
element: element,
language: language,
grammar: grammar,
code: code
};
_.hooks.run('before-highlight', env);
if (async && self.Worker) {
var worker = new Worker(_.filename);
worker.onmessage = function(evt) {
env.highlightedCode = Token.stringify(JSON.parse(evt.data), language);
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
callback && callback.call(env.element);
_.hooks.run('after-highlight', env);
};
worker.postMessage(JSON.stringify({
language: env.language,
code: env.code
}));
}
else {
env.highlightedCode = _.highlight(env.code, env.grammar, env.language)
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
callback && callback.call(element);
_.hooks.run('after-highlight', env);
}
},
highlight: function (text, grammar, language) {
return Token.stringify(_.tokenize(text, grammar), language);
},
tokenize: function(text, grammar, language) {
var Token = _.Token;
var strarr = [text];
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
tokenloop: for (var token in grammar) {
if(!grammar.hasOwnProperty(token) || !grammar[token]) {
continue;
}
var pattern = grammar[token],
inside = pattern.inside,
lookbehind = !!pattern.lookbehind,
lookbehindLength = 0;
pattern = pattern.pattern || pattern;
for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
var str = strarr[i];
if (strarr.length > text.length) {
// Something went terribly wrong, ABORT, ABORT!
break tokenloop;
}
if (str instanceof Token) {
continue;
}
pattern.lastIndex = 0;
var match = pattern.exec(str);
if (match) {
if(lookbehind) {
lookbehindLength = match[1].length;
}
var from = match.index - 1 + lookbehindLength,
match = match[0].slice(lookbehindLength),
len = match.length,
to = from + len,
before = str.slice(0, from + 1),
after = str.slice(to + 1);
var args = [i, 1];
if (before) {
args.push(before);
}
var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
args.push(wrapped);
if (after) {
args.push(after);
}
Array.prototype.splice.apply(strarr, args);
}
}
}
return strarr;
},
hooks: {
all: {},
add: function (name, callback) {
var hooks = _.hooks.all;
hooks[name] = hooks[name] || [];
hooks[name].push(callback);
},
run: function (name, env) {
var callbacks = _.hooks.all[name];
if (!callbacks || !callbacks.length) {
return;
}
for (var i=0, callback; callback = callbacks[i++];) {
callback(env);
}
}
}
};
var Token = _.Token = function(type, content) {
this.type = type;
this.content = content;
};
Token.stringify = function(o, language, parent) {
if (typeof o == 'string') {
return o;
}
if (Object.prototype.toString.call(o) == '[object Array]') {
return o.map(function(element) {
return Token.stringify(element, language, o);
}).join('');
}
var env = {
type: o.type,
content: Token.stringify(o.content, language, parent),
tag: 'span',
classes: ['token', o.type],
attributes: {},
language: language,
parent: parent
};
if (env.type == 'comment') {
env.attributes['spellcheck'] = 'true';
}
_.hooks.run('wrap', env);
var attributes = '';
for (var name in env.attributes) {
attributes += name + '="' + (env.attributes[name] || '') + '"';
}
return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
};
if (!self.document) {
// In worker
self.addEventListener('message', function(evt) {
var message = JSON.parse(evt.data),
lang = message.language,
code = message.code;
self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));
self.close();
}, false);
return;
}
// Get current script and highlight
var script = document.getElementsByTagName('script');
script = script[script.length - 1];
if (script) {
_.filename = script.src;
if (document.addEventListener && !script.hasAttribute('data-manual')) {
document.addEventListener('DOMContentLoaded', _.highlightAll);
}
}
})();
/* **********************************************
Begin prism-markup.js
********************************************** */
Prism.languages.markup = {
'comment': /<!--[\w\W]*?-->/g,
'prolog': /<\?.+?\?>/,
'doctype': /<!DOCTYPE.+?>/,
'cdata': /<!\[CDATA\[[\w\W]*?]]>/i,
'tag': {
pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,
inside: {
'tag': {
pattern: /^<\/?[\w:-]+/i,
inside: {
'punctuation': /^<\/?/,
'namespace': /^[\w-]+?:/
}
},
'attr-value': {
pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
inside: {
'punctuation': /=|>|"/g
}
},
'punctuation': /\/?>/g,
'attr-name': {
pattern: /[\w:-]+/g,
inside: {
'namespace': /^[\w-]+?:/
}
}
}
},
'entity': /&#?[\da-z]{1,8};/gi
};
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {
if (env.type === 'entity') {
env.attributes['title'] = env.content.replace(/&/, '&');
}
});
/* **********************************************
Begin prism-css.js
********************************************** */
Prism.languages.css = {
'comment': /\/\*[\w\W]*?\*\//g,
'atrule': {
pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
inside: {
'punctuation': /[;:]/g
}
},
'url': /url\((["']?).*?\1\)/gi,
'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
'string': /("|')(\\?.)*?\1/g,
'important': /\B!important\b/gi,
'ignore': /&(lt|gt|amp);/gi,
'punctuation': /[\{\};:]/g
};
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'style': {
pattern: /(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,
inside: {
'tag': {
pattern: /(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,
inside: Prism.languages.markup.tag.inside
},
rest: Prism.languages.css
}
}
});
}
/* **********************************************
Begin prism-clike.js
********************************************** */
Prism.languages.clike = {
'comment': {
pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,
lookbehind: true
},
'string': /("|')(\\?.)*?\1/g,
'class-name': {
pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig,
lookbehind: true,
inside: {
punctuation: /(\.|\\)/
}
},
'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,
'boolean': /\b(true|false)\b/g,
'function': {
pattern: /[a-z0-9_]+\(/ig,
inside: {
punctuation: /\(/
}
},
'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,
'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,
'ignore': /&(lt|gt|amp);/gi,
'punctuation': /[{}[\];(),.:]/g
};
/* **********************************************
Begin prism-javascript.js
********************************************** */
Prism.languages.javascript = Prism.languages.extend('clike', {
'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,
'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g
});
Prism.languages.insertBefore('javascript', 'keyword', {
'regex': {
pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
lookbehind: true
}
});
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'script': {
pattern: /(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,
inside: {
'tag': {
pattern: /(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,
inside: Prism.languages.markup.tag.inside
},
rest: Prism.languages.javascript
}
}
});
}
/* **********************************************
Begin prism-file-highlight.js
********************************************** */
(function(){
if (!self.Prism || !self.document || !document.querySelector) {
return;
}
var Extensions = {
'js': 'javascript',
'html': 'markup',
'svg': 'markup'
};
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
var src = pre.getAttribute('data-src');
var extension = (src.match(/\.(\w+)$/) || [,''])[1];
var language = Extensions[extension] || extension;
var code = document.createElement('code');
code.className = 'language-' + language;
pre.textContent = '';
code.textContent = 'Loading…';
pre.appendChild(code);
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status < 400 && xhr.responseText) {
code.textContent = xhr.responseText;
Prism.highlightElement(code);
}
else if (xhr.status >= 400) {
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
}
else {
code.textContent = '✖ Error: File does not exist or is empty';
}
}
};
xhr.send(null);
});
})();
<h1>Sass mixin for Inside Borders</h1>
<p>Use this mixin to set your borders via <code>box-shadow: inset … ;</code> .
<p>With this mixin you can define 3 properties:</p>
<ol>
<li>Border Thickness</li>
<li>Border Color</li>
<li>Opacity</li>
</ol>
<h2>Demo</h2>
<div class="wrapper components-demo">
<div class="container a"><code>@include ib();</code></div>
<div class="container b"><code>@include ib(5px);</code></div>
<div class="container c"><code>@include ib(10px,$r);</code></div>
<div class="container d"><code>@include ib(15px,$y,.5);</code></div>
<div class="container e"><code>@include ib(20px,$b,1);</code></div>
</div>
<div class="sections">
<div class="components-demo">
<h2>HTML</h2>
<pre class="language-markup"><code><div class="inside-border"></div></code></pre>
</div>
<div class="components-demo">
<h2>Mixin</h2>
<pre class="language-css"><code class="language-css">@mixin ib ($thickness:2px, $color:white, $alpha:.1) {
box-shadow: inset 0 0 0 $thickness rgba($color, $alpha);
}</code></pre>
</div>
<div class="components-demo">
<h2>Usage</h2>
<pre class="language-css"><code>.inside-border { @include ib(15px,#369,.5); }</code></pre>
</div>
</div>
<hr>
<p>Created by <a href="http://ricardozea.me/">Ricardo Zea</a></p>
<time datetime="4-22-2014">Created on: April 22, 2014</time>Sass mixin for Inside Borders
Use this mixin to set your borders via box-shadow: inset ... ; With this mixin you can define 3 properties: Border Thickness, Border Color and Opacity.
A Pen by Ricardo Zea on CodePen.