Campioni colore color-swatches
I campioni colore sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali sul lato sinistro e destro. I campioni colore sono visibili sul desktop solo se tutte le miniature non rientrano nella larghezza del contenitore. Sui dispositivi mobili o se le miniature possono rientrare nella larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.
L’aspetto del contenitore campioni è controllato con il selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches
Proprietà CSS dei campioni colore
Esempio: per impostare campioni con altezza di 100 pixel.
.s7mixedmediviewer .s7colorswatches .s7swatches {
height: 100px;
}
La spaziatura tra le miniature dei campioni è controllata dal seguente selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell
Esempio
Per impostare la spaziatura su dieci pixel sia in verticale che in orizzontale.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspetto della singola miniatura viene controllato con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb
state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected"
corrisponde alla miniatura dell'immagine attualmente visualizzata nella visualizzazione principale, state="default"
corrisponde al resto delle miniature, e state="over"
al passaggio del mouse.Esempio: per impostare miniature di 56 x 56 pixel, con un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
L’aspetto dei pulsanti di scorrimento sinistro e destro è controllato dai seguenti selettori di classi CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top
, left
, bottom
, e right
proprietà. Al contrario, la logica di visualizzazione li posiziona automaticamente.
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.
Consulta Spunti CSS.
state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di pulsante diversi: up
, down
, over
, e disabled
.Esempio: per impostare pulsanti di scorrimento di 56 x 56 pixel con grafica diversa per ogni stato.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}