@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

package/build/styles/neptune-css/less/forms/checkbox-radio.css

@@ -0,0 +1,367 @@
+.radio,
+.checkbox {
+  border-color: #c9cbce;
+  border-color: var(--color-interactive-secondary);
+}
+.radio > label,
+.checkbox > label {
+  position: relative;
+  padding-left: 48px;
+}
+[dir="rtl"] .radio > label,
+[dir="rtl"] .checkbox > label {
+  padding-right: 48px;
+  padding-left: 0;
+  padding-left: initial;
+}
+.radio > label input[type="radio"],
+.checkbox > label input[type="radio"],
+.radio > label input[type="checkbox"],
+.checkbox > label input[type="checkbox"] {
+  display: block;
+  position: absolute;
+  top: 13px;
+  left: 40px;
+}
+[dir="rtl"] .radio > label input[type="radio"],
+[dir="rtl"] .checkbox > label input[type="radio"],
+[dir="rtl"] .radio > label input[type="checkbox"],
+[dir="rtl"] .checkbox > label input[type="checkbox"] {
+  right: 40px;
+  left: auto;
+  left: initial;
+}
+.tw-checkbox-button {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  display: inline-block;
+  padding: 0;
+  vertical-align: middle;
+  text-align: center;
+  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.np-theme-personal .tw-checkbox-button {
+  border: none;
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+}
+.tw-checkbox-button .tw-checkbox-check,
+.tw-checkbox-button .np-tw-checkbox-indeterminate {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  display: none;
+  color: #ffffff;
+  color: var(--color-background-screen);
+}
+.tw-checkbox-button:not(.disabled):not(:disabled):hover,
+input[type="checkbox"]:hover + .tw-checkbox-button,
+.checkbox:hover .tw-checkbox-button {
+  border-color: #b5b7ba;
+  border-color: var(--color-interactive-secondary-hover);
+}
+.np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
+.np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
+.np-theme-personal .checkbox:hover .tw-checkbox-button {
+  box-shadow: inset 0 0 0 1px #b5b7ba;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
+}
+.tw-checkbox-button:not(.disabled):not(:disabled):focus,
+.tw-checkbox-button:not(.disabled):not(:disabled).focus,
+.tw-checkbox-button:not(.disabled):not(:disabled):focus:hover,
+.tw-checkbox-button:not(.disabled):not(:disabled).focus:hover,
+input[type="checkbox"]:focus + .tw-checkbox-button,
+.tw-checkbox-button:not(.disabled):not(:disabled):active,
+.tw-checkbox-button:not(.disabled):not(:disabled).active,
+input[type="checkbox"]:active + .tw-checkbox-button {
+  border-color: #c9cbce;
+  border-color: var(--color-interactive-secondary);
+  outline: none;
+}
+input[type="checkbox"]:focus-visible + .tw-checkbox-button {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.checkbox input[type="checkbox"]:focus-visible + .tw-checkbox-button {
+  outline: none;
+}
+.tw-checkbox-button:checked,
+.tw-checkbox-button.checked,
+input[type="checkbox"]:checked + .tw-checkbox-button,
+input[type="checkbox"]:indeterminate + .tw-checkbox-button {
+  border-color: #00a2dd !important;
+  border-color: var(--color-interactive-accent) !important;
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-theme-personal .tw-checkbox-button:checked,
+.np-theme-personal .tw-checkbox-button.checked,
+.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
+  background-color: var(--color-interactive-primary);
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+}
+.tw-checkbox-button:checked .tw-checkbox-check,
+.tw-checkbox-button.checked .tw-checkbox-check,
+input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
+  display: inline-block;
+}
+input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
+  display: inline-block;
+}
+.tw-checkbox-button:checked:hover,
+.tw-checkbox-button.checked:hover,
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
+  border-color: #008fc9 !important;
+  border-color: var(--color-interactive-accent-hover) !important;
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-theme-personal .tw-checkbox-button:checked:hover,
+.np-theme-personal .tw-checkbox-button.checked:hover,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
+  border-color: var(--color-interactive-primary-hover) !important;
+  background-color: var(--color-interactive-primary-hover);
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
+}
+.tw-checkbox-button:checked:active,
+.tw-checkbox-button.checked:active,
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
+  border-color: #0081ba !important;
+  border-color: var(--color-interactive-accent-active) !important;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-theme-personal .tw-checkbox-button:checked:active,
+.np-theme-personal .tw-checkbox-button.checked:active,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
+  border-color: var(--color-interactive-primary-active) !important;
+  background-color: var(--color-interactive-primary-active);
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
+}
+.checkbox.has-error .tw-checkbox-button,
+.tw-checkbox-button.has-error {
+  border-color: #e74848 !important;
+  border-color: var(--color-interactive-negative) !important;
+}
+.checkbox.has-error .tw-checkbox-button:checked,
+.tw-checkbox-button.has-error:checked,
+.checkbox.has-error .tw-checkbox-button.checked,
+.tw-checkbox-button.has-error.checked {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
+  border-color: #e74848 !important;
+  border-color: var(--color-interactive-negative) !important;
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
+  border-color: #d03238 !important;
+  border-color: var(--color-interactive-negative-hover) !important;
+  background-color: #d03238;
+  background-color: var(--color-interactive-negative-hover);
+}
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
+  border-color: #bf1e2c !important;
+  border-color: var(--color-interactive-negative-active) !important;
+  background-color: #bf1e2c;
+  background-color: var(--color-interactive-negative-active);
+}
+.tw-radio-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+  background: #ffffff;
+  background: var(--color-background-screen);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: border 0.15s ease-in-out;
+}
+.np-theme-personal .tw-radio-button {
+  border: none;
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.tw-radio-button .tw-radio-check {
+  border-radius: 50%;
+  text-align: center;
+  width: 12px;
+  height: 12px;
+  display: block;
+  opacity: 0;
+  transition: all 0.15s ease-in-out;
+}
+.radio:not(.disabled):not(:disabled):hover .tw-radio-button,
+.tw-radio-button:not(.disabled):not(:disabled):hover {
+  border-color: #b5b7ba;
+  border-color: var(--color-interactive-secondary-hover);
+}
+.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
+.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px #b5b7ba;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
+}
+.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
+.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
+.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
+.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+}
+.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked .tw-radio-check,
+.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
+.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
+.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
+  background-color: var(--color-interactive-primary-hover);
+}
+.tw-radio-button:not(.disabled):not(:disabled):focus,
+.tw-radio-button:not(.disabled):not(:disabled).focus,
+.tw-radio-button:not(.disabled):not(:disabled):active,
+.tw-radio-button:not(.disabled):not(:disabled).active {
+  border-color: #a7a9ab;
+  border-color: var(--color-interactive-secondary-active);
+  outline: none;
+}
+.tw-radio-button:checked,
+.tw-radio-button.checked {
+  border-color: #00a2dd !important;
+  border-color: var(--color-interactive-accent) !important;
+}
+.tw-radio-button:checked .tw-radio-check,
+.tw-radio-button.checked .tw-radio-check {
+  opacity: 1;
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-theme-personal .tw-radio-button:checked,
+.np-theme-personal .tw-radio-button.checked {
+  border-color: transparent !important;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+}
+.np-theme-personal .tw-radio-button:checked .tw-radio-check,
+.np-theme-personal .tw-radio-button.checked .tw-radio-check {
+  background-color: var(--color-interactive-primary);
+  max-height: 12px;
+  max-width: 12px;
+}
+.radio.has-error .tw-radio-button,
+.tw-radio-button.has-error {
+  border-color: #e74848 !important;
+  border-color: var(--color-interactive-negative) !important;
+}
+.radio.has-error .tw-radio-button:checked .tw-radio-check,
+.tw-radio-button.has-error:checked .tw-radio-check,
+.radio.has-error .tw-radio-button.checked .tw-radio-check,
+.tw-radio-button.has-error.checked .tw-radio-check {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+.radio .tw-radio-button {
+  position: absolute;
+  left: 13px;
+  top: 11px;
+}
+[dir="rtl"] .radio .tw-radio-button {
+  right: 13px;
+  left: auto;
+  left: initial;
+}
+.checkbox .tw-checkbox-button {
+  position: absolute;
+  left: 14px;
+  top: 12px;
+}
+[dir="rtl"] .checkbox .tw-checkbox-button {
+  right: 14px;
+  left: auto;
+  left: initial;
+}
+.form-inline .tw-checkbox-button,
+.form-inline .tw-radio-button {
+  vertical-align: bottom;
+}
+.form-horizontal .checkbox,
+.form-horizontal .radio {
+  padding-top: 0;
+}
+.form-horizontal .checkbox > label,
+.form-horizontal .radio > label {
+  margin-bottom: 0;
+}
+.np-radio.radio,
+.np-checkbox.checkbox {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+.np-radio.radio .np-radio-button,
+.np-checkbox.checkbox .np-radio-button,
+.np-radio.radio .np-checkbox-button,
+.np-checkbox.checkbox .np-checkbox-button {
+  position: relative;
+  flex-shrink: 0;
+}
+.np-radio.radio .tw-checkbox-button,
+.np-checkbox.checkbox .tw-checkbox-button,
+.np-radio.radio .tw-radio-button,
+.np-checkbox.checkbox .tw-radio-button {
+  position: static;
+}
+.np-radio.radio > label,
+.np-checkbox.checkbox > label {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px   ;
+  padding: var(--size-8) var(--size-16)   ;
+}
+[dir="rtl"] .np-radio.radio > label,
+[dir="rtl"] .np-checkbox.checkbox > label {
+  padding: 8px 16px   ;
+  padding: var(--size-8) var(--size-16)   ;
+}
+.np-radio.radio > label .np-checkbox__text,
+.np-checkbox.checkbox > label .np-checkbox__text,
+.np-radio.radio > label .np-radio__text,
+.np-checkbox.checkbox > label .np-radio__text {
+  display: block;
+  padding-top: 1px;
+}
+:not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
+:not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
+:not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
+:not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.25rem;
+  line-height: var(--line-height-20);
+  padding-top: 3px;
+}
+.np-theme-personal .np-radio.radio > label,
+.np-theme-personal .np-checkbox.checkbox > label {
+  padding: var(--input-padding);
+}
+.np-radio .np-radio__avatar {
+  pointer-events: none;
+}