@clayui/css 3.160.0 → 3.162.0

package/lib/css/cadmin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.160.0
+ * Clay 3.162.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.160.0
+ * Clay 3.162.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -2145,15 +2145,29 @@ html:not(#__):not(#___) .cadmin .c-horizontal-resizer {
   position: absolute;
   right: 0px;
   top: 0px;
-  width: 0.5rem;
+  width: 0.75rem;
   z-index: 10;
 }
-html:not(#__):not(#___) .cadmin .c-horizontal-resizer:hover {
+html:not(#__):not(#___) .cadmin .c-horizontal-resizer::before {
+  bottom: 0px;
+  content: "";
+  left: 0.25rem;
+  position: absolute;
+  right: 0.25rem;
+  top: 0px;
+}
+html:not(#__):not(#___) .cadmin .c-horizontal-resizer:hover::before {
   background-color: rgb(86.99, 144.8295081967, 255);
 }
-html:not(#__):not(#___) .cadmin .c-horizontal-resizer:focus {
+html:not(#__):not(#___) .cadmin .c-horizontal-resizer:focus-visible::before {
   background-color: rgb(86.99, 144.8295081967, 255);
 }
+html:not(#__):not(#___) .cadmin .c-horizontal-resizer-end {
+  left: 0px;
+  margin-left: -0.25rem;
+  margin-right: 0px;
+  right: auto;
+}
 html:not(#__):not(#___) .cadmin .fade, html:not(#__):not(#___) .cadmin.fade {
   transition: opacity 0.15s linear;
 }
@@ -4175,7 +4189,6 @@ html:not(#__):not(#___) .cadmin .clay-dark.badge-translucent.badge-danger, html:
   color: rgb(243.998755, 137.005245, 137.005245);
 }
 html:not(#__):not(#___) .cadmin .breadcrumb-bar {
-  align-items: center;
   display: flex;
 }
 html:not(#__):not(#___) .cadmin .breadcrumb {
@@ -4192,6 +4205,7 @@ html:not(#__):not(#___) .cadmin .breadcrumb-link {
   border-radius: 1px;
   color: #6b6c7e;
   display: block;
+  line-height: 1.5rem;
   text-decoration: none;
   transition: box-shadow 0.15s ease-in-out;
 }
@@ -4224,6 +4238,8 @@ html:not(#__):not(#___) .cadmin .breadcrumb-link > .breadcrumb-text-truncate:hov
 }
 html:not(#__):not(#___) .cadmin .breadcrumb-toggle {
   color: #6b6c7e;
+  flex-shrink: 0;
+  margin-top: 9.5px;
 }
 html:not(#__):not(#___) .cadmin .breadcrumb-item {
   font-size: 14px;
@@ -7529,7 +7545,9 @@ html:not(#__):not(#___) .cadmin .form-group-sm {
   margin-bottom: 16px;
 }
 html:not(#__):not(#___) .cadmin .form-group-sm label {
-  margin-bottom: 3px;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-bottom: 2px;
 }
 html:not(#__):not(#___) .cadmin .form-group-sm div.form-control,
 html:not(#__):not(#___) .cadmin .form-group-sm .form-control[contenteditable] {
@@ -8293,6 +8311,7 @@ html:not(#__):not(#___) .c-prefers-focus .cadmin .clay-reorder .form-control-ins
 html:not(#__):not(#___) .cadmin .clay-reorder .form-control-inset:focus + .clay-reorder-underlay, html:not(#__):not(#___) .cadmin .clay-reorder .form-control-inset.focus + .clay-reorder-underlay {
   background-color: rgb(239.99, 245.1573770492, 255);
   border-color: rgb(127.994, 171.7173770492, 255);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(86.99, 144.8295081967, 255);
 }
 html:not(#__):not(#___) .cadmin .clay-reorder .form-control-inset + .clay-reorder-underlay {
   bottom: 0px;
@@ -12694,6 +12713,9 @@ html:not(#__):not(#___) .cadmin .menubar-vertical-expand-md.menubar-transparent
     box-shadow: none;
   }
 }
+html:not(#__):not(#___) .cadmin .menubar-vertical-expand-md.menubar-transparent .nav-link * {
+  letter-spacing: normal;
+}
 @media (min-width: 768px) {
   html:not(#__):not(#___) .cadmin .menubar-vertical-expand-md.menubar-decorated .nav {
     border-left-color: #e7e7ed;
@@ -12948,6 +12970,9 @@ html:not(#__):not(#___) .cadmin .menubar-vertical-expand-lg.menubar-transparent
     box-shadow: none;
   }
 }
+html:not(#__):not(#___) .cadmin .menubar-vertical-expand-lg.menubar-transparent .nav-link * {
+  letter-spacing: normal;
+}
 @media (min-width: 992px) {
   html:not(#__):not(#___) .cadmin .menubar-vertical-expand-lg.menubar-decorated .nav {
     border-left-color: #e7e7ed;
@@ -18529,7 +18554,7 @@ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .toggle-switch-check ~
 
 html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
   content: attr(data-label-off);
-  margin-left: 56px;
+  margin-left: calc(48px + 8px);
   transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in, right 100ms ease-in;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -18650,7 +18675,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-ba
     min-width: 40px;
   }
   html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
-    margin-left: 48px;
+    margin-left: calc(40px + 8px);
   }
   html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
     font-size: 10px;
@@ -18672,7 +18697,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-ba
     left: calc(40px - 4px - 16px);
   }
   html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
-    margin-left: 48px;
+    margin-left: calc(40px + 8px);
   }
   html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
     left: calc(40px - 4px - 16px);
@@ -18703,11 +18728,11 @@ html:not(#__):not(#___) .cadmin .simple-toggle-switch {
 html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
   line-height: 1;
   margin-bottom: 0px;
-  max-width: calc(100% - 56px);
+  max-width: calc(100% - calc(48px + 8px));
 }
 @media (max-width: 767.98px) {
   html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
-    max-width: calc(100% - 48px);
+    max-width: calc(100% - calc(40px + 8px));
   }
 }
 html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-check + .toggle-switch-label {
@@ -28178,6 +28203,48 @@ html:not(#__):not(#___) .cadmin .loading-animation-secondary {
 html:not(#__):not(#___) .cadmin .loading-animation-light {
   color: #fff;
 }
+@keyframes clay-cadmin-focus-ring {
+  0%, 50% {
+    box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgb(178.994, 205.16, 255);
+  }
+  100% {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(86.99, 144.8295081967, 255);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes clay-cadmin-focus-ring {
+    0%, 60% {
+      box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgb(178.994, 205.16, 255);
+    }
+    61% {
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(86.99, 144.8295081967, 255);
+    }
+  }
+}
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin .custom-control-input:focus-visible ~ .custom-control-label::after,
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin .focus {
+  animation: clay-cadmin-focus-ring 1s cubic-bezier(0.2, 0, 0, 1);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(86.99, 144.8295081967, 255);
+}
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin :focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+html:not(#__):not(#___) .c-prefers-focus-ring .cadmin .focus {
+  position: relative;
+  z-index: 1;
+}
+
+html:not(#__):not(#___) .c-prefers-focus-ring.c-tab-returning .cadmin .custom-control-input:focus-visible ~ .custom-control-label::after,
+html:not(#__):not(#___) .c-prefers-focus-ring.c-tab-returning .cadmin .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+html:not(#__):not(#___) .c-prefers-focus-ring.c-tab-returning .cadmin :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+html:not(#__):not(#___) .c-prefers-focus-ring.c-tab-returning .cadmin .focus,
+html:not(#__):not(#___) .c-prefers-reduced-motion.c-prefers-focus-ring .cadmin .custom-control-input:focus-visible ~ .custom-control-label::after,
+html:not(#__):not(#___) .c-prefers-reduced-motion.c-prefers-focus-ring .cadmin .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+html:not(#__):not(#___) .c-prefers-reduced-motion.c-prefers-focus-ring .cadmin :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+html:not(#__):not(#___) .c-prefers-reduced-motion.c-prefers-focus-ring .cadmin .focus {
+  animation: none;
+}
+
 html:not(#__):not(#___) .cadmin {
   /* SPDX-SnippetBegin
    * SPDX-License-Identifier: MIT