@clayui/css 3.161.0 → 3.163.0

package/lib/css/atlas.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.161.0
+ * Clay 3.163.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -2395,16 +2395,31 @@ input[type=button].btn-block {
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  width: 0.5rem;
+  width: 0.75rem;
   z-index: 10;
 }
-.c-horizontal-resizer:hover {
+.c-horizontal-resizer::before {
+  bottom: 0rem;
+  content: "";
+  left: 0.25rem;
+  position: absolute;
+  right: 0.25rem;
+  top: 0rem;
+}
+.c-horizontal-resizer:hover::before {
   background-color: rgb(86.99, 144.8295081967, 255);
 }
-.c-horizontal-resizer:focus {
+.c-horizontal-resizer:focus-visible::before {
   background-color: rgb(86.99, 144.8295081967, 255);
 }
 
+.c-horizontal-resizer-end {
+  left: 0rem;
+  margin-left: -0.25rem;
+  margin-right: 0rem;
+  right: auto;
+}
+
 .fade {
   transition: opacity 0.15s linear;
 }
@@ -4559,7 +4574,6 @@ input[type=button].btn-block {
   color: rgb(243.998755, 137.005245, 137.005245);
 }
 .breadcrumb-bar {
-  align-items: center;
   display: flex;
 }
 
@@ -4577,6 +4591,7 @@ input[type=button].btn-block {
 .breadcrumb-link {
   color: #6b6c7e;
   display: block;
+  line-height: 1.5rem;
   text-decoration: none;
   border-radius: 1px;
   transition: box-shadow 0.15s ease-in-out;
@@ -4603,6 +4618,8 @@ input[type=button].btn-block {
 
 .breadcrumb-toggle {
   color: #6b6c7e;
+  flex-shrink: 0;
+  margin-top: 0.59375rem;
 }
 .breadcrumb-item {
   font-size: 0.875rem;
@@ -8548,7 +8565,9 @@ textarea.form-control-lg,
   margin-bottom: 1rem;
 }
 .form-group-sm label {
-  margin-bottom: 0.1875rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  margin-bottom: 0.125rem;
 }
 .form-group-sm div.form-control,
 .form-group-sm .form-control[contenteditable] {
@@ -9379,6 +9398,7 @@ button.link-outline {
 .clay-reorder .form-control-inset:focus + .clay-reorder-underlay, .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 0.125rem #fff, 0 0 0 0.25rem rgb(86.99, 144.8295081967, 255);
 }
 .clay-reorder .form-control-inset + .clay-reorder-underlay {
   bottom: 0rem;
@@ -12194,6 +12214,70 @@ label.custom-control-label {
   display: none;
 }
 
+.clay-keyboard-arrows-indicator {
+  column-gap: 0.15em;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  row-gap: 0.15em;
+}
+
+.clay-keyboard-arrows-indicator-md {
+  font-size: 1rem;
+}
+
+.clay-keyboard-arrows-indicator-sm {
+  font-size: 0.75rem;
+}
+
+.clay-keyboard-arrows-indicator-key {
+  display: inline-flex;
+}
+.clay-keyboard-arrows-indicator-key .lexicon-icon {
+  height: 1em;
+  margin-top: 0;
+  width: 1em;
+}
+
+.clay-keyboard-arrows-indicator-key-up {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.clay-keyboard-arrows-indicator-key-left {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-down {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-right {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-inactive {
+  opacity: 0.25;
+}
+
+.clay-keyboard-arrows-indicator-floating {
+  bottom: 0.25rem;
+  pointer-events: none;
+  position: absolute;
+  right: 0.5rem;
+}
+
+.clay-keyboard-arrows-indicator-on-focus {
+  visibility: hidden;
+}
+
+:focus-within > .clay-keyboard-arrows-indicator-on-focus {
+  visibility: visible;
+}
+
 .list-group-item-action {
   color: #495057;
   text-align: inherit;
@@ -14645,6 +14729,9 @@ button.multi-step-icon:hover {
     box-shadow: none;
   }
 }
+.menubar-vertical-expand-md.menubar-transparent .nav-link * {
+  letter-spacing: normal;
+}
 @media (min-width: 768px) {
   .menubar-vertical-expand-md.menubar-decorated .nav {
     border-left-color: #e7e7ed;
@@ -14900,6 +14987,9 @@ button.multi-step-icon:hover {
     box-shadow: none;
   }
 }
+.menubar-vertical-expand-lg.menubar-transparent .nav-link * {
+  letter-spacing: normal;
+}
 @media (min-width: 992px) {
   .menubar-vertical-expand-lg.menubar-decorated .nav {
     border-left-color: #e7e7ed;
@@ -32842,6 +32932,46 @@ a.text-dark:hover, a.text-dark:focus {
 .loading-animation-light {
   color: #fff;
 }
+@keyframes clay-focus-ring {
+  0%, 50% {
+    box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.75rem rgb(178.994, 205.16, 255);
+  }
+  100% {
+    box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgb(86.99, 144.8295081967, 255);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes clay-focus-ring {
+    0%, 60% {
+      box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.75rem rgb(178.994, 205.16, 255);
+    }
+    61% {
+      box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgb(86.99, 144.8295081967, 255);
+    }
+  }
+}
+.c-prefers-focus-ring .custom-control-input:focus-visible ~ .custom-control-label::after,
+.c-prefers-focus-ring .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+.c-prefers-focus-ring :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+.c-prefers-focus-ring .focus {
+  animation: clay-focus-ring 1s cubic-bezier(0.2, 0, 0, 1);
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgb(86.99, 144.8295081967, 255);
+}
+.c-prefers-focus-ring :focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+.c-prefers-focus-ring .focus {
+  position: relative;
+  z-index: 1;
+}
+.c-prefers-focus-ring.c-tab-returning .custom-control-input:focus-visible ~ .custom-control-label::after,
+.c-prefers-focus-ring.c-tab-returning .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+.c-prefers-focus-ring.c-tab-returning :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+.c-prefers-focus-ring.c-tab-returning .focus, .c-prefers-focus-ring.c-prefers-reduced-motion .custom-control-input:focus-visible ~ .custom-control-label::after,
+.c-prefers-focus-ring.c-prefers-reduced-motion .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+.c-prefers-focus-ring.c-prefers-reduced-motion :focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+.c-prefers-focus-ring.c-prefers-reduced-motion .focus {
+  animation: none;
+}
+
 /* SPDX-SnippetBegin
  * SPDX-License-Identifier: MIT
  * SPDX-SnippetCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>