@unifiedsoftware/styles 2.0.0-alpha.9 → 2.0.0-beta.10

package/css/styles.css

@@ -613,7 +613,7 @@
   justify-content: inherit;
 }
 .us-modal--scroll-inside {
-  height: calc(100vh - 2 * var(--us-modal-wrapper-padding));
+  max-height: calc(100vh - 2 * var(--us-modal-wrapper-padding));
 }
 .us-modal-header {
   position: relative;
@@ -737,6 +737,9 @@
   opacity: 0.75;
   pointer-events: none;
 }
+.us-input--read-only {
+  pointer-events: none;
+}
 .us-input--clearable .us-input__clearable {
   transform: scale(0);
   transition: all 0.2s ease-in-out;
@@ -786,6 +789,24 @@
   display: flex;
   align-items: center;
   z-index: 1;
+  overflow: hidden;
+}
+.us-input__content--chips {
+  padding-block: var(--us-input-padding-y);
+  padding-inline: var(--us-input-padding-x);
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+.us-input__content--chips input {
+  flex: 1;
+  height: 24px;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: inherit;
+  min-width: 0;
 }
 .us-input__field {
   flex: 1;
@@ -826,23 +847,6 @@
 .us-input__placeholder {
   opacity: 0.6;
 }
-.us-input__chips {
-  padding-block: var(--us-input-padding-y);
-  padding-inline: var(--us-input-padding-x);
-  flex-grow: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-.us-input__chips input {
-  flex: 1;
-  height: 24px;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: inherit;
-  min-width: 0;
-}
 .us-input__start-content, .us-input__end-content {
   flex-shrink: 0;
   height: 100%;
@@ -897,7 +901,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: color 0.1s ease-in-out 0.05s, border-color 0.1s ease-in-out 0.05s;
+  transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
   overflow: hidden;
 }
 .us-checkbox--before .us-checkbox__control {
@@ -920,7 +924,7 @@
   border-radius: inherit;
   background-color: var(--us-checkbox-tap-background);
   transform: scale(0);
-  transition: opacity 0.1s ease-in-out 0.05s, transform 0.1s ease-in-out 0.05s;
+  transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
 }
 .us-checkbox--checked .us-checkbox__tap {
   opacity: 1;
@@ -929,7 +933,7 @@
 .us-checkbox .us-icon {
   opacity: 1;
   transform: scale(0);
-  transition: opacity 0.1s ease-in-out 0.05s, transform 0.1s ease-in-out 0.05s;
+  transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
 }
 .us-checkbox--checked .us-icon {
   opacity: 1;
@@ -990,7 +994,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: color 0.1s ease-in-out 0.05s, border-color 0.1s ease-in-out 0.05s;
+  transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
   overflow: hidden;
 }
 .us-radio--before .us-radio__control {
@@ -1013,7 +1017,7 @@
   border-radius: inherit;
   background-color: var(--us-radio-tap-background);
   transform: scale(0);
-  transition: opacity 0.1s ease-in-out 0.05s, transform 0.1s ease-in-out 0.05s;
+  transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
 }
 .us-radio--checked .us-radio__tap {
   opacity: 1;
@@ -1022,7 +1026,7 @@
 .us-radio .us-icon {
   opacity: 1;
   transform: scale(0);
-  transition: opacity 0.1s ease-in-out 0.05s, transform 0.1s ease-in-out 0.05s;
+  transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
 }
 .us-radio--checked .us-icon {
   opacity: 1;
@@ -1094,7 +1098,7 @@
   background-color: var(--us-switch-control-color);
   display: inline-flex;
   align-items: center;
-  transition: all 0.15s ease-in-out;
+  transition: all 0.05s ease-in-out;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
@@ -1116,7 +1120,7 @@
   transform: translateX(var(--us-switch-control-padding));
   border-radius: var(--us-switch-thumb-border-radius);
   background-color: var(--us-switch-thumb-color);
-  transition: all 0.15s ease-in-out;
+  transition: all 0.05s ease-in-out;
 }
 .us-switch--checked .us-switch__thumb {
   transform: translateX(calc(var(--us-switch-control-width) - var(--us-switch-thumb-width) - (var(--us-switch-control-padding))));
@@ -1144,7 +1148,7 @@
 }
 .us-accordion-item {
   position: relative;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: var(--us-accordion-item-border);
 }
 .us-accordion-item:last-child {
   border-bottom: none;
@@ -1264,8 +1268,7 @@
 }
 .us-list-item--disabled {
   opacity: 0.6;
-  cursor: not-allowed;
-  user-select: none;
+  pointer-events: none;
 }
 .us-list-item__start-content, .us-list-item__end-content {
   flex-shrink: 0;
@@ -1598,8 +1601,6 @@
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
   background-color: white;
-}
-.us-card__content {
   padding-block: var(--us-card-padding-y);
   padding-inline: var(--us-card-padding-x);
   display: flex;
@@ -1754,35 +1755,34 @@
   object-fit: cover;
 }
 .us-card--divider .us-card-body {
-  margin-bottom: var(--us-card-padding-y);
   margin-top: var(--us-card-padding-y);
 }
-.us-card--divider .us-card-body::before {
+.us-card--divider .us-card-body::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
-  border-top: 1px solid var(--us-card-border-color);
+  bottom: 0;
+  border-bottom: 1px solid var(--us-card-border-color);
 }
-.us-card--divider .us-card-body::after {
+.us-card--divider .us-card-header ~ .us-card-body {
+  margin-bottom: var(--us-card-padding-y);
+}
+.us-card--divider .us-card-header ~ .us-card-body::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
-  border-bottom: 1px solid var(--us-card-border-color);
-}
-.us-card--divider .us-card__content > .us-card-body:first-child, .us-card--divider .us-card__content :not([hidden]):first-child .us-card-body {
-  margin-top: 0;
+  top: 0;
+  border-top: 1px solid var(--us-card-border-color);
 }
-.us-card--divider .us-card__content > .us-card-body:first-child::before, .us-card--divider .us-card__content :not([hidden]):first-child .us-card-body::before {
+.us-card--divider > .us-card-body:first-child, .us-card--divider :not([hidden]):first-child .us-card-body::before {
   border-top: none;
 }
-.us-card--divider .us-card__content > .us-card-body:last-child, .us-card--divider .us-card__content :not([hidden]):last-child .us-card-body {
+.us-card--divider > .us-card-body:last-child, .us-card--divider :not([hidden]):last-child .us-card-body {
   margin-bottom: 0;
 }
-.us-card--divider .us-card__content > .us-card-body:last-child::after, .us-card--divider .us-card__content :not([hidden]):last-child .us-card-body::after {
+.us-card--divider > .us-card-body:last-child::after, .us-card--divider :not([hidden]):last-child .us-card-body::after {
   border-bottom: none;
 }
 
@@ -1978,7 +1978,8 @@
   font-size: var(--us-nav-rail-item-label-font-size);
   font-weight: var(--us-nav-rail-item-label-font-weight);
   line-height: var(--us-nav-rail-item-label-line-height);
-  text-wrap: nowrap;
+  width: 100%;
+  text-align: center;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -2015,6 +2016,136 @@
   right: 0px;
 }
 
+.us-steps {
+  flex-shrink: 0;
+  display: grid;
+  overflow: hidden;
+}
+.us-steps--horizontal {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+.us-steps--vertical {
+  grid-template-columns: 1;
+  gap: 2rem;
+}
+.us-steps--vertical .us-step {
+  flex-direction: row;
+  gap: 1.5rem;
+}
+.us-steps--vertical .us-step__content {
+  padding: 4px 0px;
+}
+.us-steps--vertical .us-step__title, .us-steps--vertical .us-step__subtitle {
+  margin: 0;
+  text-align: start;
+}
+.us-steps--vertical .us-steps__indicator {
+  width: 1px;
+  height: 100%;
+  top: -50%;
+  bottom: 50%;
+  left: auto;
+  right: auto;
+}
+
+.us-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.us-step--completed {
+  --us-step-divider-color: var(--us-_completed-step-divider-color);
+}
+.us-step--current {
+  --us-step-divider-color: var(--us-_current-step-divider-color);
+}
+.us-step--disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+.us-step__header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+.us-step__avatar-wrapper {
+  border: 2px solid transparent;
+  padding: 2px;
+  border-radius: 50%;
+}
+.us-step__avatar {
+  position: relative;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  font-size: var(--us-step-indicator-font-size);
+  font-weight: var(--us-step-indicator-font-weight);
+  color: var(--us-step-indicator-color);
+  background-color: var(--us-step-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+.us-step--current .us-step__avatar-wrapper {
+  border-color: var(--us-_current-step-border-color);
+}
+.us-step__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.us-step__title {
+  flex-shrink: 0;
+  max-width: 150px;
+  margin: 0 auto;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.us-step__subtitle {
+  flex-shrink: 0;
+  max-width: 150px;
+  margin: 0 auto;
+  font-size: 0.75rem;
+  text-align: center;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  opacity: 0.75;
+}
+
+.us-steps {
+  position: relative;
+}
+.us-steps__indicator {
+  position: absolute;
+  flex-grow: 1;
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  left: -50%;
+  width: 100%;
+  height: 1px;
+  background-color: var(--us-step-divider-color);
+  z-index: -1;
+}
+.us-steps__indicator--completed {
+  border-bottom-color: var(--us-_completed-step-divider-color);
+}
+.us-steps__indicator--current {
+  border-bottom-color: var(--us-_current-step-divider-color);
+}
+
 .us-animation-spin {
   animation: us-animation-spin 1s linear infinite;
   transform-origin: center center;
@@ -3640,6 +3771,13 @@
   display: grid;
 }
 
+.us-icon.jodit-icon {
+  width: 1em !important;
+  height: 1em !important;
+  fill: none !important;
+  stroke: currentColor !important;
+}
+
 /* Estilos CSS aquí */
 .slider-container {
   width: 300px;
@@ -3656,4 +3794,57 @@
   border-radius: 50%;
   position: absolute;
   cursor: pointer;
+}
+
+.jodit-popup {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.jodit-autocomplete {
+  padding: 0.5rem 0.25rem;
+}
+
+.jodit-autocomplete-label {
+  color: rgb(112, 112, 112);
+  align-items: center;
+  cursor: default;
+  display: flex;
+  min-width: 6em;
+  font-size: 12px;
+  font-weight: 500;
+  min-height: 28px;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 0.5rem;
+  background-color: white;
+}
+
+.jodit-autocomplete-item {
+  align-items: center;
+  cursor: default;
+  display: flex;
+  min-width: 6em;
+  min-height: 32px;
+  padding: 0.25rem 0.5rem;
+  background-color: white;
+  border-radius: 6px;
+}
+
+.jodit-autocomplete-item:hover {
+  background-color: #ecebe9;
+  color: #4c4c4c;
+  cursor: pointer;
+}
+
+.jodit-autocomplete-item_active_true,
+.jodit-autocomplete-item_active_true:hover {
+  background-color: var(--us-primary-color);
+  color: #fff;
+}
+
+.jodit-autocomplete-item_active_false {
+  background-color: #fff;
+  color: #4c4c4c;
+  cursor: pointer;
 }