core/src/components/textarea/textarea.md.solid.scss - main - githubmirror/ionic-framework

core/src/components/textarea/textarea.md.solid.scss

80 строк2 KB

Brandy Smith

fix(textarea): update helper text and counter color (#30148)

05 мар 2025, 00:00

05 мар 2025, 00:004322935

@import "./textarea.vars";

// Textarea Fill: Solid
// ----------------------------------------------------------------

:host(.textarea-fill-solid) {
  --background: #{$background-color-step-50};
  --border-color: #{$background-color-step-500};
  --border-radius: 4px;
  --padding-start: 16px;
  --padding-end: 16px;

  min-height: 56px;
}

/**
 * The solid fill style has a border
 * at the bottom of the textarea wrapper.
 * As a result, the border on the "bottom
 * content" is not needed.
 */
:host(.textarea-fill-solid) .textarea-wrapper {
  border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

/**
 * If the textarea has a validity state, the
 * border should reflect that as a color.
 */
:host(.has-focus.textarea-fill-solid.ion-valid),
:host(.textarea-fill-solid.ion-touched.ion-invalid) {
  --border-color: var(--highlight-color);
}

/**
 * The bottom content should never have
 * a border with the solid style.
 */
:host(.textarea-fill-solid) .textarea-bottom {
  border-top: none;
}

/**
 * Background and border should be
 * slightly darker on hover.
 */
@media (any-hover: hover) {
  :host(.textarea-fill-solid:hover) {
    --background: #{$background-color-step-100};
    --border-color: #{$background-color-step-750};
  }
}

/**
 * Background and border should be
 * much darker on focus.
 */
:host(.textarea-fill-solid.has-focus) {
  --background: #{$background-color-step-150};
  --border-color: #{$background-color-step-750};
}

:host(.textarea-fill-solid) .textarea-wrapper {
  /**
   * Only the top left and top right borders should.
   * have a radius when using a solid fill.
   */
  @include border-radius(var(--border-radius), var(--border-radius), 0px, 0px);
}

// Textarea Label
// ----------------------------------------------------------------

:host(.label-floating.textarea-fill-solid) .label-text-wrapper {
  /**
   * Label text should not extend
   * beyond the bounds of the textarea.
   */
  max-width: calc(100% / #{$form-control-label-stacked-scale});
}