0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 19:32:45 +00:00

added an internal nested div on block elements

This commit is contained in:
Scott Tolksdorf
2017-02-26 20:18:44 -05:00
parent 0705e08381
commit 4c874149fb
4 changed files with 46 additions and 34 deletions

View File

@@ -105,7 +105,7 @@ const BrewEditor = React.createClass({
r.push(lineNumber); r.push(lineNumber);
} }
if(line.indexOf('\\column') !== -1){ if(line.indexOf('\\column') === 0){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit'); codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
r.push(lineNumber); r.push(lineNumber);
} }

View File

@@ -13,11 +13,11 @@ renderer.paragraph = function(text){
if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true})); if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true}));
const block = matches[matchIndex]; const block = matches[matchIndex];
if(block && block[0] == '{'){ if(block && block[0] == '{'){
r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}">`); r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}"><div class="internal">`);
blockCount++; blockCount++;
} }
if(block == '}}' && blockCount !== 0){ if(block == '}}' && blockCount !== 0){
r.push('</div>\n\n'); r.push('</div></div>\n\n');
blockCount--; blockCount--;
} }
matchIndex++; matchIndex++;

View File

@@ -15,41 +15,48 @@
} }
.note{ .note{
.useSansSerif(); .useSansSerif();
margin-bottom : 1em; margin: 9px 0px;
padding : 5px 10px; .internal{
background-color : @green; margin-bottom : 1em;
border-style : solid; padding : 5px 10px;
border-width : 11px; background-color : @green;
border-image : @noteBorder 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
h2,h3,h4{
.useSansSerif();
color : black;
}
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
&.alt{
border-style : solid; border-style : solid;
border-width : 7px; border-width : 11px;
border-image : @descriptiveBorder 12 round; border-image : @noteBorder 11;
border-image-outset : 4px; border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
h2,h3,h4{
.useSansSerif();
color : black;
}
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
&.alt{
border-style : solid;
border-width : 7px;
border-image : @descriptiveBorder 12 round;
border-image-outset : 4px;
}
} }
} }
.frame{ .frame{
box-sizing : border-box; margin-top : 26px;
margin-top : 30px;
margin-bottom : 37px; margin-bottom : 37px;
background-color : white; margin-left : 17px;
border : initial; margin-right: 17px;
border-style : solid; .internal{
border-image-outset : 25px 17px; box-sizing : border-box;
border-image-repeat : round; background-color : white;
border-image-slice : 150 200 150 200; border : initial;
border-image-source : @frameBorder; border-style : solid;
border-image-width : 47px; border-image-outset : 25px 17px;
border-image-repeat : round;
border-image-slice : 150 200 150 200;
border-image-source : @frameBorder;
border-image-width : 47px;
}
} }
.wide{ .wide{
column-span : all; column-span : all;
@@ -59,15 +66,19 @@
.oneColumn{ .oneColumn{
column-count : 1; column-count : 1;
column-gap : 1cm;
} }
.twoColumn{ .twoColumn{
column-count : 2; column-count : 2;
column-gap : 1cm;
} }
.threeColumn{ .threeColumn{
column-count : 3; column-count : 3;
column-gap : 1cm;
} }
.fourColumn{ .fourColumn{
column-count : 4; column-count : 4;
column-gap : 1cm;
} }
.columnSplit{ .columnSplit{

View File

@@ -57,7 +57,8 @@
padding : 12px; padding : 12px;
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
color : #333; color : #333;
-webkit-column-break-inside : avoid;
column-break-inside : avoid;
} }