From 7a5ae03d288d47290653c2ee42d9e0c040b2f8e6 Mon Sep 17 00:00:00 2001 From: buuug7 Date: Fri, 11 Aug 2017 17:09:56 +0800 Subject: [PATCH 1/2] refector scss file and add missing mixin box-shadown --- .gitignore | 2 + css/bootstrap-markdown.min.css | 166 ++++++++++++++++++++++++++++- scss/_md-editor.scss | 175 +++++++++++++++++++++++++++++++ scss/_variables.scss | 16 +++ scss/bootstrap-markdown.scss | 185 +-------------------------------- scss/mixins/_box-shadow.scss | 8 ++ 6 files changed, 369 insertions(+), 183 deletions(-) create mode 100644 scss/_md-editor.scss create mode 100644 scss/_variables.scss create mode 100644 scss/mixins/_box-shadow.scss diff --git a/.gitignore b/.gitignore index 0720f5b..18c528a 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ bower_components .DS_Store node_modules/* .idea +scss/bootstrap-markdown.css +scss/bootstrap-markdown.css.map diff --git a/css/bootstrap-markdown.min.css b/css/bootstrap-markdown.min.css index 388b2f5..85ea18b 100644 --- a/css/bootstrap-markdown.min.css +++ b/css/bootstrap-markdown.min.css @@ -1 +1,165 @@ -.md-editor{display:block;border:1px solid #ddd}.md-editor .md-footer,.md-editor>.md-header{display:block;padding:6px 4px;background:#f5f5f5}.md-editor>.md-header{margin:0}.md-editor>.md-preview{background:#fff;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;min-height:10px;overflow:auto}.md-editor>textarea{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px;outline:0;margin:0;display:block;padding:0;width:100%;border:0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;border-radius:0;box-shadow:none;background:#eee}.md-editor>textarea:focus{box-shadow:none;background:#fff}.md-editor.active{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.md-editor .md-controls{float:right;padding:3px}.md-editor .md-controls .md-control{right:5px;color:#bebebe;padding:3px 3px 3px 10px}.md-editor .md-controls .md-control:hover{color:#333}.md-editor.md-fullscreen-mode{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;padding:60px 30px 15px;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-footer{display:none}.md-editor.md-fullscreen-mode .md-input,.md-editor.md-fullscreen-mode .md-preview{margin:0 auto!important;height:100%!important;font-size:20px!important;padding:20px!important;color:#999;line-height:1.6em!important;resize:none!important;box-shadow:none!important;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-preview{color:#333;overflow:auto}.md-editor.md-fullscreen-mode .md-input:focus,.md-editor.md-fullscreen-mode .md-input:hover{color:#333;background:#fff!important}.md-editor.md-fullscreen-mode .md-header{background:0 0;text-align:center;position:fixed;width:100%;top:20px}.md-editor.md-fullscreen-mode .btn-group{float:none}.md-editor.md-fullscreen-mode .btn{border:0;background:0 0;color:#b3b3b3}.md-editor.md-fullscreen-mode .btn.active,.md-editor.md-fullscreen-mode .btn:active,.md-editor.md-fullscreen-mode .btn:focus,.md-editor.md-fullscreen-mode .btn:hover{box-shadow:none;color:#333}.md-editor.md-fullscreen-mode .md-fullscreen-controls{position:absolute;top:20px;right:20px;text-align:right;z-index:1002;display:block}.md-editor.md-fullscreen-mode .md-fullscreen-controls a{color:#b3b3b3;clear:right;margin:10px;width:30px;height:30px;text-align:center}.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover{color:#333;text-decoration:none}.md-editor.md-fullscreen-mode .md-editor{height:100%!important;position:relative}.md-editor .md-fullscreen-controls{display:none}.md-nooverflow{overflow:hidden;position:fixed;width:100%} \ No newline at end of file +.md-editor { + display: block; + border: 1px solid #ddd +} + +.md-editor .md-footer, .md-editor > .md-header { + display: block; + padding: 6px 4px; + background: #f5f5f5 +} + +.md-editor > .md-header { + margin: 0 +} + +.md-editor > .md-preview { + background: #fff; + border-top: 1px dashed #ddd; + border-bottom: 1px dashed #ddd; + min-height: 10px; + overflow: auto +} + +.md-editor > textarea { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 14px; + outline: 0; + margin: 0; + display: block; + padding: 0; + width: 100%; + border: 0; + border-top: 1px dashed #ddd; + border-bottom: 1px dashed #ddd; + border-radius: 0; + box-shadow: none; + background: #eee +} + +.md-editor > textarea:focus { + box-shadow: none; + background: #fff +} + +.md-editor.active { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) +} + +.md-editor .md-controls { + float: right; + padding: 3px +} + +.md-editor .md-controls .md-control { + right: 5px; + color: #bebebe; + padding: 3px 3px 3px 10px +} + +.md-editor .md-controls .md-control:hover { + color: #333 +} + +.md-editor.md-fullscreen-mode { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 99999; + padding: 60px 30px 15px; + background: #fff !important; + border: 0 !important +} + +.md-editor.md-fullscreen-mode .md-footer { + display: none +} + +.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview { + margin: 0 auto !important; + height: 100% !important; + font-size: 20px !important; + padding: 20px !important; + color: #999; + line-height: 1.6em !important; + resize: none !important; + box-shadow: none !important; + background: #fff !important; + border: 0 !important +} + +.md-editor.md-fullscreen-mode .md-preview { + color: #333; + overflow: auto +} + +.md-editor.md-fullscreen-mode .md-input:focus, .md-editor.md-fullscreen-mode .md-input:hover { + color: #333; + background: #fff !important +} + +.md-editor.md-fullscreen-mode .md-header { + background: 0 0; + text-align: center; + position: fixed; + width: 100%; + top: 20px +} + +.md-editor.md-fullscreen-mode .btn-group { + float: none +} + +.md-editor.md-fullscreen-mode .btn { + border: 0; + background: 0 0; + color: #b3b3b3 +} + +.md-editor.md-fullscreen-mode .btn.active, .md-editor.md-fullscreen-mode .btn:active, .md-editor.md-fullscreen-mode .btn:focus, .md-editor.md-fullscreen-mode .btn:hover { + box-shadow: none; + color: #333 +} + +.md-editor.md-fullscreen-mode .md-fullscreen-controls { + position: absolute; + top: 20px; + right: 20px; + text-align: right; + z-index: 1002; + display: block +} + +.md-editor.md-fullscreen-mode .md-fullscreen-controls a { + color: #b3b3b3; + clear: right; + margin: 10px; + width: 30px; + height: 30px; + text-align: center +} + +.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { + color: #333; + text-decoration: none +} + +.md-editor.md-fullscreen-mode .md-editor { + height: 100% !important; + position: relative +} + +.md-editor .md-fullscreen-controls { + display: none +} + +.md-nooverflow { + overflow: hidden; + position: fixed; + width: 100% +} \ No newline at end of file diff --git a/scss/_md-editor.scss b/scss/_md-editor.scss new file mode 100644 index 0000000..d671beb --- /dev/null +++ b/scss/_md-editor.scss @@ -0,0 +1,175 @@ +// +// md-editor +// + +.md-editor { + display: block; + border: 1px solid $table-border-color; + + > .md-header, .md-footer { + display: block; + padding: 6px 4px; + background: $panel-default-heading-bg; + } + + > .md-header { + margin: 0; + } + + > .md-preview { + background: $panel-bg; + border-top: 1px dashed $table-border-color; + border-bottom: 1px dashed $table-border-color; + min-height: 10px; + overflow: auto; + } + + > textarea { + font-family: $font-family-monospace; + font-size: $font-size-base; + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + margin: 0; + display: block; + padding: 0; + width: 100%; + border: 0; + border-top: 1px dashed $table-border-color; + border-bottom: 1px dashed $table-border-color; + border-radius: 0; + box-shadow: none; + background: $input-bg-disabled; + &:focus { + box-shadow: none; + background: $input-bg; + } + } + + + &.active { + border-color: $color; + outline: 0; + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba); + } + + .md-controls { + float: right; + padding: 3px; + + .md-control { + right: 5px; + color: #bebebe; + padding: 3px 3px 3px 10px; + &:hover { + color: #333; + } + } + } + + // fullscreen mode styles + &.md-fullscreen-mode { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 99999; + padding: 60px 30px 15px; + background: #fff !important; + border: 0 !important; + + .md-footer { + display: none; + } + + .md-input, + .md-preview { + margin: 0 auto !important; + height: 100% !important; + font-size: 20px !important; + padding: 20px !important; + color: #999; + line-height: 1.6em !important; + resize: none !important; + box-shadow: none !important; + background: #fff !important; + border: 0 !important; + } + + .md-preview { + color: #333; + overflow: auto; + } + + .md-input { + &:hover, + &:focus { + color: #333; + background: #fff !important; + } + } + + .md-header { + background: none; + text-align: center; + position: fixed; + width: 100%; + top: 20px; + } + + .btn-group { + float: none; + } + + .btn { + border: 0; + background: none; + color: #b3b3b3; + + &:hover, + &:focus, + &.active, + &:active { + box-shadow: none; + color: #333; + } + } + + .md-fullscreen-controls { + position: absolute; + top: 20px; + right: 20px; + text-align: right; + z-index: 1002; + display: block; + a { + color: #b3b3b3; + clear: right; + margin: 10px; + width: 30px; + height: 30px; + text-align: center; + + &:hover { + color: #333; + text-decoration: none; + } + } + } + + .md-editor { + height: 100% !important; + position: relative; + } + } + + .md-fullscreen-controls { + display: none; + } +} + +.md-nooverflow { + overflow: hidden; + position: fixed; + width: 100%; +} diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 0000000..24389c7 --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,16 @@ +// +// Variables +// + +$table-border-color: #ddd; +$panel-default-heading-bg: #f5f5f5; +$panel-bg: #fff; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +$font-size-base: 14px; +$input-bg-disabled: #eeeeee; +$input-bg: #fff; +$input-border-focus: #66afe9; + +// Hover state +$color: $input-border-focus; +$color-rgba: rgba(red($color), green($color), blue($color), .6); diff --git a/scss/bootstrap-markdown.scss b/scss/bootstrap-markdown.scss index d5fb2e8..30031ae 100644 --- a/scss/bootstrap-markdown.scss +++ b/scss/bootstrap-markdown.scss @@ -5,185 +5,6 @@ * @copyright 2013-2016 Taufan Aditya */ -$table-border-color: #ddd; -$panel-default-heading-bg: #f5f5f5; -$panel-bg: #fff; -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; -$font-size-base: 14px; -$input-bg-disabled: #eeeeee; -$input-bg: #fff; -$input-border-focus: #66afe9; - -.md-editor { - display: block; - border: 1px solid $table-border-color; - - > .md-header, .md-footer { - display: block; - padding: 6px 4px; - background: $panel-default-heading-bg; - } - - > .md-header { - margin: 0; - } - - > .md-preview { - background: $panel-bg; - border-top: 1px dashed $table-border-color; - border-bottom: 1px dashed $table-border-color; - min-height: 10px; - overflow: auto; - } - - > textarea { - font-family: $font-family-monospace; - font-size: $font-size-base; - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - margin: 0; - display: block; - padding: 0; - width: 100%; - border: 0; - border-top: 1px dashed $table-border-color; - border-bottom: 1px dashed $table-border-color; - border-radius: 0; - box-shadow: none; - background: $input-bg-disabled; - &:focus { - box-shadow: none; - background: $input-bg; - } - } - - // Hover state - $color: $input-border-focus; - $color-rgba: rgba(red($color), green($color), blue($color), .6); - &.active { - border-color: $color; - outline: 0; - @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba); - } - - .md-controls { - float: right; - padding: 3px; - - .md-control { - right: 5px; - color: #bebebe; - padding: 3px 3px 3px 10px; - &:hover { - color: #333; - } - } - } - - // fullscreen mode styles - &.md-fullscreen-mode { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 99999; - padding: 60px 30px 15px; - background: #fff !important; - border: 0 !important; - - .md-footer { - display: none; - } - - .md-input, - .md-preview { - margin: 0 auto !important; - height: 100% !important; - font-size: 20px !important; - padding: 20px !important; - color: #999; - line-height: 1.6em !important; - resize: none !important; - box-shadow: none !important; - background: #fff !important; - border: 0 !important; - } - - .md-preview { - color: #333; - overflow: auto; - } - - .md-input { - &:hover, - &:focus { - color: #333; - background: #fff !important; - } - } - - .md-header { - background: none; - text-align: center; - position: fixed; - width: 100%; - top: 20px; - } - - .btn-group { - float: none; - } - - .btn { - border: 0; - background: none; - color: #b3b3b3; - - &:hover, - &:focus, - &.active, - &:active { - box-shadow: none; - color: #333; - } - } - - .md-fullscreen-controls { - position: absolute; - top: 20px; - right: 20px; - text-align: right; - z-index: 1002; - display: block; - a { - color: #b3b3b3; - clear: right; - margin: 10px; - width: 30px; - height: 30px; - text-align: center; - - &:hover { - color: #333; - text-decoration: none; - } - } - } - - .md-editor { - height: 100% !important; - position: relative; - } - } - - .md-fullscreen-controls { - display: none; - } -} - -.md-nooverflow { - overflow: hidden; - position: fixed; - width: 100%; -} +@import "variables"; +@import "mixins/box-shadow"; +@import "md-editor"; diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss new file mode 100644 index 0000000..1e32c08 --- /dev/null +++ b/scss/mixins/_box-shadow.scss @@ -0,0 +1,8 @@ +// +// box-shadow +// + +@mixin box-shadow($param1,$param2) { + -webkit-box-shadow: $param1,$param2; // iOS <4.3 & Android <4.1 + box-shadow: $param1,$param2; +} From 235009b7f8fac9cb3c24e3f4ca9b3ae179efae08 Mon Sep 17 00:00:00 2001 From: buuug7 Date: Fri, 11 Aug 2017 17:18:59 +0800 Subject: [PATCH 2/2] restore the /css/bootstrap-markdown.min.css --- css/bootstrap-markdown.min.css | 166 +-------------------------------- 1 file changed, 1 insertion(+), 165 deletions(-) diff --git a/css/bootstrap-markdown.min.css b/css/bootstrap-markdown.min.css index 85ea18b..388b2f5 100644 --- a/css/bootstrap-markdown.min.css +++ b/css/bootstrap-markdown.min.css @@ -1,165 +1 @@ -.md-editor { - display: block; - border: 1px solid #ddd -} - -.md-editor .md-footer, .md-editor > .md-header { - display: block; - padding: 6px 4px; - background: #f5f5f5 -} - -.md-editor > .md-header { - margin: 0 -} - -.md-editor > .md-preview { - background: #fff; - border-top: 1px dashed #ddd; - border-bottom: 1px dashed #ddd; - min-height: 10px; - overflow: auto -} - -.md-editor > textarea { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 14px; - outline: 0; - margin: 0; - display: block; - padding: 0; - width: 100%; - border: 0; - border-top: 1px dashed #ddd; - border-bottom: 1px dashed #ddd; - border-radius: 0; - box-shadow: none; - background: #eee -} - -.md-editor > textarea:focus { - box-shadow: none; - background: #fff -} - -.md-editor.active { - border-color: #66afe9; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) -} - -.md-editor .md-controls { - float: right; - padding: 3px -} - -.md-editor .md-controls .md-control { - right: 5px; - color: #bebebe; - padding: 3px 3px 3px 10px -} - -.md-editor .md-controls .md-control:hover { - color: #333 -} - -.md-editor.md-fullscreen-mode { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 99999; - padding: 60px 30px 15px; - background: #fff !important; - border: 0 !important -} - -.md-editor.md-fullscreen-mode .md-footer { - display: none -} - -.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview { - margin: 0 auto !important; - height: 100% !important; - font-size: 20px !important; - padding: 20px !important; - color: #999; - line-height: 1.6em !important; - resize: none !important; - box-shadow: none !important; - background: #fff !important; - border: 0 !important -} - -.md-editor.md-fullscreen-mode .md-preview { - color: #333; - overflow: auto -} - -.md-editor.md-fullscreen-mode .md-input:focus, .md-editor.md-fullscreen-mode .md-input:hover { - color: #333; - background: #fff !important -} - -.md-editor.md-fullscreen-mode .md-header { - background: 0 0; - text-align: center; - position: fixed; - width: 100%; - top: 20px -} - -.md-editor.md-fullscreen-mode .btn-group { - float: none -} - -.md-editor.md-fullscreen-mode .btn { - border: 0; - background: 0 0; - color: #b3b3b3 -} - -.md-editor.md-fullscreen-mode .btn.active, .md-editor.md-fullscreen-mode .btn:active, .md-editor.md-fullscreen-mode .btn:focus, .md-editor.md-fullscreen-mode .btn:hover { - box-shadow: none; - color: #333 -} - -.md-editor.md-fullscreen-mode .md-fullscreen-controls { - position: absolute; - top: 20px; - right: 20px; - text-align: right; - z-index: 1002; - display: block -} - -.md-editor.md-fullscreen-mode .md-fullscreen-controls a { - color: #b3b3b3; - clear: right; - margin: 10px; - width: 30px; - height: 30px; - text-align: center -} - -.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { - color: #333; - text-decoration: none -} - -.md-editor.md-fullscreen-mode .md-editor { - height: 100% !important; - position: relative -} - -.md-editor .md-fullscreen-controls { - display: none -} - -.md-nooverflow { - overflow: hidden; - position: fixed; - width: 100% -} \ No newline at end of file +.md-editor{display:block;border:1px solid #ddd}.md-editor .md-footer,.md-editor>.md-header{display:block;padding:6px 4px;background:#f5f5f5}.md-editor>.md-header{margin:0}.md-editor>.md-preview{background:#fff;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;min-height:10px;overflow:auto}.md-editor>textarea{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px;outline:0;margin:0;display:block;padding:0;width:100%;border:0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;border-radius:0;box-shadow:none;background:#eee}.md-editor>textarea:focus{box-shadow:none;background:#fff}.md-editor.active{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.md-editor .md-controls{float:right;padding:3px}.md-editor .md-controls .md-control{right:5px;color:#bebebe;padding:3px 3px 3px 10px}.md-editor .md-controls .md-control:hover{color:#333}.md-editor.md-fullscreen-mode{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;padding:60px 30px 15px;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-footer{display:none}.md-editor.md-fullscreen-mode .md-input,.md-editor.md-fullscreen-mode .md-preview{margin:0 auto!important;height:100%!important;font-size:20px!important;padding:20px!important;color:#999;line-height:1.6em!important;resize:none!important;box-shadow:none!important;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-preview{color:#333;overflow:auto}.md-editor.md-fullscreen-mode .md-input:focus,.md-editor.md-fullscreen-mode .md-input:hover{color:#333;background:#fff!important}.md-editor.md-fullscreen-mode .md-header{background:0 0;text-align:center;position:fixed;width:100%;top:20px}.md-editor.md-fullscreen-mode .btn-group{float:none}.md-editor.md-fullscreen-mode .btn{border:0;background:0 0;color:#b3b3b3}.md-editor.md-fullscreen-mode .btn.active,.md-editor.md-fullscreen-mode .btn:active,.md-editor.md-fullscreen-mode .btn:focus,.md-editor.md-fullscreen-mode .btn:hover{box-shadow:none;color:#333}.md-editor.md-fullscreen-mode .md-fullscreen-controls{position:absolute;top:20px;right:20px;text-align:right;z-index:1002;display:block}.md-editor.md-fullscreen-mode .md-fullscreen-controls a{color:#b3b3b3;clear:right;margin:10px;width:30px;height:30px;text-align:center}.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover{color:#333;text-decoration:none}.md-editor.md-fullscreen-mode .md-editor{height:100%!important;position:relative}.md-editor .md-fullscreen-controls{display:none}.md-nooverflow{overflow:hidden;position:fixed;width:100%} \ No newline at end of file