Quattro Syle Guide

Logo

            .clase_logo{
                @include logo( ancho, alto, url_imagen, background-size (Opcional) : default = cover);
                /*
                    width: ancho;
                    height: alto;
                    background: url(url_imagen) center no-repeat;
                    background-size: background-size; 
                */
            }

Headings

.h1

.h2

.h3

.h4

.h5

.normal-text

Buttons

.btn .rounded-0 .p-0

.btn .btn-disabled .rounded-0 .p-0

.btn .btn-vision .rounded-0 .p-0

Manejo de mixin

Ninguna require agregar el prefijo 'px'

    .clase_nombre{
        @include text(size, line-height, font-weight (Opcional): default = normal)
        /*
            font-size: size;
            line-height: line-height;
            font-style: normal;
            font-weight: font-weight;
        */
    }
    .clase_nombre{
        @include center()
        /*
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        */
    }
    .clase_nombre{
        @include centerX()
        /*
            position: relative;
            margin-left: auto;
            margin-right: auto;
        */
    }
    .clase_nombre{
        @include icon(ancho, alto, url_imagen);
        /*
            width: ancho;
            height: alto;
            background: url(url_imagen) center no-repeat;
            background-size: cover;
        */
    }

Variables

        $black: #000; 
        $black-hover: #858585;
        $black-selected: #ABABAB;
        $black-inactive: #DDDDDD;

        $white: #FFF;

        $dark-grey: #454545;
        $dark-grey-hover: #292929;
        $dark-grey-selected: #161616;
        $dark-grey-inactive: #737373;

        $light-grey: #DBDBDB;
        $light-grey-hover: #B3B3B3;
        $light-grey-selected: #9A9A9A;
        $light-grey-inactive: #6B6B6B;

Para las margenes internas y externas (max 200)

        .mt-numero{
            margin-top: numero
        }
        .mb-numero{
            margin-bottom: numero
        }
        .ml-numero{
            margin-left: numero
        }
        .mr-numero{
            margin-right: numero
        }
        .pt-numero{
            padding-top: numero
        }
        .pb-numero{
            padding-bottom: numero
        }
        .pl-numero{
            padding-left: numero
        }
        .pr-numero{
            padding-right: numero
        }

// .class{ @include fondoImportant(img); }
.Imagen_de_fondo{
        @include icon(ancho, alto, url_imagen);
        /*
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-image: url('http://s228974.gridserver.com/wp-content/uploads/#{$img}') !important;
        */
    }

//Para fluides en fuentes margenes o interlineados las 3 primeras variables son obligatorias
// Modo de uso: 
.fluid{
    @include fluido(font-size, 32, 50); 

        @mixin fluido($prop, $min, $max, $important:null, $size: 1920) {
        #{$prop}: calc(#{$min}px + (#{$max} - #{$min}) * ((100vw - 375px) / (#{$size} - 375))) #{$important};
        }   
    }