@clayui/css 3.136.0 → 3.138.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.136.0
+ * Clay 3.138.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -5392,6 +5392,12 @@ input[type=button].btn-block {
   border-radius: 5000px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
 }
+.sticker-xs {
+  font-size: 0.5rem;
+  height: 1rem;
+  line-height: 1rem;
+  width: 1rem;
+}
 .sticker-sm {
   font-size: 0.75rem;
   height: 1.5rem;
@@ -10182,6 +10188,26 @@ label.custom-control-label {
     min-width: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker .input-group-text {
+    font-size: inherit;
+    height: 1.9375rem;
+    min-width: 1.5rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .date-picker .clay-time .form-control {
+    border-radius: 0.2rem;
+    font-size: 0.875rem;
+    height: 1.9375rem;
+    line-height: 1.5;
+    min-height: 1.9375rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+  }
+}
 @media (max-width: 575.98px) {
   .date-picker .clay-time .form-control {
     border-radius: 0.2rem;
@@ -10213,6 +10239,14 @@ label.custom-control-label {
     max-width: 264px;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-dropdown-menu {
+    font-size: 0.75rem;
+    margin: 0;
+    max-height: 255px;
+    max-width: 264px;
+  }
+}
 
 .date-picker-nav {
   display: flex;
@@ -10260,6 +10294,21 @@ label.custom-control-label {
     min-width: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-nav .nav-btn-monospaced {
+    font-size: 0.75rem;
+    height: 1.5rem;
+    max-height: 1.5rem;
+    max-width: 1.5rem;
+    min-width: 1.5rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .date-picker-nav select.form-control {
+    font-size: 0.75rem;
+    height: 1.5rem;
+  }
+}
 @media (max-width: 575.98px) {
   .date-picker-nav select.form-control {
     font-size: 0.75rem;
@@ -10272,6 +10321,12 @@ label.custom-control-label {
     height: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-nav .form-control-select {
+    font-size: 0.75rem;
+    height: 1.5rem;
+  }
+}
 .date-picker-nav-item {
   align-items: center;
   display: flex;
@@ -10307,6 +10362,14 @@ label.custom-control-label {
     padding-top: 0.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-header {
+    padding-bottom: 0.25rem;
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.5rem;
+  }
+}
 
 .date-picker-calendar-body {
   padding-left: 0.5rem;
@@ -10320,6 +10383,13 @@ label.custom-control-label {
     padding-bottom: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-body {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-bottom: 0.25rem;
+  }
+}
 
 .date-picker-calendar-footer {
   border-color: #ced4da;
@@ -10337,6 +10407,13 @@ label.custom-control-label {
     padding-top: 0.4375rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-footer {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.4375rem;
+  }
+}
 
 .date-picker-calendar-item {
   align-items: center;
@@ -10372,6 +10449,12 @@ label.custom-control-label {
   transition: none;
 }
 
+@media (max-width: 575.98px) {
+  .date-picker-calendar-item {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
 .date-picker-calendar-item:disabled, .date-picker-calendar-item.disabled {
   cursor: not-allowed;
 }
@@ -10402,6 +10485,12 @@ label.custom-control-label {
     margin-top: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-row {
+    margin-bottom: 0.25rem;
+    margin-top: 0.25rem;
+  }
+}
 
 .date-picker-col {
   display: flex;
@@ -10438,6 +10527,11 @@ label.custom-control-label {
     margin-bottom: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-days-row {
+    margin-bottom: 0.25rem;
+  }
+}
 
 .date-picker-day {
   height: 1.3125rem;
@@ -10739,6 +10833,24 @@ label.custom-control-label {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+.form-text.blockquote {
+  font-style: italic;
+  font-weight: 400;
+  margin-bottom: 0;
+  margin-top: 0.75rem;
+  padding-left: 0.75rem;
+  position: relative;
+}
+.form-text.blockquote::before {
+  background-color: #a9afb5;
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 0.125rem;
+}
 
 .was-validated .form-control:valid,
 .was-validated .form-control.is-valid {
@@ -10768,6 +10880,9 @@ label.custom-control-label {
 .has-error .form-control.focus, .has-error .form-control:focus-visible, .c-prefers-focus .has-error .form-control:focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
+.has-error .form-control:focus-within:has(input:focus) {
+  border-color: #dc3545;
+}
 .has-error .form-feedback-item {
   color: #dc3545;
 }
@@ -10809,6 +10924,9 @@ label.custom-control-label {
 .has-warning .form-control.focus, .has-warning .form-control:focus-visible, .c-prefers-focus .has-warning .form-control:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
+.has-warning .form-control:focus-within:has(input:focus) {
+  border-color: #ffc107;
+}
 .has-warning .form-feedback-item {
   color: #ffc107;
 }
@@ -10850,6 +10968,9 @@ label.custom-control-label {
 .has-success .form-control.focus, .has-success .form-control:focus-visible, .c-prefers-focus .has-success .form-control:focus {
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }
+.has-success .form-control:focus-within:has(input:focus) {
+  border-color: #28a745;
+}
 .has-success .form-feedback-item {
   color: #28a745;
 }
@@ -13510,6 +13631,12 @@ label.custom-control-label {
 .menubar-vertical-expand-md {
   max-width: 15.625rem;
 }
+@media (max-width: 767.98px) {
+  .menubar-vertical-expand-md {
+    margin-bottom: 1rem;
+    max-width: none;
+  }
+}
 .menubar-vertical-expand-md .menubar-collapse {
   display: block;
 }
@@ -13651,6 +13778,12 @@ label.custom-control-label {
 .menubar-vertical-expand-lg {
   max-width: 15.625rem;
 }
+@media (max-width: 991.98px) {
+  .menubar-vertical-expand-lg {
+    margin-bottom: 1rem;
+    max-width: none;
+  }
+}
 .menubar-vertical-expand-lg .menubar-collapse {
   display: block;
 }
@@ -17560,6 +17693,12 @@ label.custom-control-label {
   display: flex;
   flex-wrap: wrap;
 }
+@media (max-width: 767.98px) {
+  .pagination-bar {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
 @media (max-width: 767.98px) {
   .pagination-bar {
     flex-direction: column;
@@ -19162,18 +19301,14 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
-.sidebar:focus, .sidebar.focus {
-  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  outline: 0;
-}
 .sidebar .container-fluid {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .sidebar-header {
   padding-bottom: 1rem;
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   padding-right: 1rem;
   padding-top: 1rem;
 }
@@ -19193,11 +19328,20 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+.sidebar-header .autofit-row {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  width: auto;
+}
+.sidebar-header .autofit-row > .autofit-col {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 
 .sidebar-footer {
   padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   padding-top: 1rem;
 }
 
@@ -19205,8 +19349,8 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   padding-top: 1rem;
 }
 .sidebar-body > .sidebar-section {
@@ -19283,12 +19427,25 @@ 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 .sidebar-header {
+  background-color: inherit;
+  border: 0px solid #dee2e6;
+}
+.sidebar-light .sidebar-footer {
+  background-color: inherit;
+  border: 0px solid #dee2e6;
 }
 .sidebar-light .sidebar-list-group .list-group-title {
   font-size: 1rem;
@@ -19344,10 +19501,48 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .sidebar-light .component-navigation-bar .navbar-overlay {
   background-color: #f8f9fa;
 }
+.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;
@@ -19408,9 +19603,62 @@ 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;
@@ -19471,7 +19719,59 @@ 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;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -19484,6 +19784,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 }
 
 .c-slideout-transition-out {
+  overflow: hidden;
   transition: all 0.2s ease-in;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -19503,6 +19804,29 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   position: absolute;
 }
 
+.c-slideout-container {
+  min-height: 480px;
+  position: relative;
+}
+
+.c-slideout-push-start {
+  padding-left: 320px;
+}
+@media (max-width: 991.98px) {
+  .c-slideout-push-start {
+    padding-left: 0;
+  }
+}
+
+.c-slideout-push-end {
+  padding-right: 320px;
+}
+@media (max-width: 991.98px) {
+  .c-slideout-push-end {
+    padding-right: 0;
+  }
+}
+
 .c-slideout {
   display: flex;
   overflow: hidden;
@@ -19514,15 +19838,40 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 .c-slideout .sidebar {
   display: none;
   flex-shrink: 0;
-  overflow: visible;
   position: relative;
   width: 320px;
+  display: none;
+  flex-shrink: 0;
+  position: relative;
+  width: 320px;
+}
+.c-slideout .sidebar .sidebar-header {
+  border-bottom-width: 1px;
+}
+.c-slideout .sidebar .sidebar-body {
+  flex-grow: 1;
+  overflow: visible;
+}
+.c-slideout .sidebar .sidebar-footer {
+  border-top-width: 1px;
+}
+.c-slideout .sidebar .sidebar-header {
+  border-bottom-width: 1px;
+}
+.c-slideout .sidebar .sidebar-body {
+  flex-grow: 1;
+  overflow: visible;
+}
+.c-slideout .sidebar .sidebar-footer {
+  border-top-width: 1px;
 }
 .c-slideout .sidebar.c-slideout-show {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 .c-slideout .sidebar.c-slideout-transition {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 .c-slideout .sidebar.c-slideout-transition .c-horizontal-resizer {
   display: none;
@@ -19544,6 +19893,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
 @media (max-width: 767.98px) {
   .c-slideout .sidebar {
     width: 280px;
+    width: 280px;
   }
 }
 
@@ -19558,6 +19908,8 @@ 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;
@@ -19575,6 +19927,8 @@ 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;
@@ -19591,6 +19945,7 @@ 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;
@@ -19611,6 +19966,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
   }
   .c-slideout-end .sidebar {
     right: -320px;
+    right: -320px;
   }
   .c-slideout-end .tbar-stacked {
     right: -40px;
@@ -27874,6 +28230,14 @@ button.bg-dark:focus {
   z-index: 1030;
 }
 
+@supports (position: sticky) {
+  .sticky-bottom {
+    bottom: 0;
+    position: sticky;
+    z-index: 1020;
+  }
+}
+
 @supports (position: sticky) {
   .sticky-top {
     position: sticky;