# Mixins

All'interno della directory core/mixins sono presenti tutti i mixin del framework di sviluppo.

Attenzione!

Alcuni mixins disponibili nelle versioni 4 di DiviChild sono deprecate e pertanto non più disponibili.

# Images

Al momento sono disponibili tre mixin dedicati alle immagini.

Mixin	Parametri	Descrizione
`img-100()`	`$include_tag:false`	Setta l'immagine a width 100%. Questo mixin può essere applicato direttamente ai tag `img` o all'immagine child dell'elemento al quale viene applicato. Per questa seconda opzione è necessario impostare il parametro `$include_tag` al valore `true`
`image_fit_cover()`	`$object_position:center`	Include il posizionamento assoluto di un'immagine con la proprietà `object-fit: cover`. Il parametro `$object_position` determina l'allineamento dell'immagine e accetta come valore tutti i valori accettati dalla proprietà css `object-position`
`image_fit_contain()`	`$object_position:center`	Include il posizionamento assoluto di un'immagine con la proprietà `object-fit: contain`. Il parametro `$object_position` determina l'allineamento dell'immagine e accetta come valore tutti i valori accettati dalla proprietà css `object-position`

ATTENZIONE

I mixin image_fit_cover e image_fit_contain richiedono un elemento parent con proprietà position: relative

# Typography

Mixin	Parametri
`pxToRem()`	`$size`
`ellipsis()`
`ellipsis()`
`resetlist()`

pxToRem($size)
Imposta la misura del font in rem partendo dalla misura in px. Questo mixin effettua il calcolo partendo dal valore impostato nella variabile $font_base_size
Il parametro $size consiste nella misura in px (es: 22px);

Param: $size | Type: css property value | Default: null
Consiste nella misura in px (es: 22px);

ellipsis()
Applica i puntini di sospensione agli elementi. Richiede una width impostata nell'elemento a cui viene assegnato questo mixin.

resetlist()
Resetta i comuni parametri delle liste OL e UL

# Translations

Tutti ti mixin translate si traducono nelle varie opzioni della proprietà css transform: translate[...]

Mixin	Parametri
`translate()`	`$x, $y`
`translate-50Y()`
`translate-50X()`
`translate-50()`

translate ( $x, $y )
transform: translate($x,$y);

Params: $x, $y | Type: css property value | Default: null
Consistono nella misura (in qualsiasi unità) orizzontale e verticale di quanto verrò traslato l'elemento;

translate-50Y
transform: translateY(-50%);
Transla verticalmente l'elemento del 50% della propria altezza.

translate-50X
transform: translateX(-50%);
Transla orizzontalmente l'elemento del 50% della propria larghezza.

translate-50
transform: translate(-50%,-50%);
Transla orizzontalmente e verticalmente l'elemento del 50% della propria larghezza e altezza.

# Positioning

place($top,$right,$bottom,$left)
Imposta i valori top,right,left,bottom

Params: $top, $right, $bottom, $left| Type: css property value | Default: null
Valore (in qualsiasi unità) da assegnare alle singole posizioni;

# Icone FontAwesome Pro

Mixin	Parametri
`icon-before()`	`$icon,$family,$margin`
`icon-after()`	`$icon,$family,$margin`

icon-before($icon,$family:"solid",$margin:5px)
Crea uno pseudo elemento ::before con icona

icon-after($icon,$family:"solid",$margin:5px)
Crea uno pseudo elemento ::after con icona

Param: $icon| Type: string | Default: null
Il codice del font tra apici e backslash iniziale (es: "\100");
Param: $family| Type: string | Default: null
Il nome della font family tra apici (es: "light");
Param: $margin| Type: css property value | Default: 5px
Il margine destro o sinistro assegnato all'icona

FONT FAMILIES

I nomi delle famiglie FontAwesome sono: "thin", "light", "solid", "regular", "sharp"

ATTENZIONE

La famiglia "duotone" non può al momento essere usata con questo mixin

# Advanced Transitions

I mixin per le transition avanzate offrono delle transition preimpostate con i nomi standard.

Param: $duration| Type: css property value | Default: null
Definisce la durata della transition

Mixin	Parametri
`easeInQuad()`	`$duration`
`easeInCubic()`	`$duration`
`easeInQuart()`	`$duration`
`easeInQuint()`	`$duration`
`easeInSine()`	`$duration`
`easeInExpo()`	`$duration`
`easeInCirc()`	`$duration`
`easeInBack()`	`$duration`
`easeOutQuad()`	`$duration`
`easeOutCubic()`	`$duration`
`easeOutQuart()`	`$duration`
`easeOutQuint()`	`$duration`
`easeOutSine()`	`$duration`
`easeOutExpo()`	`$duration`
`easeOutCirc()`	`$duration`
`easeOutBack()`	`$duration`
`easeInOutQuad()`	`$duration`
`easeInOutCubic()`	`$duration`
`easeInOutQuart()`	`$duration`
`easeInOutQuint()`	`$duration`
`easeInOutSine()`	`$duration`
`easeInOutExpo()`	`$duration`
`easeInOutCirc()`	`$duration`
`easeInOutBack()`	`$duration`

# Media Query

Dalla versione 5 sono disponibili due nuovi mixin dedicati alle media query.
Questi due mixin sono completamente copiati a Bootstrap

Mixin	Parametri
`media-breakpoint-up()`	`$size`
`media-breakpoint-down()`	`$size`

Param: $size| Type: string | Default: null
Il parametro size accetta soltanto i seguenti valori: sm,md,lg,xl,xxl

Esempio d'uso "mobile first"

.classe {
    width: 100%;
    @include media-breakpoint-up("sm") {
        width: 50%;
    }
}

Esempio d'uso "desktop first"

.classe {
    width: 50%;
    @include media-breakpoint-down("sm") {
        width: 100%;
    }
}

Breakpoints

Per le misure dei breakpoint si veda la sezione relativa di questa documentazione.

← Borders Classi →