Commit 869caa9e authored by Nikolay Gromov's avatar Nikolay Gromov

Merge branch 'sass' of github.com:nicothin/NTH-start-project into sass

parents 7c578531 f1ed0b84
...@@ -14,11 +14,15 @@ ...@@ -14,11 +14,15 @@
"typo": [], "typo": [],
"page-header": [], "page-header": [],
"page-footer": [], "page-footer": [],
"is-mobile": [],
"main-nav": [],
"sprite-svg": [], "sprite-svg": [],
"sprite-png": [ "sprite-png": [
"__demo" "__demo"
], ],
"is-mobile": [] "logo": [],
"code": [],
"thumb": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
......
<!--DEV
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/blockquote-right/blockquote-right.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.blockquote-right {
text-align: right;
border-left: 0;
padding: 0 0.5em 0 0;
border-right: 1px solid @border-color;
@media (min-width: @screen-sm) {
padding: 0 1.8em 0 0;
margin-left: 0;
border-right-width: 5px;
border-left: 0;
}
}
<!--DEV <!--DEV
<pre class="code"> <pre class="code">
<code class="code__syntax css"> <code>/* Родитель: */</code>
<span class="code__line">/* Родитель: */</span>
</code>
</pre> </pre>
--> -->
/*!
highlight.js v9.2.0 | BSD3 License | git.io/hljslicense
https://highlightjs.org/download/
*/
!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("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/-?[a-z\.]+/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"meta",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,s,a,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}});
// Для импорта в диспетчер подключений: @import './src/blocks/code/code.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.code {
display: block;
width: 100%;
overflow-x: auto;
background-color: @gray-lightest;
padding: 1em;
border-radius: @border-radius;
border: 1px solid @gray-lighter;
white-space: normal;
tab-size: 2;
max-height: 50rem;
&__syntax {}
&__line {
display: block;
white-space: pre;
}
}
// Подсветка кода после обработки JS
.hljs {
display: block;
width: auto;
color: @text-color;
background-color: transparent;
padding: 0;
}
.hljs-comment,
.hljs-quote {
color: #999;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: 700;
}
.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: 700;
}
.hljs-subst {
font-weight: 400;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: 700;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #2f6f9f;
font-weight: 400;
}
.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: 700;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
.less {
.hljs-selector-tag {
font-weight: 400;
}
.hljs-variable {
color: #f60;
}
}
// В этом файле должны быть стили только для БЭМ-блока code, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-radius: 3px !default;
.code {
display: block;
width: 100%;
max-height: 50rem;
overflow-x: auto;
padding: 1em;
background-color: $gray-lightest;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
code {
display: block;
white-space: pre;
}
}
См. [highlightjs.org/download/](https://highlightjs.org/download/)
<!--DEV
<ul class="list-bullet">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
<li>Власти, она себя за?</li>
<li>Решила алфавит, назад маленький.</li>
</ul>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/list-bullet/list-bullet.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-bullet {
list-style: none;
& > li {
position: relative;
&:before {
content: '';
position: absolute;
top: 0.6em;
left: -1.3em;
font-size: 80%;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: @color-main;
}
}
}
<!--DEV
<a href="/" class="logo"> <a href="/" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><rect fill="#F90" width="100" height="100" rx="4" ry="4"/><rect fill="#FFB13B" width="50" height="50" rx="4" ry="4"/><rect x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/><g fill="#F90"><circle cx="50" cy="18.4" r="18.4"/><circle cx="72.4" cy="27.6" r="18.4"/><circle cx="81.6" cy="50" r="18.4"/><circle cx="72.4" cy="72.4" r="18.4"/><circle cx="50" cy="81.6" r="18.4"/><circle cx="27.6" cy="72.4" r="18.4"/><circle cx="18.4" cy="50" r="18.4"/><circle cx="27.6" cy="27.6" r="18.4"/></g><path d="M63.086 18.385c0-7.227-5.86-13.086-13.1-13.086-7.235 0-13.096 5.858-13.096 13.085-5.1-5.11-13.395-5.11-18.497 0-5.12 5.12-5.12 13.408 0 18.524-7.234 0-13.103 5.858-13.103 13.084 0 7.23 5.87 13.098 13.103 13.098-5.12 5.11-5.12 13.395 0 18.515 5.102 5.104 13.397 5.104 18.497 0 0 7.228 5.86 13.083 13.096 13.083 7.24 0 13.1-5.855 13.1-13.083 5.118 5.104 13.416 5.104 18.513 0 5.1-5.12 5.1-13.41 0-18.515 7.215 0 13.08-5.87 13.08-13.098 0-7.227-5.865-13.085-13.08-13.085 5.1-5.12 5.1-13.407 0-18.525-5.098-5.11-13.394-5.11-18.514 0z"/><path fill="#FFF" d="M55.003 23.405v14.488L65.26 27.64c0-1.812.69-3.618 2.066-5.005 2.78-2.77 7.275-2.77 10.024 0 2.77 2.766 2.77 7.255 0 10.027-1.377 1.375-3.195 2.072-5.015 2.072L62.1 44.982h14.49c1.29-1.28 3.054-2.076 5.01-2.076 3.9 0 7.08 3.18 7.08 7.087 0 3.906-3.18 7.088-7.08 7.088-1.956 0-3.72-.797-5.01-2.07H62.1l10.23 10.243c1.823 0 3.64.694 5.014 2.086 2.774 2.758 2.774 7.25 0 10.01-2.75 2.773-7.24 2.773-10.025 0-1.373-1.373-2.065-3.193-2.065-5.004L55 62.094v14.5c1.27 1.275 2.084 3.053 2.084 5.012 0 3.906-3.177 7.077-7.098 7.077-3.92 0-7.094-3.167-7.094-7.077 0-1.96.81-3.732 2.08-5.013v-14.5L34.74 72.347c0 1.812-.705 3.627-2.084 5.003-2.77 2.77-7.25 2.77-10.024 0-2.775-2.765-2.775-7.254 0-10.013 1.377-1.39 3.214-2.086 5.012-2.086L37.9 55.01H23.413c-1.29 1.275-3.072 2.07-5.015 2.07-3.918 0-7.097-3.18-7.097-7.087s3.177-7.087 7.096-7.087c1.94 0 3.724.796 5.014 2.076h14.488L27.646 34.736c-1.797 0-3.632-.697-5.012-2.07-2.775-2.773-2.775-7.26 0-10.028 2.773-2.77 7.256-2.77 10.027 0 1.376 1.386 2.084 3.195 2.084 5.005L44.98 37.895V23.407c-1.27-1.287-2.083-3.053-2.083-5.023 0-3.908 3.175-7.08 7.096-7.08 3.92 0 7.097 3.17 7.097 7.08-.002 1.972-.816 3.735-2.087 5.02z"/><g><path d="M5.3 50h89.38v40q0 5-5 5H10.3q-5 0-5-5z"/><path fill="#3F3F3F" d="M14.657 54.21H86.05c2.91 0 5.313 2.386 5.313 5.316v17.91c-27.584-3.403-54.926-8.125-82.01-7.683V59.526c0-2.93 2.39-5.315 5.304-5.315z"/><path fill="#FFF" stroke="#000" stroke-width=".503" d="M18.312 72.927c-2.103-2.107-3.407-5.028-3.407-8.253 0-6.445 5.223-11.672 11.666-11.672 6.447 0 11.668 5.225 11.668 11.672h-6.832c0-2.674-2.168-4.837-4.835-4.837-2.662 0-4.837 2.163-4.837 4.837 0 1.338.55 2.536 1.415 3.42.883.874 2.1 1.405 3.423 1.405v.01c3.233 0 6.146 1.31 8.244 3.417 2.118 2.11 3.424 5.034 3.424 8.248 0 6.454-5.22 11.68-11.667 11.68-6.44 0-11.665-5.222-11.665-11.68h6.828c0 2.68 2.175 4.835 4.838 4.835 2.668 0 4.836-2.156 4.836-4.835 0-1.33-.545-2.527-1.43-3.407-.863-.88-2.08-1.418-3.405-1.418-3.23 0-6.14-1.314-8.258-3.423zM61.588 53.005l-8.244 39.85h-6.85l-8.258-39.85h6.846l4.838 23.337 4.835-23.337zM73.255 69.513h11.683v11.664c0 6.452-5.226 11.678-11.67 11.678-6.44 0-11.665-5.226-11.665-11.678v-16.5h-.017c0-6.448 5.24-11.677 11.667-11.677 6.46 0 11.683 5.225 11.683 11.676h-6.85c0-2.674-2.15-4.837-4.833-4.837-2.647 0-4.82 2.162-4.82 4.836v16.5c0 2.676 2.173 4.838 4.82 4.838 2.682 0 4.834-2.162 4.834-4.827V76.348h-4.834l.002-6.835z"/></g></svg> <img src="img/" alt="logo">
</a> </a>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/logo/logo.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.logo {
display: block;
white-space: nowrap;
}
// В этом файле должны быть стили только для БЭМ-блока logo, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.logo {
display: block;
white-space: nowrap;
}
<!--DEV <nav class="main-nav">
<ul class="main-nav__list">
Нужно убрать пробел между @-ами: <li class="main-nav__item">
<a class="main-nav__link">
@ @include('blocks/main-nav/main-nav.html') <span class="main-nav__link-text">Библиотека</span>
</a>
--> <div class="main-nav__nested-lvl-1">
<div class="main-nav">content</div> <ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
<div class="main-nav__nested-lvl-2">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo-p" class="main-nav__link">
<span class="main-nav__link-text">Параграфы и заголовки</span>
</a>
</li>
<li class="main-nav__item">
<a href="#typo-lists" class="main-nav__link">
<span class="main-nav__link-text">Списки</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="http://nicothin.pro/" class="main-nav__link">
<span class="main-nav__link-text">Сайт автора</span>
</a>
</li>
</ul>
</nav>
// Для импорта в диспетчер подключений: @import './src/blocks/main-nav/main-nav.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.main-nav {
position: relative;
z-index: 1;
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
&__list {
padding: 0;
margin: 0;
list-style: none;
@media (min-width: @screen-lg) {
display: flex;
flex-wrap: wrap;
}
}
&__nested-lvl {
@media (min-width: @screen-lg) {
position: absolute;
left: 0;
top: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
border: 1px solid @gray-lighter;
border-top: 0;
box-shadow: @shadow;
.main-nav__item:not(:last-child) {
border-bottom: 1px solid @gray-lighter;
}
}
.main-nav__list {
display: block;
}
.main-nav__link {
padding-left: @grid-gutter-width;
min-width: 15em;
@media (min-width: @screen-lg) {
padding-left: (@grid-gutter-width / 2);
}
}
// Вложение внутри вложения
& & {
@media (min-width: @screen-lg) {
position: absolute;
top: 0;
left: 100%;
background-color: @gray-lightest;
width: auto;
padding-top: 0;
border-top: 1px solid @gray-lighter;
.main-nav__link {
padding-left: (@grid-gutter-width / 2);
}
}
.main-nav__link {
padding-left: @grid-gutter-width * 1.5;
}
}
}
&__item {
display: block;
position: relative;
&--divider {
&:before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
border-top: 1px solid @gray-light;
}
}
// Сокрытие и показ по наведению
@media (min-width: @screen-lg) {
& > .main-nav__nested-lvl {
display: none;
}
&:hover {
& > .main-nav__nested-lvl {
display: block;
}
}
}
}
&__link {
display: block;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
color: @gray;
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
color: @text-color;
background-color: @gray-lighter;
text-decoration: none;
}
}
}
// В этом файле должны быть стили только для БЭМ-блока main-nav, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.main-nav {
// position: relative;
// z-index: 1;
// margin-left: (@grid-gutter-width / -2);
// margin-right: (@grid-gutter-width / -2);
// &__list {
// padding: 0;
// margin: 0;
// list-style: none;
// @media (min-width: @screen-lg) {
// display: flex;
// flex-wrap: wrap;
// }
// }
// &__nested-lvl {
// @media (min-width: @screen-lg) {
// position: absolute;
// left: 0;
// top: 100%;
// background-color: @gray-lightest;
// padding-top: 0.3em;
// width: auto;
// border: 1px solid @gray-lighter;
// border-top: 0;
// box-shadow: @shadow;
// .main-nav__item:not(:last-child) {
// border-bottom: 1px solid @gray-lighter;
// }
// }
// .main-nav__list {
// display: block;
// }
// .main-nav__link {
// padding-left: @grid-gutter-width;
// min-width: 15em;
// @media (min-width: @screen-lg) {
// padding-left: (@grid-gutter-width / 2);
// }
// }
// // Вложение внутри вложения
// & & {
// @media (min-width: @screen-lg) {
// position: absolute;
// top: 0;
// left: 100%;
// background-color: @gray-lightest;
// width: auto;
// padding-top: 0;
// border-top: 1px solid @gray-lighter;
// .main-nav__link {
// padding-left: (@grid-gutter-width / 2);
// }
// }
// .main-nav__link {
// padding-left: @grid-gutter-width * 1.5;
// }
// }
// }
// &__item {
// display: block;
// position: relative;
// &--divider {
// &:before {
// content: '';
// position: absolute;
// top: -1px;
// left: 0;
// right: 0;
// border-top: 1px solid @gray-light;
// }
// }
// // Сокрытие и показ по наведению
// @media (min-width: @screen-lg) {
// & > .main-nav__nested-lvl {
// display: none;
// }
// &:hover {
// & > .main-nav__nested-lvl {
// display: block;
// }
// }
// }
// }
// &__link {
// display: block;
// padding-top: 0.9rem;
// padding-bottom: 0.9rem;
// padding-left: (@grid-gutter-width / 2);
// padding-right: (@grid-gutter-width / 2);
// color: @gray;
// text-decoration: none;
// cursor: pointer;
// &:hover,
// &:focus {
// color: @text-color;
// background-color: @gray-lighter;
// text-decoration: none;
// }
// }
}
...@@ -2,4 +2,6 @@ ...@@ -2,4 +2,6 @@
<img class="thumb" src="" height="" width="" alt=""> <img class="thumb" src="" height="" width="" alt="">
<a href="" class="thumb"><img src="" height="" width="" alt=""></a>
--> -->
// Для импорта в диспетчер подключений: @import './src/blocks/thumb/thumb.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.thumb {
display: inline-block;
padding: 0.4rem;
line-height: @line-height;
background-color: @body-bg;
border: 1px solid @gray-light;
border-radius: @border-radius;
transition: all @transition-time;
a:hover & {
border-color: @link-color;
}
}
// В этом файле должны быть стили только для БЭМ-блока thumb, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-light: hsl(0, 0%, 60%) !default;
$link-color: hsl(208, 98%, 43%) !default;
$line-height: 1.375 !default;
$body-bg: #fff !default;
$border-radius: 3px !default;
$transition-time: 0.3s !default;
.thumb {
display: inline-block;
padding: 0.4rem;
line-height: $line-height;
background-color: $body-bg;
border: 1px solid $gray-light;
border-radius: $border-radius;
transition: all $transition-time;
a:hover & {
border-color: $link-color;
}
}
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