@clayui/css 3.130.0 → 3.131.0

package/lib/css/cadmin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.130.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.130.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>
@@ -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%;
@@ -28084,19 +28062,69 @@ 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 {
@@ -28104,7 +28132,7 @@ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squ
     transform: rotate(360deg);
   }
 }
-html:not(#__):not(#___) .cadmin .loading-animation, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares {
+html:not(#__):not(#___) .cadmin .loading-animation {
   display: block;
   height: 1em;
   margin-left: auto;
@@ -28115,7 +28143,7 @@ html:not(#__):not(#___) .cadmin .loading-animation, html:not(#__):not(#___) .c-p
   vertical-align: middle;
   width: 1em;
 }
-html:not(#__):not(#___) .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+html:not(#__):not(#___) .cadmin .loading-animation::before {
   animation: cadmin-loading-animation-circle 1s linear infinite;
   border-radius: 50%;
   box-shadow: -0.03125em -0.375em 0 0 currentColor;
@@ -28129,15 +28157,15 @@ html:not(#__):not(#___) .cadmin .loading-animation::before, html:not(#__):not(#_
   width: 0.25em;
 }
 @media (prefers-reduced-motion: reduce) {
-  html:not(#__):not(#___) .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+  html:not(#__):not(#___) .cadmin .loading-animation::before {
     animation: none;
   }
 }
-html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
+html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::before {
   animation: none;
 }
 
-html:not(#__):not(#___) .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+html:not(#__):not(#___) .cadmin .loading-animation::after {
   animation: cadmin-loading-animation-circle 1s linear infinite;
   background-color: currentColor;
   border-radius: 50%;
@@ -28151,11 +28179,11 @@ html:not(#__):not(#___) .cadmin .loading-animation::after, html:not(#__):not(#__
   width: 1em;
 }
 @media (prefers-reduced-motion: reduce) {
-  html:not(#__):not(#___) .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+  html:not(#__):not(#___) .cadmin .loading-animation::after {
     animation: none;
   }
 }
-html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
+html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::after {
   animation: none;
 }
 
@@ -28269,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;
 }