@ncds/ui-admin 1.8.21-alpha.0 → 1.8.21-alpha.2

package/dist/ui-admin/assets/styles/style.css

@@ -67,9 +67,6 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
-  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
-  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
-  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -194,20 +191,15 @@ body {
   line-height: var(--line-heights-xs);
 }
 
-ol,
-ul {
+ol, ul {
   list-style: none;
 }
 
-blockquote,
-q {
+blockquote, q {
   quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote:before, blockquote:after, q:before, q:after {
   content: "";
   content: none;
 }
@@ -221,10 +213,7 @@ fieldset {
   border: 0;
 }
 
-input,
-button,
-select,
-textarea {
+input, button, select, textarea {
   font: inherit;
   color: inherit;
 }
@@ -334,7 +323,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-100);
+  box-shadow: var(--shadow-sm-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -380,7 +369,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-xs-focused-4px-gray-100);
+  box-shadow: var(--shadow-sm-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -966,7 +955,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1731,6 +1720,12 @@ button {
 .ncua-input__password-icon {
   color: var(--gray-300);
 }
+.ncua-input__slot-icon {
+  color: var(--gray-300);
+}
+.ncua-input.has-value .ncua-input__slot-icon, .ncua-input:focus-within .ncua-input__slot-icon {
+  color: var(--gray-600);
+}
 .ncua-input__left-icon {
   margin-right: 8px;
 }
@@ -1741,7 +1736,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1758,6 +1753,12 @@ button {
 .ncua-input.is-disabled .ncua-input__destructive-icon {
   display: none;
 }
+.ncua-input.is-disabled .ncua-input__password-icon {
+  display: none;
+}
+.ncua-input.is-disabled .ncua-input__slot-icon {
+  color: var(--gray-300);
+}
 .ncua-input.is-disabled .ncua-input__button {
   color: var(--gray-200);
 }
@@ -1820,6 +1821,33 @@ button {
   margin-left: -1px;
 }
 
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--xs {
+  line-height: var(--line-heights-xs);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--sm {
+  line-height: var(--line-heights-sm);
+  padding: 6px 12px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
+.ncua-input__trailing-text-wrap .ncua-input__field:has(+ .ncua-input__trailing-text) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
 .ncua-input__trailing-button .ncua-input__button {
   display: flex;
   align-items: center;
@@ -1898,7 +1926,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -2923,7 +2951,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3425,7 +3453,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -3747,7 +3775,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);