@clayui/css 3.147.0 → 3.148.0

package/lib/css/atlas.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.147.0
+ * Clay 3.148.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -7707,7 +7707,6 @@ input[type=button].btn-block {
 .drilldown-inner {
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
   transition: height 0.25s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -7774,6 +7773,7 @@ input[type=button].btn-block {
 }
 .drilldown.dropdown-menu .drilldown-inner {
   min-height: 266px;
+  overflow: hidden;
 }
 .drilldown.dropdown-menu .inline-scroller {
   max-height: none;
@@ -7910,10 +7910,21 @@ label {
 label[for] {
   cursor: pointer;
 }
+label + .form-feedback-group {
+  margin-bottom: 0.75rem;
+}
 label + .form-text {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
+label .form-help-text {
+  color: #9b92a5;
+  display: inline;
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+  margin-top: 0;
+}
 label .reference-mark {
   color: #b95000;
   font-size: 6px;
@@ -11483,6 +11494,13 @@ label.custom-control-label {
   width: 0.125rem;
 }
 
+.form-help-text {
+  color: #6b6c7e;
+  display: block;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
 .was-validated .form-control:valid,
 .was-validated .form-control.is-valid {
   background-color: #edf9f0;
@@ -19342,98 +19360,6 @@ label.custom-control-label {
   word-wrap: break-word;
 }
 
-.pagination-sm .page-link {
-  font-size: 0.75rem;
-  height: 1.5rem;
-  line-height: 1;
-  padding-bottom: 0;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  padding-top: 0;
-}
-.pagination-sm .page-link > .c-inner {
-  margin-bottom: 0;
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-  margin-top: 0;
-}
-.pagination-sm .page-item:first-child .page-link,
-.pagination-sm .page-link-first {
-  border-bottom-left-radius: 0.3125rem;
-  border-top-left-radius: 0.3125rem;
-}
-.pagination-sm .page-item:last-child .page-link,
-.pagination-sm .page-link-last {
-  border-bottom-right-radius: 0.3125rem;
-  border-top-right-radius: 0.3125rem;
-}
-.pagination-sm .pagination-items-per-page {
-  border-radius: 0.3125rem;
-}
-.pagination-sm .pagination-items-per-page > a,
-.pagination-sm .pagination-items-per-page > button {
-  font-size: 0.75rem;
-  height: 1.5rem;
-  line-height: 1;
-  padding-bottom: 0;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  padding-top: 0;
-}
-.pagination-sm .pagination-items-per-page > a > .c-inner,
-.pagination-sm .pagination-items-per-page > button > .c-inner {
-  margin-bottom: 0;
-  margin-left: -0.625rem;
-  margin-right: -0.625rem;
-  margin-top: 0;
-}
-.pagination-sm .pagination-items-per-page + .pagination-results {
-  font-size: 0.75rem;
-  line-height: 1;
-  padding: 0 0.625rem;
-}
-
-.pagination-lg .page-link {
-  font-size: 1.125rem;
-  height: 2.75rem;
-  line-height: 1;
-  padding-bottom: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0;
-}
-.pagination-lg .page-link > .c-inner {
-  margin-bottom: 0;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  margin-top: 0;
-}
-.pagination-lg .page-item:first-child .page-link,
-.pagination-lg .page-link-first {
-  border-bottom-left-radius: 0.3125rem;
-  border-top-left-radius: 0.3125rem;
-}
-.pagination-lg .page-item:last-child .page-link,
-.pagination-lg .page-link-last {
-  border-bottom-right-radius: 0.3125rem;
-  border-top-right-radius: 0.3125rem;
-}
-.pagination-lg .pagination-items-per-page {
-  border-radius: 0.3125rem;
-}
-.pagination-lg .pagination-items-per-page > a,
-.pagination-lg .pagination-items-per-page > button {
-  font-size: 1.125rem;
-  height: 2.75rem;
-  line-height: 1;
-  padding: 0 0.625rem;
-}
-.pagination-lg .pagination-items-per-page + .pagination-results {
-  font-size: 1.125rem;
-  line-height: 1;
-  padding: 0 0.625rem;
-}
-
 .panel {
   background-color: #fff;
   border-color: transparent;
@@ -20980,7 +20906,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 
 .sidebar-sm {
   font-size: 0.875rem;
-  font-size: 0.875rem;
 }
 .sidebar-light {
   background-color: #fff;
@@ -20988,11 +20913,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   border-left-width: 0px;
   color: #272833;
   box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  border-color: #e7e7ed;
-  border-left-width: 0px;
-  color: #272833;
-  box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
 }
 .sidenav-start .sidebar-light,
 .sidenav-left .sidebar-light {
@@ -21095,82 +21015,10 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-light .component-navigation-bar .navbar-overlay {
   background-color: #fff;
 }
-.sidebar-light .close {
-  color: #6b6c7e;
-}
-.sidebar-light .close:hover {
-  background-color: rgba(39, 40, 51, 0.03);
-  color: #272833;
-}
-.sidebar-light .close:active {
-  background-color: rgba(39, 40, 51, 0.06);
-  color: #272833;
-}
-.sidebar-light .close:disabled {
-  background-color: transparent;
-  box-shadow: none;
-  color: #6b6c7e;
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-.sidebar-light .close:disabled:active {
-  pointer-events: none;
-}
-.sidebar-light .close:focus {
-  background-color: rgba(39, 40, 51, 0.03);
-  color: #272833;
-}
-.sidebar-light .sidebar-header {
-  background-color: inherit;
-  border: 0px solid #e7e7ed;
-}
-.sidebar-light .sidebar-footer {
-  background-color: inherit;
-  border: 0px solid #e7e7ed;
-}
-.sidebar-light .sidebar-dd .href {
-  color: #272833;
-}
-.sidebar-light .sidebar-panel {
-  background-color: #f1f2f5;
-}
-.sidebar-light .sidebar-list-group .list-group-title {
-  font-size: 1rem;
-}
-.sidebar-light .sidebar-list-group .list-group-title .href {
-  color: #272833;
-}
-.sidebar-light .component-navigation-bar {
-  background-color: #fff;
-  border-color: #cdced9;
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link {
-  color: #6b6c7e;
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:hover {
-  color: #6b6c7e;
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:active {
-  color: #272833;
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:disabled {
-  color: #a7a9bc;
-}
-.sidebar-light .sidenav-start {
-  box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
-}
-.sidebar-light .sidebar-dt {
-  color: #6b6c7e;
-}
-.sidebar-light .panel-unstyled .header .link:focus {
-  box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.375rem #5791ff;
-}
 
 .sidebar-dark {
   background-color: #272833;
   color: #fff;
-  background-color: #272833;
-  color: #fff;
 }
 .sidebar-dark .close {
   color: #a7a9bc;
@@ -21231,62 +21079,9 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-dark .nav-nested .nav-link[aria-expanded=true], .sidebar-dark .nav-nested .nav-link.show {
   color: #fff;
 }
-.sidebar-dark .sidebar-header .component-title {
-  color: inherit;
-}
-.sidebar-dark .sidebar-header .component-title .href {
-  color: inherit;
-}
-.sidebar-dark .sidebar-header .component-subtitle {
-  color: inherit;
-}
-.sidebar-dark .sidebar-header .component-subtitle .href {
-  color: inherit;
-}
-.sidebar-dark .close {
-  color: #a7a9bc;
-}
-.sidebar-dark .close:hover {
-  color: #fff;
-}
-.sidebar-dark .nav-nested .nav-link {
-  border-radius: 0.25rem;
-  color: #a7a9bc;
-  transition: box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-dark .nav-nested .nav-link {
-    transition: none;
-  }
-}
-.c-prefers-reduced-motion .sidebar-dark .nav-nested .nav-link {
-  transition: none;
-}
-
-.sidebar-dark .nav-nested .nav-link:hover {
-  color: #fff;
-}
-.sidebar-dark .nav-nested .nav-link:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
-  outline: 0;
-}
-.sidebar-dark .nav-nested .nav-link:active {
-  color: #fff;
-}
-.sidebar-dark .nav-nested .nav-link:disabled {
-  box-shadow: none;
-  color: #a7a9bc;
-  opacity: 0.65;
-}
-.sidebar-dark .nav-nested .nav-link:disabled:active {
-  pointer-events: none;
-}
-
 .sidebar-dark-l2 {
   background-color: #393a4a;
   color: #fff;
-  background-color: #393a4a;
-  color: #fff;
 }
 .sidebar-dark-l2 .close {
   color: #a7a9bc;
@@ -21347,57 +21142,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-dark-l2 .nav-nested .nav-link[aria-expanded=true], .sidebar-dark-l2 .nav-nested .nav-link.show {
   color: #fff;
 }
-.sidebar-dark-l2 .sidebar-header .component-title {
-  color: inherit;
-}
-.sidebar-dark-l2 .sidebar-header .component-title .href {
-  color: inherit;
-}
-.sidebar-dark-l2 .sidebar-header .component-subtitle {
-  color: inherit;
-}
-.sidebar-dark-l2 .sidebar-header .component-subtitle .href {
-  color: inherit;
-}
-.sidebar-dark-l2 .close {
-  color: #a7a9bc;
-}
-.sidebar-dark-l2 .close:hover {
-  color: #fff;
-}
-.sidebar-dark-l2 .nav-nested .nav-link {
-  border-radius: 0.25rem;
-  color: #a7a9bc;
-  transition: box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-dark-l2 .nav-nested .nav-link {
-    transition: none;
-  }
-}
-.c-prefers-reduced-motion .sidebar-dark-l2 .nav-nested .nav-link {
-  transition: none;
-}
-
-.sidebar-dark-l2 .nav-nested .nav-link:hover {
-  color: #fff;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
-  outline: 0;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:active {
-  color: #fff;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:disabled {
-  box-shadow: none;
-  color: #a7a9bc;
-  opacity: 0.65;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:disabled:active {
-  pointer-events: none;
-}
-
 .c-slideout-start .sidebar-light {
   box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
 }
@@ -21472,10 +21216,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   flex-shrink: 0;
   position: relative;
   width: 320px;
-  display: none;
-  flex-shrink: 0;
-  position: relative;
-  width: 320px;
 }
 .c-slideout .sidebar .sidebar-body {
   flex-grow: 1;
@@ -21484,12 +21224,15 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .c-slideout .sidebar .sidebar-footer {
   border-top-width: 1px;
 }
-.c-slideout .sidebar .sidebar-body {
-  flex-grow: 1;
-  overflow: visible;
-}
-.c-slideout .sidebar .sidebar-footer {
-  border-top-width: 1px;
+@supports (position: sticky) {
+  @media (max-height: 700px) {
+    .c-slideout .sidebar .sidebar-header.sticky-top {
+      position: static;
+    }
+    .c-slideout .sidebar .sidebar-footer.sticky-bottom {
+      position: static;
+    }
+  }
 }
 .c-slideout .sidebar.c-slideout-show {
   display: flex;
@@ -21519,7 +21262,41 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 @media (max-width: 767.98px) {
   .c-slideout .sidebar {
     width: 280px;
-    width: 280px;
+  }
+}
+
+.c-slideout-fluid.c-slideout-push-start {
+  padding-left: 33vw;
+}
+.c-slideout-fluid.c-slideout-push-end {
+  padding-right: 33vw;
+}
+.c-slideout-fluid .sidebar {
+  max-width: 33vw;
+  width: 33vw;
+}
+@media (max-width: 991.98px) {
+  .c-slideout-fluid.c-slideout-push-start {
+    padding-left: 50vw;
+  }
+  .c-slideout-fluid.c-slideout-push-end {
+    padding-right: 50vw;
+  }
+  .c-slideout-fluid .sidebar {
+    max-width: 50vw;
+    width: 50vw;
+  }
+}
+@media (max-width: 767.98px) {
+  .c-slideout-fluid.c-slideout-push-start {
+    padding-left: 0;
+  }
+  .c-slideout-fluid.c-slideout-push-end {
+    padding-right: 0;
+  }
+  .c-slideout-fluid .sidebar {
+    max-width: none;
+    width: 100vw;
   }
 }
 
@@ -21534,8 +21311,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .c-slideout-start .sidebar {
   left: -360px;
   width: 320px;
-  left: -360px;
-  width: 320px;
 }
 .c-slideout-start .sidebar.c-slideout-show {
   left: 0;
@@ -21553,8 +21328,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   .c-slideout-start .sidebar {
     left: -320px;
     width: 280px;
-    left: -320px;
-    width: 280px;
   }
   .c-slideout-start .tbar-stacked {
     left: -40px;
@@ -21571,7 +21344,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 }
 .c-slideout-end .sidebar {
   right: -360px;
-  right: -360px;
 }
 .c-slideout-end .sidebar.c-slideout-show {
   right: 0;
@@ -21592,7 +21364,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   }
   .c-slideout-end .sidebar {
     right: -320px;
-    right: -320px;
   }
   .c-slideout-end .tbar-stacked {
     right: -40px;
@@ -24694,6 +24465,13 @@ td.table-focus {
   outline: 0;
 }
 
+.c-focus-trap {
+  background: inherit;
+  color: inherit;
+  display: contents;
+  font: inherit;
+}
+
 .autofit-row {
   display: flex;
   flex-wrap: nowrap;