@clayui/css 3.130.0 → 3.132.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.130.0
+ * Clay 3.132.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -3553,6 +3553,7 @@ input[type=button].btn-block {
 }
 
 .card-page {
+  container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -4483,6 +4484,11 @@ input[type=button].btn-block {
   border-color: transparent;
   color: #ed99a1;
 }
+.breadcrumb-bar {
+  align-items: center;
+  display: flex;
+}
+
 .breadcrumb {
   background-color: #e9ecef;
   border-radius: 0.25rem;
@@ -6287,6 +6293,10 @@ input[type=button].btn-block {
   transform: none;
 }
 
+.card-page {
+  container-name: c-card-page;
+  container-type: inline-size;
+}
 .card-page.card-page-equal-height .card-page-item,
 .card-page.card-page-equal-height .card-page-item-asset,
 .card-page.card-page-equal-height .card-page-item-directory {
@@ -6309,101 +6319,92 @@ input[type=button].btn-block {
 }
 
 .card-page-item-directory {
-  display: block;
-  flex-grow: 1;
-  min-width: 193px;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 15px;
   padding-right: 15px;
-  position: relative;
-  width: 100%;
 }
-@media (min-width: 0) {
-  .card-page-item-directory {
-    min-width: 193px;
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-}
-@media (min-width: 576px) {
+@container c-card-page (min-width: 540px) {
   .card-page-item-directory {
     flex-basis: 50%;
     max-width: 50%;
   }
 }
-@media (min-width: 768px) {
+@container c-card-page (min-width: 720px) {
   .card-page-item-directory {
-    flex-basis: 33.3333%;
-    max-width: 33.3333%;
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 960px) {
   .card-page-item-directory {
     flex-basis: 25%;
     max-width: 25%;
   }
 }
+@container c-card-page (min-width: 1140px) {
+  .card-page-item-directory {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+}
 
 .card-page-item-asset {
-  display: block;
-  flex-grow: 1;
-  min-width: 193px;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 15px;
   padding-right: 15px;
-  position: relative;
-  width: 100%;
 }
-@media (min-width: 0) {
-  .card-page-item-asset {
-    min-width: 193px;
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-}
-@media (min-width: 576px) {
+@container c-card-page (min-width: 540px) {
   .card-page-item-asset {
     flex-basis: 50%;
     max-width: 50%;
   }
 }
-@media (min-width: 768px) {
+@container c-card-page (min-width: 720px) {
   .card-page-item-asset {
-    flex-basis: 33.3333%;
-    max-width: 33.3333%;
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 960px) {
   .card-page-item-asset {
     flex-basis: 25%;
     max-width: 25%;
   }
 }
+@container c-card-page (min-width: 1140px) {
+  .card-page-item-asset {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+}
 
 .card-page-item-user {
-  display: block;
-  flex-basis: 50%;
-  flex-grow: 1;
-  max-width: 50%;
+  flex-basis: 100%;
+  max-width: 100%;
   padding-left: 15px;
   padding-right: 15px;
-  position: relative;
-  width: 100%;
 }
-@media (min-width: 0) {
+@container c-card-page (min-width: 540px) {
   .card-page-item-user {
     flex-basis: 50%;
     max-width: 50%;
-    padding-left: 15px;
-    padding-right: 15px;
   }
 }
-@media (min-width: 576px) {
+@container c-card-page (min-width: 720px) {
   .card-page-item-user {
     flex-basis: 33.33333%;
     max-width: 33.33333%;
-    min-width: 200px;
   }
 }
-@media (min-width: 992px) {
+@container c-card-page (min-width: 960px) {
+  .card-page-item-user {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+}
+@container c-card-page (min-width: 1140px) {
   .card-page-item-user {
     flex-basis: 20%;
     max-width: 20%;
@@ -31625,19 +31626,69 @@ a.text-dark:hover, a.text-dark:focus {
   scroll-behavior: auto;
   transition: none;
 }
+.c-prefers-reduced-motion .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;
+}
 .c-prefers-reduced-motion .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) {
+  .c-prefers-reduced-motion .loading-animation-squares::before {
+    animation: none;
+  }
+}
+.c-prefers-reduced-motion .c-prefers-reduced-motion .loading-animation-squares::before {
+  animation: none;
+}
+
 .c-prefers-reduced-motion .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) {
+  .c-prefers-reduced-motion .loading-animation-squares::after {
+    animation: none;
+  }
+}
+.c-prefers-reduced-motion .c-prefers-reduced-motion .loading-animation-squares::after {
+  animation: none;
 }
 
 @keyframes loading-animation-circle {
@@ -31645,7 +31696,7 @@ a.text-dark:hover, a.text-dark:focus {
     transform: rotate(360deg);
   }
 }
-.loading-animation, .c-prefers-reduced-motion .loading-animation-squares {
+.loading-animation {
   display: block;
   height: 1em;
   margin-left: auto;
@@ -31656,7 +31707,7 @@ a.text-dark:hover, a.text-dark:focus {
   vertical-align: middle;
   width: 1em;
 }
-.loading-animation::before, .c-prefers-reduced-motion .loading-animation-squares::before {
+.loading-animation::before {
   animation: loading-animation-circle 1s linear infinite;
   border-radius: 50%;
   box-shadow: -0.03125em -0.375em 0 0 currentColor;
@@ -31670,15 +31721,15 @@ a.text-dark:hover, a.text-dark:focus {
   width: 0.25em;
 }
 @media (prefers-reduced-motion: reduce) {
-  .loading-animation::before, .c-prefers-reduced-motion .loading-animation-squares::before {
+  .loading-animation::before {
     animation: none;
   }
 }
-.c-prefers-reduced-motion .loading-animation::before, .c-prefers-reduced-motion .loading-animation-squares::before {
+.c-prefers-reduced-motion .loading-animation::before {
   animation: none;
 }
 
-.loading-animation::after, .c-prefers-reduced-motion .loading-animation-squares::after {
+.loading-animation::after {
   animation: loading-animation-circle 1s linear infinite;
   background-color: currentColor;
   border-radius: 50%;
@@ -31692,11 +31743,11 @@ a.text-dark:hover, a.text-dark:focus {
   width: 1em;
 }
 @media (prefers-reduced-motion: reduce) {
-  .loading-animation::after, .c-prefers-reduced-motion .loading-animation-squares::after {
+  .loading-animation::after {
     animation: none;
   }
 }
-.c-prefers-reduced-motion .loading-animation::after, .c-prefers-reduced-motion .loading-animation-squares::after {
+.c-prefers-reduced-motion .loading-animation::after {
   animation: none;
 }
 
@@ -31810,6 +31861,78 @@ a.text-dark:hover, a.text-dark:focus {
   animation: none;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .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;
+  }
+  .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) {
+  .loading-animation-squares::before {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-prefers-reduced-motion .loading-animation-squares::before {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .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) {
+  .loading-animation-squares::after {
+    animation: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-prefers-reduced-motion .loading-animation-squares::after {
+    animation: none;
+  }
+}
+
 .loading-animation-xs {
   font-size: 0.625rem;
 }