@clayui/css 3.107.0 → 3.109.0

package/lib/css/cadmin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.107.0
+ * Clay 3.109.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.107.0
+ * Clay 3.109.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -10840,6 +10840,27 @@ html:not(#__):not(#___) .cadmin .modal, html:not(#__):not(#___) .cadmin.modal {
   width: 100%;
   z-index: 1050;
 }
+@media (max-width: 767.98px) {
+  html:not(#__):not(#___) .cadmin .modal .close, html:not(#__):not(#___) .cadmin.modal .close {
+    margin-right: -8px;
+  }
+  html:not(#__):not(#___) .cadmin .modal .modal-header, html:not(#__):not(#___) .cadmin.modal .modal-header {
+    height: 48px;
+    padding: 8px 16px;
+  }
+  html:not(#__):not(#___) .cadmin .modal .modal-title, html:not(#__):not(#___) .cadmin.modal .modal-title {
+    font-size: 18px;
+  }
+  html:not(#__):not(#___) .cadmin .modal .modal-body, html:not(#__):not(#___) .cadmin.modal .modal-body {
+    padding: 8px 16px;
+  }
+  html:not(#__):not(#___) .cadmin .modal .modal-body-iframe, html:not(#__):not(#___) .cadmin.modal .modal-body-iframe {
+    padding: 0px;
+  }
+  html:not(#__):not(#___) .cadmin .modal .modal-footer, html:not(#__):not(#___) .cadmin.modal .modal-footer {
+    padding: 8px;
+  }
+}
 html:not(#__):not(#___) .cadmin .modal-dialog {
   margin: 8px;
   position: relative;
@@ -10942,7 +10963,7 @@ html:not(#__):not(#___) .cadmin .modal-content {
   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 28px * 2);
+  max-height: calc(100vh - 8px * 2);
   outline: 0;
   overflow: hidden;
   pointer-events: auto;
@@ -10997,7 +11018,7 @@ html:not(#__):not(#___) .cadmin .modal-footer, html:not(#__):not(#___) .cadmin.m
   padding-top: 12px;
 }
 html:not(#__):not(#___) .cadmin .modal-footer > *, html:not(#__):not(#___) .cadmin.modal-footer > * {
-  margin: calc(8px * 0.5);
+  margin: 0 calc(8px * 0.5);
 }
 html:not(#__):not(#___) .cadmin .modal-item-group {
   align-items: center;
@@ -11039,6 +11060,7 @@ html:not(#__):not(#___) .cadmin .modal-item-last {
 }
 html:not(#__):not(#___) .cadmin .modal-footer > .modal-item-last, html:not(#__):not(#___) .cadmin.modal-footer > .modal-item-last {
   margin-left: auto;
+  margin-right: 0;
 }
 html:not(#__):not(#___) .cadmin .modal-title {
   flex-grow: 1;
@@ -16359,8 +16381,8 @@ html:not(#__):not(#___) .cadmin th {
 }
 html:not(#__):not(#___) .cadmin caption {
   color: #272833;
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 8px 16px;
+  padding-top: 8px 16px;
   text-align: left;
 }
 html:not(#__):not(#___) .cadmin .table-head-title .inline-item-before {
@@ -16389,7 +16411,7 @@ html:not(#__):not(#___) .cadmin .table thead th,
 html:not(#__):not(#___) .cadmin .table thead td {
   border-bottom: 0px solid #e7e7ed;
   border-top-width: 0;
-  vertical-align: bottom;
+  vertical-align: middle;
 }
 html:not(#__):not(#___) .cadmin .table thead th a[href] {
   border-radius: 1px;
@@ -16416,20 +16438,15 @@ html:not(#__):not(#___) .c-prefers-focus .cadmin .table thead th a[href] {
 html:not(#__):not(#___) .cadmin .table th:first-child,
 html:not(#__):not(#___) .cadmin .table td:first-child,
 html:not(#__):not(#___) .cadmin .table .table-column-start {
-  padding-left: 12px;
-}
-html:not(#__):not(#___) .cadmin .table th:last-child,
-html:not(#__):not(#___) .cadmin .table td:last-child,
-html:not(#__):not(#___) .cadmin .table .table-column-end {
-  padding-right: 12px;
+  padding-left: 20px;
 }
 html:not(#__):not(#___) .cadmin .table th {
   background-clip: padding-box;
   border-top: 1px solid #e7e7ed;
   color: #6b6c7e;
   font-weight: 600;
-  height: 36px;
-  padding: 12px;
+  height: 56px;
+  padding: 8px 16px;
   position: relative;
   vertical-align: top;
 }
@@ -16441,7 +16458,8 @@ html:not(#__):not(#___) .cadmin .table td {
   border-right-width: 0;
   border-style: solid;
   border-top-width: 1px;
-  padding: 12px;
+  height: 56px;
+  padding: 8px 16px;
   position: relative;
   vertical-align: middle;
 }
@@ -16450,15 +16468,18 @@ html:not(#__):not(#___) .cadmin .table tbody + tbody {
 }
 html:not(#__):not(#___) .cadmin .table caption {
   caption-side: top;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 html:not(#__):not(#___) .cadmin .table .table-divider th,
 html:not(#__):not(#___) .cadmin .table .table-divider td {
+  background-color: #f1f2f5;
   color: #6b6c7e;
   font-size: 12px;
   font-weight: 600;
-  padding: 7px 12px;
+  height: 34px;
+  line-height: 17px;
+  padding: 8px 16px 8px 20px;
   text-transform: uppercase;
 }
 html:not(#__):not(#___) .cadmin .table .table-active {
@@ -16488,8 +16509,8 @@ html:not(#__):not(#___) .cadmin .table .table-disabled .table-list-title {
 }
 html:not(#__):not(#___) .cadmin .table .autofit-col {
   justify-content: center;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 html:not(#__):not(#___) .cadmin .table .autofit-col:first-child {
   padding-left: 0;
@@ -16513,15 +16534,25 @@ html:not(#__):not(#___) .cadmin .table .form-check {
 html:not(#__):not(#___) .cadmin .table .quick-action-menu {
   align-items: flex-start;
   background-color: #fff;
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 8px;
+  padding-top: 8px;
 }
 html:not(#__):not(#___) .cadmin .table-caption-bottom caption {
   caption-side: bottom;
 }
+html:not(#__):not(#___) .cadmin .table-lg th,
+html:not(#__):not(#___) .cadmin .table-lg td {
+  padding: 17px;
+}
+html:not(#__):not(#___) .cadmin .table-md th,
+html:not(#__):not(#___) .cadmin .table-md td {
+  height: 48px;
+  padding: 6px 16px;
+}
 html:not(#__):not(#___) .cadmin .table-sm th,
 html:not(#__):not(#___) .cadmin .table-sm td {
-  padding: 4.8px;
+  height: 32px;
+  padding: 4px 16px;
 }
 html:not(#__):not(#___) .cadmin .table-bordered {
   border: 1px solid #e7e7ed;
@@ -16534,14 +16565,23 @@ html:not(#__):not(#___) .cadmin .table-bordered th,
 html:not(#__):not(#___) .cadmin .table-bordered td {
   border: 1px solid #e7e7ed;
 }
+html:not(#__):not(#___) .cadmin .table-head-bordered thead th,
+html:not(#__):not(#___) .cadmin .table-head-bordered thead td {
+  border-left: 1px solid #e7e7ed;
+}
+html:not(#__):not(#___) .cadmin .table-head-bordered thead th:first-child,
+html:not(#__):not(#___) .cadmin .table-head-bordered thead td:first-child {
+  border-left-width: 0;
+}
 html:not(#__):not(#___) .cadmin .table-borderless th,
 html:not(#__):not(#___) .cadmin .table-borderless td,
 html:not(#__):not(#___) .cadmin .table-borderless thead th,
 html:not(#__):not(#___) .cadmin .table-borderless tbody + tbody {
   border: 0;
 }
-html:not(#__):not(#___) .cadmin .table-striped tbody tr:nth-of-type(odd) td,
-html:not(#__):not(#___) .cadmin .table-striped tbody tr:nth-of-type(odd) th {
+html:not(#__):not(#___) .cadmin .table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider),
+html:not(#__):not(#___) .cadmin .table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) td,
+html:not(#__):not(#___) .cadmin .table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) th {
   background-color: #f7f8f9;
 }
 html:not(#__):not(#___) .cadmin .table-hover tbody tr:hover {
@@ -16596,10 +16636,6 @@ html:not(#__):not(#___) .cadmin tr.table-focus td:last-child::after {
 html:not(#__):not(#___) .cadmin td.table-focus {
   box-shadow: inset 0 0 0 2px #528eff, inset 0 0 0 4px #fff;
 }
-html:not(#__):not(#___) .cadmin .table-striped tbody .table-disabled:nth-of-type(odd) td,
-html:not(#__):not(#___) .cadmin .table-striped tbody .table-disabled:nth-of-type(odd) th {
-  background-color: #fff;
-}
 html:not(#__):not(#___) .cadmin .table .thead-dark th {
   background-color: #393a4a;
   border-color: #4a4b60;
@@ -16622,7 +16658,9 @@ html:not(#__):not(#___) .cadmin .table-dark thead th {
 html:not(#__):not(#___) .cadmin .table-dark.table-bordered {
   border-width: 0;
 }
-html:not(#__):not(#___) .cadmin .table-dark.table-striped tbody tr:nth-of-type(odd) {
+html:not(#__):not(#___) .cadmin .table-dark.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider),
+html:not(#__):not(#___) .cadmin .table-dark.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) th,
+html:not(#__):not(#___) .cadmin .table-dark.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) td {
   background-color: rgba(255, 255, 255, 0.05);
 }
 html:not(#__):not(#___) .cadmin .table-dark.table-hover tbody tr:hover {
@@ -16876,10 +16914,10 @@ html:not(#__):not(#___) .cadmin .table-list tfoot td {
 }
 html:not(#__):not(#___) .cadmin .table-list .table-divider th,
 html:not(#__):not(#___) .cadmin .table-list .table-divider td {
-  padding-bottom: 7px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 7px;
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 16px;
+  padding-top: 8px;
 }
 html:not(#__):not(#___) .cadmin .table-list .table-active {
   background-color: #f0f5ff;
@@ -16921,8 +16959,9 @@ html:not(#__):not(#___) .cadmin .table.table-list.table-bordered td:first-child,
 html:not(#__):not(#___) .cadmin .table.table-list.table-bordered .table-column-start {
   border-left-width: 0;
 }
-html:not(#__):not(#___) .cadmin .table-list.table-striped tbody tr:nth-of-type(odd) td,
-html:not(#__):not(#___) .cadmin .table-list.table-striped tbody tr:nth-of-type(odd) th {
+html:not(#__):not(#___) .cadmin .table-list.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider),
+html:not(#__):not(#___) .cadmin .table-list.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) td,
+html:not(#__):not(#___) .cadmin .table-list.table-striped tbody tr:nth-of-type(odd):not(.table-active):not(.table-disabled):not(.table-divider) th {
   background-color: #f7f8f9;
 }
 html:not(#__):not(#___) .cadmin .table-list.table-hover tbody tr:hover {
@@ -16943,11 +16982,6 @@ html:not(#__):not(#___) .cadmin .table-list.table-hover .table-disabled {
 html:not(#__):not(#___) .cadmin .table-list.table-hover .table-disabled:hover {
   background-color: #fff;
 }
-html:not(#__):not(#___) .cadmin .table-list.table-striped tbody .table-disabled:nth-of-type(odd),
-html:not(#__):not(#___) .cadmin .table-list.table-striped tbody .table-disabled:nth-of-type(odd) td,
-html:not(#__):not(#___) .cadmin .table-list.table-striped tbody .table-disabled:nth-of-type(odd) th {
-  background-color: #fff;
-}
 html:not(#__):not(#___) .cadmin .table-list-title {
   color: #272833;
   font-size: 14px;
@@ -17124,16 +17158,6 @@ html:not(#__):not(#___) .cadmin .thead-valign-top thead td,
 html:not(#__):not(#___) .cadmin .thead-valign-top thead th {
   vertical-align: top;
 }
-html:not(#__):not(#___) .cadmin .table-nested-rows th:first-child,
-html:not(#__):not(#___) .cadmin .table-nested-rows td:first-child,
-html:not(#__):not(#___) .cadmin .table-nested-rows .table-column-start {
-  padding-left: 20px;
-}
-html:not(#__):not(#___) .cadmin .table-nested-rows th:last-child,
-html:not(#__):not(#___) .cadmin .table-nested-rows td:last-child,
-html:not(#__):not(#___) .cadmin .table-nested-rows .table-column-end {
-  padding-right: 20px;
-}
 html:not(#__):not(#___) .cadmin .table-nested-rows .autofit-col {
   padding-left: 2px;
   padding-right: 2px;
@@ -18184,7 +18208,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::befor
   left: 0;
   position: absolute;
   top: 0;
-  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, right 100ms ease-in;
+  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;
   width: 48px;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -18209,7 +18233,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::after
   left: 4px;
   position: absolute;
   top: 4px;
-  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, right 100ms ease-in;
+  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;
   width: 16px;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -18222,7 +18246,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::before {
-  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, right 100ms ease-in;
+  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) {
   html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before {
@@ -18236,7 +18260,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;
-  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, right 100ms ease-in;
+  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;
   white-space: nowrap;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -18256,7 +18280,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggl
   text-align: center;
   text-indent: 0;
   top: 4px;
-  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, right 100ms ease-in;
+  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;
   width: 16px;
   z-index: 1;
 }
@@ -18426,6 +18450,55 @@ html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-che
 html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-label {
   margin-right: 8px;
 }
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .simple-toggle-switch .toggle-switch-label, html:not(#__):not(#___) .cadmin .simple-toggle-switch.toggle-switch-sm .toggle-switch-label {
+  max-width: calc(100% - 38px);
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check {
+  height: 16px;
+  width: 30px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar {
+  height: 16px;
+  line-height: 16px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar::before {
+  width: 30px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar::after {
+  bottom: 0;
+  height: 12px;
+  left: 2px;
+  top: 2px;
+  width: 12px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
+  min-width: 30px;
+  max-width: 30px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
+  margin-left: 38px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
+  font-size: 8px;
+  height: 16px;
+  left: 0;
+  line-height: 16px;
+  top: 0px;
+  width: 16px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
+  left: 13px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check:checked ~ .toggle-switch-bar::after {
+  left: 16px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
+  left: 14px;
+}
+html:not(#__):not(#___) .cadmin .toggle-switch-sm .toggle-switch-label {
+  font-size: 12px;
+  max-width: calc(100% - 38px);
+}
 html:not(#__):not(#___) .cadmin .tooltip {
   display: block;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;