Merge pull request #32 from troelskn/fix-rounded-edges

Don't rely on :last-child to style first/last element, as they may be hidden
yabwe · Sep 24, 2013 · b269a5c · b269a5c
2 parents c06e33d + ff741bf
commit b269a5c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/dist/css/medium.editor.css b/dist/css/medium.editor.css
diff --git 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
@@ -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;
         }