Updates dropdown to fix pointing menus, fixes bug in inverted menus

build/minified/modules/dropdown.js

@@ -136,6 +136,10 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             }
 
+          },
+
+          resetStyle: function() {
+            $(this).removeAttr('style');
           }
 
         },
@@ -292,11 +296,13 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.show == 'fade') {
               $menu
+                .clearQueue()
                 .fadeIn(150)
               ;
             }
             else if(animation.show == 'slide') {
               $menu
+                .hide()
                 .clearQueue()
                 .children()
                   .clearQueue()
@@ -304,9 +310,9 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad')
+                  }, 200, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad')
+                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {
@@ -322,21 +328,23 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.hide == 'fade') {
               $menu
+                .clearQueue()
                 .fadeOut(150)
               ;
             }
             else if(animation.hide == 'slide') {
               $menu
+                .show()
                 .clearQueue()
                 .children()
                   .clearQueue()
                   .css('opacity', 1)
                   .animate({
                     opacity : 0
-                  }, 100, 'easeOutQuad')
+                  }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad')
+                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {

build/packaged/modules/dropdown.js

@@ -136,6 +136,10 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             }
 
+          },
+
+          resetStyle: function() {
+            $(this).removeAttr('style');
           }
 
         },
@@ -292,11 +296,13 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.show == 'fade') {
               $menu
+                .clearQueue()
                 .fadeIn(150)
               ;
             }
             else if(animation.show == 'slide') {
               $menu
+                .hide()
                 .clearQueue()
                 .children()
                   .clearQueue()
@@ -304,9 +310,9 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad')
+                  }, 200, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad')
+                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {
@@ -322,21 +328,23 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.hide == 'fade') {
               $menu
+                .clearQueue()
                 .fadeOut(150)
               ;
             }
             else if(animation.hide == 'slide') {
               $menu
+                .show()
                 .clearQueue()
                 .children()
                   .clearQueue()
                   .css('opacity', 1)
                   .animate({
                     opacity : 0
-                  }, 100, 'easeOutQuad')
+                  }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad')
+                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {

build/uncompressed/collections/menu.css

@@ -593,7 +593,7 @@
 }
 /*--- Active ---*/
 .ui.inverted.menu .active.item {
-  border-color: transparent;
+  border-color: transparent !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
 .ui.inverted.menu .active.item,

build/uncompressed/modules/dropdown.css

@@ -88,6 +88,9 @@
   border-bottom-left-radius: 0em !important;
   border-bottom-right-radius: 0em !important;
 }
+.ui.dropdown.visible .menu {
+  display: block;
+}
 .ui.dropdown .menu .item:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
@@ -244,6 +247,14 @@
   background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 }
 /* Directions */
+.ui.top.left.pointing.dropdown .menu,
+.ui.top.right.pointing.dropdown .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0%;
+  right: auto;
+  margin: 0.75em 0em 0em;
+}
 .ui.pointing.dropdown .menu:after {
   top: -0.25em;
   left: 50%;
@@ -254,23 +265,47 @@
   left: 1em;
   right: auto;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .ui.top.right.pointing.dropdown .menu:after {
   top: -0.25em;
   left: auto;
   right: 1em;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.ui.left.pointing.dropdown .menu {
+  top: 0%;
+  left: 100%;
+  right: auto;
+  margin: 0em 0em 0em 0.75em;
 }
 .ui.left.pointing.dropdown .menu:after {
   top: 1em;
-  left: -0.25em;
+  left: 0em;
   margin-top: -0.25em 0em 0em 0em;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.ui.right.pointing.dropdown .menu {
+  top: 0%;
+  left: auto;
+  right: 100%;
+  margin: 0em 0.75em 0em 0em;
 }
 .ui.right.pointing.dropdown .menu:after {
   top: 1em;
   left: auto;
   right: -0.25em;
   margin-top: -0.25em 0em 0em 0em;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  transform: rotate(135deg);
 }
 /* States */
 .ui.pointing.dropdown.visible,

build/uncompressed/modules/dropdown.js

@@ -136,6 +136,10 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             }
 
+          },
+
+          resetStyle: function() {
+            $(this).removeAttr('style');
           }
 
         },
@@ -292,11 +296,13 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.show == 'fade') {
               $menu
+                .clearQueue()
                 .fadeIn(150)
               ;
             }
             else if(animation.show == 'slide') {
               $menu
+                .hide()
                 .clearQueue()
                 .children()
                   .clearQueue()
@@ -304,9 +310,9 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad')
+                  }, 200, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad')
+                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {
@@ -322,21 +328,23 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.hide == 'fade') {
               $menu
+                .clearQueue()
                 .fadeOut(150)
               ;
             }
             else if(animation.hide == 'slide') {
               $menu
+                .show()
                 .clearQueue()
                 .children()
                   .clearQueue()
                   .css('opacity', 1)
                   .animate({
                     opacity : 0
-                  }, 100, 'easeOutQuad')
+                  }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad')
+                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {

node/src/documents/modules/dropdown.html

@@ -153,20 +153,11 @@ type   : 'UI Module'
     </div>
   </div>
   
-  <div class="dropdown example">
-    <h4 class="ui header">Pointing Dropdown</h4>
-    <p>A dropdown menu can be formatted to point to its content</p>
-    <div class="ui red labeled icon top right pointing dropdown button">
-      <i class="down settings icon"></i> 
-      <span class="text">Settings</span>
-      <div class="menu">
-        <div class="item"><i class="edit icon"></i>Edit</div>
-        <div class="item"><i class="delete icon"></i>Remove</div>
-        <div class="item"><i class="hide icon"></i>Hide</div>
-      </div>
-    </div>
-  </div>
+  <h4 class="ui header">Pointing Dropdown</h4>
+  <p>A dropdown menu can be formatted to point to its content</p>
+  
   <div class="another hover example">
+    <p>A standard pointing dropdown</p>
     <div class="ui compact tiered purple inverted menu">
       <div class="menu">
         <a class="active item">
@@ -190,6 +181,52 @@ type   : 'UI Module'
       </div>
     </div>
   </div>
+  <div class="another dropdown example">
+    <p>Top Right Pointing</p>
+    <div class="ui red labeled icon top right pointing dropdown button">
+      <i class="settings icon"></i> 
+      <span class="text">Settings</span>
+      <div class="menu">
+        <div class="item"><i class="edit icon"></i>Edit</div>
+        <div class="item"><i class="delete icon"></i>Remove</div>
+        <div class="item"><i class="hide icon"></i>Hide</div>
+      </div>
+    </div>
+  </div>
+  <div class="another dropdown example">
+    <p>Top Left Pointing</p>
+    <div class="ui blue labeled icon top left pointing dropdown button">
+      <i class="settings icon"></i> 
+      <span class="text">Settings</span>
+      <div class="menu">
+        <div class="item"><i class="edit icon"></i>Edit</div>
+        <div class="item"><i class="delete icon"></i>Remove</div>
+        <div class="item"><i class="hide icon"></i>Hide</div>
+      </div>
+    </div>
+  </div>
+  <div class="another dropdown example">
+    <p>Left Pointing</p>
+    <div class="ui green left pointing dropdown icon button">
+      <i class="settings icon"></i> 
+      <div class="menu">
+        <div class="item"><i class="edit icon"></i>Edit</div>
+        <div class="item"><i class="delete icon"></i>Remove</div>
+        <div class="item"><i class="hide icon"></i>Hide</div>
+      </div>
+    </div>
+  </div>
+  <div class="another dropdown example">
+    <p>Right Pointing</p>
+    <div class="ui teal right pointing dropdown icon button">
+      <i class="settings icon"></i> 
+      <div class="menu">
+        <div class="item"><i class="edit icon"></i>Edit</div>
+        <div class="item"><i class="delete icon"></i>Remove</div>
+        <div class="item"><i class="hide icon"></i>Hide</div>
+      </div>
+    </div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Simple</h4>

node/src/files/components/semantic/collections/menu.css

@@ -593,7 +593,7 @@
 }
 /*--- Active ---*/
 .ui.inverted.menu .active.item {
-  border-color: transparent;
+  border-color: transparent !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
 .ui.inverted.menu .active.item,

node/src/files/components/semantic/modules/dropdown.css

@@ -88,6 +88,9 @@
   border-bottom-left-radius: 0em !important;
   border-bottom-right-radius: 0em !important;
 }
+.ui.dropdown.visible .menu {
+  display: block;
+}
 .ui.dropdown .menu .item:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
@@ -244,6 +247,14 @@
   background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 }
 /* Directions */
+.ui.top.left.pointing.dropdown .menu,
+.ui.top.right.pointing.dropdown .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0%;
+  right: auto;
+  margin: 0.75em 0em 0em;
+}
 .ui.pointing.dropdown .menu:after {
   top: -0.25em;
   left: 50%;
@@ -254,23 +265,47 @@
   left: 1em;
   right: auto;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .ui.top.right.pointing.dropdown .menu:after {
   top: -0.25em;
   left: auto;
   right: 1em;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.ui.left.pointing.dropdown .menu {
+  top: 0%;
+  left: 100%;
+  right: auto;
+  margin: 0em 0em 0em 0.75em;
 }
 .ui.left.pointing.dropdown .menu:after {
   top: 1em;
-  left: -0.25em;
+  left: 0em;
   margin-top: -0.25em 0em 0em 0em;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.ui.right.pointing.dropdown .menu {
+  top: 0%;
+  left: auto;
+  right: 100%;
+  margin: 0em 0.75em 0em 0em;
 }
 .ui.right.pointing.dropdown .menu:after {
   top: 1em;
   left: auto;
   right: -0.25em;
   margin-top: -0.25em 0em 0em 0em;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  transform: rotate(135deg);
 }
 /* States */
 .ui.pointing.dropdown.visible,

node/src/files/components/semantic/modules/dropdown.js

@@ -136,6 +136,10 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             }
 
+          },
+
+          resetStyle: function() {
+            $(this).removeAttr('style');
           }
 
         },
@@ -292,11 +296,13 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.show == 'fade') {
               $menu
+                .clearQueue()
                 .fadeIn(150)
               ;
             }
             else if(animation.show == 'slide') {
               $menu
+                .hide()
                 .clearQueue()
                 .children()
                   .clearQueue()
@@ -304,9 +310,9 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad')
+                  }, 200, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad')
+                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {
@@ -322,21 +328,23 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.hide == 'fade') {
               $menu
+                .clearQueue()
                 .fadeOut(150)
               ;
             }
             else if(animation.hide == 'slide') {
               $menu
+                .show()
                 .clearQueue()
                 .children()
                   .clearQueue()
                   .css('opacity', 1)
                   .animate({
                     opacity : 0
-                  }, 100, 'easeOutQuad')
+                  }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad')
+                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {

node/src/files/javascript/semantic.js

@@ -132,8 +132,9 @@ semantic.ready = function() {
       if( $code.size() === 0) {
         $demo
           .each(function(){
-            if($(this).not('br')) {
-              code += $(this).get(0).outerHTML + "\n";
+            var $this = $(this).clone(false);
+            if($this.not('br')) {
+              code += $this.removeAttr('style').get(0).outerHTML + "\n";
             }
           })
         ;

src/collections/menu.less

@@ -795,7 +795,7 @@
 
 /*--- Active ---*/
 .ui.inverted.menu .active.item {
-  border-color: transparent;
+  border-color: transparent !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
 .ui.inverted.menu .active.item,

src/modules/dropdown.js

@@ -136,6 +136,10 @@ $.fn.dropdown = function(parameters) {
               event.stopPropagation();
             }
 
+          },
+
+          resetStyle: function() {
+            $(this).removeAttr('style');
           }
 
         },
@@ -292,11 +296,13 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.show == 'fade') {
               $menu
+                .clearQueue()
                 .fadeIn(150)
               ;
             }
             else if(animation.show == 'slide') {
               $menu
+                .hide()
                 .clearQueue()
                 .children()
                   .clearQueue()
@@ -304,9 +310,9 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad')
+                  }, 200, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad')
+                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {
@@ -322,21 +328,23 @@ $.fn.dropdown = function(parameters) {
             }
             else if(animation.hide == 'fade') {
               $menu
+                .clearQueue()
                 .fadeOut(150)
               ;
             }
             else if(animation.hide == 'slide') {
               $menu
+                .show()
                 .clearQueue()
                 .children()
                   .clearQueue()
                   .css('opacity', 1)
                   .animate({
                     opacity : 0
-                  }, 100, 'easeOutQuad')
+                  }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad')
+                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
               ;
             }
             else {

src/modules/dropdown.less

@@ -131,6 +131,10 @@
   border-bottom-left-radius: 0em !important;
   border-bottom-right-radius: 0em !important;
 }
+.ui.dropdown.visible .menu {
+  display: block;
+}
+
 .ui.dropdown .menu .item:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
@@ -322,6 +326,15 @@
 }
 
 /* Directions */
+.ui.top.left.pointing.dropdown .menu,
+.ui.top.right.pointing.dropdown .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0%;
+  right: auto;
+  margin: 0.75em 0em 0em;
+}
+
 .ui.pointing.dropdown .menu:after {
   top: -0.25em;
   left: 50%;
@@ -332,23 +345,51 @@
   left: 1em;
   right: auto;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 .ui.top.right.pointing.dropdown .menu:after {
   top: -0.25em;
   left: auto;
   right: 1em;
   margin: 0em;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.ui.left.pointing.dropdown .menu {
+  top: 0%;
+  left: 100%;
+  right: auto;
+  margin: 0em 0em 0em 0.75em;
 }
 .ui.left.pointing.dropdown .menu:after {
   top: 1em;
-  left: -0.25em;
+  left: 0em;
   margin-top: -0.25em 0em 0em 0em;
+
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.ui.right.pointing.dropdown .menu {
+  top: 0%;
+  left: auto;
+  right: 100%;
+  margin: 0em 0.75em 0em 0em;
 }
 .ui.right.pointing.dropdown .menu:after {
   top: 1em;
   left: auto;
   right: -0.25em;
   margin-top: -0.25em 0em 0em 0em;
+
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  transform: rotate(135deg);
 }
 
 /* States */