New: Dropdown added $dropdown-action-toggle-color, `$dropdown-actio…

…n-toggle-hover-color`, and added component `.dropdown-action`
liferay · Aug 9, 2017 · 6481ecd · 6481ecd
1 parent 1672d88
commit 6481ecd
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/src/scss/atlas-theme/variables/_dropdowns.scss b/src/scss/atlas-theme/variables/_dropdowns.scss
@@ -24,4 +24,9 @@ $dropdown-link-active-bg: $dropdown-link-hover-bg !default;
 $dropdown-link-active-font-weight: 500 !default;
 $dropdown-link-disabled-color: lighten($body-color, 52%) !default;
 
-$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+
+// Dropdown Action
+
+$dropdown-action-toggle-color: map-get($theme-colors, secondary) !default;
+$dropdown-action-toggle-hover-color: $dropdown-action-toggle-color !default;
diff --git a/src/scss/lexicon-base/_dropdowns.scss b/src/scss/lexicon-base/_dropdowns.scss
@@ -147,6 +147,39 @@
 	}
 }
 
+.dropdown-action {
+	display: inline-block;
+	vertical-align: middle;
+
+	> .dropdown-toggle {
+		color: $dropdown-action-toggle-color;
+		display: block;
+
+		@include hover-focus {
+			color: $dropdown-action-toggle-hover-color;
+		}
+
+		.lexicon-icon {
+			display: block;
+			margin-top: 0;
+
+			@include monospace($icon-monospaced-size);
+
+			padding: lx-icon-padding($icon-monospaced-size, $lexicon-icon-size);
+		}
+	}
+
+	> button.dropdown-toggle {
+		background-color: transparent;
+		border-width: 0;
+		padding: 0;
+	}
+
+	&.show button.dropdown-toggle {
+		outline: none;
+	}
+}
+
 // Dropdown Menu Horizontal
 
 .dropdown-menu-horizontal {

diff --git a/src/scss/lexicon-base/variables/_dropdowns.scss b/src/scss/lexicon-base/variables/_dropdowns.scss
@@ -43,6 +43,11 @@ $dropdown-item-indicator-spacer-x: 1rem !default;
 
 $dropdown-horizontal-min-height: 50px !default;
 
+// Dropdown Action
+
+$dropdown-action-toggle-color: $link-color !default;
+$dropdown-action-toggle-hover-color: $link-hover-color !default;
+
 // Alert inside Dropdowns
 
 $dropdown-alert-font-size: null !default;