From 9f9a8815d64b6845646fada5ec7709be3ee68f59 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 11:22:24 -0400 Subject: [PATCH] Use diff style formatting for customization sections --- docs/source/_assets/less/prism.less | 15 +++++- .../_partials/customized-config.blade.php | 27 +++++++---- docs/source/js/prism.js | 4 +- docs/source/opacity.blade.md | 48 +++++++------------ docs/source/shadows.blade.md | 37 +++++--------- docs/source/z-index.blade.md | 48 +++++-------------- 6 files changed, 73 insertions(+), 106 deletions(-) diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less index 01179fd5f..bdefa8c06 100644 --- a/docs/source/_assets/less/prism.less +++ b/docs/source/_assets/less/prism.less @@ -72,7 +72,7 @@ pre[class*="language-"] { .token.prolog, .token.doctype, .token.cdata { - @apply .text-slate-lighter; + @apply .text-grey; } .token.punctuation { @@ -89,8 +89,19 @@ pre[class*="language-"] { .token.boolean, .token.number, .token.constant, -.token.symbol, +.token.symbol { + @apply .text-blue-dark; +} + +code.language-diff, pre.language-diff { + @apply .text-grey-darker; +} + .token.deleted { + @apply .text-grey; +} + +.token.inserted { @apply .text-blue-dark; } diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php index 7a3e7f449..494c3336e 100644 --- a/docs/source/_partials/customized-config.blade.php +++ b/docs/source/_partials/customized-config.blade.php @@ -1,12 +1,21 @@
-
-
-
Default values
- 
{{ $default }}
-
-
-
Customized example
- 
{{ $customized }}
-
+
+
{{ '{' }}
+
{{ ' // ...' }}
+
{{ ' ' . $key }}{{ ': {' }}
+
{!! collect(explode("\n", $slot))->map(function ($line) { + if (starts_with($line, '+')) { + return '
+   ' . e(trim(substr($line, 1))) . '
'; + + } + + if (starts_with($line, '-')) { + return '
-   ' . e(trim(substr($line, 1))) . '
'; + } + + return '
    ' . e(trim($line)) . '
'; + })->implode("\n") !!}
+
{{ ' }' }}
+
{{ '}' }}
diff --git a/docs/source/js/prism.js b/docs/source/js/prism.js index f9bfc29d4..1c69f25d3 100644 --- a/docs/source/js/prism.js +++ b/docs/source/js/prism.js @@ -1,7 +1,7 @@ -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+diff */ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+less */ var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var I=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(I),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; -Prism.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d+.*$/m],deleted:/^[-<].*$/m,inserted:/^[+>].*$/m,diff:{pattern:/^!(?!!).+$/m,alias:"important"}}; +Prism.languages.less=Prism.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,punctuation:/[{}();:,]/,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","punctuation",{"function":Prism.languages.less.function}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}}); diff --git a/docs/source/opacity.blade.md b/docs/source/opacity.blade.md index b2e4f5868..60257f4da 100644 --- a/docs/source/opacity.blade.md +++ b/docs/source/opacity.blade.md @@ -111,37 +111,21 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -By default Tailwind provides a sensible numeric opacity scale. You can, of course, modify these values as needed. This is done in the `opacity` section of your Tailwind config. +By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `opacity` section of your Tailwind config. -@component('_partials.customized-config') -@slot('default') -{ - // ... - opacity: { - '0': '0', - '25': '.25', - '50': '.5', - '75': '.75', - '100': '1', - } -} -@endslot -@slot('customized') -{ - // ... - opacity: { - 'none': '0', - '10': '.1', - '20': '.2', - '30': '.3', - '40': '.4', - '50': '.5', - '60': '.6', - '70': '.7', - '80': '.8', - '90': '.9', - '100': '1', - }, -} -@endslot +@component('_partials.customized-config', ['key' => 'opacity']) + '0': '0', +- '25': '.25', +- '50': '.5', +- '75': '.75', ++ '10': '.1', ++ '20': '.2', ++ '30': '.3', ++ '40': '.4', ++ '50': '.5', ++ '60': '.6', ++ '70': '.7', ++ '80': '.8', ++ '90': '.9', + '100': '1', @endcomponent diff --git a/docs/source/shadows.blade.md b/docs/source/shadows.blade.md index 798d4c75c..ec6269226 100644 --- a/docs/source/shadows.blade.md +++ b/docs/source/shadows.blade.md @@ -116,32 +116,17 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -By default Tailwind provides three drop shadows and one inner shadow. You can, of course, modify these values as needed. This is done in the `shadows` section of your Tailwind config. As you can see from the defaults we provide, it's possible to apply multiple shadows per utility using comma separation. +By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You change, add, or remove these by editing the `shadows` section of your Tailwind config. -Take note that a `default` shadow is required. This is the value used for the non-suffixed version of this utility (`.shadow`). +If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility. -@component('_partials.customized-config') -@slot('default') -{ - // ... - shadows: { - default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', - 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', - 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', - 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', - 'none': 'none', - }, -} -@endslot -@slot('customized') -{ - // ... - shadows: { - default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', - 'big': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', - 'huge': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', - 'none': 'none', - }, -} -@endslot +@component('_partials.customized-config', ['key' => 'shadows']) +- default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', +- 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', +- 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', +- 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', ++ '1': '0 2px 4px rgba(0,0,0,0.05)', ++ '2': '0 4px 8px rgba(0,0,0,0.1)', ++ '3': '0 8px 16px rgba(0,0,0,0.15)', + 'none': 'none', @endcomponent diff --git a/docs/source/z-index.blade.md b/docs/source/z-index.blade.md index b410e36c0..df5ed36d4 100644 --- a/docs/source/z-index.blade.md +++ b/docs/source/z-index.blade.md @@ -160,40 +160,18 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -By default Tailwind provides a sensible numeric z-index scale. You can, of course, modify these values as needed. This is done in the `zIndex` section of your Tailwind config. +By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `zIndex` section of your Tailwind config. -@component('_partials.customized-config') -@slot('default') -{ - // ... - zIndex: { - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, - 'auto': 'auto', - }, -} -@endslot -@slot('customized') -{ - // ... - zIndex: { - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, - '60': 60, - '70': 70, - '80': 80, - '90': 90, - '100': 100, - 'auto': 'auto', - }, -} -@endslot +@component('_partials.customized-config', ['key' => 'zIndex']) + '0': 0, +- '10': 10, +- '20': 20, +- '30': 30, +- '40': 40, +- '50': 50, ++ '25': 25, ++ '50': 50, ++ '75': 75, ++ '100': 100, +'auto': 'auto', @endcomponent