From d3f528accbb832d296950977f80bf9a5d7a1228e Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Mon, 22 Jun 2015 21:41:24 -0500 Subject: [PATCH 01/26] Make tables clearer in the preview --- source files/theme.css | 199 ++++++++++++++++++++++++++++------------- 1 file changed, 139 insertions(+), 60 deletions(-) diff --git a/source files/theme.css b/source files/theme.css index f0dc4925..22afbc62 100644 --- a/source files/theme.css +++ b/source files/theme.css @@ -4,27 +4,32 @@ border: 1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - padding: 10px + padding: 10px; } + .CodeMirror-scroll { - min-height: 300px; + min-height: 300px } + :-webkit-full-screen { background: #f9f9f5; padding: .5em 1em; width: 100%; - height: 100% + height: 100%; } + :-moz-full-screen { padding: .5em 1em; background: #f9f9f5; width: 100%; - height: 100% + height: 100%; } + .editor-wrapper { font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; - color: #2c3e50 + color: #2c3e50; } + .editor-wrapper input.title { font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; background: 0 0; @@ -32,8 +37,9 @@ width: 100%; border: none; outline: 0; - opacity: .6 + opacity: .6; } + .editor-toolbar { position: relative; opacity: .6; @@ -47,25 +53,27 @@ border-left: 1px solid #bbb; border-right: 1px solid #bbb; border-top-left-radius: 4px; - border-top-right-radius: 4px + border-top-right-radius: 4px; } -.editor-toolbar:after, -.editor-toolbar:before { + +.editor-toolbar:after, .editor-toolbar:before { display: block; content: ' '; - height: 1px + height: 1px; } + .editor-toolbar:before { margin-bottom: 8px } + .editor-toolbar:after { margin-top: 8px } -.editor-toolbar:hover, -.editor-wrapper input.title:focus, -.editor-wrapper input.title:hover { + +.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover { opacity: .8 } + .editor-toolbar a { display: inline-block; text-align: center; @@ -76,16 +84,18 @@ margin: 0; border: 1px solid transparent; border-radius: 3px; - cursor: pointer + cursor: pointer; } -.editor-toolbar a.active, -.editor-toolbar a:hover { + +.editor-toolbar a.active, .editor-toolbar a:hover { background: #fcfcfc; - border-color: #95a5a6 + border-color: #95a5a6; } + .editor-toolbar a:before { line-height: 30px } + .editor-toolbar i.separator { display: inline-block; width: 0; @@ -93,34 +103,41 @@ border-right: 1px solid #fff; color: transparent; text-indent: -10px; - margin: 0 6px + margin: 0 6px; } + .editor-toolbar a.icon-fullscreen { position: absolute; - right: 10px + right: 10px; } -.editor-toolbar.disabled-for-preview a:not(.fa-eye){ - pointer-events:none; - background:#fff; - border:none; + +.editor-toolbar.disabled-for-preview a:not(.fa-eye) { + pointer-events: none; + background: #fff; + border: none; } + .editor-statusbar { padding: 8px 10px; font-size: 12px; color: #959694; - text-align: right + text-align: right; } + .editor-statusbar span { display: inline-block; min-width: 4em; - margin-left: 1em + margin-left: 1em; } + .editor-statusbar .lines:before { content: 'lines: ' } + .editor-statusbar .words:before { content: 'words: ' } + .editor-preview { padding: 10px; position: absolute; @@ -131,133 +148,172 @@ background: #fafafa; z-index: 9999; overflow: auto; - display: none + display: none; } + .editor-preview-active { display: block } + .editor-preview>p { margin-top: 0 } + .editor-preview pre { background: #eee; - margin-bottom: 10px + margin-bottom: 10px; +} + +.editor-preview table td, table th { + border: 1px solid #ddd; + padding: 5px; } + .CodeMirror-scroll { overflow: auto } + .CodeMirror-lines { padding: 4px 0 } + .CodeMirror pre { padding: 0 4px } + .CodeMirror-scrollbar-filler { background-color: #fff } + .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #000; - z-index: 3 + z-index: 3; } + .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver } + .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: 0; background: #7e7; - z-index: 1 + z-index: 1; } + .cm-s-paper .cm-keyword { color: #555 } -.cm-s-paper .cm-atom, -.cm-s-paper .cm-number { + +.cm-s-paper .cm-atom, .cm-s-paper .cm-number { color: #7f8c8d } + .cm-s-paper .cm-def { color: #00f } + .cm-s-paper .cm-variable { color: #000 } + .cm-s-paper .cm-variable-2 { color: #555 } + .cm-s-paper .cm-variable-3 { color: #085 } -.cm-s-paper .cm-operator, -.cm-s-paper .cm-property { + +.cm-s-paper .cm-operator, .cm-s-paper .cm-property { color: #000 } + .cm-s-paper .cm-comment { color: #959595 } + .cm-s-paper .cm-string { color: #7f8c8d } + .cm-s-paper .cm-string-2 { color: #f50 } + .cm-s-paper .cm-meta { color: #555 } + .cm-s-paper .cm-error { color: red } -.cm-s-paper .cm-builtin, -.cm-s-paper .cm-qualifier { + +.cm-s-paper .cm-builtin, .cm-s-paper .cm-qualifier { color: #555 } + .cm-s-paper .cm-bracket { color: #997 } -.cm-s-paper .cm-attribute, -.cm-s-paper .cm-tag { + +.cm-s-paper .cm-attribute, .cm-s-paper .cm-tag { color: #7f8c8d } + .cm-s-paper .cm-header { color: #000 } + .cm-s-paper .cm-quote { color: #888 } + .cm-s-paper .cm-hr { color: #999 } + .cm-s-paper .cm-link { color: #7f8c8d } + .cm-negative { color: #d44 } + .cm-positive { color: #292 } -.cm-header, -.cm-strong { + +.cm-header, .cm-strong { font-weight: 700 } + .cm-em { font-style: italic } + .cm-link { text-decoration: underline } + .cm-invalidchar { color: red } + div.CodeMirror span.CodeMirror-matchingbracket { color: #0f0 } + div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #f22 } + .CodeMirror { position: relative; - overflow: hidden + overflow: hidden; } + .CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; @@ -266,38 +322,43 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { height: 100%; min-height: 300px; outline: 0; - position: relative + position: relative; } + .CodeMirror-sizer { position: relative } -.CodeMirror-hscrollbar, -.CodeMirror-scrollbar-filler, -.CodeMirror-vscrollbar { + +.CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; - display: none + display: none; } + .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; - overflow-y: scroll + overflow-y: scroll; } + .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; - overflow-x: scroll + overflow-x: scroll; } + .CodeMirror-scrollbar-filler { right: 0; bottom: 0; - z-index: 6 + z-index: 6; } + .CodeMirror-lines { cursor: text } + .CodeMirror pre { -moz-border-radius: 0; -webkit-border-radius: 0; @@ -314,83 +375,101 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { color: inherit; z-index: 2; position: relative; - overflow: visible + overflow: visible; } + .CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; - word-break: normal + word-break: normal; } + .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; - z-index: 0 + z-index: 0; } + .CodeMirror-linewidget { position: relative; z-index: 2; - overflow: auto + overflow: auto; } + .CodeMirror-widget { display: inline-block } + .CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden } + .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; - visibility: hidden + visibility: hidden; } + .CodeMirror-measure pre { position: static } + .CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; - width: 0 + width: 0; } + .CodeMirror-focused div.CodeMirror-cursor { visibility: visible } + .CodeMirror-selected { background: #d9d9d9 } + .CodeMirror-focused .CodeMirror-selected { background: #BDC3C7 } + .cm-searching { background: #ffa; - background: rgba(255, 255, 0, .4) + background: rgba(255, 255, 0, .4); } + @media print { .CodeMirror div.CodeMirror-cursor { visibility: hidden } } + .CodeMirror .CodeMirror-code .cm-header-1 { font-size: 200%; - line-height: 200% + line-height: 200%; } + .CodeMirror .CodeMirror-code .cm-header-2 { font-size: 160%; - line-height: 160% + line-height: 160%; } + .CodeMirror .CodeMirror-code .cm-header-3 { font-size: 125%; - line-height: 125% + line-height: 125%; } + .CodeMirror .CodeMirror-code .cm-header-4 { font-size: 110%; - line-height: 110% + line-height: 110%; } + .CodeMirror .CodeMirror-code .cm-comment { background: #eee; - border-radius: 2px + border-radius: 2px; } \ No newline at end of file From d1da791320a5a8fb231c9b22cc4161a77fdf5bfd Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 12:36:31 -0500 Subject: [PATCH 02/26] Remove "Short description of image" It's easier if users don't even know that's a possibility, honestly. --- source files/markdownify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source files/markdownify.js b/source files/markdownify.js index 22181f10..4560574e 100644 --- a/source files/markdownify.js +++ b/source files/markdownify.js @@ -189,7 +189,7 @@ function drawLink(editor) { function drawImage(editor) { var cm = editor.codemirror; var stat = getState(cm); - _replaceSelection(cm, stat.image, '![Short description of image](http://', ')'); + _replaceSelection(cm, stat.image, '![](http://', ')'); } From 958e3c08c7e82e02128da44e2786efbe0d51d0cb Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 12:40:59 -0500 Subject: [PATCH 03/26] Split Font Awesome out This way, if a user is already using Font Awesome, there's no need to redownload the CSS. --- README.md | 3 +- source files/README.md | 3 +- source files/font-awesome.css | 1801 --------------------------------- 3 files changed, 3 insertions(+), 1804 deletions(-) delete mode 100644 source files/font-awesome.css diff --git a/README.md b/README.md index be526c5d..e6cc35cb 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,10 @@ A drop-in JavaScript textarea replacement for writing beautiful and understandab [![Preview](http://i.imgur.com/b9hFHFT.png)](http://nextstepwebs.github.io/simplemde-markdown-editor) ## Quick start -Available on [jsDelivr](http://www.jsdelivr.com/about.php) +SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font Awesome is available on MaxCDN. ``` + ``` diff --git a/source files/README.md b/source files/README.md index 8b7c7413..4ecd907a 100644 --- a/source files/README.md +++ b/source files/README.md @@ -10,5 +10,4 @@ Minify the JS in this order: Minify the CSS in this order: -1. `theme.css` -1. `font-awesome.css` \ No newline at end of file +1. `theme.css` \ No newline at end of file diff --git a/source files/font-awesome.css b/source files/font-awesome.css deleted file mode 100644 index e89eb226..00000000 --- a/source files/font-awesome.css +++ /dev/null @@ -1,1801 +0,0 @@ -/*! - * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome - * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */ -/* FONT PATH - * -------------------------- */ -@font-face { - font-family: 'FontAwesome'; - src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0'); - src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; -} -.fa { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transform: translate(0, 0); -} -/* makes the font 33% larger relative to the icon container */ -.fa-lg { - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; -} -.fa-2x { - font-size: 2em; -} -.fa-3x { - font-size: 3em; -} -.fa-4x { - font-size: 4em; -} -.fa-5x { - font-size: 5em; -} -.fa-fw { - width: 1.28571429em; - text-align: center; -} -.fa-ul { - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; -} -.fa-ul > li { - position: relative; -} -.fa-li { - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; -} -.fa-li.fa-lg { - left: -1.85714286em; -} -.fa-border { - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.fa.pull-left { - margin-right: .3em; -} -.fa.pull-right { - margin-left: .3em; -} -.fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} -.fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -.fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -.fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -:root .fa-rotate-90, -:root .fa-rotate-180, -:root .fa-rotate-270, -:root .fa-flip-horizontal, -:root .fa-flip-vertical { - filter: none; -} -.fa-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.fa-stack-1x, -.fa-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.fa-stack-1x { - line-height: inherit; -} -.fa-stack-2x { - font-size: 2em; -} -.fa-inverse { - color: #ffffff; -} -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.fa-glass:before { - content: "\f000"; -} -.fa-music:before { - content: "\f001"; -} -.fa-search:before { - content: "\f002"; -} -.fa-envelope-o:before { - content: "\f003"; -} -.fa-heart:before { - content: "\f004"; -} -.fa-star:before { - content: "\f005"; -} -.fa-star-o:before { - content: "\f006"; -} -.fa-user:before { - content: "\f007"; -} -.fa-film:before { - content: "\f008"; -} -.fa-th-large:before { - content: "\f009"; -} -.fa-th:before { - content: "\f00a"; -} -.fa-th-list:before { - content: "\f00b"; -} -.fa-check:before { - content: "\f00c"; -} -.fa-remove:before, -.fa-close:before, -.fa-times:before { - content: "\f00d"; -} -.fa-search-plus:before { - content: "\f00e"; -} -.fa-search-minus:before { - content: "\f010"; -} -.fa-power-off:before { - content: "\f011"; -} -.fa-signal:before { - content: "\f012"; -} -.fa-gear:before, -.fa-cog:before { - content: "\f013"; -} -.fa-trash-o:before { - content: "\f014"; -} -.fa-home:before { - content: "\f015"; -} -.fa-file-o:before { - content: "\f016"; -} -.fa-clock-o:before { - content: "\f017"; -} -.fa-road:before { - content: "\f018"; -} -.fa-download:before { - content: "\f019"; -} -.fa-arrow-circle-o-down:before { - content: "\f01a"; -} -.fa-arrow-circle-o-up:before { - content: "\f01b"; -} -.fa-inbox:before { - content: "\f01c"; -} -.fa-play-circle-o:before { - content: "\f01d"; -} -.fa-rotate-right:before, -.fa-repeat:before { - content: "\f01e"; -} -.fa-refresh:before { - content: "\f021"; -} -.fa-list-alt:before { - content: "\f022"; -} -.fa-lock:before { - content: "\f023"; -} -.fa-flag:before { - content: "\f024"; -} -.fa-headphones:before { - content: "\f025"; -} -.fa-volume-off:before { - content: "\f026"; -} -.fa-volume-down:before { - content: "\f027"; -} -.fa-volume-up:before { - content: "\f028"; -} -.fa-qrcode:before { - content: "\f029"; -} -.fa-barcode:before { - content: "\f02a"; -} -.fa-tag:before { - content: "\f02b"; -} -.fa-tags:before { - content: "\f02c"; -} -.fa-book:before { - content: "\f02d"; -} -.fa-bookmark:before { - content: "\f02e"; -} -.fa-print:before { - content: "\f02f"; -} -.fa-camera:before { - content: "\f030"; -} -.fa-font:before { - content: "\f031"; -} -.fa-bold:before { - content: "\f032"; -} -.fa-italic:before { - content: "\f033"; -} -.fa-text-height:before { - content: "\f034"; -} -.fa-text-width:before { - content: "\f035"; -} -.fa-align-left:before { - content: "\f036"; -} -.fa-align-center:before { - content: "\f037"; -} -.fa-align-right:before { - content: "\f038"; -} -.fa-align-justify:before { - content: "\f039"; -} -.fa-list:before { - content: "\f03a"; -} -.fa-dedent:before, -.fa-outdent:before { - content: "\f03b"; -} -.fa-indent:before { - content: "\f03c"; -} -.fa-video-camera:before { - content: "\f03d"; -} -.fa-photo:before, -.fa-image:before, -.fa-picture-o:before { - content: "\f03e"; -} -.fa-pencil:before { - content: "\f040"; -} -.fa-map-marker:before { - content: "\f041"; -} -.fa-adjust:before { - content: "\f042"; -} -.fa-tint:before { - content: "\f043"; -} -.fa-edit:before, -.fa-pencil-square-o:before { - content: "\f044"; -} -.fa-share-square-o:before { - content: "\f045"; -} -.fa-check-square-o:before { - content: "\f046"; -} -.fa-arrows:before { - content: "\f047"; -} -.fa-step-backward:before { - content: "\f048"; -} -.fa-fast-backward:before { - content: "\f049"; -} -.fa-backward:before { - content: "\f04a"; -} -.fa-play:before { - content: "\f04b"; -} -.fa-pause:before { - content: "\f04c"; -} -.fa-stop:before { - content: "\f04d"; -} -.fa-forward:before { - content: "\f04e"; -} -.fa-fast-forward:before { - content: "\f050"; -} -.fa-step-forward:before { - content: "\f051"; -} -.fa-eject:before { - content: "\f052"; -} -.fa-chevron-left:before { - content: "\f053"; -} -.fa-chevron-right:before { - content: "\f054"; -} -.fa-plus-circle:before { - content: "\f055"; -} -.fa-minus-circle:before { - content: "\f056"; -} -.fa-times-circle:before { - content: "\f057"; -} -.fa-check-circle:before { - content: "\f058"; -} -.fa-question-circle:before { - content: "\f059"; -} -.fa-info-circle:before { - content: "\f05a"; -} -.fa-crosshairs:before { - content: "\f05b"; -} -.fa-times-circle-o:before { - content: "\f05c"; -} -.fa-check-circle-o:before { - content: "\f05d"; -} -.fa-ban:before { - content: "\f05e"; -} -.fa-arrow-left:before { - content: "\f060"; -} -.fa-arrow-right:before { - content: "\f061"; -} -.fa-arrow-up:before { - content: "\f062"; -} -.fa-arrow-down:before { - content: "\f063"; -} -.fa-mail-forward:before, -.fa-share:before { - content: "\f064"; -} -.fa-expand:before { - content: "\f065"; -} -.fa-compress:before { - content: "\f066"; -} -.fa-plus:before { - content: "\f067"; -} -.fa-minus:before { - content: "\f068"; -} -.fa-asterisk:before { - content: "\f069"; -} -.fa-exclamation-circle:before { - content: "\f06a"; -} -.fa-gift:before { - content: "\f06b"; -} -.fa-leaf:before { - content: "\f06c"; -} -.fa-fire:before { - content: "\f06d"; -} -.fa-eye:before { - content: "\f06e"; -} -.fa-eye-slash:before { - content: "\f070"; -} -.fa-warning:before, -.fa-exclamation-triangle:before { - content: "\f071"; -} -.fa-plane:before { - content: "\f072"; -} -.fa-calendar:before { - content: "\f073"; -} -.fa-random:before { - content: "\f074"; -} -.fa-comment:before { - content: "\f075"; -} -.fa-magnet:before { - content: "\f076"; -} -.fa-chevron-up:before { - content: "\f077"; -} -.fa-chevron-down:before { - content: "\f078"; -} -.fa-retweet:before { - content: "\f079"; -} -.fa-shopping-cart:before { - content: "\f07a"; -} -.fa-folder:before { - content: "\f07b"; -} -.fa-folder-open:before { - content: "\f07c"; -} -.fa-arrows-v:before { - content: "\f07d"; -} -.fa-arrows-h:before { - content: "\f07e"; -} -.fa-bar-chart-o:before, -.fa-bar-chart:before { - content: "\f080"; -} -.fa-twitter-square:before { - content: "\f081"; -} -.fa-facebook-square:before { - content: "\f082"; -} -.fa-camera-retro:before { - content: "\f083"; -} -.fa-key:before { - content: "\f084"; -} -.fa-gears:before, -.fa-cogs:before { - content: "\f085"; -} -.fa-comments:before { - content: "\f086"; -} -.fa-thumbs-o-up:before { - content: "\f087"; -} -.fa-thumbs-o-down:before { - content: "\f088"; -} -.fa-star-half:before { - content: "\f089"; -} -.fa-heart-o:before { - content: "\f08a"; -} -.fa-sign-out:before { - content: "\f08b"; -} -.fa-linkedin-square:before { - content: "\f08c"; -} -.fa-thumb-tack:before { - content: "\f08d"; -} -.fa-external-link:before { - content: "\f08e"; -} -.fa-sign-in:before { - content: "\f090"; -} -.fa-trophy:before { - content: "\f091"; -} -.fa-github-square:before { - content: "\f092"; -} -.fa-upload:before { - content: "\f093"; -} -.fa-lemon-o:before { - content: "\f094"; -} -.fa-phone:before { - content: "\f095"; -} -.fa-square-o:before { - content: "\f096"; -} -.fa-bookmark-o:before { - content: "\f097"; -} -.fa-phone-square:before { - content: "\f098"; -} -.fa-twitter:before { - content: "\f099"; -} -.fa-facebook-f:before, -.fa-facebook:before { - content: "\f09a"; -} -.fa-github:before { - content: "\f09b"; -} -.fa-unlock:before { - content: "\f09c"; -} -.fa-credit-card:before { - content: "\f09d"; -} -.fa-rss:before { - content: "\f09e"; -} -.fa-hdd-o:before { - content: "\f0a0"; -} -.fa-bullhorn:before { - content: "\f0a1"; -} -.fa-bell:before { - content: "\f0f3"; -} -.fa-certificate:before { - content: "\f0a3"; -} -.fa-hand-o-right:before { - content: "\f0a4"; -} -.fa-hand-o-left:before { - content: "\f0a5"; -} -.fa-hand-o-up:before { - content: "\f0a6"; -} -.fa-hand-o-down:before { - content: "\f0a7"; -} -.fa-arrow-circle-left:before { - content: "\f0a8"; -} -.fa-arrow-circle-right:before { - content: "\f0a9"; -} -.fa-arrow-circle-up:before { - content: "\f0aa"; -} -.fa-arrow-circle-down:before { - content: "\f0ab"; -} -.fa-globe:before { - content: "\f0ac"; -} -.fa-wrench:before { - content: "\f0ad"; -} -.fa-tasks:before { - content: "\f0ae"; -} -.fa-filter:before { - content: "\f0b0"; -} -.fa-briefcase:before { - content: "\f0b1"; -} -.fa-arrows-alt:before { - content: "\f0b2"; -} -.fa-group:before, -.fa-users:before { - content: "\f0c0"; -} -.fa-chain:before, -.fa-link:before { - content: "\f0c1"; -} -.fa-cloud:before { - content: "\f0c2"; -} -.fa-flask:before { - content: "\f0c3"; -} -.fa-cut:before, -.fa-scissors:before { - content: "\f0c4"; -} -.fa-copy:before, -.fa-files-o:before { - content: "\f0c5"; -} -.fa-paperclip:before { - content: "\f0c6"; -} -.fa-save:before, -.fa-floppy-o:before { - content: "\f0c7"; -} -.fa-square:before { - content: "\f0c8"; -} -.fa-navicon:before, -.fa-reorder:before, -.fa-bars:before { - content: "\f0c9"; -} -.fa-list-ul:before { - content: "\f0ca"; -} -.fa-list-ol:before { - content: "\f0cb"; -} -.fa-strikethrough:before { - content: "\f0cc"; -} -.fa-underline:before { - content: "\f0cd"; -} -.fa-table:before { - content: "\f0ce"; -} -.fa-magic:before { - content: "\f0d0"; -} -.fa-truck:before { - content: "\f0d1"; -} -.fa-pinterest:before { - content: "\f0d2"; -} -.fa-pinterest-square:before { - content: "\f0d3"; -} -.fa-google-plus-square:before { - content: "\f0d4"; -} -.fa-google-plus:before { - content: "\f0d5"; -} -.fa-money:before { - content: "\f0d6"; -} -.fa-caret-down:before { - content: "\f0d7"; -} -.fa-caret-up:before { - content: "\f0d8"; -} -.fa-caret-left:before { - content: "\f0d9"; -} -.fa-caret-right:before { - content: "\f0da"; -} -.fa-columns:before { - content: "\f0db"; -} -.fa-unsorted:before, -.fa-sort:before { - content: "\f0dc"; -} -.fa-sort-down:before, -.fa-sort-desc:before { - content: "\f0dd"; -} -.fa-sort-up:before, -.fa-sort-asc:before { - content: "\f0de"; -} -.fa-envelope:before { - content: "\f0e0"; -} -.fa-linkedin:before { - content: "\f0e1"; -} -.fa-rotate-left:before, -.fa-undo:before { - content: "\f0e2"; -} -.fa-legal:before, -.fa-gavel:before { - content: "\f0e3"; -} -.fa-dashboard:before, -.fa-tachometer:before { - content: "\f0e4"; -} -.fa-comment-o:before { - content: "\f0e5"; -} -.fa-comments-o:before { - content: "\f0e6"; -} -.fa-flash:before, -.fa-bolt:before { - content: "\f0e7"; -} -.fa-sitemap:before { - content: "\f0e8"; -} -.fa-umbrella:before { - content: "\f0e9"; -} -.fa-paste:before, -.fa-clipboard:before { - content: "\f0ea"; -} -.fa-lightbulb-o:before { - content: "\f0eb"; -} -.fa-exchange:before { - content: "\f0ec"; -} -.fa-cloud-download:before { - content: "\f0ed"; -} -.fa-cloud-upload:before { - content: "\f0ee"; -} -.fa-user-md:before { - content: "\f0f0"; -} -.fa-stethoscope:before { - content: "\f0f1"; -} -.fa-suitcase:before { - content: "\f0f2"; -} -.fa-bell-o:before { - content: "\f0a2"; -} -.fa-coffee:before { - content: "\f0f4"; -} -.fa-cutlery:before { - content: "\f0f5"; -} -.fa-file-text-o:before { - content: "\f0f6"; -} -.fa-building-o:before { - content: "\f0f7"; -} -.fa-hospital-o:before { - content: "\f0f8"; -} -.fa-ambulance:before { - content: "\f0f9"; -} -.fa-medkit:before { - content: "\f0fa"; -} -.fa-fighter-jet:before { - content: "\f0fb"; -} -.fa-beer:before { - content: "\f0fc"; -} -.fa-h-square:before { - content: "\f0fd"; -} -.fa-plus-square:before { - content: "\f0fe"; -} -.fa-angle-double-left:before { - content: "\f100"; -} -.fa-angle-double-right:before { - content: "\f101"; -} -.fa-angle-double-up:before { - content: "\f102"; -} -.fa-angle-double-down:before { - content: "\f103"; -} -.fa-angle-left:before { - content: "\f104"; -} -.fa-angle-right:before { - content: "\f105"; -} -.fa-angle-up:before { - content: "\f106"; -} -.fa-angle-down:before { - content: "\f107"; -} -.fa-desktop:before { - content: "\f108"; -} -.fa-laptop:before { - content: "\f109"; -} -.fa-tablet:before { - content: "\f10a"; -} -.fa-mobile-phone:before, -.fa-mobile:before { - content: "\f10b"; -} -.fa-circle-o:before { - content: "\f10c"; -} -.fa-quote-left:before { - content: "\f10d"; -} -.fa-quote-right:before { - content: "\f10e"; -} -.fa-spinner:before { - content: "\f110"; -} -.fa-circle:before { - content: "\f111"; -} -.fa-mail-reply:before, -.fa-reply:before { - content: "\f112"; -} -.fa-github-alt:before { - content: "\f113"; -} -.fa-folder-o:before { - content: "\f114"; -} -.fa-folder-open-o:before { - content: "\f115"; -} -.fa-smile-o:before { - content: "\f118"; -} -.fa-frown-o:before { - content: "\f119"; -} -.fa-meh-o:before { - content: "\f11a"; -} -.fa-gamepad:before { - content: "\f11b"; -} -.fa-keyboard-o:before { - content: "\f11c"; -} -.fa-flag-o:before { - content: "\f11d"; -} -.fa-flag-checkered:before { - content: "\f11e"; -} -.fa-terminal:before { - content: "\f120"; -} -.fa-code:before { - content: "\f121"; -} -.fa-mail-reply-all:before, -.fa-reply-all:before { - content: "\f122"; -} -.fa-star-half-empty:before, -.fa-star-half-full:before, -.fa-star-half-o:before { - content: "\f123"; -} -.fa-location-arrow:before { - content: "\f124"; -} -.fa-crop:before { - content: "\f125"; -} -.fa-code-fork:before { - content: "\f126"; -} -.fa-unlink:before, -.fa-chain-broken:before { - content: "\f127"; -} -.fa-question:before { - content: "\f128"; -} -.fa-info:before { - content: "\f129"; -} -.fa-exclamation:before { - content: "\f12a"; -} -.fa-superscript:before { - content: "\f12b"; -} -.fa-subscript:before { - content: "\f12c"; -} -.fa-eraser:before { - content: "\f12d"; -} -.fa-puzzle-piece:before { - content: "\f12e"; -} -.fa-microphone:before { - content: "\f130"; -} -.fa-microphone-slash:before { - content: "\f131"; -} -.fa-shield:before { - content: "\f132"; -} -.fa-calendar-o:before { - content: "\f133"; -} -.fa-fire-extinguisher:before { - content: "\f134"; -} -.fa-rocket:before { - content: "\f135"; -} -.fa-maxcdn:before { - content: "\f136"; -} -.fa-chevron-circle-left:before { - content: "\f137"; -} -.fa-chevron-circle-right:before { - content: "\f138"; -} -.fa-chevron-circle-up:before { - content: "\f139"; -} -.fa-chevron-circle-down:before { - content: "\f13a"; -} -.fa-html5:before { - content: "\f13b"; -} -.fa-css3:before { - content: "\f13c"; -} -.fa-anchor:before { - content: "\f13d"; -} -.fa-unlock-alt:before { - content: "\f13e"; -} -.fa-bullseye:before { - content: "\f140"; -} -.fa-ellipsis-h:before { - content: "\f141"; -} -.fa-ellipsis-v:before { - content: "\f142"; -} -.fa-rss-square:before { - content: "\f143"; -} -.fa-play-circle:before { - content: "\f144"; -} -.fa-ticket:before { - content: "\f145"; -} -.fa-minus-square:before { - content: "\f146"; -} -.fa-minus-square-o:before { - content: "\f147"; -} -.fa-level-up:before { - content: "\f148"; -} -.fa-level-down:before { - content: "\f149"; -} -.fa-check-square:before { - content: "\f14a"; -} -.fa-pencil-square:before { - content: "\f14b"; -} -.fa-external-link-square:before { - content: "\f14c"; -} -.fa-share-square:before { - content: "\f14d"; -} -.fa-compass:before { - content: "\f14e"; -} -.fa-toggle-down:before, -.fa-caret-square-o-down:before { - content: "\f150"; -} -.fa-toggle-up:before, -.fa-caret-square-o-up:before { - content: "\f151"; -} -.fa-toggle-right:before, -.fa-caret-square-o-right:before { - content: "\f152"; -} -.fa-euro:before, -.fa-eur:before { - content: "\f153"; -} -.fa-gbp:before { - content: "\f154"; -} -.fa-dollar:before, -.fa-usd:before { - content: "\f155"; -} -.fa-rupee:before, -.fa-inr:before { - content: "\f156"; -} -.fa-cny:before, -.fa-rmb:before, -.fa-yen:before, -.fa-jpy:before { - content: "\f157"; -} -.fa-ruble:before, -.fa-rouble:before, -.fa-rub:before { - content: "\f158"; -} -.fa-won:before, -.fa-krw:before { - content: "\f159"; -} -.fa-bitcoin:before, -.fa-btc:before { - content: "\f15a"; -} -.fa-file:before { - content: "\f15b"; -} -.fa-file-text:before { - content: "\f15c"; -} -.fa-sort-alpha-asc:before { - content: "\f15d"; -} -.fa-sort-alpha-desc:before { - content: "\f15e"; -} -.fa-sort-amount-asc:before { - content: "\f160"; -} -.fa-sort-amount-desc:before { - content: "\f161"; -} -.fa-sort-numeric-asc:before { - content: "\f162"; -} -.fa-sort-numeric-desc:before { - content: "\f163"; -} -.fa-thumbs-up:before { - content: "\f164"; -} -.fa-thumbs-down:before { - content: "\f165"; -} -.fa-youtube-square:before { - content: "\f166"; -} -.fa-youtube:before { - content: "\f167"; -} -.fa-xing:before { - content: "\f168"; -} -.fa-xing-square:before { - content: "\f169"; -} -.fa-youtube-play:before { - content: "\f16a"; -} -.fa-dropbox:before { - content: "\f16b"; -} -.fa-stack-overflow:before { - content: "\f16c"; -} -.fa-instagram:before { - content: "\f16d"; -} -.fa-flickr:before { - content: "\f16e"; -} -.fa-adn:before { - content: "\f170"; -} -.fa-bitbucket:before { - content: "\f171"; -} -.fa-bitbucket-square:before { - content: "\f172"; -} -.fa-tumblr:before { - content: "\f173"; -} -.fa-tumblr-square:before { - content: "\f174"; -} -.fa-long-arrow-down:before { - content: "\f175"; -} -.fa-long-arrow-up:before { - content: "\f176"; -} -.fa-long-arrow-left:before { - content: "\f177"; -} -.fa-long-arrow-right:before { - content: "\f178"; -} -.fa-apple:before { - content: "\f179"; -} -.fa-windows:before { - content: "\f17a"; -} -.fa-android:before { - content: "\f17b"; -} -.fa-linux:before { - content: "\f17c"; -} -.fa-dribbble:before { - content: "\f17d"; -} -.fa-skype:before { - content: "\f17e"; -} -.fa-foursquare:before { - content: "\f180"; -} -.fa-trello:before { - content: "\f181"; -} -.fa-female:before { - content: "\f182"; -} -.fa-male:before { - content: "\f183"; -} -.fa-gittip:before, -.fa-gratipay:before { - content: "\f184"; -} -.fa-sun-o:before { - content: "\f185"; -} -.fa-moon-o:before { - content: "\f186"; -} -.fa-archive:before { - content: "\f187"; -} -.fa-bug:before { - content: "\f188"; -} -.fa-vk:before { - content: "\f189"; -} -.fa-weibo:before { - content: "\f18a"; -} -.fa-renren:before { - content: "\f18b"; -} -.fa-pagelines:before { - content: "\f18c"; -} -.fa-stack-exchange:before { - content: "\f18d"; -} -.fa-arrow-circle-o-right:before { - content: "\f18e"; -} -.fa-arrow-circle-o-left:before { - content: "\f190"; -} -.fa-toggle-left:before, -.fa-caret-square-o-left:before { - content: "\f191"; -} -.fa-dot-circle-o:before { - content: "\f192"; -} -.fa-wheelchair:before { - content: "\f193"; -} -.fa-vimeo-square:before { - content: "\f194"; -} -.fa-turkish-lira:before, -.fa-try:before { - content: "\f195"; -} -.fa-plus-square-o:before { - content: "\f196"; -} -.fa-space-shuttle:before { - content: "\f197"; -} -.fa-slack:before { - content: "\f198"; -} -.fa-envelope-square:before { - content: "\f199"; -} -.fa-wordpress:before { - content: "\f19a"; -} -.fa-openid:before { - content: "\f19b"; -} -.fa-institution:before, -.fa-bank:before, -.fa-university:before { - content: "\f19c"; -} -.fa-mortar-board:before, -.fa-graduation-cap:before { - content: "\f19d"; -} -.fa-yahoo:before { - content: "\f19e"; -} -.fa-google:before { - content: "\f1a0"; -} -.fa-reddit:before { - content: "\f1a1"; -} -.fa-reddit-square:before { - content: "\f1a2"; -} -.fa-stumbleupon-circle:before { - content: "\f1a3"; -} -.fa-stumbleupon:before { - content: "\f1a4"; -} -.fa-delicious:before { - content: "\f1a5"; -} -.fa-digg:before { - content: "\f1a6"; -} -.fa-pied-piper:before { - content: "\f1a7"; -} -.fa-pied-piper-alt:before { - content: "\f1a8"; -} -.fa-drupal:before { - content: "\f1a9"; -} -.fa-joomla:before { - content: "\f1aa"; -} -.fa-language:before { - content: "\f1ab"; -} -.fa-fax:before { - content: "\f1ac"; -} -.fa-building:before { - content: "\f1ad"; -} -.fa-child:before { - content: "\f1ae"; -} -.fa-paw:before { - content: "\f1b0"; -} -.fa-spoon:before { - content: "\f1b1"; -} -.fa-cube:before { - content: "\f1b2"; -} -.fa-cubes:before { - content: "\f1b3"; -} -.fa-behance:before { - content: "\f1b4"; -} -.fa-behance-square:before { - content: "\f1b5"; -} -.fa-steam:before { - content: "\f1b6"; -} -.fa-steam-square:before { - content: "\f1b7"; -} -.fa-recycle:before { - content: "\f1b8"; -} -.fa-automobile:before, -.fa-car:before { - content: "\f1b9"; -} -.fa-cab:before, -.fa-taxi:before { - content: "\f1ba"; -} -.fa-tree:before { - content: "\f1bb"; -} -.fa-spotify:before { - content: "\f1bc"; -} -.fa-deviantart:before { - content: "\f1bd"; -} -.fa-soundcloud:before { - content: "\f1be"; -} -.fa-database:before { - content: "\f1c0"; -} -.fa-file-pdf-o:before { - content: "\f1c1"; -} -.fa-file-word-o:before { - content: "\f1c2"; -} -.fa-file-excel-o:before { - content: "\f1c3"; -} -.fa-file-powerpoint-o:before { - content: "\f1c4"; -} -.fa-file-photo-o:before, -.fa-file-picture-o:before, -.fa-file-image-o:before { - content: "\f1c5"; -} -.fa-file-zip-o:before, -.fa-file-archive-o:before { - content: "\f1c6"; -} -.fa-file-sound-o:before, -.fa-file-audio-o:before { - content: "\f1c7"; -} -.fa-file-movie-o:before, -.fa-file-video-o:before { - content: "\f1c8"; -} -.fa-file-code-o:before { - content: "\f1c9"; -} -.fa-vine:before { - content: "\f1ca"; -} -.fa-codepen:before { - content: "\f1cb"; -} -.fa-jsfiddle:before { - content: "\f1cc"; -} -.fa-life-bouy:before, -.fa-life-buoy:before, -.fa-life-saver:before, -.fa-support:before, -.fa-life-ring:before { - content: "\f1cd"; -} -.fa-circle-o-notch:before { - content: "\f1ce"; -} -.fa-ra:before, -.fa-rebel:before { - content: "\f1d0"; -} -.fa-ge:before, -.fa-empire:before { - content: "\f1d1"; -} -.fa-git-square:before { - content: "\f1d2"; -} -.fa-git:before { - content: "\f1d3"; -} -.fa-hacker-news:before { - content: "\f1d4"; -} -.fa-tencent-weibo:before { - content: "\f1d5"; -} -.fa-qq:before { - content: "\f1d6"; -} -.fa-wechat:before, -.fa-weixin:before { - content: "\f1d7"; -} -.fa-send:before, -.fa-paper-plane:before { - content: "\f1d8"; -} -.fa-send-o:before, -.fa-paper-plane-o:before { - content: "\f1d9"; -} -.fa-history:before { - content: "\f1da"; -} -.fa-genderless:before, -.fa-circle-thin:before { - content: "\f1db"; -} -.fa-header:before { - content: "\f1dc"; -} -.fa-paragraph:before { - content: "\f1dd"; -} -.fa-sliders:before { - content: "\f1de"; -} -.fa-share-alt:before { - content: "\f1e0"; -} -.fa-share-alt-square:before { - content: "\f1e1"; -} -.fa-bomb:before { - content: "\f1e2"; -} -.fa-soccer-ball-o:before, -.fa-futbol-o:before { - content: "\f1e3"; -} -.fa-tty:before { - content: "\f1e4"; -} -.fa-binoculars:before { - content: "\f1e5"; -} -.fa-plug:before { - content: "\f1e6"; -} -.fa-slideshare:before { - content: "\f1e7"; -} -.fa-twitch:before { - content: "\f1e8"; -} -.fa-yelp:before { - content: "\f1e9"; -} -.fa-newspaper-o:before { - content: "\f1ea"; -} -.fa-wifi:before { - content: "\f1eb"; -} -.fa-calculator:before { - content: "\f1ec"; -} -.fa-paypal:before { - content: "\f1ed"; -} -.fa-google-wallet:before { - content: "\f1ee"; -} -.fa-cc-visa:before { - content: "\f1f0"; -} -.fa-cc-mastercard:before { - content: "\f1f1"; -} -.fa-cc-discover:before { - content: "\f1f2"; -} -.fa-cc-amex:before { - content: "\f1f3"; -} -.fa-cc-paypal:before { - content: "\f1f4"; -} -.fa-cc-stripe:before { - content: "\f1f5"; -} -.fa-bell-slash:before { - content: "\f1f6"; -} -.fa-bell-slash-o:before { - content: "\f1f7"; -} -.fa-trash:before { - content: "\f1f8"; -} -.fa-copyright:before { - content: "\f1f9"; -} -.fa-at:before { - content: "\f1fa"; -} -.fa-eyedropper:before { - content: "\f1fb"; -} -.fa-paint-brush:before { - content: "\f1fc"; -} -.fa-birthday-cake:before { - content: "\f1fd"; -} -.fa-area-chart:before { - content: "\f1fe"; -} -.fa-pie-chart:before { - content: "\f200"; -} -.fa-line-chart:before { - content: "\f201"; -} -.fa-lastfm:before { - content: "\f202"; -} -.fa-lastfm-square:before { - content: "\f203"; -} -.fa-toggle-off:before { - content: "\f204"; -} -.fa-toggle-on:before { - content: "\f205"; -} -.fa-bicycle:before { - content: "\f206"; -} -.fa-bus:before { - content: "\f207"; -} -.fa-ioxhost:before { - content: "\f208"; -} -.fa-angellist:before { - content: "\f209"; -} -.fa-cc:before { - content: "\f20a"; -} -.fa-shekel:before, -.fa-sheqel:before, -.fa-ils:before { - content: "\f20b"; -} -.fa-meanpath:before { - content: "\f20c"; -} -.fa-buysellads:before { - content: "\f20d"; -} -.fa-connectdevelop:before { - content: "\f20e"; -} -.fa-dashcube:before { - content: "\f210"; -} -.fa-forumbee:before { - content: "\f211"; -} -.fa-leanpub:before { - content: "\f212"; -} -.fa-sellsy:before { - content: "\f213"; -} -.fa-shirtsinbulk:before { - content: "\f214"; -} -.fa-simplybuilt:before { - content: "\f215"; -} -.fa-skyatlas:before { - content: "\f216"; -} -.fa-cart-plus:before { - content: "\f217"; -} -.fa-cart-arrow-down:before { - content: "\f218"; -} -.fa-diamond:before { - content: "\f219"; -} -.fa-ship:before { - content: "\f21a"; -} -.fa-user-secret:before { - content: "\f21b"; -} -.fa-motorcycle:before { - content: "\f21c"; -} -.fa-street-view:before { - content: "\f21d"; -} -.fa-heartbeat:before { - content: "\f21e"; -} -.fa-venus:before { - content: "\f221"; -} -.fa-mars:before { - content: "\f222"; -} -.fa-mercury:before { - content: "\f223"; -} -.fa-transgender:before { - content: "\f224"; -} -.fa-transgender-alt:before { - content: "\f225"; -} -.fa-venus-double:before { - content: "\f226"; -} -.fa-mars-double:before { - content: "\f227"; -} -.fa-venus-mars:before { - content: "\f228"; -} -.fa-mars-stroke:before { - content: "\f229"; -} -.fa-mars-stroke-v:before { - content: "\f22a"; -} -.fa-mars-stroke-h:before { - content: "\f22b"; -} -.fa-neuter:before { - content: "\f22c"; -} -.fa-facebook-official:before { - content: "\f230"; -} -.fa-pinterest-p:before { - content: "\f231"; -} -.fa-whatsapp:before { - content: "\f232"; -} -.fa-server:before { - content: "\f233"; -} -.fa-user-plus:before { - content: "\f234"; -} -.fa-user-times:before { - content: "\f235"; -} -.fa-hotel:before, -.fa-bed:before { - content: "\f236"; -} -.fa-viacoin:before { - content: "\f237"; -} -.fa-train:before { - content: "\f238"; -} -.fa-subway:before { - content: "\f239"; -} -.fa-medium:before { - content: "\f23a"; -} \ No newline at end of file From 9999fd93c1d98809cf94027afd0cd0ca23498f14 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 12:45:54 -0500 Subject: [PATCH 04/26] Fix bug with toolbar not hiding --- README.md | 8 ++++---- source files/markdownify.js | 7 +++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e6cc35cb..05bb11ae 100644 --- a/README.md +++ b/README.md @@ -47,13 +47,13 @@ simplemde.codemirror.getValue(); - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **status**: If set false, hide the status bar. Defaults to true. -- **tools**: If set false, hide the toolbar. Defaults to true. +- **toolbar**: If set false, hide the toolbar. Defaults to true. ``` new SimpleMDE({ - element: document.getElementById("MyID"), - status: false, - tools: false, + element: document.getElementById("MyID"), + status: false, + toolbar: false, }); ``` diff --git a/source files/markdownify.js b/source files/markdownify.js index 4560574e..3c73ee4d 100644 --- a/source files/markdownify.js +++ b/source files/markdownify.js @@ -443,8 +443,11 @@ function SimpleMDE(options) { if (options.element) { this.element = options.element; } - - options.toolbar = options.toolbar || SimpleMDE.toolbar; + + if(options.toolbar === false) + options.toolbar = []; + else + options.toolbar = options.toolbar || SimpleMDE.toolbar; // you can customize toolbar with object // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] From 4ae1aa3874c21b7d352b8f1a2f49683da31a04f3 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 12:53:24 -0500 Subject: [PATCH 05/26] Many new options during instantiation --- README.md | 14 ++++++++++++-- source files/markdownify.js | 14 +++++++------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 05bb11ae..cbac7d06 100644 --- a/README.md +++ b/README.md @@ -46,14 +46,24 @@ simplemde.codemirror.getValue(); ## Configuration - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. -- **status**: If set false, hide the status bar. Defaults to true. -- **toolbar**: If set false, hide the toolbar. Defaults to true. +- **status**: If set `false`, hide the status bar. Defaults to `true`. +- **toolbar**: If set `false`, hide the toolbar. Defaults to `true`. +- **autofocus**: If set `true`, autofocuses the editor. Defaults to `false`. +- **lineWrapping**: If set `false`, disable line wrapping. Defaults to `true`. +- **lineNumbers**: If set `true`, shows line numbers. Defaults to `false`. +- **indentWithTabs**: If set `false`, indent using spaces instead of tabs. Defaults to `true`. +- **tabSize**: If set, customize the tab size. Defaults to `'2'`. ``` new SimpleMDE({ element: document.getElementById("MyID"), status: false, toolbar: false, + autofocus: true, + lineWrapping: false, + lineNumbers: true, + indentWithTabs: false, + tabSize: '4', }); ``` diff --git a/source files/markdownify.js b/source files/markdownify.js index 3c73ee4d..ed41cfd6 100644 --- a/source files/markdownify.js +++ b/source files/markdownify.js @@ -448,8 +448,8 @@ function SimpleMDE(options) { options.toolbar = []; else options.toolbar = options.toolbar || SimpleMDE.toolbar; - // you can customize toolbar with object - // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] + // you can customize toolbar with object + // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] if (!options.hasOwnProperty('status')) { options.status = ['lines', 'words', 'cursor']; @@ -512,12 +512,12 @@ SimpleMDE.prototype.render = function(el) { this.codemirror = CodeMirror.fromTextArea(el, { mode: 'markdown', theme: 'paper', - tabSize: '2', - indentWithTabs: true, - lineNumbers: false, - autofocus: false, + tabSize: (options.tabSize != undefined) ? options.tabSize : '2', + indentWithTabs: (options.indentWithTabs === false) ? false : true, + lineNumbers: (options.lineNumbers === true) ? true : false, + autofocus: (options.autofocus === true) ? true : false, extraKeys: keyMaps, - lineWrapping: true + lineWrapping: (options.lineWrapping === false) ? false : true }); if (options.toolbar !== false) { From c45ada1c6b17ce6051a2ab245bf9789646f08adb Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 13:52:19 -0500 Subject: [PATCH 06/26] Updates to README --- README.md | 45 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index cbac7d06..75da706a 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ A drop-in JavaScript textarea replacement for writing beautiful and understandab ## Quick start SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font Awesome is available on MaxCDN. -``` +```HTML @@ -16,35 +16,43 @@ SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font And then load SimpleMDE on the first textarea on a page -``` +```JavaScript + ``` #### Use a specific textarea Pure JavaScript method -``` +```JavaScript + ``` jQuery method -``` +```JavaScript + ``` ## Get the content -``` +```JavaScript simplemde.codemirror.getValue(); ``` ## Configuration +#### JS + - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **status**: If set `false`, hide the status bar. Defaults to `true`. - **toolbar**: If set `false`, hide the toolbar. Defaults to `true`. @@ -54,7 +62,8 @@ simplemde.codemirror.getValue(); - **indentWithTabs**: If set `false`, indent using spaces instead of tabs. Defaults to `true`. - **tabSize**: If set, customize the tab size. Defaults to `'2'`. -``` +```JavaScript + +``` + +#### CSS + +To change the minimum height (before it starts auto-growing): + +```CSS + +``` + +Or, you can keep the height static: + +```CSS + ``` ## How it works @@ -85,3 +117,4 @@ As mentioned earlier, SimpleMDE is an improvement of [lepture's Editor project]( - Improved preview rendering in many ways - Improved as-you-type appearance of headers and code blocks - Simplified the toolbar +- Many new options during instantiation From fd3983ff29e7a789ca4e1b1733c8b911600e5d48 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 13:54:04 -0500 Subject: [PATCH 07/26] Update readability again --- README.md | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/README.md b/README.md index 75da706a..edce5633 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ simplemde.render(); jQuery method -```JavaScript +```HTML ``` -#### CSS - To change the minimum height (before it starts auto-growing): ```CSS - ``` Or, you can keep the height static: ```CSS - ``` ## How it works From 8c9cb5c90d61e829eff220c7ac581e4d71e00f68 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 13:54:22 -0500 Subject: [PATCH 08/26] Add .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..331a27a6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +localtesting/* \ No newline at end of file From 7eb1bdc0cbb4a05a7f98e047ed4b4d79fc71b83e Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 26 Jun 2015 13:55:23 -0500 Subject: [PATCH 09/26] Change the color coding --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index edce5633..ef7ff5b2 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font And then load SimpleMDE on the first textarea on a page -```JavaScript +```HTML