Merge pull request #1273 from pat270/lexiconcss-1252

Fixes #1252 - Management Bar added .management-bar-item-xs-inline-block
liferay · Oct 30, 2018 · 2edb710 · 2edb710
2 parents 203405a + f5bc647
commit 2edb710
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/src/content/blogs_action.html b/src/content/blogs_action.html
@@ -304,7 +304,7 @@ <h5>Approved</h5>
 										<li><a href="#1">Mine</a></li>
 									</ul>
 								</li>
-								<li class="dropdown">
+								<li class="dropdown management-bar-item-xs-inline-block">
 									<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
 										<span class="management-bar-item-title">Order By: Modified Date</span>
 										<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-double-l">
@@ -319,11 +319,11 @@ <h5>Approved</h5>
 										<li><a href="#1">Size</a></li>
 									</ul>
 								</li>
-								<li>
-									<a class="btn btn-default hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
+								<li class="management-bar-item-xs-inline-block">
+									<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
 								</li>
-								<li>
-									<a class="btn btn-default hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
+								<li class="management-bar-item-xs-inline-block">
+									<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
 								</li>
 							</ul>
 						</div>

diff --git a/src/content/management-bar.html b/src/content/management-bar.html
@@ -239,7 +239,7 @@ <h3>Management Bar Default</h3>
 							<li><a href="#1">Mine</a></li>
 						</ul>
 					</li>
-					<li class="dropdown">
+					<li class="dropdown management-bar-item-xs-inline-block">
 						<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
 							<span class="management-bar-item-title">Order By: Modified Date</span>
 							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-double-l">
@@ -254,42 +254,42 @@ <h3>Management Bar Default</h3>
 							<li><a href="#1">Size</a></li>
 						</ul>
 					</li>
-					<li class="disabled">
-						<a href="#">Link <span class="sr-only">(current)</span></a>
-					</li>
-					<li>
-						<a class="btn btn-default hidden-xs" href="#1">
+					<li class="management-bar-item-xs-inline-block">
+						<a class="btn btn-default" href="#1" role="button">
 							<span class="icon-monospaced">
 								<span aria-hidden="true" class="icon-caret-up"></span>
 							</span>
 						</a>
 					</li>
-					<li>
-						<a class="btn btn-default hidden-xs" href="#1">
+					<li class="management-bar-item-xs-inline-block">
+						<a class="btn btn-default" href="#1" role="button">
 							<span class="icon-monospaced">
 								<span aria-hidden="true" class="icon-caret-down"></span>
 							</span>
 						</a>
 					</li>
+					<li class="disabled">
+						<a href="#">Link <span class="sr-only">(current)</span></a>
+					</li>
 				</ul>
 			</div>
 
 			<div class="management-bar-header-right">
-				<a class="btn btn-default" href="#">
+				<a class="btn btn-default" href="#" role="button">
 					<span class="icon-monospaced">
 						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
 							<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
 						</svg>
 					</span>
 				</a>
-				<a class="btn btn-default" href="#">
+				<a class="btn btn-default" href="#" role="button">
 					<span class="icon-monospaced">
 						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
 							<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
 						</svg>
 					</span>
 				</a>
-				<a class="btn btn-default hidden-xs" href="#">
+				<a class="btn btn-default hidden-xs" href="#" role="button">
 					<span class="icon-monospaced">
 						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table2">
 							<use xlink:href="{{rootPath}}/images/icons/icons.svg#table2" />
@@ -372,7 +372,7 @@ <h3>Management Bar Default</h3>
                 </ul>
             </li>
             <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#1">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
                     <span class="management-bar-item-title">Recent</span>
                     <span aria-hidden="true" class="icon-sort"></span>
                 </a>
@@ -382,8 +382,8 @@ <h3>Management Bar Default</h3>
                     <li><a href="#1">Mine</a></li>
                 </ul>
             </li>
-            <li class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#1">
+            <li class="dropdown management-bar-item-xs-inline-block">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
                     <span class="management-bar-item-title">Order By: Modified Date</span>
                     <span aria-hidden="true" class="icon-sort"></span>
                 </a>
@@ -395,11 +395,11 @@ <h3>Management Bar Default</h3>
                     <li><a href="#1">Size</a></li>
                 </ul>
             </li>
-            <li>
-                <a class="btn hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
+            <li class="management-bar-item-xs-inline-block">
+                <a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
             </li>
-            <li>
-                <a class="btn hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
+            <li class="management-bar-item-xs-inline-block">
+                <a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
             </li>
         </ul>
     </div>

diff --git a/src/content/test_assorted.html b/src/content/test_assorted.html
@@ -6,15 +6,15 @@
 <header class="header-toolbar header-toolbar-default">
 	<div class="toolbar-group">
 		<div class="toolbar-group-content">
-			<a class="sidenav-toggler" href="#1">
+			<a class="sidenav-toggler" href="#1" role="button">
 				<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-product-menu-closed">
 					<use xlink:href="{{rootPath}}/images/icons/icons.svg#product-menu-closed" />
 				</svg>
 			</a>
 		</div>
 
 		<div class="toolbar-group-content">
-			<a href="#1">
+			<a href="#1" role="button">
 				<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-angle-left">
 					<use xlink:href="{{rootPath}}/images/icons/icons.svg#angle-left" />
 				</svg>
@@ -25,7 +25,7 @@
 	<div class="toolbar-group-right">
 		<div class="toolbar-group-content">
 			<div class="dropdown">
-				<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
 					<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-ellipsis-v">
 						<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
 					</svg>
@@ -318,8 +318,8 @@
 					<li><a href="#1">Mine</a></li>
 				</ul>
 			</li>
-			<li class="dropdown">
-				<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
+			<li class="dropdown management-bar-item-xs-inline-block">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
 					<span class="management-bar-item-title">Order By: Modified Date</span>
 					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-double-l">
 						<use xlink:href="{{rootPath}}/images/icons/icons.svg#caret-double-l" />
@@ -333,11 +333,11 @@
 					<li><a href="#1">Size</a></li>
 				</ul>
 			</li>
-			<li>
-				<a class="btn btn-default hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
+			<li class="management-bar-item-xs-inline-block">
+				<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
 			</li>
-			<li>
-				<a class="btn btn-default hidden-xs" href="#1"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
+			<li class="management-bar-item-xs-inline-block">
+				<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
 			</li>
 		</ul>
 	</div>

diff --git a/src/scss/lexicon-base/_management-bar.scss b/src/scss/lexicon-base/_management-bar.scss
@@ -274,6 +274,17 @@
 		margin: 0;
 	}
 
+	.management-bar-item-xs-inline-block {
+		@media (max-width: $grid-float-breakpoint-max) {
+			display: inline-block;
+			vertical-align: top;
+
+			+ .management-bar-item-xs-inline-block {
+				margin-left: -4px;
+			}
+		}
+	}
+
 	> li {
 		@media (min-width: $grid-float-breakpoint) {
 			float: left;