@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/textfield/textfield.css

@@ -0,0 +1,502 @@
+:root,
+.sdds-mode-light {
+  --sdds-textfield-background-primary: var(--sdds-grey-50);
+  --sdds-textfield-background-secondary: var(--sdds-white);
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-color: var(--sdds-grey-868);
+  --sdds-textfield-placeholder: var(--sdds-grey-500);
+  --sdds-textfield-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-textfield-background-disabled-secondary: var(--sdds-white);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+  --sdds-textfield-color-disabled: var(--sdds-grey-400);
+  --sdds-textfield-placeholder-disabled: var(--sdds-grey-400);
+  --sdds-textfield-label-disabled: var(--sdds-grey-400);
+  --sdds-textfield-ps-color-disabled: var(--sdds-grey-400);
+  --sdds-textfield-label-color: var(--sdds-grey-958);
+  --sdds-textfield-label-inside-color: var(--sdds-grey-700);
+  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
+  --sdds-textfield-bar: var(--sdds-blue-400);
+  --sdds-textfield-helper: var(--sdds-grey-700);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-helper-error: var(--sdds-negative);
+  --sdds-textfield-bar-error: var(--sdds-negative);
+  --sdds-textfield-icon-error: var(--sdds-negative);
+  --sdds-textfield-textcounter: var(--sdds-grey-700);
+  --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
+  --sdds-textfield-ps-color: var(--sdds-grey-600);
+  --sdds-textfield-resize-icon: var(--sdds-grey-500);
+  --sdds-textfield-background-secondary: var(--sdds-white);
+  --sdds-textfield-border-bottom: var(--sdds-grey-600);
+  --sdds-textfield-border-bottom-hover: var(--sdds-grey-800);
+  --sdds-textfield-border-bottom-success: var(--sdds-grey-958);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-icon-read-only-color: var(--sdds-grey-958);
+  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-958);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
+}
+
+.sdds-mode-dark {
+  --sdds-textfield-background-primary: var(--sdds-grey-900);
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-secondary: var(--sdds-grey-868);
+  --sdds-textfield-color: var(--sdds-grey-200);
+  --sdds-textfield-placeholder: var(--sdds-grey-600);
+  --sdds-textfield-ps-color-disabled: var(--sdds-grey-700);
+  --sdds-textfield-color-disabled: var(--sdds-grey-800);
+  --sdds-textfield-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-textfield-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+  --sdds-textfield-placeholder-disabled: var(--sdds-grey-800);
+  --sdds-textfield-label-disabled: var(--sdds-grey-700);
+  --sdds-textfield-label-color: var(--sdds-grey-100);
+  --sdds-textfield-label-inside-color: var(--sdds-grey-400);
+  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-700);
+  --sdds-textfield-bar: var(--sdds-blue-400);
+  --sdds-textfield-helper: var(--sdds-grey-600);
+  --sdds-textfield-helper-error: var(--sdds-negative);
+  --sdds-textfield-bar-error: var(--sdds-negative);
+  --sdds-textfield-icon-error: var(--sdds-negative);
+  --sdds-textfield-textcounter: var(--sdds-grey-600);
+  --sdds-textfield-textcounter-divider: var(--sdds-grey-700);
+  --sdds-textfield-ps-color: var(--sdds-grey-100);
+  --sdds-textfield-resize-icon: var(--sdds-grey-500);
+  --sdds-textfield-border-bottom: var(--sdds-grey-600);
+  --sdds-textfield-border-bottom-hover: var(--sdds-grey-400);
+  --sdds-textfield-border-bottom-success: var(--sdds-grey-50);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-icon-read-only-color: var(--sdds-grey-100);
+  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-50);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
+}
+
+.sdds-textfield-input {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-textfield-input:disabled {
+  cursor: not-allowed;
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
+}
+.sdds-textfield-input:disabled::placeholder {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-input-md {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input-md::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input-md:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-textfield-input-md:disabled {
+  cursor: not-allowed;
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
+}
+.sdds-textfield-input-md:disabled::placeholder {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-input-sm {
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--sdds-textfield-color);
+  background-color: var(--sdds-textfield-background);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: var(--sdds-spacing-element-16);
+}
+.sdds-textfield-input-sm::placeholder {
+  opacity: 1;
+  color: var(--sdds-textfield-placeholder);
+}
+.sdds-textfield-input-sm:focus::placeholder {
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-textfield-input-sm:disabled {
+  cursor: not-allowed;
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
+}
+.sdds-textfield-input-sm:disabled::placeholder {
+  color: var(--sdds-textfield-placeholder-disabled);
+}
+.sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-container {
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  position: relative;
+  height: 56px;
+  box-sizing: border-box;
+  background-color: var(--sdds-textfield-background);
+  border-bottom: 1px solid var(--sdds-textfield-border-bottom);
+  transition: border-bottom-color 200ms ease;
+}
+.sdds-textfield-container:hover {
+  border-bottom-color: var(--sdds-textfield-border-bottom-hover);
+}
+.sdds-form-textfield-md .sdds-textfield-container {
+  height: 48px;
+}
+.sdds-form-textfield-sm .sdds-textfield-container {
+  height: 40px;
+}
+
+.sdds-textfield-input-container {
+  position: relative;
+  width: 100%;
+}
+
+/* slot[name="sdds-label"]::slotted(*) {
+  @include type-style("detail-05");
+  display: block;
+  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--sdds-textfield-label-color);
+} */
+.sdds-textfield-label-outside > * {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: block;
+  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--sdds-textfield-label-color);
+}
+
+.sdds-textfield-label-inside {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  position: absolute;
+  pointer-events: none;
+  color: var(--sdds-textfield-label-inside-color);
+  left: 16px;
+}
+
+.sdds-form-textfield {
+  display: block;
+  min-width: 208px;
+}
+.sdds-form-textfield-nomin {
+  min-width: auto;
+}
+
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input {
+  padding-top: var(--sdds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ~ .sdds-textfield-label-inside {
+  top: 20px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md {
+  padding-top: var(--sdds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
+  top: 16px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm {
+  padding-top: var(--sdds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
+  top: 16px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder {
+  color: transparent;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--sdds-textfield-placeholder-focus-color);
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input ~ .sdds-textfield-label-inside {
+  font: var(--sdds-detail-07);
+  letter-spacing: var(--sdds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 12px;
+}
+
+.sdds-textfield-bar {
+  position: absolute;
+  width: 100%;
+}
+.sdds-textfield-bar::before, .sdds-textfield-bar::after {
+  content: "";
+  height: 2px;
+  top: 54px;
+  width: 0;
+  position: absolute;
+  background: var(--sdds-textfield-bar);
+  transition: 0.35s ease all;
+}
+.sdds-form-textfield-md .sdds-textfield-bar::before, .sdds-form-textfield-md .sdds-textfield-bar::after {
+  top: 46px;
+}
+.sdds-form-textfield-sm .sdds-textfield-bar::before, .sdds-form-textfield-sm .sdds-textfield-bar::after {
+  top: 40px;
+}
+.sdds-textfield-bar::before {
+  left: 50%;
+}
+.sdds-textfield-bar::after {
+  right: 50%;
+}
+.sdds-textfield-focus .sdds-textfield-bar::before, .sdds-textfield-focus .sdds-textfield-bar::after {
+  width: 50%;
+}
+
+.sdds-textfield-helper {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  flex-basis: 100%;
+  padding-top: var(--sdds-spacing-element-4);
+  color: var(--sdds-textfield-helper);
+}
+.sdds-textfield-helper .sdds-textfield-textcounter {
+  margin-left: auto;
+}
+
+.sdds-form-textfield-disabled .sdds-textfield-container {
+  border-bottom-color: transparent;
+}
+.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix > *,
+.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix > * {
+  color: var(--sdds-textfield-ps-color-disabled);
+}
+.sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
+  color: var(--sdds-textfield-label-disabled);
+}
+
+.sdds-textfield-icon__readonly {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 18px;
+  color: var(--sdds-textfield-icon-read-only-label-color);
+}
+.sdds-textfield-icon__readonly-label {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 48px;
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  padding: 8px;
+  white-space: nowrap;
+  border-radius: 4px 0 4px 4px;
+  background-color: var(--sdds-textfield-icon-read-only-label-background);
+}
+
+.sdds-form-textfield-readonly {
+  pointer-events: none;
+}
+.sdds-form-textfield-readonly .sdds-textfield-icon__readonly {
+  display: block;
+}
+.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover ~ .sdds-textfield-icon__readonly-label {
+  display: block;
+}
+.sdds-form-textfield-readonly .sdds-textfield-input {
+  padding-right: 54px;
+  background-color: transparent;
+}
+
+.sdds-form-textfield-success .sdds-textfield-container {
+  border-bottom-color: var(--sdds-textfield-border-bottom-success);
+}
+
+.sdds-form-textfield-error .sdds-textfield-helper {
+  color: var(--sdds-textfield-helper-error);
+}
+.sdds-form-textfield-error .sdds-textfield-container {
+  border-bottom-color: var(--sdds-textfield-border-bottom-error);
+}
+.sdds-form-textfield-error .sdds-textfield-bar::before, .sdds-form-textfield-error .sdds-textfield-bar::after {
+  background: var(--sdds-textfield-bar-error);
+}
+.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
+.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
+  color: var(--sdds-textfield-icon-error);
+}
+
+.sdds-textfield-helper-error-state {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.sdds-textfield-textcounter {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--sdds-textfield-textcounter);
+  float: right;
+}
+.sdds-textfield-textcounter .sdds-textfield-textcounter-divider {
+  color: var(--sdds-textfield-textcounter-divider);
+}
+
+/* slot[name="sdds-prefix"]::slotted(*),
+slot[name="sdds-suffix"]::slotted(*) {
+  @include type-style("detail-02");
+  align-self: center;
+  color: var(--sdds-textfield-ps-color);
+} */
+.sdds-textfield-slot-wrap-prefix {
+  align-self: center;
+}
+.sdds-textfield-slot-wrap-prefix > * {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  margin-left: 16px;
+  color: var(--sdds-textfield-ps-color);
+}
+.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,
+.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon {
+  color: var(--sdds-negative);
+}
+
+.sdds-textfield-slot-wrap-suffix {
+  align-self: center;
+}
+.sdds-textfield-slot-wrap-suffix > * {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  margin-right: 16px;
+  color: var(--sdds-textfield-ps-color);
+}
+.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,
+.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon {
+  color: var(--sdds-negative);
+}
+
+slot[name=sdds-prefix]::slotted(sdds-icon),
+slot[name=sdds-suffix]::slotted(sdds-icon) {
+  font-size: 24px;
+  line-height: 0;
+}
+
+slot[name=sdds-prefix]::slotted(*) {
+  padding-left: var(--sdds-spacing-element-20);
+}
+slot[name=sdds-prefix]::slotted(*) ~ .sdds-textfield-input {
+  padding-left: var(--sdds-spacing-element-12);
+}
+
+slot[name=sdds-suffix]::slotted(*) {
+  padding-right: var(--sdds-spacing-element-20);
+}