@clayui/css 3.145.0 → 3.148.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.145.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>
@@ -5473,6 +5473,16 @@ input[type=button].btn-block {
   right: -1.5rem;
 }
 
+.sticker-xxl {
+  font-size: 2.5rem;
+  height: 5rem;
+  line-height: 5rem;
+  width: 5rem;
+}
+.sticker-xxl .lexicon-icon {
+  font-size: 1.5rem;
+}
+
 .sticker-primary {
   background-color: #007bff;
   color: #fff;
@@ -7477,7 +7487,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) {
@@ -7544,6 +7553,7 @@ input[type=button].btn-block {
 }
 .drilldown.dropdown-menu .drilldown-inner {
   min-height: 266px;
+  overflow: hidden;
 }
 .drilldown.dropdown-menu .inline-scroller {
   max-height: none;
@@ -7677,10 +7687,21 @@ label {
 label[for] {
   cursor: pointer;
 }
+label + .form-feedback-group {
+  margin-bottom: 0.75rem;
+}
 label + .form-text {
   margin-bottom: 0.5rem;
   margin-top: 0;
 }
+label .form-help-text {
+  color: #949ca3;
+  display: inline;
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+  margin-top: 0;
+}
 label .reference-mark {
   color: #ffc107;
 }
@@ -10849,6 +10870,13 @@ label.custom-control-label {
   width: 0.125rem;
 }
 
+.form-help-text {
+  color: #6c757d;
+  display: block;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
 .was-validated .form-control:valid,
 .was-validated .form-control.is-valid {
   border-color: #28a745;
@@ -17926,98 +17954,6 @@ label.custom-control-label {
   word-wrap: break-word;
 }
 
-.pagination-sm .page-link {
-  font-size: 0.875rem;
-  height: 1.9375rem;
-  line-height: 1;
-  padding-bottom: 0.25rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  padding-top: 0.25rem;
-}
-.pagination-sm .page-link > .c-inner {
-  margin-bottom: -0.25rem;
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-  margin-top: -0.25rem;
-}
-.pagination-sm .page-item:first-child .page-link,
-.pagination-sm .page-link-first {
-  border-bottom-left-radius: 0.2rem;
-  border-top-left-radius: 0.2rem;
-}
-.pagination-sm .page-item:last-child .page-link,
-.pagination-sm .page-link-last {
-  border-bottom-right-radius: 0.2rem;
-  border-top-right-radius: 0.2rem;
-}
-.pagination-sm .pagination-items-per-page {
-  border-radius: 0.2rem;
-}
-.pagination-sm .pagination-items-per-page > a,
-.pagination-sm .pagination-items-per-page > button {
-  font-size: 0.875rem;
-  height: 1.9375rem;
-  line-height: 1;
-  padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-}
-.pagination-sm .pagination-items-per-page > a > .c-inner,
-.pagination-sm .pagination-items-per-page > button > .c-inner {
-  margin-bottom: -0.25rem;
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-  margin-top: -0.25rem;
-}
-.pagination-sm .pagination-items-per-page + .pagination-results {
-  font-size: 0.875rem;
-  line-height: 1;
-  padding: 0.25rem 0.75rem;
-}
-
-.pagination-lg .page-link {
-  font-size: 1.25rem;
-  height: 3.5rem;
-  line-height: 1;
-  padding-bottom: 0.75rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 0.75rem;
-}
-.pagination-lg .page-link > .c-inner {
-  margin-bottom: -0.75rem;
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-  margin-top: -0.75rem;
-}
-.pagination-lg .page-item:first-child .page-link,
-.pagination-lg .page-link-first {
-  border-bottom-left-radius: 0.3rem;
-  border-top-left-radius: 0.3rem;
-}
-.pagination-lg .page-item:last-child .page-link,
-.pagination-lg .page-link-last {
-  border-bottom-right-radius: 0.3rem;
-  border-top-right-radius: 0.3rem;
-}
-.pagination-lg .pagination-items-per-page {
-  border-radius: 0.3rem;
-}
-.pagination-lg .pagination-items-per-page > a,
-.pagination-lg .pagination-items-per-page > button {
-  font-size: 1.25rem;
-  height: 3.5rem;
-  line-height: 1;
-  padding: 0.75rem 0.75rem;
-}
-.pagination-lg .pagination-items-per-page + .pagination-results {
-  font-size: 1.25rem;
-  line-height: 1;
-  padding: 0.75rem 0.75rem;
-}
-
 .panel {
   background-color: #fff;
   border-color: transparent;
@@ -19430,17 +19366,12 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 
 .sidebar-sm {
   font-size: 0.875rem;
-  font-size: 0.875rem;
 }
 .sidebar-light {
   background-color: #f8f9fa;
   border-color: #dee2e6;
   border-left-width: 1px;
   color: #212529;
-  background-color: #f8f9fa;
-  border-color: #dee2e6;
-  border-left-width: 1px;
-  color: #212529;
 }
 .sidebar-light .close:hover {
   background-color: #6c757d;
@@ -19523,66 +19454,10 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .sidebar-light .component-navigation-bar .navbar-overlay {
   background-color: #f8f9fa;
 }
-.sidebar-light .close:hover {
-  background-color: #6c757d;
-  color: #fff;
-}
-.sidebar-light .close:active {
-  background-color: #6c757d;
-  color: #fff;
-}
-.sidebar-light .close:disabled {
-  background-color: transparent;
-  box-shadow: none;
-  color: #6c757d;
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-.sidebar-light .close:disabled:active {
-  pointer-events: none;
-}
-.sidebar-light .sidebar-header {
-  background-color: inherit;
-  border: 0px solid #dee2e6;
-}
-.sidebar-light .sidebar-footer {
-  background-color: inherit;
-  border: 0px solid #dee2e6;
-}
-.sidebar-light .sidebar-dd .href {
-  color: #212529;
-}
-.sidebar-light .sidebar-panel {
-  background-color: #e9ecef;
-}
-.sidebar-light .sidebar-list-group .list-group-title {
-  font-size: 1rem;
-}
-.sidebar-light .sidebar-list-group .list-group-title .href {
-  color: #212529;
-}
-.sidebar-light .component-navigation-bar {
-  background-color: #f8f9fa;
-  border-color: #dee2e6;
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.5);
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:hover {
-  color: rgba(0, 0, 0, 0.7);
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:active {
-  color: rgba(0, 0, 0, 0.9);
-}
-.sidebar-light .component-navigation-bar .navbar-nav .nav-link:disabled {
-  color: rgba(0, 0, 0, 0.3);
-}
 
 .sidebar-dark {
   background-color: #343a40;
   color: #fff;
-  background-color: #343a40;
-  color: #fff;
 }
 .sidebar-dark .close {
   color: #a9afb5;
@@ -19643,62 +19518,9 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .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: #a9afb5;
-}
-.sidebar-dark .close:hover {
-  color: #fff;
-}
-.sidebar-dark .nav-nested .nav-link {
-  border-radius: 0.25rem;
-  color: #a9afb5;
-  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.2rem rgba(0, 123, 255, 0.25);
-  outline: 0;
-}
-.sidebar-dark .nav-nested .nav-link:active {
-  color: #fff;
-}
-.sidebar-dark .nav-nested .nav-link:disabled {
-  box-shadow: none;
-  color: #a9afb5;
-  opacity: 0.65;
-}
-.sidebar-dark .nav-nested .nav-link:disabled:active {
-  pointer-events: none;
-}
-
 .sidebar-dark-l2 {
   background-color: #828e9a;
   color: #fff;
-  background-color: #828e9a;
-  color: #fff;
 }
 .sidebar-dark-l2 .close {
   color: #a9afb5;
@@ -19759,57 +19581,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .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: #a9afb5;
-}
-.sidebar-dark-l2 .close:hover {
-  color: #fff;
-}
-.sidebar-dark-l2 .nav-nested .nav-link {
-  border-radius: 0.25rem;
-  color: #a9afb5;
-  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.2rem rgba(0, 123, 255, 0.25);
-  outline: 0;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:active {
-  color: #fff;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:disabled {
-  box-shadow: none;
-  color: #a9afb5;
-  opacity: 0.65;
-}
-.sidebar-dark-l2 .nav-nested .nav-link:disabled:active {
-  pointer-events: none;
-}
-
 .c-slideout-transition-in {
   overflow: hidden;
   transition: all 0.3s ease-in-out;
@@ -19880,10 +19651,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   flex-shrink: 0;
   position: relative;
   width: 320px;
-  display: none;
-  flex-shrink: 0;
-  position: relative;
-  width: 320px;
 }
 .c-slideout .sidebar .sidebar-body {
   flex-grow: 1;
@@ -19892,12 +19659,15 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .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;
@@ -19927,7 +19697,41 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 @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;
   }
 }
 
@@ -19942,8 +19746,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .c-slideout-start .sidebar {
   left: -360px;
   width: 320px;
-  left: -360px;
-  width: 320px;
 }
 .c-slideout-start .sidebar.c-slideout-show {
   left: 0;
@@ -19961,8 +19763,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   .c-slideout-start .sidebar {
     left: -320px;
     width: 280px;
-    left: -320px;
-    width: 280px;
   }
   .c-slideout-start .tbar-stacked {
     left: -40px;
@@ -19979,7 +19779,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 }
 .c-slideout-end .sidebar {
   right: -360px;
-  right: -360px;
 }
 .c-slideout-end .sidebar.c-slideout-show {
   right: 0;
@@ -20000,7 +19799,6 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   }
   .c-slideout-end .sidebar {
     right: -320px;
-    right: -320px;
   }
   .c-slideout-end .tbar-stacked {
     right: -40px;
@@ -22919,6 +22717,13 @@ td.table-focus {
   outline: 0;
 }
 
+.c-focus-trap {
+  background: inherit;
+  color: inherit;
+  display: contents;
+  font: inherit;
+}
+
 .autofit-row {
   display: flex;
   flex-wrap: nowrap;