diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js index 5617fa5be..611d2e782 100644 --- a/resources/assets/js/pages/page-form.js +++ b/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'}, diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index bf23eb565..3c7f7490b 100644 --- a/resources/assets/sass/_blocks.scss +++ b/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'; + } +} \ No newline at end of file diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 4f8ea0f08..23bf2b219 100644 --- a/resources/assets/sass/_variables.scss +++ b/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);