scss/toolkit/components/drop.scss in titon-toolkit-2.0.2 vs scss/toolkit/components/drop.scss in titon-toolkit-2.1.0

@@ -4,110 +4,113 @@
  * @link        http://titon.io
  */
 
 @import "../common";
 
-#{$drop-class} {
-    @include reset-list;
-    text-align: left;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 200px;
-    line-height: 100%;
-    z-index: $drop-zindex;
-    opacity: 0;
-    visibility: hidden;
-    transition: left $drop-transition, opacity $drop-transition, visibility $drop-transition;
-
-    // Nested
+@include export("drop") {
     #{$drop-class} {
-        display: block;
-        top: 0;
-        left: 90%;
-        z-index: $drop-zindex + 1;
-    }
-
-    ul,
-    ol {
         @include reset-list;
-    }
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 200px;
+        line-height: 100%;
+        z-index: $drop-zindex;
+        opacity: 0;
+        visibility: hidden;
+        transition: left $drop-transition, right $drop-transition, opacity $drop-transition, visibility $drop-transition;
 
-    li {
-        position: relative;
-
-        > a {
-            padding: $small-padding;
+        // Nested
+        #{$drop-class} {
             display: block;
-
-            .caret-right {
-                float: right;
-                display: none;
-            }
+            top: 0;
+            #{$align-direction}: 90%;
+            z-index: $drop-zindex + 1;
         }
 
-        &.has-children {
-            > a .caret-right { display: inline-block; }
+        ul,
+        ol {
+            @include reset-list;
         }
 
-        // Show nested dropdown
-        &:hover {
-            #{$drop-class} {
-                visibility: visible;
-                opacity: 1;
-                left: 100%;
+        li {
+            position: relative;
+
+            > a {
+                padding: $small-padding;
+                display: block;
+
+                .caret-right,
+                .caret-left {
+                    float: $align-opposite-direction;
+                    display: none;
+                }
             }
+
+            &.has-children {
+                > a .caret-right,
+                > a .caret-left { display: inline-block; }
+            }
+
+            // Show nested dropdown
+            &:hover {
+                #{$drop-class} {
+                    visibility: visible;
+                    opacity: 1;
+                    #{$align-direction}: 100%;
+                }
+            }
         }
     }
-}
 
-#{$drop-class-divider} {
-    margin: ($margin / 2) 0;
-    border-top: 1px solid $gray-dark;
-}
+    #{$drop-class-divider} {
+        margin: ($margin / 2) 0;
+        border-top: 1px solid $gray-dark;
+    }
 
-#{$drop-class-heading} {
-    padding: $small-padding;
-}
+    #{$drop-class-heading} {
+        padding: $small-padding;
+    }
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-@if index($drop-modifiers, "up") {
-    #{$drop-class-modifier-up} {
-        top: auto;
-        bottom: 100%;
+    @if index($drop-modifiers, "up") {
+        #{$drop-class-modifier-up} {
+            top: auto;
+            bottom: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "right") {
-    #{$drop-class-modifier-right} {
-        top: auto;
-        left: 100%;
+    @if index($drop-modifiers, "right") {
+        #{$drop-class-modifier-right} {
+            top: auto;
+            left: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "left") {
-    #{$drop-class-modifier-left} {
-        top: auto;
-        left: auto;
-        right: 100%;
+    @if index($drop-modifiers, "left") {
+        #{$drop-class-modifier-left} {
+            top: auto;
+            left: auto;
+            right: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "right") or index($drop-modifiers, "left") {
-    #{$drop-class-modifier-right},
-    #{$drop-class-modifier-left} {
-        &.reverse-align {
-            bottom: 0;
+    @if index($drop-modifiers, "right") or index($drop-modifiers, "left") {
+        #{$drop-class-modifier-right},
+        #{$drop-class-modifier-left} {
+            &.reverse-align {
+                bottom: 0;
+            }
         }
     }
-}
 
-@if index($drop-modifiers, "down") or index($drop-modifiers, "up") {
-    #{$drop-class-modifier-down},
-    #{$drop-class-modifier-up} {
-        &.reverse-align {
-            left: auto;
-            right: 0;
+    @if index($drop-modifiers, "down") or index($drop-modifiers, "up") {
+        #{$drop-class-modifier-down},
+        #{$drop-class-modifier-up} {
+            &.reverse-align {
+                left: auto;
+                right: 0;
+            }
         }
     }
-}
\ No newline at end of file
+}