npm - @rededor/cura - Versions diffs - 0.5.4 → 1.0.0-alpha.0 - Mend

@rededor/cura 0.5.4 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (640) hide show

package/dist/collection/components/forms/cura-select/cura-select.css ADDED Viewed

@@ -0,0 +1,519 @@
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--font-family);
+}
+.wrapper {
+  width: 100%;
+  user-select: none;
+  text-align: left !important;
+}
+.wrapper cura-label {
+  margin-bottom: 8px;
+}
+.wrapper .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+}
+.wrapper .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper .cura-input-field .up-down-icon {
+  order: 3;
+  padding-right: 12px;
+  cursor: pointer;
+  pointer-events: all;
+}
+.wrapper .cura-input-field input {
+  padding: 0px 12px 0px 8px;
+}
+.wrapper .cura-input-field.open {
+  border-radius: 4px 4px 0 0 !important;
+}
+.wrapper.transparent {
+  background-color: transparent;
+  padding: 0px;
+  max-height: 80px;
+}
+.wrapper.transparent .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 0;
+  height: 27px;
+}
+.wrapper.transparent .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.transparent .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.transparent .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.transparent .cura-input-field input {
+  color: var(--neutral-black) !important;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold) !important;
+  padding: 0;
+}
+.wrapper.transparent .cura-input-field input::placeholder {
+  color: var(--neutral-black);
+}
+.wrapper.transparent .cura-input-field .feedback-icon {
+  order: 3;
+  margin: 0 20px 0 0;
+}
+.wrapper.transparent:focus-within .cura-input-field {
+  border: none !important;
+  background-color: transparent !important;
+}
+.wrapper.transparent:focus-within .cura-input-field input {
+  border: none !important;
+  outline: none;
+}
+.wrapper.transparent .helper-text {
+  margin-top: 0px;
+}
+.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field {
+  border-color: var(--neutral-dark);
+}
+.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input {
+  color: var(--neutral-dark);
+}
+.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper:focus-within .cura-input-field {
+  border: 2px solid var(--info-base) !important;
+  background-color: var(--neutral-purewhite);
+  outline: none;
+}
+.wrapper:focus-within .cura-input-field input {
+  color: var(--neutral-black) !important;
+}
+.wrapper.success .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper.success .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.success .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.success .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.success .cura-input-field input {
+  color: var(--success-darker) !important;
+}
+.wrapper.success .cura-input-field input::placeholder {
+  color: var(--success-darker) !important;
+}
+.wrapper.success:not(.transparent) .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--success-dark) !important;
+  background-color: var(--success-lighter) !important;
+}
+.wrapper.success:not(.transparent) .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.success:not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.success:not(.transparent) .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.error .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper.error .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.error .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.error .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.error .cura-input-field input {
+  color: var(--error-darker) !important;
+}
+.wrapper.error .cura-input-field input::placeholder {
+  color: var(--error-darker) !important;
+}
+.wrapper.error:not(.transparent) .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid var(--error-dark) !important;
+  background-color: var(--error-lighter) !important;
+}
+.wrapper.error:not(.transparent) .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.error:not(.transparent) .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.error:not(.transparent) .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.disabled .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--neutral-white);
+  border: 2px solid var(--neutral-base);
+}
+.wrapper.disabled .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.disabled .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.disabled .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.disabled .cura-input-field input {
+  color: var(--neutral-medium);
+}
+.wrapper.disabled .cura-input-field input::placeholder {
+  color: var(--neutral-medium);
+}
+.wrapper.small .cura-input-field {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper.small .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.small .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.small .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.small .cura-input-field input {
+  line-height: 13px;
+  letter-spacing: 0.72px;
+}
+.wrapper.small .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
+}
+.wrapper.small.label .menu {
+  top: 53px;
+}
+.wrapper.small .menu {
+  top: 33px;
+}
+.wrapper.medium .cura-input-field {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper.medium .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.medium .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.medium .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.medium .cura-input-field input {
+  line-height: 16px;
+  letter-spacing: 0.56px;
+}
+.wrapper.medium .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-regular);
+}
+.wrapper.medium.label .menu {
+  top: 61px;
+}
+.wrapper.medium .menu {
+  top: 40px;
+}
+.wrapper.large .cura-input-field {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.wrapper.large .cura-input-field input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 0px 12px 0px 8px;
+}
+.wrapper.large .cura-input-field input::placeholder {
+  color: var(--neutral-dark);
+}
+.wrapper.large .cura-input-field .feedback-icon {
+  padding-left: 12px;
+}
+.wrapper.large .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+  font-weight: var(--font-weight-bold);
+}
+.wrapper.large.label .menu {
+  top: 69px;
+}
+.wrapper.large .menu {
+  top: 47px;
+}
+.required {
+  color: red;
+}
+.menu {
+  position: absolute;
+  left: 0;
+  right: -1px;
+  background: #fff;
+  border: 2px solid var(--neutral-light);
+  border-radius: 4px;
+  z-index: 1000;
+  max-height: 285px;
+  overflow: hidden;
+  border-top: transparent;
+  align-items: center;
+  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);
+  overflow-y: scroll;
+  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+}
+.menu.open {
+  border-radius: 0 !important;
+}