Added WYSIWYG editor callouts

resources/assets/js/pages/page-form.js

@@ -1,7 +1,8 @@
 var mceOptions = module.exports = {
     selector: '#html-editor',
     content_css: [
-        '/css/styles.css'
+        '/css/styles.css',
+        '/libs/material-design-iconic-font/css/material-design-iconic-font.min.css'
     ],
     body_class: 'page-content',
     relative_urls: false,
@@ -19,11 +20,18 @@ var mceOptions = module.exports = {
         {title: "Header 1", format: "h1"},
         {title: "Header 2", format: "h2"},
         {title: "Header 3", format: "h3"},
-        {title: "Paragraph", format: "p"},
+        {title: "Paragraph", format: "p", exact: true, classes: ''},
         {title: "Blockquote", format: "blockquote"},
         {title: "Code Block", icon: "code", format: "pre"},
-        {title: "Inline Code", icon: "code", inline: "code"}
+        {title: "Inline Code", icon: "code", inline: "code"},
+        {title: "Callouts", items: [
+            {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
+            {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
+            {title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
+            {title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
+        ]}
     ],
+    style_formats_merge: false,
     formats: {
         alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
         aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},

resources/assets/sass/_blocks.scss

@@ -125,3 +125,51 @@
     margin-right: $-xl;
   }
 }
+
+
+/**
+ * Callouts
+ */
+
+.callout {
+  border-left: 3px solid #BBB;
+  background-color: #EEE;
+  padding: $-s;
+  &:before {
+    font-family: 'Material-Design-Iconic-Font';
+    padding-right: $-s;
+    display: inline-block;
+  }
+  &.success {
+    border-left-color: $positive;
+    background-color: lighten($positive, 45%);
+    color: darken($positive, 16%);
+  }
+  &.success:before {
+    content: '\f269';
+  }
+  &.danger {
+    border-left-color: $negative;
+    background-color: lighten($negative, 34%);
+    color: darken($negative, 20%);
+  }
+  &.danger:before {
+    content: '\f1f2';
+  }
+  &.info {
+    border-left-color: $info;
+    background-color: lighten($info, 50%);
+    color: darken($info, 16%);
+  }
+  &.info:before {
+    content: '\f1f8';
+  }
+  &.warning {
+    border-left-color: $warning;
+    background-color: lighten($warning, 36%);
+    color: darken($warning, 16%);
+  }
+  &.warning:before {
+    content: '\f1f1';
+  }
+}

resources/assets/sass/_variables.scss

@@ -38,6 +38,7 @@ $primary-dark: #0288D1;
 $secondary: #e27b41;
 $positive: #52A256;
 $negative: #E84F4F;
+$info: $primary;
 $warning: $secondary;
 $primary-faded: rgba(21, 101, 192, 0.15);