@mgdis/mg-components 5.18.0 → 5.19.0

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css

@@ -1,264 +0,0 @@
-/**
- * Common style for MGDIS inputs
- */
-:host {
-  display: block;
-}
-
-.mg-input {
-  display: flex;
-  align-items: flex-start;
-  min-height: var(--default-size);
-  max-width: 100%;
-  margin-bottom: var(--mg-inputs-margin-bottom, 0);
-  /* Label */
-  /* Label-on-top */
-}
-.mg-input mg-input-title {
-  flex-shrink: var(--mg-inputs-shrink, 1);
-  width: var(--mg-inputs-title-width, auto);
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  margin-right: var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));
-  text-align: right;
-}
-.mg-input.mg-input--label-on-top {
-  flex-direction: column;
-}
-.mg-input.mg-input--label-on-top .mg-input__input-container {
-  width: 100%;
-}
-
-/* Label-on-top */
-.mg-input__title {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 0.3rem;
-}
-.mg-input__title mg-input-title {
-  flex-shrink: 1;
-  width: auto;
-  margin-top: 0;
-  margin-right: var(--mg-inputs-spacer);
-  text-align: left;
-}
-.mg-input__title mg-tooltip {
-  margin-top: 0;
-}
-.mg-input__title mg-icon {
-  display: inline-flex;
-  vertical-align: text-bottom;
-}
-
-.mg-input__input-container {
-  min-height: var(--default-size);
-  /* Readonly */
-}
-.mg-input__input-container > strong {
-  display: inline-block;
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  min-height: var(--font-size);
-}
-.mg-input__input-container mg-tooltip {
-  display: inline-flex;
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-  margin-left: var(--mg-inputs-spacer);
-}
-.mg-input__input-container .mg-input__help-text,
-.mg-input__input-container .mg-input__error {
-  text-align: start;
-  font-size: 1.2rem;
-}
-
-.mg-input__input {
-  display: flex;
-  /* Manage space between input and first message */
-  /* Set custom opacity on disabled input */
-}
-.mg-input__input mg-tooltip {
-  margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-.mg-input__input.mg-input__input--has-error .mg-input__box {
-  border-color: hsl(var(--color-danger));
-}
-.mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
-  margin-top: 0.5rem;
-}
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
-  opacity: var(--mg-disabled-opacity);
-}
-
-.mg-input__error {
-  display: inline-block;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: 0.3rem;
-  background: hsl(var(--mg-inputs-error-bg-color));
-  color: hsl(var(--color-danger));
-}
-
-.mg-input__input mg-icon, .mg-input__error mg-icon {
-  display: flex;
-}
-
-/**
- * Style for input "box":
- * - input[type="text"]
- * - input[type="date"]
- * - input[type="password"]
- * - textarea
- * - select
- */
-.mg-input__box {
-  padding: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);
-  height: var(--default-size);
-  box-sizing: border-box;
-  border-width: var(--mg-inputs-border-width);
-  border-style: solid;
-  border-color: var(--mg-inputs-color);
-  border-radius: var(--mg-inputs-border-radius);
-  background-color: hsl(var(--color-light));
-  font-family: inherit;
-  color: hsl(var(--color-dark));
-  font-size: var(--font-size);
-  text-align: var(--mg-inputs-text-align, left);
-}
-.mg-input__box::placeholder {
-  color: var(--mg-inputs-color);
-  font-style: italic;
-}
-.mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
-}
-.mg-input__box:disabled {
-  opacity: 0.3;
-}
-
-/**
-* Variations
-*/
-.mg-input.mg-input--is-input-group-append {
-  --mg-button-border-radius-top-left: 0;
-  --mg-button-border-radius-bottom-left: 0;
-  /**
-  * Append input slot
-  */
-  /**
-  * Readonly variation
-  */
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box {
-  margin-right: -0.1rem;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
-  outline-style: solid;
-  outline-offset: -0.2rem;
-  outline-width: 0.2rem;
-}
-.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input] {
-  display: none;
-}
-
-.mg-input.mg-input--label-on-top .mg-input__box {
-  width: auto;
-  max-width: 100%;
-}
-
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]) {
-  --mg-button-border-radius-top-right: 0;
-  --mg-button-border-radius-bottom-right: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)) {
-  --mg-button-border-right-width: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type) {
-  --mg-button-border-radius-top-right: var(--mg-inputs-border-radius);
-  --mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius);
-}
-
-.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]) {
-  padding-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-
-/**
- * Used to define width input
- * Kept it nested for coming widths
- */
-.mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
-  justify-content: space-between;
-}
-.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container {
-  flex: auto;
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
-  max-width: 100%;
-}
-.mg-input:not(.mg-input--label-on-top) .mg-input__box {
-  width: 100%;
-  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
-  min-width: 5rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
-  width: 100%;
-  max-width: 21rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
-  max-width: 21rem;
-  min-width: 100%;
-}
-.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
-  max-width: 7rem;
-}
-.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
-  max-width: 5rem;
-}
-
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-.mg-input__box {
-  width: 100%;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-right: 1rem;
-}
-
-:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box {
-  max-width: unset;
-}

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -1,304 +0,0 @@
-/**
- * Common style for MGDIS inputs
- */
-:host {
-  display: block;
-}
-
-.mg-input {
-  display: flex;
-  align-items: flex-start;
-  min-height: var(--default-size);
-  max-width: 100%;
-  margin-bottom: var(--mg-inputs-margin-bottom, 0);
-  /* Label */
-  /* Label-on-top */
-}
-.mg-input mg-input-title {
-  flex-shrink: var(--mg-inputs-shrink, 1);
-  width: var(--mg-inputs-title-width, auto);
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  margin-right: var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));
-  text-align: right;
-}
-.mg-input.mg-input--label-on-top {
-  flex-direction: column;
-}
-.mg-input.mg-input--label-on-top .mg-input__input-container {
-  width: 100%;
-}
-
-/* Label-on-top */
-.mg-input__title {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 0.3rem;
-}
-.mg-input__title mg-input-title {
-  flex-shrink: 1;
-  width: auto;
-  margin-top: 0;
-  margin-right: var(--mg-inputs-spacer);
-  text-align: left;
-}
-.mg-input__title mg-tooltip {
-  margin-top: 0;
-}
-.mg-input__title mg-icon {
-  display: inline-flex;
-  vertical-align: text-bottom;
-}
-
-.mg-input__input-container {
-  min-height: var(--default-size);
-  /* Readonly */
-}
-.mg-input__input-container > strong {
-  display: inline-block;
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  min-height: var(--font-size);
-}
-.mg-input__input-container mg-tooltip {
-  display: inline-flex;
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-  margin-left: var(--mg-inputs-spacer);
-}
-.mg-input__input-container .mg-input__help-text,
-.mg-input__input-container .mg-input__error {
-  text-align: start;
-  font-size: 1.2rem;
-}
-
-.mg-input__input {
-  display: flex;
-  /* Manage space between input and first message */
-  /* Set custom opacity on disabled input */
-}
-.mg-input__input mg-tooltip {
-  margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-.mg-input__input.mg-input__input--has-error .mg-input__box {
-  border-color: hsl(var(--color-danger));
-}
-.mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
-  margin-top: 0.5rem;
-}
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
-  opacity: var(--mg-disabled-opacity);
-}
-
-.mg-input__error {
-  display: inline-block;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: 0.3rem;
-  background: hsl(var(--mg-inputs-error-bg-color));
-  color: hsl(var(--color-danger));
-}
-
-.mg-input__input mg-icon, .mg-input__error mg-icon {
-  display: flex;
-}
-
-/**
- * Style for input "box":
- * - input[type="text"]
- * - input[type="date"]
- * - input[type="password"]
- * - textarea
- * - select
- */
-.mg-input__box {
-  padding: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);
-  height: var(--default-size);
-  box-sizing: border-box;
-  border-width: var(--mg-inputs-border-width);
-  border-style: solid;
-  border-color: var(--mg-inputs-color);
-  border-radius: var(--mg-inputs-border-radius);
-  background-color: hsl(var(--color-light));
-  font-family: inherit;
-  color: hsl(var(--color-dark));
-  font-size: var(--font-size);
-  text-align: var(--mg-inputs-text-align, left);
-}
-.mg-input__box::placeholder {
-  color: var(--mg-inputs-color);
-  font-style: italic;
-}
-.mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
-}
-.mg-input__box:disabled {
-  opacity: 0.3;
-}
-
-/**
-* Variations
-*/
-.mg-input.mg-input--is-input-group-append {
-  --mg-button-border-radius-top-left: 0;
-  --mg-button-border-radius-bottom-left: 0;
-  /**
-  * Append input slot
-  */
-  /**
-  * Readonly variation
-  */
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box {
-  margin-right: -0.1rem;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
-  outline-style: solid;
-  outline-offset: -0.2rem;
-  outline-width: 0.2rem;
-}
-.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input] {
-  display: none;
-}
-
-.mg-input.mg-input--label-on-top .mg-input__box {
-  width: auto;
-  max-width: 100%;
-}
-
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]) {
-  --mg-button-border-radius-top-right: 0;
-  --mg-button-border-radius-bottom-right: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)) {
-  --mg-button-border-right-width: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type) {
-  --mg-button-border-radius-top-right: var(--mg-inputs-border-radius);
-  --mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius);
-}
-
-.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]) {
-  padding-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-
-/**
- * Used to define width input
- * Kept it nested for coming widths
- */
-.mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
-  justify-content: space-between;
-}
-.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container {
-  flex: auto;
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
-  max-width: 100%;
-}
-.mg-input:not(.mg-input--label-on-top) .mg-input__box {
-  width: 100%;
-  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
-  min-width: 5rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
-  width: 100%;
-  max-width: 21rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
-  max-width: 21rem;
-  min-width: 100%;
-}
-.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
-  max-width: 7rem;
-}
-.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
-  max-width: 5rem;
-}
-
-/**
- * Set mg-character-left with inputs
- */
-.mg-input mg-character-left {
-  opacity: 0.6;
-  font-size: 1.1rem;
-}
-.mg-input.mg-input--has-display-character-left .mg-input__input + .mg-input__help-text, .mg-input.mg-input--has-display-character-left .mg-input__input + .mg-input__error {
-  margin-top: 0;
-}
-
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/**
-* Icon in input
-*/
-.mg-input.mg-input--has-icon .mg-input__with-character-left > mg-icon {
-  position: absolute;
-  top: 50%;
-  left: var(--mg-inputs-spacer);
-  color: var(--mg-inputs-color);
-  transform: translateY(-50%);
-}
-.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box {
-  padding-left: calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2);
-}
-
-/**
-* Character left
-*/
-.mg-input__with-character-left {
-  position: relative;
-  display: inline-flex;
-}
-.mg-input--width-full .mg-input__with-character-left {
-  width: 100%;
-}
-.mg-input.is-focused .mg-input__with-character-left .mg-input__box {
-  padding-right: calc(var(--mg-character-left-message-length) * 1ch + 0.8rem);
-}
-.mg-input__with-character-left mg-character-left {
-  position: absolute;
-  display: none;
-  top: 50%;
-  right: 1rem;
-  opacity: 0.6;
-  transform: translateY(-50%);
-  font-size: 1.1rem;
-}
-.mg-input.is-focused .mg-input__with-character-left mg-character-left {
-  display: block;
-}