smart-webcomponents-react/source/styles/default/smart.validator.css

[](https://jqwidgets.com/license/)

@charset "UTF-8";
/* Error and Success styles */
.smart-validation-error:not(smart-check-box) > div.smart-container:after,
.smart-validation-success:not(smart-check-box) > div.smart-container:after {
  pointer-events: none;
  font-weight: bold;
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.smart-validation-error:not(.underlined):not(.outlined) {
  border-color: var(--smart-error) !important;
  outline: none;
}
.smart-validation-error:not(.underlined):not(.outlined) input,
.smart-validation-error:not(.underlined):not(.outlined) span {
  border-color: var(--smart-error) !important;
  outline: none;
}
.smart-validation-error:not(smart-check-box) > div.smart-container:after {
  background-color: var(--smart-error);
  color: var(--smart-error-color);
  content: "!";
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  transform: translate(-50%, -50%);
}
.smart-validation-error.smart-element:not(.outlined):not(.underlined) .smart-hint::after {
  background-color: var(--smart-error);
}

.smart-validation-success:not(smart-check-box) > div.smart-container:after {
  background-color: var(--smart-success);
  color: var(--smart-success-color);
  content: "✓";
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  transform: translate(-50%, -50%);
}
.smart-validation-success.smart-element:not(.outlined):not(.underlined) .smart-hint::after {
  background-color: var(--smart-success);
}

input[type=checkbox].smart-validation-error,
input[type=radio].smart-validation-error {
  outline: auto;
  outline-color: var(--smart-error);
}

input.smart-validation-error {
  border-style: solid;
  border-width: 1px;
}

.smart-success-label-like-after-element:after,
.smart-error-label-like-after-element:after {
  pointer-events: none;
  font-weight: bold;
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  top: 50%;
  position: absolute;
  left: calc(50% + 15px);
  transform: translate(-50%, -50%);
}

.smart-success-label-like-after-element {
  position: relative;
}
.smart-success-label-like-after-element:after {
  background-color: var(--smart-success);
  color: var(--smart-success-color);
  content: "✓";
}

.smart-error-label-like-after-element {
  position: relative;
}
.smart-error-label-like-after-element:after {
  background-color: var(--smart-error);
  color: var(--smart-error-color);
  content: "!";
}

.smart-validation-summary {
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  color: var(--smart-error);
}
.smart-validation-summary span {
  display: block;
  margin-top: 5px;
}

.smart-error-holder {
  position: absolute;
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  background-color: var(--smart-error);
  color: var(--smart-error-color);
  padding: 10px;
  pointer-events: none;
  z-index: var(--smart-editor-drop-down-z-index);
  margin-top: 10px;
}
.smart-error-holder.smart-error-hint-position-right {
  white-space: nowrap;
}