@clayui/css 3.78.0 → 3.82.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.78.0
+ * Clay 3.82.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -4896,6 +4896,7 @@ input[type=button].btn-block {
 .sticker {
   align-items: center;
   border-radius: 0.25rem;
+  color: #212529;
   height: 2rem;
   line-height: 2rem;
   display: inline-flex;
@@ -7973,6 +7974,7 @@ button.link-outline {
   flex-direction: column;
 }
 .clay-range .input-group-text {
+  background-color: transparent;
   border-width: 0px;
   color: #212529;
   font-size: 0.875rem;
@@ -7982,7 +7984,6 @@ button.link-outline {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
-  background-color: transparent;
 }
 .clay-range.disabled .clay-range-title {
   color: #6c757d;
@@ -8279,10 +8280,10 @@ button.link-outline {
   padding-right: 0.5rem;
 }
 .clay-color > .input-group-item > .input-group-text {
+  background-color: #fff;
   border-color: #ced4da;
   padding-left: 0;
   padding-right: 0;
-  background-color: #fff;
 }
 
 .clay-color-dropdown-menu {
@@ -8351,6 +8352,7 @@ button.link-outline {
   border-color: #dee2e6;
 }
 .clay-color-pointer {
+  background-color: transparent;
   border-radius: 100px;
   border-color: #fff;
   border-style: solid;
@@ -8363,7 +8365,6 @@ button.link-outline {
   position: absolute;
   transition: box-shadow 0.15s ease-in-out;
   width: 0.875rem;
-  background-color: transparent;
 }
 @media (prefers-reduced-motion: reduce) {
   .clay-color-pointer {
@@ -8545,6 +8546,37 @@ button.link-outline {
   position: static;
   vertical-align: top;
 }
+.custom-control-label::before {
+  background-color: #fff;
+  border-color: #adb5bd;
+  border-style: solid;
+  border-width: 0.0625rem;
+  content: "";
+  display: block;
+  float: left;
+  font-size: 1rem;
+  height: 1rem;
+  left: 0;
+  position: relative;
+  top: 0.25rem;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  width: 1rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .custom-control-label::before {
+    transition: none;
+  }
+}
+.custom-control-label::after {
+  background: no-repeat 50%/50% 50%;
+  content: "";
+  display: block;
+  height: 1rem;
+  left: 0;
+  position: absolute;
+  top: 0.25rem;
+  width: 1rem;
+}
 
 label.custom-control-label {
   font-size: 1rem;
@@ -8556,7 +8588,6 @@ label.custom-control-label {
 .custom-control-primary .custom-control-label-text {
   font-weight: 500;
 }
-
 .custom-control-label::before {
   background-color: #fff;
   border-color: #adb5bd;
@@ -8744,7 +8775,7 @@ label.custom-control-label {
 }
 .custom-select:focus {
   border-color: #80bdff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem #80bdff;
   outline: 0;
 }
 .custom-select:focus::-ms-value {
@@ -9029,12 +9060,12 @@ label.custom-control-label {
   background-color: #b3d8fd;
 }
 .clay-time .input-group-text {
+  background-color: transparent;
   border-color: transparent;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
-  background-color: transparent;
 }
 .clay-time .clay-time-ampm {
   font-weight: 500;
@@ -9098,11 +9129,11 @@ label.custom-control-label {
   margin-top: -2px;
 }
 .date-picker .input-group-text {
+  background-color: transparent;
   border-color: transparent;
   min-width: 2rem;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  background-color: transparent;
 }
 .date-picker-dropdown-menu {
   max-height: none;
@@ -9192,6 +9223,7 @@ label.custom-control-label {
 
 .date-picker-calendar-item {
   align-items: center;
+  background-color: transparent;
   border-width: 0px;
   display: inline-flex;
   flex-shrink: 0;
@@ -9213,7 +9245,6 @@ label.custom-control-label {
   vertical-align: middle;
   white-space: nowrap;
   width: 2rem;
-  background-color: transparent;
 }
 @media (prefers-reduced-motion: reduce) {
   .date-picker-calendar-item {
@@ -11279,81 +11310,21 @@ label.custom-control-label {
   }
 }
 
-.modal-success .btn-monospaced {
-  color: #155724;
-}
-.modal-success .close {
-  color: #155724;
-}
-.modal-success .close:hover {
-  color: inherit;
-}
-.modal-success .close:focus {
-  color: inherit;
-}
-.modal-success .close:disabled, .modal-success .close.disabled {
-  color: inherit;
-}
 .modal-success .modal-header {
   background-color: #d4edda;
   border-color: #c3e6cb;
   color: #155724;
 }
-.modal-info .btn-monospaced {
-  color: #0c5460;
-}
-.modal-info .close {
-  color: #0c5460;
-}
-.modal-info .close:hover {
-  color: inherit;
-}
-.modal-info .close:focus {
-  color: inherit;
-}
-.modal-info .close:disabled, .modal-info .close.disabled {
-  color: inherit;
-}
 .modal-info .modal-header {
   background-color: #d1ecf1;
   border-color: #bee5eb;
   color: #0c5460;
 }
-.modal-warning .btn-monospaced {
-  color: #856404;
-}
-.modal-warning .close {
-  color: #856404;
-}
-.modal-warning .close:hover {
-  color: inherit;
-}
-.modal-warning .close:focus {
-  color: inherit;
-}
-.modal-warning .close:disabled, .modal-warning .close.disabled {
-  color: inherit;
-}
 .modal-warning .modal-header {
   background-color: #fff3cd;
   border-color: #ffeeba;
   color: #856404;
 }
-.modal-danger .btn-monospaced {
-  color: #721c24;
-}
-.modal-danger .close {
-  color: #721c24;
-}
-.modal-danger .close:hover {
-  color: inherit;
-}
-.modal-danger .close:focus {
-  color: inherit;
-}
-.modal-danger .close:disabled, .modal-danger .close.disabled {
-  color: inherit;
-}
 .modal-danger .modal-header {
   background-color: #f8d7da;
   border-color: #f5c6cb;
@@ -19018,8 +18989,8 @@ caption {
     display: inline;
   }
   .tbar-inline-xs-down .tbar-item {
-    display: inline;
     padding-left: 0;
+    display: inline;
   }
 }
 
@@ -19037,8 +19008,8 @@ caption {
     display: inline;
   }
   .tbar-inline-sm-down .tbar-item {
-    display: inline;
     padding-left: 0;
+    display: inline;
   }
 }
 
@@ -19056,8 +19027,8 @@ caption {
     display: inline;
   }
   .tbar-inline-md-down .tbar-item {
-    display: inline;
     padding-left: 0;
+    display: inline;
   }
 }
 
@@ -19075,8 +19046,8 @@ caption {
     display: inline;
   }
   .tbar-inline-lg-down .tbar-item {
-    display: inline;
     padding-left: 0;
+    display: inline;
   }
 }
 
@@ -19093,8 +19064,8 @@ caption {
   display: inline;
 }
 .tbar-inline-xl-down .tbar-item {
-  display: inline;
   padding-left: 0;
+  display: inline;
 }
 
 .component-tbar {
@@ -19103,6 +19074,9 @@ caption {
   border-width: 0 0 0.0625rem 0;
   height: 3.5rem;
 }
+.component-tbar .tbar-label {
+  border-width: 0.0625rem;
+}
 .subnav-tbar {
   font-size: 0.875rem;
 }
@@ -19124,6 +19098,9 @@ caption {
 .subnav-tbar .component-link:hover {
   color: #0056b3;
 }
+.subnav-tbar .component-link:disabled, .subnav-tbar .component-link.disabled {
+  box-shadow: none;
+}
 .subnav-tbar .tbar-item {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -19133,16 +19110,16 @@ caption {
   line-height: 1;
   margin-bottom: 0.125rem;
   margin-top: 0.125rem;
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 .subnav-tbar .tbar-btn .c-inner {
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 .subnav-tbar .tbar-btn .c-inner {
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 .subnav-tbar .tbar-link {
   margin-bottom: 0.125rem;
@@ -19165,10 +19142,10 @@ caption {
   margin-top: -0.09375rem;
 }
 .subnav-tbar .tbar-btn-monospaced {
-  height: 1.5rem;
   margin-bottom: 0.125rem;
   margin-top: 0.125rem;
   padding: 0.25rem;
+  height: 1.5rem;
   width: 1.5rem;
 }
 .subnav-tbar .tbar-btn-monospaced .c-inner {
@@ -19202,6 +19179,9 @@ caption {
 .subnav-tbar .component-label {
   font-weight: 400;
 }
+.subnav-tbar .tbar-label {
+  border-width: 0.0625rem;
+}
 .subnav-tbar-primary {
   background-color: #a8d2ff;
   padding-bottom: 0.625rem;
@@ -19244,12 +19224,12 @@ caption {
 .subnav-tbar-primary .tbar-label {
   font-size: 0.75rem;
   margin-right: 0;
-  text-transform: none;
-  border-width: 0.0625rem;
   padding-bottom: 0.3125rem;
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   padding-top: 0.3125rem;
+  text-transform: none;
+  border-width: 0.0625rem;
 }
 .subnav-tbar-primary .tbar-label > .c-inner {
   margin-bottom: -0.3125rem;
@@ -19258,18 +19238,24 @@ caption {
   margin-top: -0.3125rem;
 }
 .subnav-tbar-primary.subnav-tbar-disabled {
-  color: #6c757d;
   background-color: #c6ddf6;
+  color: #6c757d;
 }
 .subnav-tbar-primary.subnav-tbar-disabled .component-label {
   border-color: #6c757d;
 }
+.subnav-tbar-primary.subnav-tbar-disabled .tbar-label {
+  border-width: 0.0625rem;
+}
 .subnav-tbar-light {
-  color: rgba(0, 0, 0, 0.5);
   background-color: #f8f9fa;
+  color: rgba(0, 0, 0, 0.5);
   padding-bottom: 0.125rem;
   padding-top: 0.125rem;
 }
+.subnav-tbar-light .tbar-label {
+  border-width: 0.0625rem;
+}
 .tbar-stacked {
   display: inline-flex;
   height: 100%;
@@ -19336,6 +19322,9 @@ caption {
   margin-right: 0;
   margin-top: 0;
 }
+.tbar-stacked .tbar-label {
+  border-width: 0.0625rem;
+}
 .tbar-light {
   background-color: #fff;
   box-shadow: inset 1px 0 0 0 #e9ecef, inset -1px 0 0 0 #e9ecef;
@@ -19368,6 +19357,9 @@ caption {
   background-color: #e9ecef;
   color: #343a40;
 }
+.tbar-light .tbar-label {
+  border-width: 0.0625rem;
+}
 .tbar-dark-l2 {
   background-color: #828e9a;
   box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
@@ -19401,6 +19393,9 @@ caption {
   background-color: rgba(255, 255, 255, 0.06);
   color: #fff;
 }
+.tbar-dark-l2 .tbar-label {
+  border-width: 0.0625rem;
+}
 .tbar-dark-d1 {
   background-color: #23272b;
   box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
@@ -19426,16 +19421,6 @@ caption {
   background-color: rgba(255, 255, 255, 0.06);
   color: #fff;
 }
-.tbar-dark-d1 .tbar-btn-monospaced.active::after {
-  background-color: #75b8ff;
-  bottom: 0;
-  content: "";
-  display: block;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 0.25rem;
-}
 .tbar-dark-d1 .tbar-btn-monospaced:disabled, .tbar-dark-d1 .tbar-btn-monospaced.disabled {
   color: inherit;
 }
@@ -19443,6 +19428,9 @@ caption {
   background-color: rgba(255, 255, 255, 0.06);
   color: #fff;
 }
+.tbar-dark-d1 .tbar-label {
+  border-width: 0.0625rem;
+}
 .timeline {
   list-style: none;
   padding-left: 0;
@@ -20872,6 +20860,370 @@ ul.autofit-row {
   background-color: #e9ecef;
 }
 
+.c-gap-0 {
+  gap: 0;
+}
+
+.c-gapx-0 {
+  column-gap: 0;
+}
+
+.c-gapy-0 {
+  row-gap: 0;
+}
+
+.c-gap-1 {
+  gap: 0.25rem;
+}
+
+.c-gapx-1 {
+  column-gap: 0.25rem;
+}
+
+.c-gapy-1 {
+  row-gap: 0.25rem;
+}
+
+.c-gap-2 {
+  gap: 0.5rem;
+}
+
+.c-gapx-2 {
+  column-gap: 0.5rem;
+}
+
+.c-gapy-2 {
+  row-gap: 0.5rem;
+}
+
+.c-gap-3 {
+  gap: 1rem;
+}
+
+.c-gapx-3 {
+  column-gap: 1rem;
+}
+
+.c-gapy-3 {
+  row-gap: 1rem;
+}
+
+.c-gap-4 {
+  gap: 1.5rem;
+}
+
+.c-gapx-4 {
+  column-gap: 1.5rem;
+}
+
+.c-gapy-4 {
+  row-gap: 1.5rem;
+}
+
+.c-gap-5 {
+  gap: 3rem;
+}
+
+.c-gapx-5 {
+  column-gap: 3rem;
+}
+
+.c-gapy-5 {
+  row-gap: 3rem;
+}
+
+@media (min-width: 576px) {
+  .c-gap-sm-0 {
+    gap: 0;
+  }
+
+  .c-gapx-sm-0 {
+    column-gap: 0;
+  }
+
+  .c-gapy-sm-0 {
+    row-gap: 0;
+  }
+
+  .c-gap-sm-1 {
+    gap: 0.25rem;
+  }
+
+  .c-gapx-sm-1 {
+    column-gap: 0.25rem;
+  }
+
+  .c-gapy-sm-1 {
+    row-gap: 0.25rem;
+  }
+
+  .c-gap-sm-2 {
+    gap: 0.5rem;
+  }
+
+  .c-gapx-sm-2 {
+    column-gap: 0.5rem;
+  }
+
+  .c-gapy-sm-2 {
+    row-gap: 0.5rem;
+  }
+
+  .c-gap-sm-3 {
+    gap: 1rem;
+  }
+
+  .c-gapx-sm-3 {
+    column-gap: 1rem;
+  }
+
+  .c-gapy-sm-3 {
+    row-gap: 1rem;
+  }
+
+  .c-gap-sm-4 {
+    gap: 1.5rem;
+  }
+
+  .c-gapx-sm-4 {
+    column-gap: 1.5rem;
+  }
+
+  .c-gapy-sm-4 {
+    row-gap: 1.5rem;
+  }
+
+  .c-gap-sm-5 {
+    gap: 3rem;
+  }
+
+  .c-gapx-sm-5 {
+    column-gap: 3rem;
+  }
+
+  .c-gapy-sm-5 {
+    row-gap: 3rem;
+  }
+}
+@media (min-width: 768px) {
+  .c-gap-md-0 {
+    gap: 0;
+  }
+
+  .c-gapx-md-0 {
+    column-gap: 0;
+  }
+
+  .c-gapy-md-0 {
+    row-gap: 0;
+  }
+
+  .c-gap-md-1 {
+    gap: 0.25rem;
+  }
+
+  .c-gapx-md-1 {
+    column-gap: 0.25rem;
+  }
+
+  .c-gapy-md-1 {
+    row-gap: 0.25rem;
+  }
+
+  .c-gap-md-2 {
+    gap: 0.5rem;
+  }
+
+  .c-gapx-md-2 {
+    column-gap: 0.5rem;
+  }
+
+  .c-gapy-md-2 {
+    row-gap: 0.5rem;
+  }
+
+  .c-gap-md-3 {
+    gap: 1rem;
+  }
+
+  .c-gapx-md-3 {
+    column-gap: 1rem;
+  }
+
+  .c-gapy-md-3 {
+    row-gap: 1rem;
+  }
+
+  .c-gap-md-4 {
+    gap: 1.5rem;
+  }
+
+  .c-gapx-md-4 {
+    column-gap: 1.5rem;
+  }
+
+  .c-gapy-md-4 {
+    row-gap: 1.5rem;
+  }
+
+  .c-gap-md-5 {
+    gap: 3rem;
+  }
+
+  .c-gapx-md-5 {
+    column-gap: 3rem;
+  }
+
+  .c-gapy-md-5 {
+    row-gap: 3rem;
+  }
+}
+@media (min-width: 992px) {
+  .c-gap-lg-0 {
+    gap: 0;
+  }
+
+  .c-gapx-lg-0 {
+    column-gap: 0;
+  }
+
+  .c-gapy-lg-0 {
+    row-gap: 0;
+  }
+
+  .c-gap-lg-1 {
+    gap: 0.25rem;
+  }
+
+  .c-gapx-lg-1 {
+    column-gap: 0.25rem;
+  }
+
+  .c-gapy-lg-1 {
+    row-gap: 0.25rem;
+  }
+
+  .c-gap-lg-2 {
+    gap: 0.5rem;
+  }
+
+  .c-gapx-lg-2 {
+    column-gap: 0.5rem;
+  }
+
+  .c-gapy-lg-2 {
+    row-gap: 0.5rem;
+  }
+
+  .c-gap-lg-3 {
+    gap: 1rem;
+  }
+
+  .c-gapx-lg-3 {
+    column-gap: 1rem;
+  }
+
+  .c-gapy-lg-3 {
+    row-gap: 1rem;
+  }
+
+  .c-gap-lg-4 {
+    gap: 1.5rem;
+  }
+
+  .c-gapx-lg-4 {
+    column-gap: 1.5rem;
+  }
+
+  .c-gapy-lg-4 {
+    row-gap: 1.5rem;
+  }
+
+  .c-gap-lg-5 {
+    gap: 3rem;
+  }
+
+  .c-gapx-lg-5 {
+    column-gap: 3rem;
+  }
+
+  .c-gapy-lg-5 {
+    row-gap: 3rem;
+  }
+}
+@media (min-width: 1200px) {
+  .c-gap-xl-0 {
+    gap: 0;
+  }
+
+  .c-gapx-xl-0 {
+    column-gap: 0;
+  }
+
+  .c-gapy-xl-0 {
+    row-gap: 0;
+  }
+
+  .c-gap-xl-1 {
+    gap: 0.25rem;
+  }
+
+  .c-gapx-xl-1 {
+    column-gap: 0.25rem;
+  }
+
+  .c-gapy-xl-1 {
+    row-gap: 0.25rem;
+  }
+
+  .c-gap-xl-2 {
+    gap: 0.5rem;
+  }
+
+  .c-gapx-xl-2 {
+    column-gap: 0.5rem;
+  }
+
+  .c-gapy-xl-2 {
+    row-gap: 0.5rem;
+  }
+
+  .c-gap-xl-3 {
+    gap: 1rem;
+  }
+
+  .c-gapx-xl-3 {
+    column-gap: 1rem;
+  }
+
+  .c-gapy-xl-3 {
+    row-gap: 1rem;
+  }
+
+  .c-gap-xl-4 {
+    gap: 1.5rem;
+  }
+
+  .c-gapx-xl-4 {
+    column-gap: 1.5rem;
+  }
+
+  .c-gapy-xl-4 {
+    row-gap: 1.5rem;
+  }
+
+  .c-gap-xl-5 {
+    gap: 3rem;
+  }
+
+  .c-gapx-xl-5 {
+    column-gap: 3rem;
+  }
+
+  .c-gapy-xl-5 {
+    row-gap: 3rem;
+  }
+}
 .c-m-0 {
   margin: 0;
 }
@@ -24370,6 +24722,10 @@ button.bg-dark:focus {
   display: block !important;
 }
 
+.d-grid {
+  display: grid !important;
+}
+
 .d-table {
   display: table !important;
 }
@@ -24407,6 +24763,10 @@ button.bg-dark:focus {
     display: block !important;
   }
 
+  .d-sm-grid {
+    display: grid !important;
+  }
+
   .d-sm-table {
     display: table !important;
   }
@@ -24444,6 +24804,10 @@ button.bg-dark:focus {
     display: block !important;
   }
 
+  .d-md-grid {
+    display: grid !important;
+  }
+
   .d-md-table {
     display: table !important;
   }
@@ -24481,6 +24845,10 @@ button.bg-dark:focus {
     display: block !important;
   }
 
+  .d-lg-grid {
+    display: grid !important;
+  }
+
   .d-lg-table {
     display: table !important;
   }
@@ -24518,6 +24886,10 @@ button.bg-dark:focus {
     display: block !important;
   }
 
+  .d-xl-grid {
+    display: grid !important;
+  }
+
   .d-xl-table {
     display: table !important;
   }
@@ -24559,6 +24931,10 @@ button.bg-dark:focus {
     display: block !important;
   }
 
+  .d-print-grid {
+    display: grid !important;
+  }
+
   .d-print-table {
     display: table !important;
   }