button_style_arrow (_buttons.scss)

Tipo: Mixin

Versión: 2.x.x

Crea un botón con doble contorno y desplaza el plano posterior durante :hover. Permite elegir una flecha a la izquierda o a la derecha, con dirección derecha por defecto, y dispone de estilos para .active, :disabled y .disabled.

El botón debe contener un elemento .content_link. El mixin aplica a ese nodo el contenido visual, la tipografía, los colores, el borde y las flechas opcionales.

Interface 

@mixin button_style_arrow($attr: (
    width: 150px,
    height: 47px,
    aspect_ratio: null,
    bg: #FFF,
    bg_hover: #000,
    bg_active: #000,
    bg_disabled: color.adjust(#000, $lightness: 70%),
    color: #000,
    color_hover: #FFF,
    color_active: #FFF,
    color_disabled: color.adjust(#000, $lightness: 40%),
    border_radius: 0px,
    border: 1px solid #000,
    border_hover: 1px solid #000,
    border_active: 1px solid #000,
    border_disabled: 1px solid color.adjust(#000, $lightness: 70%),
    padding: 10px,
    tf: (),
    time: 500ms,
    position: (),
    icon: right,
    display: flex,
    cursor: pointer,
    cursor_disabled: not-allowed,
    reset: true
));

Sintaxis map

Clave Tipo Default Descripción
width | wMedida150pxDefine el ancho del botón.
height | hMedida47pxDefine el alto del botón cuando no se utiliza aspect_ratio.
aspect_ratio | ratio | arNumbernullDefine la relación de aspecto; requiere width y reemplaza height.
bgColor#FFFDefine el fondo normal del botón y de .content_link.
bg_hoverColor#000Define el fondo de .content_link durante hover.
bg_activeColor#000Define el fondo de .content_link en .active.
bg_disabled | bgdColorcolor.adjust(#000, $lightness: 70%)Define el fondo del estado disabled.
color | cColor#000Define el color del contenido normal.
color_hover | chColor#FFFDefine el color del contenido durante hover.
color_active | caColor#FFFDefine el color del contenido en .active.
color_disabled | cdColorcolor.adjust(#000, $lightness: 40%)Define el color del contenido disabled.
border_radius | radiusMedida0pxDefine el radio de borde del botón y de .content_link.
border | bdString1px solid #000Define el borde normal del botón y de .content_link.
border_hover | bdhString1px solid #000Define el borde durante :hover.
border_active | bdaString1px solid #000Define el borde en .active.
border_disabled | bddString1px solid color.adjust(#000, $lightness: 70%)Define el borde en :disabled y .disabled.
padding | paMedida10pxDefine el espacio interior de .content_link.
time | tTiempo500msDefine la duración de las transiciones.
tfMap()Configura la tipografía y el texto con las claves y alias admitidos por el mixin tf.
position | pMap()Configura la posición del botón mediante el mixin position.
icon | iStringrightDefine la dirección de la flecha: right mediante ::after o left mediante ::before.
display | dStringflexDefine el modo de visualización del botón.
cursor | curStringpointerDefine el cursor del estado normal.
cursor_disabled | curdStringnot-allowedDefine el cursor de :disabled y .disabled.
reset | rBooleantrueActiva el restablecimiento inicial con all: initial.

Ejemplo

Este ejemplo compara el resultado por defecto del mixin con variantes configuradas mediante map para mostrar las direcciones icon: right e icon: left. También muestra los estados normal, .active y deshabilitado, además del mismo patrón aplicado sobre elementos con etiqueta a.

Sin parámetros

Con parámetros

Con etiqueta a

Siguiente Anterior Activo No disponible 

            

            

                

            

            

                
<div class="button_example_group">
    <h3 class="subtitle">Sin parámetros</h3>
    <button class="button_pagination_example button_style_arrow_no_params">
        <span class="content_link">Siguiente</span>
    </button>
    <button class="button_pagination_example button_style_arrow_no_params">
        <span class="content_link">Anterior</span>
    </button>
    <button class="button_pagination_example button_style_arrow_no_params active">
        <span class="content_link">Activo</span>
    </button>
    <button class="button_pagination_example button_style_arrow_no_params" disabled>
        <span class="content_link">No disponible</span>
    </button>
</div>

<div class="button_example_group">
    <h3 class="subtitle">Con parámetros</h3>
    <button class="button_pagination_example button_pagination_example_right">
        <span class="content_link">Siguiente</span>
    </button>
    <button class="button_pagination_example button_pagination_example_left">
        <span class="content_link">Anterior</span>
    </button>
    <button class="button_pagination_example button_pagination_example_right active">
        <span class="content_link">Activo</span>
    </button>
    <button class="button_pagination_example button_pagination_example_disabled" disabled>
        <span class="content_link">No disponible</span>
    </button>
</div>

<div class="button_example_group">
    <h3 class="subtitle">Con etiqueta a</h3>
    <a class="button_pagination_example button_pagination_example_link_right" href="#">
        <span class="content_link">Siguiente</span>
    </a>
    <a class="button_pagination_example button_pagination_example_link_left" href="#">
        <span class="content_link">Anterior</span>
    </a>
    <a class="button_pagination_example button_pagination_example_link_right active" href="#">
        <span class="content_link">Activo</span>
    </a>
    <a class="button_pagination_example button_pagination_example_link_disabled disabled" href="#" aria-disabled="true">
        <span class="content_link">No disponible</span>
    </a>
</div>

            

        

        

            Constructor interactivo
        

        

            Ajusta el contorno, la dirección de la flecha y los estados de button_style_arrow.
            El constructor genera el SCSS y el HTML correspondientes a la vista previa.
        

        

            

                

                    El constructor interactivo necesita JavaScript. Puedes consultar el ejemplo estático anterior para
                    revisar el comportamiento de button_style_arrow.