@clayui/css 3.40.1 → 3.41.0

package/lib/css/atlas.css

@@ -161,14 +161,12 @@ sup {
 
 a {
   color: #0b5fff;
-  cursor: pointer;
   text-decoration: none;
 }
 a:hover {
   color: #004ad7;
   text-decoration: underline;
 }
-
 pre,
 code,
 kbd,
@@ -7248,8 +7246,25 @@ select.form-control[size] {
 select.form-control[size]:focus, select.form-control[size].focus {
   background-image: none;
 }
+select.form-control[size]:focus > option:checked, select.form-control[size].focus > option:checked {
+  background-image: linear-gradient(#ffa700, #ffa700);
+  color: #fff;
+  filter: invert(100%);
+}
 select.form-control[size] option {
-  padding: 0.25rem 0.5rem;
+  padding: 0.4375rem 0.5rem;
+}
+select.form-control[size] option:checked {
+  background-image: linear-gradient(#e7e7ed, #e7e7ed);
+}
+@-moz-document url-prefix() {
+  select.form-control[size]:focus > option:checked, select.form-control[size].focus > option:checked {
+    background-image: linear-gradient(#004ad7, #004ad7);
+    filter: invert(0);
+  }
+  select.form-control[size] option {
+    padding: 0.40625rem 0.5rem;
+  }
 }
 
 select.form-control[multiple] {
@@ -7263,8 +7278,25 @@ select.form-control[multiple] {
 select.form-control[multiple]:focus, select.form-control[multiple].focus {
   background-image: none;
 }
+select.form-control[multiple]:focus > option:checked, select.form-control[multiple].focus > option:checked {
+  background-image: linear-gradient(#ffa700, #ffa700);
+  color: #fff;
+  filter: invert(100%);
+}
 select.form-control[multiple] option {
-  padding: 0.25rem 0.5rem;
+  padding: 0.4375rem 0.5rem;
+}
+select.form-control[multiple] option:checked {
+  background-image: linear-gradient(#e7e7ed, #e7e7ed);
+}
+@-moz-document url-prefix() {
+  select.form-control[multiple]:focus > option:checked, select.form-control[multiple].focus > option:checked {
+    background-image: linear-gradient(#004ad7, #004ad7);
+    filter: invert(0);
+  }
+  select.form-control[multiple] option {
+    padding: 0.40625rem 0.5rem;
+  }
 }
 
 textarea.form-control,
@@ -7736,6 +7768,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.4375rem;
   margin-left: -0.75rem;
@@ -7939,6 +7974,9 @@ button.link-outline {
   opacity: 0.4;
   box-shadow: none;
 }
+.component-action:disabled:active, .component-action.disabled:active {
+  pointer-events: none;
+}
 .component-action[type]:focus {
   outline: 0;
 }
@@ -9606,6 +9644,7 @@ label.custom-control-label {
 
 .form-feedback-group {
   width: 100%;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
@@ -9613,6 +9652,7 @@ label.custom-control-label {
   font-size: 0.875rem;
   font-weight: 600;
   margin-top: 0.25rem;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
@@ -9630,6 +9670,7 @@ label.custom-control-label {
   font-size: 0.875rem;
   font-weight: 600;
   margin-top: 0.25rem;
+  overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
@@ -9695,23 +9736,26 @@ label.custom-control-label {
 .has-error .input-group-item.focus {
   box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
 }
-.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 {
   background-color: #feefef;
   border-color: #f48989;
 }
-.has-error .input-group-item .input-group-inset:focus {
-  box-shadow: none;
-}
-.has-error .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+.has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
   background-color: #feefef;
   border-color: #f48989;
 }
-.has-error .input-group .input-group-inset-item {
+.has-error .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #feefef;
   border-color: #f48989;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
+.has-error .input-group-item .input-group-inset:focus {
+  box-shadow: none;
+}
+.has-error .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+  background-color: #feefef;
+  border-color: #f48989;
+}
 
 .has-warning .custom-control-label,
 .has-warning .form-check-label {
@@ -9751,23 +9795,26 @@ label.custom-control-label {
 .has-warning .input-group-item.focus {
   box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
 }
-.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 {
   background-color: #fff4ec;
   border-color: #ff8f39;
 }
-.has-warning .input-group-item .input-group-inset:focus {
-  box-shadow: none;
-}
-.has-warning .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+.has-warning .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
   background-color: #fff4ec;
   border-color: #ff8f39;
 }
-.has-warning .input-group .input-group-inset-item {
+.has-warning .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #fff4ec;
   border-color: #ff8f39;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
+.has-warning .input-group-item .input-group-inset:focus {
+  box-shadow: none;
+}
+.has-warning .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+  background-color: #fff4ec;
+  border-color: #ff8f39;
+}
 
 .has-success .custom-control-label,
 .has-success .form-check-label {
@@ -9807,23 +9854,26 @@ label.custom-control-label {
 .has-success .input-group-item.focus {
   box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
 }
-.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 {
   background-color: #edf9f0;
   border-color: #5aca75;
 }
-.has-success .input-group-item .input-group-inset:focus {
-  box-shadow: none;
-}
-.has-success .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+.has-success .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
   background-color: #edf9f0;
   border-color: #5aca75;
 }
-.has-success .input-group .input-group-inset-item {
+.has-success .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #edf9f0;
   border-color: #5aca75;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
+.has-success .input-group-item .input-group-inset:focus {
+  box-shadow: none;
+}
+.has-success .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
+  background-color: #edf9f0;
+  border-color: #5aca75;
+}
 
 .input-group > .form-control,
 .input-group > .form-control-plaintext,
@@ -11831,6 +11881,9 @@ label.custom-control-label {
   cursor: not-allowed;
   box-shadow: none;
 }
+.nav-link:disabled:active, .nav-link.disabled:active {
+  pointer-events: none;
+}
 .nav-link > .c-inner {
   margin-bottom: -0.625rem;
   margin-left: -1rem;
@@ -20092,57 +20145,16 @@ 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% - 56px
-		);
-}
-@media (max-width: 767.98px) {
-  .simple-toggle-switch .toggle-switch-label {
-    max-width: calc(
-				100% - 48px
-			);
-  }
-}
-
-.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;
   font-weight: 600;
   max-width: 100%;
   position: relative;
 }
+.toggle-switch.disabled {
+  cursor: not-allowed;
+}
 .toggle-switch.disabled .toggle-switch-label {
   color: #a7a9bc;
   cursor: not-allowed;
@@ -20150,7 +20162,6 @@ label.toggle-switch.disabled {
 .toggle-switch.disabled .toggle-switch-text {
   color: #a7a9bc;
 }
-
 .toggle-switch-check-bar {
   display: inline-flex;
   position: relative;
@@ -20170,7 +20181,6 @@ label.toggle-switch.disabled {
 .toggle-switch-bar .button-icon {
   font-size: 0.625rem;
 }
-
 .toggle-switch-check {
   bottom: 0;
   font-size: 62.5%;
@@ -20180,13 +20190,7 @@ label.toggle-switch.disabled {
   width: 48px;
   z-index: 2;
 }
-@media (max-width: 767.98px) {
-  .toggle-switch-check {
-    height: 24px;
-    width: 40px;
-  }
-}
-.toggle-switch-check:empty ~ .toggle-switch-bar {
+.toggle-switch-check ~ .toggle-switch-bar {
   display: inline-flex;
   font-size: 0.625rem;
   height: 24px;
@@ -20194,9 +20198,31 @@ 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 {
+.toggle-switch-check ~ .toggle-switch-bar::before {
+  background-color: #a7a9bc;
+  border-color: #a7a9bc;
+  border-radius: 20px;
+  border-style: solid;
+  border-width: 1px;
+  bottom: 0;
+  content: " ";
+  display: block;
+  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: 48px;
+}
+@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: #fff;
   border-radius: 50%;
@@ -20212,31 +20238,31 @@ label.toggle-switch.disabled {
   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: 16px;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar:before {
-  background-color: #a7a9bc;
-  border-color: #a7a9bc;
-  border-radius: 20px;
-  border-style: solid;
-  border-width: 1px;
-  bottom: 0;
-  content: " ";
-  display: block;
-  left: 0;
-  position: absolute;
-  top: 0;
+@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;
-  width: 48px;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after {
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before {
+    transition: none;
+  }
+}
+.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;
   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: #fff;
   left: 4px;
   line-height: 16px;
@@ -20248,138 +20274,180 @@ label.toggle-switch.disabled {
   width: 16px;
   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: 4px;
   opacity: 0;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
+.toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
   left: 28px;
 }
-.toggle-switch-check:empty ~ .toggle-switch-bar .button-icon {
+.toggle-switch-check ~ .toggle-switch-bar .button-icon {
   color: #272833;
 }
-.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;
-  border-color: #fff;
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 1px;
-  left: 28px;
+.toggle-switch-check:focus ~ .toggle-switch-bar::before {
+  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
+}
+.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 {
+.toggle-switch-check:checked ~ .toggle-switch-bar::before {
   background-color: #0b5fff;
   border-color: #0b5fff;
   border-radius: 20px;
   border-style: solid;
   border-width: 1px;
 }
-.toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after {
+.toggle-switch-check:checked ~ .toggle-switch-bar::after {
+  background-color: #fff;
+  border-color: #fff;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  left: 28px;
+}
+.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: #0b5fff;
-  left: 28px;
-}
-.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:focus ~ .toggle-switch-bar:before {
-  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
-}
-
-.toggle-switch-label {
-  display: block;
-  margin-bottom: 2px;
-}
-
-.toggle-switch-text {
-  display: block;
-  font-size: 0.75rem;
-}
-
-.toggle-switch-text-left {
-  display: inline-flex;
-  line-height: 24px;
-  margin-right: 8px;
+.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
+  color: #0b5fff;
+  left: 28px;
 }
-
-.toggle-switch-text-right {
-  display: inline-flex;
-  line-height: 24px;
-  margin-left: 8px;
+.toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on {
+  opacity: 1;
 }
-
 @media (max-width: 767.98px) {
-  .toggle-switch-bar .toggle-switch-handle {
-    min-width: 40px;
-  }
-  .toggle-switch-bar .toggle-switch-icon {
-    font-size: 0.625rem;
-  }
-  .toggle-switch-bar .button-icon {
-    font-size: 0.625rem;
+  .toggle-switch-check {
+    height: 24px;
+    width: 40px;
   }
-
-  .toggle-switch-check:empty ~ .toggle-switch-bar {
+  .toggle-switch-check ~ .toggle-switch-bar {
     height: 24px;
     line-height: 24px;
     text-indent: 0;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar:after {
+  .toggle-switch-check ~ .toggle-switch-bar::before {
+    width: 40px;
+  }
+  .toggle-switch-check ~ .toggle-switch-bar::after {
     bottom: 4px;
     height: 16px;
     left: 4px;
     top: 4px;
     width: 16px;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar:before {
-    width: 40px;
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
+    min-width: 40px;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
     margin-left: 48px;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
+    font-size: 0.625rem;
     left: 4px;
     line-height: 16px;
     top: 4px;
     width: 16px;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on {
     left: 4px;
   }
-  .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
+  .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
     left: 20px;
   }
-  .toggle-switch-check:checked ~ .toggle-switch-bar:after {
+  .toggle-switch-check ~ .toggle-switch-bar .button-icon {
+    font-size: 0.625rem;
+  }
+  .toggle-switch-check:checked ~ .toggle-switch-bar::after {
     left: 20px;
   }
-  .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after {
+  .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
     margin-left: 48px;
   }
   .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
     left: 20px;
   }
+}
+
+.toggle-switch-label {
+  display: block;
+  margin-bottom: 2px;
+}
+
+.toggle-switch-text {
+  display: block;
+  font-size: 0.75rem;
+}
+
+.toggle-switch-text-left {
+  display: inline-flex;
+  line-height: 24px;
+  margin-right: 8px;
+}
+@media (max-width: 767.98px) {
+  .toggle-switch-text-left {
+    line-height: 24px;
+  }
+}
 
-  .toggle-switch-text-left,
 .toggle-switch-text-right {
+  display: inline-flex;
+  line-height: 24px;
+  margin-left: 8px;
+}
+@media (max-width: 767.98px) {
+  .toggle-switch-text-right {
     line-height: 24px;
   }
 }
+
+.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% - 56px 				);
+}
+@media (max-width: 767.98px) {
+  .simple-toggle-switch .toggle-switch-label {
+    max-width: calc( 						100% - 48px 					);
+  }
+}
+.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: 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";