Update: (liferay#481) Navbar added classes .navbar-nowrap, `.navbar…

…-nav-expand`, `.nav-item-expand`, `.nav-item-shrink` to help with horizontal sizing of various items in Navbar
pat270 · Feb 20, 2018 · ec72db3 · ec72db3
1 parent 9cb0f19
commit ec72db3
Showing 1 changed file with 31 additions and 2 deletions.
diff --git a/packages/clay/src/scss/components/_navbar.scss b/packages/clay/src/scss/components/_navbar.scss
@@ -11,6 +11,21 @@
 	}
 }
 
+.navbar-nowrap {
+	flex-wrap: nowrap;
+
+	.container,
+	.container-fluid,
+	.navbar-nav {
+		flex-wrap: nowrap !important;
+	}
+
+	.navbar-text {
+		min-width: 0;
+		white-space: nowrap;
+	}
+}
+
 .navbar-nav,
 .navbar-form {
 	.dropdown-menu-right {
@@ -32,6 +47,15 @@
 	}
 }
 
+.navbar-nav-expand {
+	flex-grow: 1;
+	min-width: 0;
+}
+
+.navbar-nav-last {
+	margin-left: auto;
+}
+
 .navbar-nav .nav-item {
 	word-wrap: normal;
 
@@ -43,8 +67,13 @@
 	}
 }
 
-.navbar-nav-last {
-	margin-left: auto;
+.nav-item-expand {
+	flex-grow: 1;
+	min-width: 0;
+}
+
+.nav-item-shrink {
+	min-width: 0;
 }
 
 .navbar-title {