@clayui/css 3.128.0 → 3.131.0

package/lib/css/cadmin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.128.0
+ * Clay 3.131.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
  */
 /**
- * Clay 3.128.0
+ * Clay 3.131.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -493,7 +493,7 @@ html:not(#__):not(#___) .cadmin .clay-dark .mark {
   background-color: #393a4a;
   color: #fff;
 }
-html:not(#__):not(#___) .cadmin .list-unstyled {
+html:not(#__):not(#___) .cadmin .dropdown-section-grid, html:not(#__):not(#___) .cadmin .list-unstyled {
   list-style: none;
   padding-left: 0;
 }
@@ -3363,6 +3363,7 @@ html:not(#__):not(#___) .cadmin .container-no-gutters-xl-down > .row > [class*=c
   }
 }
 html:not(#__):not(#___) .cadmin .card-page {
+  container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -5865,6 +5866,10 @@ html:not(#__):not(#___) .cadmin .form-check-top-right .form-check-input {
   top: 16px;
   transform: none;
 }
+html:not(#__):not(#___) .cadmin .card-page {
+  container-name: c-card-page;
+  container-type: inline-size;
+}
 html:not(#__):not(#___) .cadmin .card-page.card-page-equal-height .card-page-item,
 html:not(#__):not(#___) .cadmin .card-page.card-page-equal-height .card-page-item-asset,
 html:not(#__):not(#___) .cadmin .card-page.card-page-equal-height .card-page-item-directory {
@@ -5885,99 +5890,72 @@ html:not(#__):not(#___) .cadmin .card-page-item-header {
   width: 100%;
 }
 html:not(#__):not(#___) .cadmin .card-page-item-directory {
-  display: block;
-  flex-grow: 1;
-  min-width: 193px;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 12px;
   padding-right: 12px;
-  position: relative;
-  width: 100%;
 }
-@media (min-width: 0) {
-  html:not(#__):not(#___) .cadmin .card-page-item-directory {
-    min-width: 193px;
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-}
-@media (min-width: 576px) {
+@container c-card-page (min-width: 540px) {
   html:not(#__):not(#___) .cadmin .card-page-item-directory {
     flex-basis: 50%;
     max-width: 50%;
   }
 }
-@media (min-width: 768px) {
+@container c-card-page (min-width: 960px) {
   html:not(#__):not(#___) .cadmin .card-page-item-directory {
-    flex-basis: 33.3333%;
-    max-width: 33.3333%;
+    flex-basis: 25%;
+    max-width: 25%;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 1392px) {
   html:not(#__):not(#___) .cadmin .card-page-item-directory {
-    flex-basis: 25%;
-    max-width: 25%;
+    flex-basis: 20%;
+    max-width: 20%;
   }
 }
 html:not(#__):not(#___) .cadmin .card-page-item-asset {
-  display: block;
-  flex-grow: 1;
-  min-width: 193px;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 12px;
   padding-right: 12px;
-  position: relative;
-  width: 100%;
-}
-@media (min-width: 0) {
-  html:not(#__):not(#___) .cadmin .card-page-item-asset {
-    min-width: 193px;
-    padding-left: 12px;
-    padding-right: 12px;
-  }
 }
-@media (min-width: 576px) {
+@container c-card-page (min-width: 540px) {
   html:not(#__):not(#___) .cadmin .card-page-item-asset {
     flex-basis: 50%;
     max-width: 50%;
   }
 }
-@media (min-width: 768px) {
+@container c-card-page (min-width: 960px) {
   html:not(#__):not(#___) .cadmin .card-page-item-asset {
-    flex-basis: 33.3333%;
-    max-width: 33.3333%;
+    flex-basis: 25%;
+    max-width: 25%;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 1392px) {
   html:not(#__):not(#___) .cadmin .card-page-item-asset {
-    flex-basis: 25%;
-    max-width: 25%;
+    flex-basis: 20%;
+    max-width: 20%;
   }
 }
 html:not(#__):not(#___) .cadmin .card-page-item-user {
-  display: block;
-  flex-basis: 50%;
-  flex-grow: 1;
-  max-width: 50%;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 12px;
   padding-right: 12px;
-  position: relative;
-  width: 100%;
 }
-@media (min-width: 0) {
+@container c-card-page (min-width: 540px) {
   html:not(#__):not(#___) .cadmin .card-page-item-user {
     flex-basis: 50%;
     max-width: 50%;
-    padding-left: 12px;
-    padding-right: 12px;
   }
 }
-@media (min-width: 576px) {
+@container c-card-page (min-width: 960px) {
   html:not(#__):not(#___) .cadmin .card-page-item-user {
-    flex-basis: 33.33333%;
-    max-width: 33.33333%;
-    min-width: 200px;
+    flex-basis: 25%;
+    max-width: 25%;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 1392px) {
   html:not(#__):not(#___) .cadmin .card-page-item-user {
     flex-basis: 20%;
     max-width: 20%;
@@ -6447,6 +6425,13 @@ html:not(#__):not(#___) .cadmin .dropdown-section .custom-control-outside label
 html:not(#__):not(#___) .cadmin .dropdown-section.active .custom-control-label {
   color: #272833;
 }
+html:not(#__):not(#___) .cadmin .dropdown-section-grid {
+  display: grid;
+  gap: 0.5rem 0.75rem;
+  grid-template-columns: repeat(9, 1fr);
+  margin-bottom: 0;
+  padding: 8px 16px;
+}
 html:not(#__):not(#___) .cadmin .dropdown-footer {
   box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5);
   padding: 8px 16px 0;
@@ -7341,7 +7326,6 @@ html:not(#__):not(#___) .cadmin select.form-control {
   background-size: 1.5em 1.5em;
   cursor: pointer;
   padding-right: 2em;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin select.form-control.focus, html:not(#__):not(#___) .cadmin select.form-control:focus-visible,
 html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control:focus {
@@ -7391,7 +7375,6 @@ html:not(#__):not(#___) .cadmin select.form-control[size] {
   padding-left: 8px;
   padding-right: 8px;
   scrollbar-width: thin;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin select.form-control[size].focus, html:not(#__):not(#___) .cadmin select.form-control[size]:focus-visible,
 html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[size]:focus {
@@ -7429,7 +7412,6 @@ html:not(#__):not(#___) .cadmin select.form-control[multiple] {
   padding-left: 8px;
   padding-right: 8px;
   scrollbar-width: thin;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin select.form-control[multiple].focus, html:not(#__):not(#___) .cadmin select.form-control[multiple]:focus-visible,
 html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[multiple]:focus {
@@ -7461,8 +7443,14 @@ html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[multiple]:f
     padding: 6.5px 8px;
   }
 }
+html:not(#__):not(#___) .cadmin .form-control-shrink {
+  max-width: 100%;
+  white-space: nowrap;
+  width: min-content;
+}
 html:not(#__):not(#___) .cadmin .form-control-select-secondary {
   background-color: #fff;
+  border-color: #9b92a5;
   color: #6b6c7e;
 }
 html:not(#__):not(#___) .cadmin .form-control-select-secondary:hover, html:not(#__):not(#___) .cadmin .form-control-select-secondary.hover {
@@ -7483,6 +7471,10 @@ html:not(#__):not(#___) .cadmin .form-control-select-secondary:disabled, html:no
   color: #6b6c7e;
   opacity: 0.4;
 }
+html:not(#__):not(#___) .cadmin .form-control-select-shrink {
+  max-width: 100%;
+  width: min-content;
+}
 html:not(#__):not(#___) .cadmin textarea.form-control,
 html:not(#__):not(#___) .cadmin textarea.form-control-plaintext,
 html:not(#__):not(#___) .cadmin .form-control.form-control-textarea {
@@ -9246,7 +9238,7 @@ html:not(#__):not(#___) .cadmin .custom-radio .custom-control-input:checked[disa
   border-color: #b3cdff;
 }
 html:not(#__):not(#___) .cadmin .custom-control-outside label {
-  display: block;
+  display: inline-block;
   padding-left: calc( 					16px + 8px 				);
 }
 html:not(#__):not(#___) .cadmin .custom-control-outside .custom-control-label-text {
@@ -9482,7 +9474,6 @@ html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control {
   html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control {
     font-size: 12px;
     height: 24px;
-    color: #272833;
   }
 }
 html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control:hover, html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control.hover {
@@ -9513,7 +9504,6 @@ html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select {
   html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select {
     font-size: 12px;
     height: 24px;
-    color: #272833;
   }
 }
 html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select:hover, html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select.hover {
@@ -9843,15 +9833,12 @@ html:not(#__):not(#___) .cadmin .has-error .form-feedback-item {
 }
 html:not(#__):not(#___) .cadmin .has-error select.form-control {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%23f48989'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%23f48989'/%3E%3C/svg%3E");
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-error select.form-control[size] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-error select.form-control[multiple] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -9903,15 +9890,12 @@ html:not(#__):not(#___) .cadmin .has-warning .form-feedback-item {
 }
 html:not(#__):not(#___) .cadmin .has-warning select.form-control {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%23ff8f39'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%23ff8f39'/%3E%3C/svg%3E");
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-warning select.form-control[size] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-warning select.form-control[multiple] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -9963,15 +9947,12 @@ html:not(#__):not(#___) .cadmin .has-success .form-feedback-item {
 }
 html:not(#__):not(#___) .cadmin .has-success select.form-control {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%235aca75'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%235aca75'/%3E%3C/svg%3E");
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-success select.form-control[size] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-success select.form-control[multiple] {
   background-image: none;
-  color: #272833;
 }
 html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -10430,7 +10411,8 @@ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn .lexic
 html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn .c-inner .lexicon-icon {
   margin-top: 0;
 }
-html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn-monospaced {
+html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn-monospaced,
+html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .input-group-inset-icon {
   font-size: 16px;
   height: 32px;
   margin-bottom: -1px;
@@ -10444,6 +10426,14 @@ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .form-file
 html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .form-file .btn {
   height: 100%;
 }
+html:not(#__):not(#___) .cadmin .input-group .input-group-inset-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+html:not(#__):not(#___) .cadmin .input-group .input-group-inset-icon .lexicon-icon {
+  margin-top: 0;
+}
 html:not(#__):not(#___) .cadmin .input-group .input-group-item .input-group-inset-before.form-control {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -28072,6 +28062,70 @@ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin {
   scroll-behavior: auto;
   transition: none;
 }
+html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares {
+  display: block;
+  height: 1em;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  vertical-align: middle;
+  width: 1em;
+}
+html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+  animation: loading-animation-circle 1s linear infinite;
+  background-color: transparent;
+  border-radius: 50%;
+  box-shadow: -0.03125em -0.375em 0 0 currentColor;
+  content: "";
+  display: block;
+  font-size: inherit;
+  height: 0.25em;
+  left: 50%;
+  margin-left: -0.125em;
+  margin-top: -0.125em;
+  opacity: inherit;
+  position: absolute;
+  top: 50%;
+  transform: none;
+  width: 0.25em;
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+    animation: none;
+  }
+}
+html:not(#__):not(#___) .c-prefers-reduced-motion .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+  animation: none;
+}
+
+html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+  animation: loading-animation-circle 1s linear infinite;
+  background-color: currentColor;
+  border-radius: 50%;
+  content: "";
+  display: block;
+  font-size: inherit;
+  height: 1em;
+  left: auto;
+  -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  padding: 0.25em;
+  position: relative;
+  top: auto;
+  transform: none;
+  width: 1em;
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+    animation: none;
+  }
+}
+html:not(#__):not(#___) .c-prefers-reduced-motion .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+  animation: none;
+}
 
 @keyframes cadmin-loading-animation-circle {
   100% {
@@ -28243,6 +28297,77 @@ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squ
   animation: none;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .cadmin .loading-animation-squares {
+    display: block;
+    height: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+    position: relative;
+    text-align: left;
+    vertical-align: middle;
+    width: 1em;
+  }
+  html:not(#__):not(#___) .cadmin .loading-animation-squares::before {
+    animation: loading-animation-circle 1s linear infinite;
+    background-color: transparent;
+    border-radius: 50%;
+    box-shadow: -0.03125em -0.375em 0 0 currentColor;
+    content: "";
+    display: block;
+    font-size: inherit;
+    height: 0.25em;
+    left: 50%;
+    margin-left: -0.125em;
+    margin-top: -0.125em;
+    opacity: inherit;
+    position: absolute;
+    top: 50%;
+    transform: none;
+    width: 0.25em;
+  }
+}
+@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .cadmin .loading-animation-squares::before {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .cadmin .loading-animation-squares::after {
+    animation: loading-animation-circle 1s linear infinite;
+    background-color: currentColor;
+    border-radius: 50%;
+    content: "";
+    display: block;
+    font-size: inherit;
+    height: 1em;
+    left: auto;
+    -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
+    -webkit-mask-composite: source-out;
+    mask-composite: subtract;
+    padding: 0.25em;
+    position: relative;
+    top: auto;
+    transform: none;
+    width: 1em;
+  }
+}
+@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .cadmin .loading-animation-squares::after {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+    animation: none;
+  }
+}
 html:not(#__):not(#___) .cadmin .loading-animation-xs {
   font-size: 10px;
 }