@clayui/css 3.40.1 → 3.41.0

package/lib/css/base.css

@@ -154,14 +154,12 @@ sup {
 
 a {
   color: #007bff;
-  cursor: pointer;
   text-decoration: none;
 }
 a:hover {
   color: #0056b3;
   text-decoration: underline;
 }
-
 pre,
 code,
 kbd,
@@ -7050,7 +7048,6 @@ select.form-control[size]:focus, select.form-control[size].focus {
 select.form-control[size] option {
   padding: 0.25rem;
 }
-
 select.form-control[multiple] {
   background-image: none;
   height: auto;
@@ -7065,7 +7062,6 @@ select.form-control[multiple]:focus, select.form-control[multiple].focus {
 select.form-control[multiple] option {
   padding: 0.25rem;
 }
-
 textarea.form-control,
 textarea.form-control-plaintext,
 .form-control.form-control-textarea {
@@ -7480,6 +7476,9 @@ button.link-outline {
 .link-outline:hover {
   text-decoration: none;
 }
+.link-outline:disabled:active, .link-outline.disabled:active {
+  pointer-events: none;
+}
 .link-outline > .c-inner {
   margin-bottom: -0.25rem;
   margin-left: -0.5rem;
@@ -7640,6 +7639,9 @@ button.link-outline {
   cursor: not-allowed;
   opacity: 0.65;
 }
+.component-action:disabled:active, .component-action.disabled:active {
+  pointer-events: none;
+}
 .component-action[type]:focus {
   box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
   outline: 0;
@@ -9208,12 +9210,14 @@ label.custom-control-label {
 
 .form-feedback-group {
   width: 100%;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
 .form-feedback-item {
   font-size: 80%;
   margin-top: 0.25rem;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
@@ -9230,6 +9234,7 @@ label.custom-control-label {
   display: block;
   font-size: 0.875rem;
   margin-top: 0.25rem;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
@@ -9279,8 +9284,13 @@ label.custom-control-label {
 .has-error .input-group-item.focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
-.has-error .input-group-item.focus .form-control,
-.has-error .input-group-item.focus .input-group-inset-item {
+.has-error .input-group-item.focus .input-group-inset {
+  border-color: #dc3545;
+}
+.has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
+  border-color: #dc3545;
+}
+.has-error .input-group-item .input-group-inset ~ .input-group-inset-item {
   border-color: #dc3545;
 }
 .has-error .input-group-item .input-group-inset:focus {
@@ -9289,9 +9299,6 @@ label.custom-control-label {
 .has-error .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
   border-color: #dc3545;
 }
-.has-error .input-group .input-group-inset-item {
-  border-color: #dc3545;
-}
 
 .has-warning .custom-control-label,
 .has-warning .form-check-label {
@@ -9321,8 +9328,13 @@ label.custom-control-label {
 .has-warning .input-group-item.focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
-.has-warning .input-group-item.focus .form-control,
-.has-warning .input-group-item.focus .input-group-inset-item {
+.has-warning .input-group-item.focus .input-group-inset {
+  border-color: #ffc107;
+}
+.has-warning .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
+  border-color: #ffc107;
+}
+.has-warning .input-group-item .input-group-inset ~ .input-group-inset-item {
   border-color: #ffc107;
 }
 .has-warning .input-group-item .input-group-inset:focus {
@@ -9331,9 +9343,6 @@ label.custom-control-label {
 .has-warning .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
   border-color: #ffc107;
 }
-.has-warning .input-group .input-group-inset-item {
-  border-color: #ffc107;
-}
 
 .has-success .custom-control-label,
 .has-success .form-check-label {
@@ -9363,8 +9372,13 @@ label.custom-control-label {
 .has-success .input-group-item.focus {
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }
-.has-success .input-group-item.focus .form-control,
-.has-success .input-group-item.focus .input-group-inset-item {
+.has-success .input-group-item.focus .input-group-inset {
+  border-color: #28a745;
+}
+.has-success .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
+  border-color: #28a745;
+}
+.has-success .input-group-item .input-group-inset ~ .input-group-inset-item {
   border-color: #28a745;
 }
 .has-success .input-group-item .input-group-inset:focus {
@@ -9373,9 +9387,6 @@ label.custom-control-label {
 .has-success .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
   border-color: #28a745;
 }
-.has-success .input-group .input-group-inset-item {
-  border-color: #28a745;
-}
 
 .input-group > .form-control,
 .input-group > .form-control-plaintext,
@@ -11289,6 +11300,9 @@ label.custom-control-label {
   color: #6c757d;
   cursor: not-allowed;
 }
+.nav-link:disabled:active, .nav-link.disabled:active {
+  pointer-events: none;
+}
 .nav-link > .c-inner {
   margin-bottom: -0.5rem;
   margin-left: -1rem;
@@ -18881,49 +18895,15 @@ caption {
   max-width: 75px;
 }
 
-.simple-toggle-switch.toggle-switch {
-  align-items: center;
-  display: inline-flex;
-}
-.simple-toggle-switch .toggle-switch-check + .toggle-switch-label {
-  margin-right: 0.5rem;
-}
-.simple-toggle-switch .toggle-switch-label + .toggle-switch-check-bar {
-  margin-left: 0.5rem;
-}
-.simple-toggle-switch .toggle-switch-label {
-  line-height: 1;
-  margin-bottom: 0;
-  max-width: calc(
-			100% - 58px
-		);
-}
-
-.simple-toggle-switch-reverse .toggle-switch-label {
-  margin-right: 0.5rem;
-}
-.simple-toggle-switch-reverse .toggle-switch-check-bar {
-  order: 5;
-}
-.simple-toggle-switch-reverse .toggle-switch-check-bar .toggle-switch-bar {
-  order: 0;
-}
-.simple-toggle-switch-reverse .toggle-switch-bar {
-  order: 5;
-}
-
-label.toggle-switch {
-  cursor: pointer;
-}
-label.toggle-switch.disabled {
-  cursor: not-allowed;
-}
-
 .toggle-switch {
+  cursor: pointer;
   display: inline-block;
   max-width: 100%;
   position: relative;
 }
+.toggle-switch.disabled {
+  cursor: not-allowed;
+}
 .toggle-switch.disabled .toggle-switch-label {
   color: #6c757d;
   cursor: not-allowed;
@@ -18931,7 +18911,6 @@ label.toggle-switch.disabled {
 .toggle-switch.disabled .toggle-switch-text {
   color: #6c757d;
 }
-
 .toggle-switch-check-bar {
   display: inline-flex;
   position: relative;
@@ -18951,7 +18930,6 @@ label.toggle-switch.disabled {
 .toggle-switch-bar .button-icon {
   font-size: 0.75rem;
 }
-
 .toggle-switch-check {
   bottom: 0;
   font-size: 62.5%;
@@ -18961,7 +18939,7 @@ label.toggle-switch.disabled {
   width: 50px;
   z-index: 2;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar {
+.toggle-switch-check ~ .toggle-switch-bar {
   display: inline-flex;
   font-size: 0.75rem;
   height: 25px;
@@ -18969,49 +18947,71 @@ label.toggle-switch.disabled {
   position: relative;
   text-indent: 0;
   -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
   user-select: none;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar:after {
-  background-color: #fff;
+.toggle-switch-check ~ .toggle-switch-bar::before {
+  background-color: #e9ecef;
   border-color: #ced4da;
-  border-radius: 3px 0 0 3px;
+  border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   bottom: 0;
-  content: "";
+  content: " ";
   display: block;
-  height: 25px;
   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;
-  width: 25px;
+  width: 50px;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar:before {
-  background-color: #e9ecef;
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar::before {
+    transition: none;
+  }
+}
+.toggle-switch-check ~ .toggle-switch-bar::after {
+  background-color: #fff;
   border-color: #ced4da;
-  border-radius: 3px;
+  border-radius: 3px 0 0 3px;
   border-style: solid;
   border-width: 1px;
   bottom: 0;
-  content: " ";
+  content: "";
   display: block;
+  height: 25px;
   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;
-  width: 50px;
+  width: 25px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar::after {
+    transition: none;
+  }
+}
+.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;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before {
+    transition: none;
+  }
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after {
+.toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
   content: attr(data-label-off);
   margin-left: 58px;
   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;
   white-space: nowrap;
 }
-.toggle-switch-check:empty ~ .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;
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
+    transition: none;
+  }
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon {
+.toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
   color: #495057;
   left: 0;
   line-height: 25px;
@@ -19023,58 +19023,116 @@ label.toggle-switch.disabled {
   width: 25px;
   z-index: 1;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on {
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
+    transition: none;
+  }
+}
+.toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on {
   left: 0;
   opacity: 0;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
+.toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
   left: 25px;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .button-icon {
+.toggle-switch-check ~ .toggle-switch-bar .button-icon {
   color: #495057;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .button-icon-on {
+.toggle-switch-check ~ .toggle-switch-bar .button-icon-on {
   opacity: 0;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar:after {
-  background-color: #fff;
+.toggle-switch-check:focus ~ .toggle-switch-bar::before {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+.toggle-switch-check[disabled] ~ .toggle-switch-bar, .toggle-switch-check:disabled ~ .toggle-switch-bar {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.toggle-switch-check:checked ~ .toggle-switch-bar::before {
+  background-color: #007bff;
   border-color: #007bff;
-  border-radius: 0 3px 3px 0;
+  border-radius: 3px;
   border-style: solid;
   border-width: 1px;
-  left: 25px;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar:before {
-  background-color: #007bff;
+.toggle-switch-check:checked ~ .toggle-switch-bar::after {
+  background-color: #fff;
   border-color: #007bff;
-  border-radius: 3px;
+  border-radius: 0 3px 3px 0;
   border-style: solid;
   border-width: 1px;
+  left: 25px;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after {
+.toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
   content: attr(data-label-on);
 }
 .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon {
   color: #fff;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
-  color: #007bff;
-  left: 25px;
-}
-.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on,
 .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-on {
   opacity: 1;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-off,
 .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-off {
   opacity: 0;
 }
-.toggle-switch-check:disabled ~ .toggle-switch-bar, .toggle-switch-check.disabled ~ .toggle-switch-bar {
-  cursor: not-allowed;
-  opacity: 0.4;
+.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
+  color: #007bff;
+  left: 25px;
 }
-.toggle-switch-check:focus ~ .toggle-switch-bar:before {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on {
+  opacity: 1;
+}
+@media (max-width: 767.98px) {
+  .toggle-switch-check {
+    height: 25px;
+    width: 50px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar {
+    height: 25px;
+    line-height: 25px;
+    text-indent: 0;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar::before {
+    width: 50px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar::after {
+    bottom: 0;
+    height: 25px;
+    left: 0;
+    top: 0;
+    width: 25px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
+    min-width: 50px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
+    margin-left: 58px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
+    font-size: 0.75rem;
+    left: 0;
+    line-height: 25px;
+    top: 0;
+    width: 25px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on {
+    left: 0;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
+    left: 25px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar .button-icon {
+    font-size: 0.75rem;
+  }
+  .toggle-switch-check:checked ~ .toggle-switch-bar::after {
+    left: 25px;
+  }
+  .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
+    margin-left: 58px;
+  }
+  .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
+    left: 25px;
+  }
 }
 
 .toggle-switch-label {
@@ -19092,13 +19150,53 @@ label.toggle-switch.disabled {
   line-height: 25px;
   margin-right: 8px;
 }
+@media (max-width: 767.98px) {
+  .toggle-switch-text-left {
+    line-height: 25px;
+  }
+}
 
 .toggle-switch-text-right {
   display: inline-flex;
   line-height: 25px;
   margin-left: 8px;
 }
+@media (max-width: 767.98px) {
+  .toggle-switch-text-right {
+    line-height: 25px;
+  }
+}
 
+.simple-toggle-switch {
+  align-items: center;
+  display: inline-flex;
+}
+.simple-toggle-switch .toggle-switch-label {
+  line-height: 1;
+  margin-bottom: 0;
+  max-width: calc( 					100% - 58px 				);
+}
+@media (max-width: 767.98px) {
+  .simple-toggle-switch .toggle-switch-label {
+    max-width: calc( 						100% - 58px 					);
+  }
+}
+.simple-toggle-switch .toggle-switch-check + .toggle-switch-label {
+  margin-right: 0.5rem;
+}
+.simple-toggle-switch .toggle-switch-label + .toggle-switch-check-bar {
+  margin-left: 0.5rem;
+}
+
+.simple-toggle-switch-reverse .toggle-switch-check-bar {
+  order: 5;
+}
+.simple-toggle-switch-reverse .toggle-switch-check ~ .toggle-switch-bar {
+  order: 5;
+}
+.simple-toggle-switch-reverse .toggle-switch-label {
+  margin-right: 0.5rem;
+}
 .tooltip {
   display: block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";