@clayui/css 3.161.0 → 3.163.0

package/lib/css/base.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>
@@ -2358,16 +2358,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(87.006, 168.0384, 255);
 }
-.c-horizontal-resizer:focus {
+.c-horizontal-resizer:focus-visible::before {
   background-color: rgb(87.006, 168.0384, 255);
 }
 
+.c-horizontal-resizer-end {
+  left: 0rem;
+  margin-left: -0.25rem;
+  margin-right: 0rem;
+  right: auto;
+}
+
 .fade {
   transition: opacity 0.15s linear;
 }
@@ -4388,7 +4403,6 @@ input[type=button].btn-block {
   color: rgb(237.2775949367, 152.7164050633, 160.8180759494);
 }
 .breadcrumb-bar {
-  align-items: center;
   display: flex;
 }
 
@@ -4405,6 +4419,7 @@ input[type=button].btn-block {
 .breadcrumb-link {
   color: #007bff;
   display: block;
+  line-height: 1.5rem;
   text-decoration: none;
 }
 .breadcrumb-link:hover, .breadcrumb-link.hover {
@@ -4418,6 +4433,8 @@ input[type=button].btn-block {
 
 .breadcrumb-toggle {
   color: #007bff;
+  flex-shrink: 0;
+  margin-top: 0.75rem;
 }
 .breadcrumb-item {
   margin-right: 0.5em;
@@ -8191,6 +8208,8 @@ textarea.form-control-lg,
   margin-bottom: 1rem;
 }
 .form-group-sm label {
+  font-size: 0.75rem;
+  line-height: 1.5;
   margin-bottom: 0.25rem;
 }
 .form-group-sm div.form-control,
@@ -11531,6 +11550,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;
@@ -13710,6 +13793,9 @@ button.multi-step-icon:hover {
     color: #6c757d;
   }
 }
+.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: #dee2e6;
@@ -13857,6 +13943,9 @@ button.multi-step-icon:hover {
     color: #6c757d;
   }
 }
+.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: #dee2e6;
@@ -29844,6 +29933,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(167.994, 209.9616, 255);
+  }
+  100% {
+    box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgb(87.006, 168.0384, 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(167.994, 209.9616, 255);
+    }
+    61% {
+      box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgb(87.006, 168.0384, 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(87.006, 168.0384, 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>