UCI

Form Textarea: Bg Accent Light 

<div class="form-textarea bgaccentlight" id="">
    <div class="field-top form-list__tooltip-label_default">
        <label class="label-m" for="">Field Text</label>
        <div class="field-top__wrap">
            <a class="link
                        
                        
                        
                        link_inline
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        " href="#">
                <span>Link</span>
            </a>

            <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
            <div class="tooltip  flex">
                <svg class="icon icon-16_tooltip     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
                </svg>

                <div class="msg-tooltip">
                    <span class="arrow"></span>
                    <div class="wrap">
                        <p class="
                                title-s
                                
                            ">Títulilllo</p>
                        <div class="
                                bodycopy-s
                                
                                
                                
                                
                            ">

                            Este es el texto.

                        </div> <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                            <span>Enlacillo</span>
                        </a>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="textarea">
        <textarea class="textarea-field 
                    input-distinguisher_Mensaje
                    " id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
    </div>
    <div class="field-bottom">
    </div>
</div>
 
<div class="form-textarea{{#if isDisabled}} disabled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}" id="{{ id }}">
    {{> @field-top field-top }}
        {{> @textarea textarea }}
    {{> @field-bottom field-bottom }}
</div>
 
{
  "field-top": {
    "label": {
      "text": "Field Text"
    },
    "link": {
      "isInline": true,
      "href": "#",
      "text": "Link"
    },
    "tooltip": {
      "isFlex": true,
      "title": {
        "text": "Títulilllo",
        "isP": true
      },
      "bodycopy": {
        "text": "Este es el texto."
      },
      "link": {
        "href": "#",
        "text": "Enlacillo"
      }
    }
  },
  "textarea": {
    "distinguisher": "Mensaje",
    "id": "randomInputId211",
    "type": "text",
    "title": "Mensaje",
    "placeholder": "Placeholder"
  },
  "isBGAccentLight": true
}
  • Content: 
    .form-textarea {
    margin-bottom: 20px;
    position: relative;

    .textarea-field{
        background-color: var(--color-white);
    }
    

    &.disabled {
        .textarea-field {
            background-color: var(--color-grey-light);
            border-color: var(--color-quinary);
            color: var(--color-grey2);
            line-height: 0;

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.bgtransparent {
        .textarea-field {
            background: transparent;

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.bgaccentlight {
        .textarea-field {
            background-color: var(--color-accent-light);
            border-color: var(--color-accent-light);
            &:hover,
            &:focus {
                border-color: var(--color-secondary);
            }

            &:focus {
                color: var(--color-text);
            }
        }
    }
    &.password {
        .field-text__show-password.hide {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            left: initial;
            right: 15px;
            opacity: 1;
            display: block;
        }
    }
    &.error {
        .textarea-field {
            border-color: var(--color-danger);
            color: var(--color-danger);

            &:focus {
                color: var(--color-text);
            }
        }

        .field-bottom {
            &__error-message {
                display:block;
                position: relative;
            }
            &__helper-text{display:none;}
        }
    }
}
  • URL: /components/raw/form-textarea/form-textarea.css
  • Filesystem Path: src/02-molecules/form-textarea/form-textarea.css
  • Size: 1.7 KB

No notes defined.