/*
    uniEdit with FontAwesome Icons 

    Vídeo sobre FontAwesome Icons:
    https://www.youtube.com/watch?v=8nSiep3XUws

    Testado no tema triton
    Dependendo do tema usado no Mobile, reajustes podem ser necessários 
    
    Adicione na propriedade LayoutConfig->Cls do Edit.
    Exemplo: edit-user-ico

    Silvio Santos
    uniguidesign@gmail.com
*/

body.x-nativescroller .x-form-trigger-wrap input, .x-input-wrap-el input {
    padding: 8px !important; /* Espaçamento do Edit - opcional */
}

/* Comum para Desktop e Mobile */
.edit-user-ico .x-form-trigger-wrap::before, .edit-user-ico .x-before-input-el::before,
.edit-pass-ico .x-form-trigger-wrap::before, .edit-pass-ico .x-before-input-el::before,
.edit-mail-ico .x-form-trigger-wrap::before, .edit-mail-ico .x-before-input-el::before,
.edit-search-ico .x-form-trigger-wrap::before, .edit-search-ico .x-before-input-el::before {
    font-family: FontAwesome;
    font-size: 22px; /* Tamanho do ícone */
    position: relative;
    text-align: center;
    color: rgb(41, 41, 41); /* Cor do ícone */
}

/* Desktop */
.edit-user-ico .x-form-trigger-wrap::before,
.edit-pass-ico .x-form-trigger-wrap::before,
.edit-mail-ico .x-form-trigger-wrap::before,
.edit-search-ico .x-form-trigger-wrap::before {
    top: 2px; /* Dependendo do tema usado no Desktop, ajuste a posição vertical do ícone aqui */
    left: 3px;
    width: 32px;     
    padding-right: 0px; /* Caso queira ajustar o espaço entre o ícone e o texto... */
}

/* Mobile */
.edit-user-ico .x-before-input-el::before,
.edit-pass-ico .x-before-input-el::before,
.edit-mail-ico .x-before-input-el::before,
.edit-search-ico .x-before-input-el::before {
    top: 3px; /* Dependendo do tema usado no Mobile, ajuste a posição vertical do ícone aqui */
    left: 3px;
    width: 28px;
    padding-right: 0px; /* Caso queira ajustar o espaço entre o ícone e o texto do Edit... */
}

/* Comum para Desktop e Mobile */
.edit-user-ico .x-form-trigger-wrap::before,
.edit-user-ico .x-before-input-el::before {
    content: "\f007"; /* Unicode ref. ao ícone */
}

/* Comum para Desktop e Mobile */
.edit-pass-ico .x-form-trigger-wrap::before,
.edit-pass-ico .x-before-input-el::before {
    content: "\f09c"; /* Unicode ref. ao ícone */
}

/* Comum para Desktop e Mobile */
.edit-mail-ico .x-form-trigger-wrap::before,
.edit-mail-ico .x-before-input-el::before {
    content: "\f0e0"; /* Unicode ref. ao ícone */
}

/* Comum para Desktop e Mobile */
.edit-search-ico .x-form-trigger-wrap::before,
.edit-search-ico .x-before-input-el::before {
    content: "\f002"; /* Unicode ref. ao ícone */
}