XW-1903 | Add dropdown styles

components/_dropdowns.scss

@@ -0,0 +1,38 @@
+$dropdown-content-z-index: 1;
+
+.wds-dropdown {
+	display: inline-block;
+	position: relative;
+
+	&.wds-is-active {
+		.wds-dropdown-content {
+			display: inline-block;
+		}
+
+		.wds-dropdown-toggle-chevron {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.wds-dropdown-toggle {
+	position: relative;
+	// dropdown content has shadow that should be hidden below the toggle
+	z-index: $dropdown-content-z-index + 1;
+}
+
+.wds-dropdown-content {
+	background-color: $color-white;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
+	display: none;
+	position: absolute;
+	z-index: $dropdown-content-z-index;
+
+	&.wds-is-dark {
+		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
+	}
+
+	&.wds-is-right-aligned {
+		right: 0;
+	}
+}

components/index.scss

@@ -1 +1,2 @@
+@import 'dropdowns';
 @import 'global-footer';