@clayui/css 3.92.0 → 3.94.0

package/lib/css/atlas.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.92.0
+ * Clay 3.94.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -861,6 +861,14 @@ pre code {
   vertical-align: text-bottom;
   width: 2rem;
 }
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border {
+    animation: none;
+  }
+}
+.c-prefers-reduced-motion .spinner-border {
+  animation: none;
+}
 
 .spinner-border-sm {
   border-width: 0.2em;
@@ -886,6 +894,14 @@ pre code {
   vertical-align: text-bottom;
   width: 2rem;
 }
+@media (prefers-reduced-motion: reduce) {
+  .spinner-grow {
+    animation: none;
+  }
+}
+.c-prefers-reduced-motion .spinner-grow {
+  animation: none;
+}
 
 .spinner-grow-sm {
   height: 1rem;
@@ -7186,6 +7202,14 @@ input[type=button].btn-block {
 .drilldown-transition {
   transition: all 0.25s ease;
 }
+@media (prefers-reduced-motion: reduce) {
+  .drilldown-transition {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .drilldown-transition {
+  transition: none;
+}
 
 .drilldown-item.transitioning {
   display: block;
@@ -7809,6 +7833,14 @@ textarea.form-control-plaintext,
   border-radius: 100px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+@media (prefers-reduced-motion: reduce) {
+  .form-control[type=range]::-webkit-slider-thumb {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .form-control[type=range]::-webkit-slider-thumb {
+  transition: none;
+}
 
 .form-control-range {
   display: block;
@@ -11041,6 +11073,15 @@ label.custom-control-label {
   padding-right: 5px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+@media (prefers-reduced-motion: reduce) {
+  .input-group .input-group-inset-item {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .input-group .input-group-inset-item {
+  transition: none;
+}
+
 .input-group .input-group-inset-item .btn {
   align-items: center;
   display: flex;
@@ -12487,6 +12528,15 @@ label.custom-control-label {
   transition: box-shadow 0.15s ease-in-out;
   width: 2rem;
 }
+@media (prefers-reduced-motion: reduce) {
+  .multi-step-icon {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .multi-step-icon {
+  transition: none;
+}
+
 .multi-step-icon:hover {
   background-color: #e7e7ed;
   color: #6b6c7e;
@@ -13105,9 +13155,10 @@ label.custom-control-label {
   }
 }
 .menubar-vertical-expand-md.menubar-transparent .nav-link {
-  border-radius: 0.375rem;
+  border-radius: 0.25rem;
   color: #6b6c7e;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  margin-bottom: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
   .menubar-vertical-expand-md.menubar-transparent .nav-link {
@@ -13119,21 +13170,34 @@ label.custom-control-label {
 }
 
 .menubar-vertical-expand-md.menubar-transparent .nav-link:hover, .menubar-vertical-expand-md.menubar-transparent .nav-link.hover {
-  background-color: rgba(11, 95, 255, 0.04);
+  background-color: rgba(39, 40, 51, 0.04);
   color: #272833;
+  box-shadow: inset 0.125rem 0 0 0 #88889a;
+  font-weight: 600;
 }
 .menubar-vertical-expand-md.menubar-transparent .nav-link.focus, .menubar-vertical-expand-md.menubar-transparent .nav-link:focus {
-  background-color: rgba(11, 95, 255, 0.04);
-  box-shadow: inset 0 0 0 0.125rem #528eff, inset 0 0 0 0.25rem #fff;
   color: #272833;
   outline: 0;
 }
+.menubar-vertical-expand-md.menubar-transparent .nav-link.focus::after, .menubar-vertical-expand-md.menubar-transparent .nav-link:focus::after {
+  border-radius: 0.25rem;
+  bottom: 0;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
+  content: "";
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 .menubar-vertical-expand-md.menubar-transparent .nav-link:active {
   color: rgba(0, 0, 0, 0.9);
 }
 .menubar-vertical-expand-md.menubar-transparent .nav-link.active {
   font-weight: 600;
   background-color: rgba(11, 95, 255, 0.06);
+  box-shadow: inset 0.25rem 0 0 0 #528eff;
   color: #272833;
 }
 .menubar-vertical-expand-md.menubar-transparent .nav-link:disabled, .menubar-vertical-expand-md.menubar-transparent .nav-link.disabled {
@@ -13176,22 +13240,31 @@ label.custom-control-label {
   .menubar-vertical-expand-md.menubar-transparent .nav-link {
     border-radius: 0;
     color: #272833;
+    margin-bottom: 0;
   }
   .menubar-vertical-expand-md.menubar-transparent .nav-link:hover, .menubar-vertical-expand-md.menubar-transparent .nav-link.hover {
-    background-color: rgba(11, 95, 255, 0.04);
+    background-color: rgba(39, 40, 51, 0.04);
     color: #1c1d25;
+    box-shadow: none;
   }
   .menubar-vertical-expand-md.menubar-transparent .nav-link.focus, .menubar-vertical-expand-md.menubar-transparent .nav-link:focus {
-    background-color: rgba(11, 95, 255, 0.04);
+    background-color: transparent;
+  }
+  .menubar-vertical-expand-md.menubar-transparent .nav-link.focus::after, .menubar-vertical-expand-md.menubar-transparent .nav-link:focus::after {
+    box-shadow: inset 0 0 0 0.125rem #528eff, inset 0 0 0 0.25rem #fff;
   }
   .menubar-vertical-expand-md.menubar-transparent .nav-link.active {
     font-weight: 600;
     background-color: rgba(11, 95, 255, 0.06);
+    box-shadow: none;
   }
   .menubar-vertical-expand-md.menubar-transparent .nav-link:disabled, .menubar-vertical-expand-md.menubar-transparent .nav-link.disabled {
     background-color: transparent;
     color: #6b6c7e;
   }
+  .menubar-vertical-expand-md.menubar-transparent .nav-link[aria-expanded=true], .menubar-vertical-expand-md.menubar-transparent .nav-link.show {
+    box-shadow: none;
+  }
 }
 @media (min-width: 768px) {
   .menubar-vertical-expand-md.menubar-decorated .nav {
@@ -13289,9 +13362,10 @@ label.custom-control-label {
   }
 }
 .menubar-vertical-expand-lg.menubar-transparent .nav-link {
-  border-radius: 0.375rem;
+  border-radius: 0.25rem;
   color: #6b6c7e;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  margin-bottom: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
   .menubar-vertical-expand-lg.menubar-transparent .nav-link {
@@ -13303,21 +13377,34 @@ label.custom-control-label {
 }
 
 .menubar-vertical-expand-lg.menubar-transparent .nav-link:hover, .menubar-vertical-expand-lg.menubar-transparent .nav-link.hover {
-  background-color: rgba(11, 95, 255, 0.04);
+  background-color: rgba(39, 40, 51, 0.04);
   color: #272833;
+  box-shadow: inset 0.125rem 0 0 0 #88889a;
+  font-weight: 600;
 }
 .menubar-vertical-expand-lg.menubar-transparent .nav-link.focus, .menubar-vertical-expand-lg.menubar-transparent .nav-link:focus {
   background-color: rgba(11, 95, 255, 0.04);
-  box-shadow: inset 0 0 0 0.125rem #528eff, inset 0 0 0 0.25rem #fff;
   color: #272833;
   outline: 0;
 }
+.menubar-vertical-expand-lg.menubar-transparent .nav-link.focus::after, .menubar-vertical-expand-lg.menubar-transparent .nav-link:focus::after {
+  border-radius: 0.25rem;
+  bottom: 0;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 .menubar-vertical-expand-lg.menubar-transparent .nav-link:active {
   color: rgba(0, 0, 0, 0.9);
 }
 .menubar-vertical-expand-lg.menubar-transparent .nav-link.active {
   font-weight: 600;
   background-color: rgba(11, 95, 255, 0.06);
+  box-shadow: inset 0.25rem 0 0 0 #528eff;
   color: #272833;
 }
 .menubar-vertical-expand-lg.menubar-transparent .nav-link:disabled, .menubar-vertical-expand-lg.menubar-transparent .nav-link.disabled {
@@ -13360,23 +13447,32 @@ label.custom-control-label {
   .menubar-vertical-expand-lg.menubar-transparent .nav-link {
     border-radius: 0;
     color: #272833;
+    margin-bottom: 0;
   }
   .menubar-vertical-expand-lg.menubar-transparent .nav-link:hover, .menubar-vertical-expand-lg.menubar-transparent .nav-link.hover {
-    background-color: rgba(11, 95, 255, 0.04);
+    background-color: rgba(39, 40, 51, 0.04);
     color: #1c1d25;
+    box-shadow: none;
   }
   .menubar-vertical-expand-lg.menubar-transparent .nav-link.focus, .menubar-vertical-expand-lg.menubar-transparent .nav-link:focus {
-    background-color: rgba(11, 95, 255, 0.04);
+    background-color: transparent;
+  }
+  .menubar-vertical-expand-lg.menubar-transparent .nav-link.focus::after, .menubar-vertical-expand-lg.menubar-transparent .nav-link:focus::after {
+    box-shadow: inset 0 0 0 0.125rem #528eff, inset 0 0 0 0.25rem #fff;
   }
   .menubar-vertical-expand-lg.menubar-transparent .nav-link.active {
     font-weight: 600;
     background-color: rgba(11, 95, 255, 0.06);
+    box-shadow: none;
     color: #272833;
   }
   .menubar-vertical-expand-lg.menubar-transparent .nav-link:disabled, .menubar-vertical-expand-lg.menubar-transparent .nav-link.disabled {
     background-color: transparent;
     color: #6b6c7e;
   }
+  .menubar-vertical-expand-lg.menubar-transparent .nav-link[aria-expanded=true], .menubar-vertical-expand-lg.menubar-transparent .nav-link.show {
+    box-shadow: none;
+  }
 }
 @media (min-width: 992px) {
   .menubar-vertical-expand-lg.menubar-decorated .nav {
@@ -17352,7 +17448,8 @@ label.custom-control-label {
   padding-right: 0.625rem;
   padding-top: 0;
   position: relative;
-  transition: box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  letter-spacing: 0.033em;
 }
 @media (prefers-reduced-motion: reduce) {
   .page-link {
@@ -17364,31 +17461,48 @@ label.custom-control-label {
 }
 
 .page-link:hover, .page-link.hover {
-  background-color: rgba(39, 40, 41, 0.04);
+  background-color: rgba(39, 40, 51, 0.04);
   border-color: transparent;
   color: #272833;
   text-decoration: none;
   z-index: 2;
+  box-shadow: inset 0 -0.125rem 0 0 #88889a;
+  font-weight: 600;
+  letter-spacing: 0;
 }
 .page-link.focus, .page-link:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
   outline: 0;
   z-index: 4;
-  background-color: rgba(39, 40, 41, 0.04);
   border-color: transparent;
   color: #272833;
 }
+.page-link.focus::after, .page-link:focus::after {
+  border-radius: 4px;
+  bottom: 0;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
+  content: "";
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 .page-link:active {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
   cursor: default;
   z-index: 3;
+  box-shadow: inset 0 -0.25rem 0 0 #528eff;
+  font-weight: 600;
+  letter-spacing: 0;
 }
 .page-link.active {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
+  font-weight: 600;
   z-index: 3;
 }
 .page-link:disabled, .page-link.disabled {
@@ -17405,10 +17519,13 @@ label.custom-control-label {
   pointer-events: none;
 }
 .page-link[aria-expanded=true], .page-link.show {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
+  font-weight: 600;
   z-index: 3;
+  box-shadow: inset 0 -0.25rem 0 0 #528eff;
+  letter-spacing: 0;
 }
 .page-link > .c-inner {
   margin-bottom: 0;
@@ -17425,11 +17542,14 @@ label.custom-control-label {
   margin-right: 0.25rem;
 }
 .page-item.active .page-link {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
   cursor: default;
   z-index: 3;
+  box-shadow: inset 0 -0.25rem 0 0 #528eff;
+  font-weight: 600;
+  letter-spacing: 0;
 }
 .page-item.disabled .page-link {
   background-color: transparent;
@@ -17475,7 +17595,8 @@ label.custom-control-label {
   padding-right: 0.625rem;
   padding-top: 0;
   text-decoration: none;
-  transition: box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  letter-spacing: 0.025em;
 }
 @media (prefers-reduced-motion: reduce) {
   .pagination-items-per-page > a,
@@ -17491,30 +17612,47 @@ label.custom-control-label {
 .pagination-items-per-page > a:hover, .pagination-items-per-page > a.hover,
 .pagination-items-per-page > button:hover,
 .pagination-items-per-page > button.hover {
-  background-color: rgba(39, 40, 41, 0.04);
+  background-color: rgba(39, 40, 51, 0.04);
   border-color: transparent;
   color: #272833;
+  box-shadow: inset 0 -0.125rem 0 0 #88889a;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-decoration: none;
+  z-index: 2;
 }
 .pagination-items-per-page > a.focus, .pagination-items-per-page > a:focus,
 .pagination-items-per-page > button.focus,
 .pagination-items-per-page > button:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
   outline: 0;
-  background-color: rgba(39, 40, 41, 0.04);
   border-color: transparent;
   color: #272833;
 }
+.pagination-items-per-page > a.focus::after, .pagination-items-per-page > a:focus::after,
+.pagination-items-per-page > button.focus::after,
+.pagination-items-per-page > button:focus::after {
+  border-radius: 4px;
+  bottom: 0;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #528eff;
+  content: "";
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 .pagination-items-per-page > a:active,
 .pagination-items-per-page > button:active {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
 }
 .pagination-items-per-page > a.active,
 .pagination-items-per-page > button.active {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
 }
 .pagination-items-per-page > a:disabled, .pagination-items-per-page > a.disabled,
 .pagination-items-per-page > button:disabled,
@@ -17530,9 +17668,12 @@ label.custom-control-label {
 .pagination-items-per-page > a[aria-expanded=true], .pagination-items-per-page > a.show,
 .pagination-items-per-page > button[aria-expanded=true],
 .pagination-items-per-page > button.show {
-  background-color: #6b6c7e;
+  background-color: rgba(11, 95, 255, 0.06);
   border-color: transparent;
-  color: #fff;
+  color: #272833;
+  font-weight: 600;
+  box-shadow: inset 0 -0.25rem 0 0 #528eff;
+  letter-spacing: 0;
 }
 .pagination-items-per-page > a > .c-inner,
 .pagination-items-per-page > button > .c-inner {
@@ -18384,6 +18525,9 @@ label.custom-control-label {
     animation: none;
   }
 }
+.c-prefers-reduced-motion .progress-bar-animated {
+  animation: none;
+}
 
 .progress-lg,
 .progress-lg > .progress {
@@ -18549,6 +18693,17 @@ label.custom-control-label {
   }
 }
 
+.sheet-row {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+@media (max-width: 767.98px) {
+  .sheet-row {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
 .sheet-header {
   margin-bottom: 3rem;
 }
@@ -18875,10 +19030,30 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus {
 .sidenav-transition .sidenav-menu-slider {
   transition: all 0.5s ease;
 }
+@media (prefers-reduced-motion: reduce) {
+  .sidenav-transition .sidenav-content,
+.sidenav-transition .sidenav-menu,
+.sidenav-transition .sidenav-menu-slider {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .sidenav-transition .sidenav-content,
+.c-prefers-reduced-motion .sidenav-transition .sidenav-menu,
+.c-prefers-reduced-motion .sidenav-transition .sidenav-menu-slider {
+  transition: none;
+}
 
 .sidenav-transition {
   transition: all 0.5s ease;
 }
+@media (prefers-reduced-motion: reduce) {
+  .sidenav-transition {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .sidenav-transition {
+  transition: none;
+}
 
 .sidenav-fixed.sidenav-menu-slider {
   bottom: 0;
@@ -27314,6 +27489,41 @@ button.bg-dark:focus {
   display: none !important;
 }
 
+.d-block-c-prefers-reduced-motion {
+  display: none !important;
+}
+
+.d-inline-block-c-prefers-reduced-motion {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .d-none-c-prefers-reduced-motion {
+    display: none !important;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .d-block-c-prefers-reduced-motion {
+    display: block !important;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .d-inline-block-c-prefers-reduced-motion {
+    display: inline-block !important;
+  }
+}
+.c-prefers-reduced-motion .d-none-c-prefers-reduced-motion {
+  display: none !important;
+}
+
+.c-prefers-reduced-motion .d-block-c-prefers-reduced-motion {
+  display: block !important;
+}
+
+.c-prefers-reduced-motion .d-inline-block-c-prefers-reduced-motion {
+  display: inline-block !important;
+}
+
 @media print {
   .d-print-none {
     display: none !important;
@@ -32656,6 +32866,10 @@ a.text-dark:hover, a.text-dark:focus {
   top: 50%;
   width: 0.25em;
 }
+.c-prefers-reduced-motion .loading-animation::before {
+  animation: none;
+}
+
 .loading-animation::after {
   animation: loading-animation-circle 1s linear infinite;
   background-color: currentColor;
@@ -32669,6 +32883,9 @@ a.text-dark:hover, a.text-dark:focus {
   padding: 0.25em;
   width: 1em;
 }
+.c-prefers-reduced-motion .loading-animation::after {
+  animation: none;
+}
 
 @keyframes loading-animation-squares-box-1 {
   0% {
@@ -32747,6 +32964,10 @@ a.text-dark:hover, a.text-dark:focus {
   transform: scale(1);
   width: 1em;
 }
+.c-prefers-reduced-motion .loading-animation-squares::before {
+  animation: none;
+}
+
 .loading-animation-squares::after {
   animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
   background-color: currentColor;
@@ -32762,6 +32983,9 @@ a.text-dark:hover, a.text-dark:focus {
   transform: scale(2);
   width: 1em;
 }
+.c-prefers-reduced-motion .loading-animation-squares::after {
+  animation: none;
+}
 
 .loading-animation-xs {
   font-size: 0.625rem;