Skip to content

K
kpp
Commit f2c04c3c authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

library add

parent 8b655ff0
Show whitespace changes
Inline Side-by-side
Showing with 334 additions and 82 deletions
src/blocks/blocks-library/blocks-library.js 0 → 100644
View file @ f2c04c3c
/*! 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}});
src/blocks/blocks-library/blocks-library.less
View file @ f2c04c3c
......@@ -38,26 +38,106 @@
}
}
&__title {
margin-top: 0;
&__item-title {
margin: 0.3em 0;
}
&__sub-item {
&:not(:first-child) {
margin-top: 2em;
}
}
&__sub-item {}
&__sub-item-title {}
}
&__sub-item-title {
.hljs {
display: block;
text-transform: lowercase;
color: @gray-light;
font-size: @font-size;
margin-bottom: 0.7em;
border-bottom: 2px dashed @gray-lighter;
width: auto;
color: @text-color;
background-color: transparent;
padding: 0;
}
@media (min-width: @screen-md) {
margin-left: -4rem;
}
}
.hljs-comment,
.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;
}
src/blocks/btn/btn.less
View file @ f2c04c3c
......@@ -30,5 +30,9 @@
width: 100%;
text-align: center;
justify-content: center;
& + & {
margin-top: (@line-height / 2);
}
}
}
src/blocks/form/form--horizontal.less
View file @ f2c04c3c
......@@ -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 {
width: 15rem;
min-width: 15rem;
padding-top: 0.42em;
.field-select__name,
.field-file__name,
.field-range__name {
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-file__name {
width: 15rem;
min-width: 15rem;
.field-toggler__title,
.field-radio__title {
width: 9.375em;
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;
}
}
......
src/blocks_library.html
View file @ f2c04c3c
......@@ -1301,10 +1301,80 @@
<section class="blocks-library__item" id="form-horizontal" data-name=".form--horizontal">
<form action="" class="form form--horizontal">
<section class="blocks-library__item" id="form" data-name=".form">
<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>
&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot; id=&quot;test&quot;&gt;
<pre><code>&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>
src/less/global/global-forms.less
View file @ f2c04c3c
......@@ -22,7 +22,8 @@ optgroup,
textarea {
margin: 0;
line-height: inherit;
font: inherit;
font-size: inherit;
font-family: inherit;
text-transform: none;
}
......
src/less/global/global-scaffolding.less
View file @ f2c04c3c
......@@ -302,8 +302,8 @@ pre {
margin-top: @line-height;
margin-bottom: @line-height;
overflow-x: auto;
background-color: @gray-lighter;
padding: 0.5em;
background-color: @gray-lightest;
padding: 1em;
border-radius: @border-radius;
border: 1px solid @border-color;
border: 1px solid @gray-lighter;
}
src/less/mixins/btn-mixins.less
View file @ f2c04c3c
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment