@clayui/css 3.89.0 → 3.91.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.89.0
+ * Clay 3.91.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -1988,6 +1988,28 @@ input[type=button].btn-block {
   margin-top: -0.1em;
 }
 
+.c-horizontal-resizer {
+  background-color: transparent;
+  bottom: 0;
+  cursor: ew-resize;
+  margin-right: -0.25rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  width: 0.5rem;
+  z-index: 10;
+}
+.c-horizontal-resizer:hover {
+  background-color: #75b8ff;
+}
+.c-horizontal-resizer:focus {
+  background-color: #75b8ff;
+}
+
 .fade {
   transition: opacity 0.15s linear;
 }
@@ -12071,23 +12093,6 @@ label.custom-control-label {
   color: #fff;
 }
 
-.nav-underline .nav-link::after {
-  bottom: 0;
-  display: block;
-  position: absolute;
-  left: 0.5rem;
-  right: 0.5rem;
-  width: auto;
-}
-.nav-underline .nav-link.active::after {
-  background-color: #47a0ff;
-  content: "";
-  height: 0.1875rem;
-}
-.nav-underline .nav-link[aria-expanded=true]::after, .nav-underline .nav-link.show::after {
-  content: "";
-  height: 0.1875rem;
-}
 .menubar {
   position: relative;
 }
@@ -12099,37 +12104,28 @@ label.custom-control-label {
 .menubar-vertical-expand-md {
   max-width: 15.625rem;
 }
+.menubar-vertical-expand-md .menubar-collapse {
+  display: block;
+}
+.menubar-vertical-expand-md .menubar-collapse.collapsing, .menubar-vertical-expand-md .menubar-collapse.show {
+  display: block;
+}
 @media (max-width: 767.98px) {
   .menubar-vertical-expand-md {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
     margin-bottom: 1.5rem;
     margin-left: -15px;
     margin-right: -15px;
+    max-width: none;
   }
-}
-.menubar-vertical-expand-md .menubar-collapse {
-  display: block;
-}
-@media (max-width: 767.98px) {
   .menubar-vertical-expand-md .menubar-collapse {
     border-color: transparent;
     border-style: solid;
     border-width: 0.0625rem;
     display: none;
-    left: -0.0625rem;
-    position: absolute;
-    right: -0.0625rem;
+    position: relative;
     top: 100%;
     z-index: 499;
   }
-}
-.menubar-vertical-expand-md .menubar-collapse.collapsing, .menubar-vertical-expand-md .menubar-collapse.show {
-  display: block;
-}
-@media (max-width: 767.98px) {
   .menubar-vertical-expand-md .menubar-toggler {
     align-items: center;
     border-color: transparent;
@@ -12142,40 +12138,34 @@ label.custom-control-label {
   }
   .menubar-vertical-expand-md .menubar-toggler .c-inner {
     max-width: none;
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
   }
   .menubar-vertical-expand-md .menubar-toggler .lexicon-icon {
     margin-top: 0;
   }
-}
-@media (max-width: 767.98px) {
   .menubar-vertical-expand-md .nav-nested {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
   }
-}
-@media (max-width: 767.98px) {
   .menubar-vertical-expand-md .nav-nested-margins > li .nav > li {
     margin-left: 0;
   }
-}
-@media (max-width: 767.98px) {
-  .menubar-vertical-expand-md.menubar-transparent {
-    background-color: #f8f9fa;
+  .menubar-vertical-expand-md .nav-link {
+    color: rgba(0, 0, 0, 0.5);
   }
-}
-@media (max-width: 767.98px) {
-  .menubar-vertical-expand-md.menubar-transparent .menubar-collapse {
-    background-color: #fff;
-    border-color: #dee2e6;
-    border-radius: 0.25rem;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+  .menubar-vertical-expand-md .nav-link:hover, .menubar-vertical-expand-md .nav-link.hover {
+    color: rgba(0, 0, 0, 0.7);
   }
-}
-@media (max-width: 767.98px) {
-  .menubar-vertical-expand-md.menubar-transparent .menubar-toggler {
-    text-decoration: none;
+  .menubar-vertical-expand-md .nav-link:active {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .menubar-vertical-expand-md .nav-link.active {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .menubar-vertical-expand-md .nav-link:disabled, .menubar-vertical-expand-md .nav-link.disabled {
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .menubar-vertical-expand-md .nav-link[aria-expanded=true], .menubar-vertical-expand-md .nav-link.show {
+    color: rgba(0, 0, 0, 0.9);
   }
 }
 .menubar-vertical-expand-md.menubar-transparent .nav-link {
@@ -12194,6 +12184,17 @@ label.custom-control-label {
   color: rgba(0, 0, 0, 0.3);
 }
 @media (max-width: 767.98px) {
+  .menubar-vertical-expand-md.menubar-transparent {
+    background-color: #f8f9fa;
+  }
+  .menubar-vertical-expand-md.menubar-transparent .menubar-collapse {
+    background-color: #fff;
+    border-color: #dee2e6;
+    border-radius: 0.25rem;
+  }
+  .menubar-vertical-expand-md.menubar-transparent .menubar-toggler {
+    text-decoration: none;
+  }
   .menubar-vertical-expand-md.menubar-transparent .nav-link {
     border-radius: 0;
     color: #212529;
@@ -12247,37 +12248,28 @@ label.custom-control-label {
 .menubar-vertical-expand-lg {
   max-width: 15.625rem;
 }
+.menubar-vertical-expand-lg .menubar-collapse {
+  display: block;
+}
+.menubar-vertical-expand-lg .menubar-collapse.collapsing, .menubar-vertical-expand-lg .menubar-collapse.show {
+  display: block;
+}
 @media (max-width: 991.98px) {
   .menubar-vertical-expand-lg {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
     margin-bottom: 1.5rem;
     margin-left: -15px;
     margin-right: -15px;
+    max-width: none;
   }
-}
-.menubar-vertical-expand-lg .menubar-collapse {
-  display: block;
-}
-@media (max-width: 991.98px) {
   .menubar-vertical-expand-lg .menubar-collapse {
     border-color: transparent;
     border-style: solid;
     border-width: 0.0625rem;
     display: none;
-    left: -0.0625rem;
-    position: absolute;
-    right: -0.0625rem;
+    position: relative;
     top: 100%;
     z-index: 499;
   }
-}
-.menubar-vertical-expand-lg .menubar-collapse.collapsing, .menubar-vertical-expand-lg .menubar-collapse.show {
-  display: block;
-}
-@media (max-width: 991.98px) {
   .menubar-vertical-expand-lg .menubar-toggler {
     align-items: center;
     border-color: transparent;
@@ -12290,46 +12282,34 @@ label.custom-control-label {
   }
   .menubar-vertical-expand-lg .menubar-toggler .c-inner {
     max-width: none;
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
   }
   .menubar-vertical-expand-lg .menubar-toggler .lexicon-icon {
     margin-top: 0;
   }
-}
-@media (max-width: 991.98px) {
   .menubar-vertical-expand-lg .nav-nested {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
   }
-}
-@media (max-width: 991.98px) {
-  .menubar-vertical-expand-lg .nav-nested-margins {
-    margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
-  }
-}
-@media (max-width: 991.98px) {
   .menubar-vertical-expand-lg .nav-nested-margins > li .nav > li {
     margin-left: 0;
   }
-}
-@media (max-width: 991.98px) {
-  .menubar-vertical-expand-lg.menubar-transparent {
-    background-color: #f8f9fa;
+  .menubar-vertical-expand-lg .nav-link {
+    color: rgba(0, 0, 0, 0.5);
   }
-}
-@media (max-width: 991.98px) {
-  .menubar-vertical-expand-lg.menubar-transparent .menubar-collapse {
-    background-color: #fff;
-    border-color: #dee2e6;
-    border-radius: 0.25rem;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+  .menubar-vertical-expand-lg .nav-link:hover, .menubar-vertical-expand-lg .nav-link.hover {
+    color: rgba(0, 0, 0, 0.7);
   }
-}
-@media (max-width: 991.98px) {
-  .menubar-vertical-expand-lg.menubar-transparent .menubar-toggler {
-    text-decoration: none;
+  .menubar-vertical-expand-lg .nav-link:active {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .menubar-vertical-expand-lg .nav-link.active {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .menubar-vertical-expand-lg .nav-link:disabled, .menubar-vertical-expand-lg .nav-link.disabled {
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .menubar-vertical-expand-lg .nav-link[aria-expanded=true], .menubar-vertical-expand-lg .nav-link.show {
+    color: rgba(0, 0, 0, 0.9);
   }
 }
 .menubar-vertical-expand-lg.menubar-transparent .nav-link {
@@ -12348,6 +12328,17 @@ label.custom-control-label {
   color: rgba(0, 0, 0, 0.3);
 }
 @media (max-width: 991.98px) {
+  .menubar-vertical-expand-lg.menubar-transparent {
+    background-color: #f8f9fa;
+  }
+  .menubar-vertical-expand-lg.menubar-transparent .menubar-collapse {
+    background-color: #fff;
+    border-color: #dee2e6;
+    border-radius: 0.25rem;
+  }
+  .menubar-vertical-expand-lg.menubar-transparent .menubar-toggler {
+    text-decoration: none;
+  }
   .menubar-vertical-expand-lg.menubar-transparent .nav-link {
     border-radius: 0;
     color: #212529;
@@ -13225,7 +13216,7 @@ label.custom-control-label {
   color: #fff;
 }
 
-.navbar-underline .navbar-toggler-link:after {
+.navbar-underline .navbar-toggler-link::after {
   background-color: #007bff;
   bottom: -0.5rem;
   content: "";
@@ -13236,48 +13227,8 @@ label.custom-control-label {
   right: 0;
   width: auto;
 }
-
-@media (min-width: 576px) {
-  .navbar-underline.navbar-expand-sm .navbar-nav .nav-link.active:after {
-    background-color: #007bff;
-    bottom: -0.5rem;
-    content: "";
-    display: block;
-    height: 0.1875rem;
-    left: 0;
-    position: absolute;
-    right: 0;
-    width: auto;
-  }
-}
 @media (min-width: 768px) {
-  .navbar-underline.navbar-expand-md .navbar-nav .nav-link.active:after {
-    background-color: #007bff;
-    bottom: -0.5rem;
-    content: "";
-    display: block;
-    height: 0.1875rem;
-    left: 0;
-    position: absolute;
-    right: 0;
-    width: auto;
-  }
-}
-@media (min-width: 992px) {
-  .navbar-underline.navbar-expand-lg .navbar-nav .nav-link.active:after {
-    background-color: #007bff;
-    bottom: -0.5rem;
-    content: "";
-    display: block;
-    height: 0.1875rem;
-    left: 0;
-    position: absolute;
-    right: 0;
-    width: auto;
-  }
-}
-@media (min-width: 1200px) {
-  .navbar-underline.navbar-expand-xl .navbar-nav .nav-link.active:after {
+  .navbar-underline.navbar-expand-md.navbar-underline .navbar-nav .nav-link.active::after {
     background-color: #007bff;
     bottom: -0.5rem;
     content: "";
@@ -13289,18 +13240,6 @@ label.custom-control-label {
     width: auto;
   }
 }
-.navbar-underline.navbar-expand .navbar-nav .nav-link.active:after {
-  background-color: #007bff;
-  bottom: -0.5rem;
-  content: "";
-  display: block;
-  height: 0.1875rem;
-  left: 0;
-  position: absolute;
-  right: 0;
-  width: auto;
-}
-
 .application-bar {
   flex-wrap: nowrap;
   border-width: 0px 0px 0px 0px;
@@ -17954,6 +17893,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .c-slideout .sidebar {
   display: none;
   flex-shrink: 0;
+  overflow: visible;
   position: relative;
   width: 320px;
 }
@@ -17963,6 +17903,9 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .c-slideout .sidebar.c-slideout-transition {
   display: block;
 }
+.c-slideout .sidebar.c-slideout-transition .c-horizontal-resizer {
+  display: none;
+}
 .c-slideout .tbar-stacked {
   display: none;
   flex-shrink: 0;
@@ -18037,6 +17980,10 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .c-slideout-end .tbar-stacked.c-slideout-show {
   right: 0;
 }
+.c-slideout-end .c-horizontal-resizer {
+  left: 0;
+  right: auto;
+}
 @media (max-width: 767.98px) {
   .c-slideout-end.c-slideout-tbar-shown .sidebar {
     right: -280px;
@@ -20376,6 +20323,7 @@ caption {
   padding: 2px 0;
 }
 .treeview .btn {
+  color: inherit;
   font-size: 12px;
   line-height: 1;
   padding: 6px 8px;