diff --git a/dist/css/medium.editor.css b/dist/css/medium.editor.css index e00170fb2..c9de40067 100644 --- a/dist/css/medium.editor.css +++ b/dist/css/medium.editor.css @@ -1 +1 @@ -.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:10;display:none;background:#242424;font-family:HelveticaNeue, Helvetica, Arial, sans-serif;font-size:16px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 3px #000;-moz-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000}.medium-editor-toolbar:before{content:"";display:block;position:absolute;top:50px;left:50%;margin-left:-8px;width:0;height:0;border-width:8px 8px 0 8px;border-color:#242424 transparent transparent transparent;border-style:solid}.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-toolbar li{float:left;list-style:none}.medium-editor-toolbar li button{display:block;padding:15px;box-sizing:border-box;height:50px;width:50px;background:#242424;color:#fff;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,0.1);font-weight:bold;text-decoration:none;text-transform:uppercase;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-transition:background-color 0.2s ease-in;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.medium-editor-toolbar li button:hover{color:yellow;background-color:#000}.medium-editor-toolbar li .medium-editor-button-active{background-color:#000;color:#fff}.medium-editor-toolbar li:first-child button{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li:last-child button{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none;color:#999}.medium-editor-toolbar-form-anchor input,.medium-editor-toolbar-form-anchor a{font-family:HelveticaNeue, Helvetica, Arial, sans-serif}.medium-editor-toolbar-form-anchor input{box-sizing:border-box;padding:6px;height:50px;width:316px;background:#242424;border:none;color:#ccc}.medium-editor-toolbar-form-anchor input:focus{outline:0;-moz-appearance:none;-webkit-appearance:none}.medium-editor-toolbar-form-anchor a{color:#fff;font-weight:bolder;font-size:24px;display:inline-block;margin:0 10px;text-decoration:none} +.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}.medium-editor-toolbar{position:absolute;top:0;left:0;z-index:10;display:none;background:#242424;font-family:HelveticaNeue, Helvetica, Arial, sans-serif;font-size:16px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 3px #000;-moz-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000}.medium-editor-toolbar:before{content:"";display:block;position:absolute;top:50px;left:50%;margin-left:-8px;width:0;height:0;border-width:8px 8px 0 8px;border-color:#242424 transparent transparent transparent;border-style:solid}.medium-editor-toolbar ul{margin:0;padding:0}.medium-editor-toolbar li{float:left;list-style:none}.medium-editor-toolbar li button{display:block;padding:15px;box-sizing:border-box;height:50px;width:50px;background:#242424;color:#fff;border:0;border-right:1px solid #000;border-left:1px solid #333;border-left:1px solid rgba(255,255,255,0.1);font-weight:bold;text-decoration:none;text-transform:uppercase;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-transition:background-color 0.2s ease-in;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.medium-editor-toolbar li button:hover{color:yellow;background-color:#000}.medium-editor-toolbar li .medium-editor-button-first{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}.medium-editor-toolbar li .medium-editor-button-last{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.medium-editor-toolbar li .medium-editor-button-active{background-color:#000;color:#fff}.medium-editor-toolbar li .medium-editor-action-underline{text-decoration:underline}.medium-editor-action-bold{font-weight:bolder}.medium-editor-action-italic{font-style:italic}.medium-editor-toolbar-form-anchor{display:none;color:#999}.medium-editor-toolbar-form-anchor input,.medium-editor-toolbar-form-anchor a{font-family:HelveticaNeue, Helvetica, Arial, sans-serif}.medium-editor-toolbar-form-anchor input{box-sizing:border-box;padding:6px;height:50px;width:316px;background:#242424;border:none;color:#ccc}.medium-editor-toolbar-form-anchor input:focus{outline:0;-moz-appearance:none;-webkit-appearance:none}.medium-editor-toolbar-form-anchor a{color:#fff;font-weight:bolder;font-size:24px;display:inline-block;margin:0 10px;text-decoration:none} diff --git a/src/js/medium.editor.js b/src/js/medium.editor.js index 5d3fe25a5..5cb2dbfdf 100644 --- a/src/js/medium.editor.js +++ b/src/js/medium.editor.js @@ -199,13 +199,28 @@ function MediumEditor(elements, options) { setToolbarButtonStates: function () { var buttons = this.toolbarActions.querySelectorAll('button'), - i; + i, + f = null, + l = null, + b = null; for (i = 0; i < buttons.length; i += 1) { buttons[i].className = buttons[i].className.replace(/medium-editor-button-active/g, '') + .replace(/\b(medium-editor-button-first|medium-editor-button-last)\b/g, '') .replace(/\s{2}/g, ' '); this.showHideButton(buttons[i]); } + for (i = 0; i < buttons.length; i += 1) { + b = buttons[i]; + if (b.style.display === "block") { + if (f === null) { + f = b; + } + l = b; + } + } + f.className += " medium-editor-button-first"; + l.className += " medium-editor-button-last"; this.checkActiveButtons(); diff --git a/src/sass/medium.editor.scss b/src/sass/medium.editor.scss index 708b45eb6..d77514dd9 100644 --- a/src/sass/medium.editor.scss +++ b/src/sass/medium.editor.scss @@ -60,22 +60,18 @@ $button_size: 50px; background-color: #000; } } + .medium-editor-button-first { + @include border-top-left-radius(5px); + @include border-bottom-left-radius(5px); + } + .medium-editor-button-last { + @include border-top-right-radius(5px); + @include border-bottom-right-radius(5px); + } .medium-editor-button-active { background-color: #000; color: #fff; } - &:first-child { - button { - @include border-top-left-radius(5px); - @include border-bottom-left-radius(5px); - } - } - &:last-child { - button { - @include border-top-right-radius(5px); - @include border-bottom-right-radius(5px); - } - } .medium-editor-action-underline { text-decoration: underline; }