library add

f2c04c3c · Nikolay Gromov · 8b655ff0 · f2c04c3c · f2c04c3c · f2c04c3c
Commit f2c04c3c authored Mar 17, 2016 by Nikolay Gromov
8 changed files
--- a/src/blocks/blocks-library/blocks-library.js
+++ b/src/blocks/blocks-library/blocks-library.js
+/*! highlight.js v9.2.0 | BSD3 License | git.io/hljslicense */
+!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return w(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(w(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset<r[0].offset?e:r:"start"==r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}f+="<"+t(e)+Array.prototype.map.call(e.attributes,r).join("")+">"}function u(e){f+="</"+t(e)+">"}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,f="",l=[];e.length||r.length;){var g=i();if(f+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){l.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);l.reverse().forEach(o)}else"start"==g[0].event?l.push(g[0].node):l.pop(),c(g.splice(0,1)[0])}return f+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\b\w+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var f=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=f.length?t(f.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){for(var t=0;t<n.c.length;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function g(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":E.classPrefix,i='<span class="'+a,o=t?"":"</span>";return i+=e+'">',i+n+o}function h(){if(!k.k)return n(M);var e="",t=0;k.lR.lastIndex=0;for(var r=k.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(k,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=k.lR.lastIndex,r=k.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof k.sL;if(e&&!R[k.sL])return n(M);var t=e?f(k.sL,M,!0,y[k.sL]):l(M,k.sL.length?k.sL:void 0);return k.r>0&&(B+=t.r),e&&(y[k.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=void 0!==k.sL?d():h(),M=""}function v(e,n){L+=e.cN?p(e.cN,"",!0):"",k=Object.create(e,{parent:{value:k}})}function m(e,n){if(M+=e,void 0===n)return b(),0;var t=o(n,k);if(t)return t.skip?M+=n:(t.eB&&(M+=n),b(),t.rB||t.eB||(M=n)),v(t,n),t.rB?0:n.length;var r=u(k,n);if(r){var a=k;a.skip?M+=n:(a.rE||a.eE||(M+=n),b(),a.eE&&(M=n));do k.cN&&(L+="</span>"),k.skip||(B+=k.r),k=k.parent;while(k!=r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,k))throw new Error('Illegal lexeme "'+n+'" for mode "'+(k.cN||"<unnamed>")+'"');return M+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var x,k=i||N,y={},L="";for(x=k;x!=N;x=x.parent)x.cN&&(L=p(x.cN,"",!0)+L);var M="",B=0;try{for(var C,j,I=0;;){if(k.t.lastIndex=I,C=k.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),x=k;x.parent;x=x.parent)x.cN&&(L+="</span>");return{r:B,value:L,language:e,top:k}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(w(n)){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function g(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"<br>")),e}function p(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function h(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):t=e;var r=t.textContent,o=n?f(n,r,!0):l(r),s=u(t);if(s.length){var h=document.createElementNS("http://www.w3.org/1999/xhtml","div");h.innerHTML=o.value,o.value=c(s,u(h),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=p(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,h)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function N(){return Object.keys(R)}function w(e){return e=(e||"").toLowerCase(),R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=f,e.highlightAuto=l,e.fixMarkup=g,e.highlightBlock=h,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("markdown",function(e){return{aliases:["md","mkdown","mkd"],c:[{cN:"section",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"quote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}| )",e:"$",r:0}]},{b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"string",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"symbol",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:"^\\[.+\\]:",rB:!0,c:[{cN:"symbol",b:"\\[",e:"\\]:",eB:!0,eE:!0,starts:{cN:"link",e:"$"}}]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:"=",r:0,c:[{cN:"string",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("javascript",function(e){return{aliases:["js","jsx"],k:{keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,{cN:"string",b:"`",e:"`",c:[e.BE,{cN:"subst",b:"\\$\\{",e:"\\}"}]},e.CLCM,e.CBCM,{cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:["self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:[e.CLCM,e.CBCM]}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("less",function(e){var r="[\\w-]+",t="("+r+"|@{"+r+"})",a=[],c=[],s=function(e){return{cN:"string",b:"~?"+e+".*?"+e}},b=function(e,r,t){return{cN:e,b:r,r:t}},i={b:"\\(",e:"\\)",c:c,r:0};c.push(e.CLCM,e.CBCM,s("'"),s('"'),e.CSSNM,{b:"(url|data-uri)\\(",starts:{cN:"string",e:"[\\)\\n]",eE:!0}},b("number","#[0-9A-Fa-f]+\\b"),i,b("variable","@@?"+r,10),b("variable","@{"+r+"}"),b("built_in","~?`[^`]*?`"),{cN:"attribute",b:r+"\\s*:",e:":",rB:!0,eE:!0},{cN:"meta",b:"!important"});var n=c.concat({b:"{",e:"}",c:a}),o={bK:"when",eW:!0,c:[{bK:"and not"}].concat(c)},u={cN:"attribute",b:t,e:":",eE:!0,c:[e.CLCM,e.CBCM],i:/\S/,starts:{e:"[;}]",rE:!0,c:c,i:"[<=$]"}},C={cN:"keyword",b:"@(import|media|charset|font-face|(-[a-z]+-)?keyframes|supports|document|namespace|page|viewport|host)\\b",starts:{e:"[;{}]",rE:!0,c:c,r:0}},l={cN:"variable",v:[{b:"@"+r+"\\s*:",r:15},{b:"@"+r}],starts:{e:"[;}]",rE:!0,c:n}},p={v:[{b:"[\\.#:&\\[]",e:"[;{}]"},{b:t+"[^;]*{",e:"{"}],rB:!0,rE:!0,i:"[<='$\"]",c:[e.CLCM,e.CBCM,o,b("keyword","all\\b"),b("variable","@{"+r+"}"),b("selector-tag",t+"%?",0),b("selector-id","#"+t),b("selector-class","\\."+t,0),b("selector-tag","&",0),{cN:"selector-attr",b:"\\[",e:"\\]"},{b:"\\(",e:"\\)",c:n},{b:"!important"}]};return a.push(e.CLCM,e.CBCM,C,l,p,u),{cI:!0,i:"[=>'/<($\"]",c:a}});
--- a/src/blocks/blocks-library/blocks-library.less
+++ b/src/blocks/blocks-library/blocks-library.less
@@ -38,26 +38,106 @@
    }
  }
-  &__title {
+  &__item-title {
-    margin-top: 0;
+    margin: 0.3em 0;
  }
-  &__sub-item {
+  &__sub-item {}
-    &:not(:first-child) {
-      margin-top: 2em;
+  &__sub-item-title {}
-    }
+}
-  }
-  &__sub-item-title {
+.hljs {
  display: block;
-    text-transform: lowercase;
+  width: auto;
-    color: @gray-light;
+  color: @text-color;
-    font-size: @font-size;
+  background-color: transparent;
-    margin-bottom: 0.7em;
+  padding: 0;
-    border-bottom: 2px dashed @gray-lighter;
+}
-    @media (min-width: @screen-md) {
+.hljs-comment,
-      margin-left: -4rem;
+.hljs-quote {
-    }
+  color: #999;
-  }
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #4f9fcf;
+}
+.hljs-string,
+.hljs-doctag {
+  color: #d44950;
+}
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+.hljs-subst {
+  font-weight: normal;
+}
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #2f6f9f;
+  font-weight: normal;
+}
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+.hljs-deletion {
+  background: #fdd;
+}
+.hljs-addition {
+  background: #dfd;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: bold;
 }
--- a/src/blocks/btn/btn.less
+++ b/src/blocks/btn/btn.less
@@ -30,5 +30,9 @@
    width: 100%;
    text-align: center;
    justify-content: center;
+    & + & {
+      margin-top: (@line-height / 2);
+    }
  }
 }
--- a/src/blocks/form/form--horizontal.less
+++ b/src/blocks/form/form--horizontal.less
@@ -11,36 +11,48 @@
      .field-checkbox,
      .field-radio,
      .field-select,
-      .field-file {
+      .field-file,
+      .field-range,
+      .field-toggler {
        display: flex;
      }
      .field-text__name,
-      .field-select__name {
+      .field-select__name,
-        width: 15rem;
+      .field-file__name,
-        min-width: 15rem;
+      .field-range__name {
-        padding-top: 0.42em;
+        width: 9.375em;
+        min-width: 9.375em;
+        padding-top: 0.4em;
        padding-right: 0.6em;
        margin-bottom: 0;
      }
      .field-checkbox__title,
-      .field-radio__title,
+      .field-toggler__title,
-      .field-file__name {
+      .field-radio__title {
-        width: 15rem;
+        width: 9.375em;
-        min-width: 15rem;
+        min-width: 9.375em;
        padding-right: 0.6em;
        margin-bottom: 0;
      }
      .field-text__input-wrap,
      .field-select__select-wrap,
-      .field-file__input-wrap {
+      .field-range__input-wrap,
+      .field-file__input-wrap,
+      .field-toggler__input-wrap {
        flex-grow: 1;
      }
      .field-actions {
-        padding-left: 15rem;
+        padding-left: 9.375em;
+      }
+      .field-select__select[multiple] {
+        padding-top: 0.45em;
+        padding-bottom: 0.45em;
+        min-height: 7.1em;
      }
    }

--- a/src/blocks_library.html
+++ b/src/blocks_library.html
@@ -1301,10 +1301,80 @@
-  <section class="blocks-library__item" id="form-horizontal" data-name=".form--horizontal">
+  <section class="blocks-library__item" id="form" data-name=".form">
-    <form action="" class="form  form--horizontal">
+    <form action="" class="form">
      <fieldset>
-        <legend>Горизонтальная форма</legend>
+        <legend>Форма</legend>
+        <label class="field-text">
+          <div class="field-text__name">Название поля</div>
+          <div class="field-text__input-wrap">
+            <input class="field-text__input" type="text" placeholder="input[type=text]">
+            <div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+          </div>
+        </label>
+        <div class="field-checkbox">
+          <div class="field-checkbox__title">Общее название</div>
+          <div class="field-checkbox__input-wrap">
+            <label class="field-checkbox__name">
+              <input class="field-checkbox__input" type="checkbox">
+              <span class="field-checkbox__name-text">Флажок</span>
+            </label>
+            <label class="field-checkbox__name">
+              <input class="field-checkbox__input" type="checkbox">
+              <span class="field-checkbox__name-text">Флажок</span>
+            </label>
+            <label class="field-checkbox__name">
+              <input class="field-checkbox__input" type="checkbox">
+              <span class="field-checkbox__name-text">Флажок</span>
+            </label>
+            <label class="field-checkbox__name">
+              <input class="field-checkbox__input" type="checkbox">
+              <span class="field-checkbox__name-text">Флажок</span>
+            </label>
+            <label class="field-checkbox__name">
+              <input class="field-checkbox__input" type="checkbox">
+              <span class="field-checkbox__name-text">Флажок</span>
+            </label>
+            <div class="field-checkbox__help-text">Есть общее название.</div>
+          </div>
+        </div>
+        <label class="field-select">
+          <div class="field-select__name">Название поля</div>
+          <div class="field-select__select-wrap">
+            <select class="field-select__select">
+              <optgroup label="optgroup">
+                <option>Значение 1</option>
+                <option>Значение 2</option>
+                <option>Значение 3</option>
+              </optgroup>
+              <option>Значение 10</option>
+            </select>
+            <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+          </div>
+        </label>
+        <div class="field-file">
+          <div class="field-file__name">Выбор файлов</div>
+          <label class="field-file__input-wrap">
+            <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+            <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
+            <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
+          </label>
+        </div>
+        <div class="field-range">
+          <div class="field-range__name">Range</div>
+          <div class="field-range__input-wrap">
+            <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
+            <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
+          </div>
+        </div>
+        <div class="field-actions">
+          <button class="btn">Отправить</button>
+        </div>
+      </fieldset>
+    </form>
+    <div class="blocks-library__sub-item">
+      <b class="blocks-library__sub-item-title"><code>.form.form--horizontal</code> (отдельный less-файл)</b>
+      <form action="" class="form  form--horizontal">
        <label class="field-text">
          <div class="field-text__name">Название поля</div>
          <div class="field-text__input-wrap">
@@ -1354,7 +1424,7 @@
            </label>
            <label class="field-radio__name">
              <input class="field-radio__input" type="radio" name="one1">
-              <span class="field-radio__name-text">Радиокнопка</span>
+              <span class="field-radio__name-text">Наверное. И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных. Наверное. И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных.</span>
            </label>
            <div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div>
          </div>
@@ -1367,11 +1437,38 @@
            </label>
            <label class="field-radio__name">
              <input class="field-radio__input" type="radio" name="two1">
+              <span class="field-radio__name-text">Наверное.</span>
+            </label>
+            <div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div>
+          </div>
+        </div>
+        <div class="field-radio">
+          <div class="field-radio__input-wrap">
+            <label class="field-radio__name">
+              <input class="field-radio__input" type="radio" name="two2">
              <span class="field-radio__name-text">Радиокнопка</span>
            </label>
+            <label class="field-radio__name">
+              <input class="field-radio__input" type="radio" name="two2">
+              <span class="field-radio__name-text">Наверное. И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных. И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных.</span>
+            </label>
            <div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div>
          </div>
        </div>
+        <div class="field-toggler">
+          <div class="field-toggler__title">Переключатели-флажки</div>
+          <div class="field-toggler__input-wrap">
+            <label class="field-toggler__name">
+              <input class="field-toggler__input" type="checkbox" checked="">
+              <span class="field-toggler__name-text">Да</span>
+            </label>
+            <label class="field-toggler__name">
+              <input class="field-toggler__input" type="checkbox">
+              <span class="field-toggler__name-text">Наверное.  И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных. И тут много строк. Далеко-далеко за словесными горами в стране, гласных и согласных.</span>
+            </label>
+            <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
+          </div>
+        </div>
        <label class="field-select">
          <div class="field-select__name">Название поля</div>
          <div class="field-select__select-wrap">
@@ -1386,26 +1483,115 @@
            <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
          </div>
        </label>
+        <label class="field-select">
+          <div class="field-select__name">Название поля</div>
+          <div class="field-select__select-wrap">
+            <select class="field-select__select" multiple>
+              <optgroup label="optgroup">
+                <option>Значение 1</option>
+                <option>Значение 2</option>
+                <option>Значение 3</option>
+              </optgroup>
+              <option>Значение 10</option>
+            </select>
+            <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+          </div>
+        </label>
+        <div class="field-file">
+          <div class="field-file__name">Выбор файлов</div>
+          <label class="field-file__input-wrap">
+            <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+            <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
+            <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
+          </label>
+        </div>
+        <div class="field-range">
+          <div class="field-range__name">Range</div>
+          <div class="field-range__input-wrap">
+            <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
+            <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
+          </div>
+        </div>
        <div class="field-actions">
          <button class="btn">Отправить</button>
        </div>
-      </fieldset>
      </form>
+    </div>
  </section>
-  <hr>
+  <section class="blocks-library__item" id="btn" data-name=".btn">
+    <h1 class="blocks-library__item-title">Кнопки</h1>
+    <div class="blocks-library__sub-item">
+      <p>
+        <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
+        <a href="" class="btn">Cсылка</a>
+        <input type="submit" class="btn" value="Input">
+        <button class="btn">Button</button>
+        <!-- .btn.btn--main -->
+        <a href="" class="btn  btn--main">Cсылка</a>
+        <input type="submit" class="btn  btn--main" value="Input">
+        <button class="btn  btn--main">Button</button>
+        <!-- .btn.btn--success -->
+        <a href="" class="btn  btn--success">Cсылка</a>
+        <input type="submit" class="btn  btn--success" value="Input">
+        <button class="btn  btn--success">Button</button>
+        <!-- .btn.btn--danger -->
+        <a href="" class="btn  btn--danger">Cсылка</a>
+        <input type="submit" class="btn  btn--danger" value="Input">
+        <button class="btn  btn--danger">Button</button>
+      </p>
+    <pre><code>&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;
+&lt;a href="" class="btn"&gt;Cсылка&lt;/a&gt;
+&lt;input type="submit" class="btn" value="Input"&gt;
+&lt;button class="btn"&gt;Button&lt;/button&gt;
+&lt;!-- .btn.btn--main --&gt;
+&lt;a href="" class="btn  btn--main"&gt;Cсылка&lt;/a&gt;
+&lt;input type="submit" class="btn  btn--main" value="Input"&gt;
+&lt;button class="btn  btn--main"&gt;Button&lt;/button&gt;
+&lt;!-- .btn.btn--success --&gt;
+&lt;a href="" class="btn  btn--success"&gt;Cсылка&lt;/a&gt;
+&lt;input type="submit" class="btn  btn--success" value="Input"&gt;
+&lt;button class="btn  btn--success"&gt;Button&lt;/button&gt;
+&lt;!-- .btn.btn--danger --&gt;
+&lt;a href="" class="btn  btn--danger"&gt;Cсылка&lt;/a&gt;
+&lt;input type="submit" class="btn  btn--danger" value="Input"&gt;
+&lt;button class="btn  btn--danger"&gt;Button&lt;/button&gt;</code></pre>
+    </div>
+    <div class="blocks-library__sub-item">
+      <h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2>
+      <p>
+        <a href="" class="btn  btn--lg">Cсылка (lg)</a>
+        <input type="submit" class="btn  btn--lg" value="Input (lg)">
+        <button class="btn  btn--lg">Button (lg)</button>
+      </p>
+      <p>
+        <a href="" class="btn  btn--sm">Cсылка (sm)</a>
+        <input type="submit" class="btn  btn--sm" value="Input (sm)">
+        <button class="btn  btn--sm">Button (sm)</button>
+      </p>
+    </div>
+    <div class="blocks-library__sub-item">
+      <h2 class="blocks-library__sub-item-title">Блочные кнопки</h2>
+      <p>
+        <a href="" class="btn  btn--block">Cсылка (sm)</a>
+        <input type="submit" class="btn  btn--block  btn--main" value="Input (sm)">
+        <button class="btn  btn--block  btn--success">Button (sm)</button>
+      </p>
+    </div>
+  </section>
-  <section class="blocks-library__item">
-    <h2 id="form">Формы по умолчанию</h2>
+  <hr>
-    <p>Стилизация: теги (см. глобальные стили)</p>
+  <section class="blocks-library__item">
    <h2 id="form-style">Стилизованные формы</h2>
@@ -1640,36 +1826,7 @@
    <h2 id="btn">Кнопки</h2>
    <p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
-    <p class="alert  alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code>, <code>.btn-color(цвет_текста; цвет_фона; цвет_бордюра)</code> и <code>.btn-size([sm|md|lg])</code>.</p>
-    <p>
-      <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
-      <a href="" class="btn">Cсылка</a>
-      <input type="submit" class="btn" value="Input">
-      <button class="btn">Button</button>
-      <a href="" class="btn  btn--main">Cсылка</a>
-      <input type="submit" class="btn  btn--main" value="Input">
-      <button class="btn  btn--main">Button</button>
-      <a href="" class="btn  btn--success">Cсылка</a>
-      <input type="submit" class="btn  btn--success" value="Input">
-      <button class="btn  btn--success">Button</button>
-      <a href="" class="btn  btn--danger">Cсылка</a>
-      <input type="submit" class="btn  btn--danger" value="Input">
-      <button class="btn  btn--danger">Button</button>
-    </p>
-    <p>
-      <a href="" class="btn  btn--lg">Cсылка (lg)</a>
-      <input type="submit" class="btn  btn--lg" value="Input (lg)">
-      <button class="btn  btn--lg">Button (lg)</button>
-      <a href="" class="btn">Cсылка</a>
-      <input type="submit" class="btn" value="Input">
-      <button class="btn">Button</button>
-      <a href="" class="btn  btn--sm">Cсылка (sm)</a>
-      <input type="submit" class="btn  btn--sm" value="Input (sm)">
-      <button class="btn  btn--sm">Button (sm)</button>
-    </p>
-    <p>
-      <button class="btn  btn--block">Button (block)</button>
-    </p>
  </section>
@@ -1755,8 +1912,7 @@
    <h3>События</h3>
    <div class="row">
      <div class="col-md-6">
-        <pre>
+        <pre><code>&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot; id=&quot;test&quot;&gt;
-&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot; id=&quot;test&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;dropdown__toggler&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;&#x421;&#x441;&#x44b;&#x43b;&#x43a;&#x430; &#x441; &#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x44e;&#x449;&#x438;&#x43c; &#x44d;&#x43b;&#x435;&#x43c;&#x435;&#x43d;&#x442;&#x43e;&#x43c;&lt;/a&gt;
  &lt;ul class=&quot;dropdown__menu&quot; aria-labelledby=&quot;qwer&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x41f;&#x443;&#x43d;&#x43a;&#x442; &#x441;&#x43f;&#x438;&#x441;&#x43a;&#x430; (&#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x435;&#x442; &lt;code&gt;ul&lt;/code&gt;)&lt;/a&gt;&lt;/li&gt;
@@ -1764,7 +1920,7 @@
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
-&lt;/span&gt;</pre>
+&lt;/span&gt;</code></pre>
      </div>
      <div class="col-md-6">
        <pre>
@@ -2209,5 +2365,6 @@ $('#test').on('hidden.nth.dropdown', function () {
 @@include('blocks/page-footer/page-footer.html')
 @@include('_include/page_bottom.html')
+<script>hljs.initHighlightingOnLoad();</script>
 </body>
 </html>
--- a/src/less/global/global-forms.less
+++ b/src/less/global/global-forms.less
@@ -22,7 +22,8 @@ optgroup,
 textarea {
  margin: 0;
  line-height: inherit;
-  font: inherit;
+  font-size: inherit;
+  font-family: inherit;
  text-transform: none;
 }

--- a/src/less/global/global-scaffolding.less
+++ b/src/less/global/global-scaffolding.less
@@ -302,8 +302,8 @@ pre {
  margin-top: @line-height;
  margin-bottom: @line-height;
  overflow-x: auto;
-  background-color: @gray-lighter;
+  background-color: @gray-lightest;
-  padding: 0.5em;
+  padding: 1em;
  border-radius: @border-radius;
-  border: 1px solid @border-color;
+  border: 1px solid @gray-lighter;
 }
--- a/src/less/mixins/btn-mixins.less
+++ b/src/less/mixins/btn-mixins.less
@@ -16,7 +16,7 @@
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
-  font: inherit;
+  font-size: 1em;
  line-height: @line-height;
  text-decoration: none;
  border: 1px solid;
@@ -119,10 +119,6 @@
 .btn-size(@size: md) {
-  & when (@size = md) {
-    font-size: @font-size;
-  }
  & when (@size = sm) {
    font-size: @font-size--small;
    padding-top: round((@field-padding-top / 2), 2);