h5ai-flpsite/src/_h5ai/client/css/inc/view-grid.less
2013-09-03 16:12:31 +02:00

111 lines
1.3 KiB
Plaintext

#view.view-grid {
li {
&.item {
float: left;
margin: 2px;
a, a:active, a:visited {
width: @icon-size + 182px;
height: @icon-size + 6px;
border: 1px solid rgba(0,0,0,0);
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
.label, .date, .size {
padding: ((@icon-size - 16px)/2) 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 0;
top: -4px;
width: @icon-size;
img {
width: @icon-size;
height: @icon-size;
}
}
.label {
display: block;
margin: 0 0 0 (@icon-size + 8px);
}
.date, .size {
display: none;
}
}
}
.view-grid-sized(@size) {
li {
&.item {
a, a:active, a:visited {
width: @size + 182px;
height: @size + 6px;
}
.label, .date, .size {
padding: ((@size - 16px)/2) 8px;
}
}
.icon.square {
width: @size;
img {
width: @size;
height: @size;
}
}
.label {
margin: 0 0 0 (@size + 8px);
}
}
}
#view.view-grid {
&.size-16 {
.view-grid-sized(16px)
}
&.size-24 {
.view-grid-sized(24px)
}
&.size-32 {
.view-grid-sized(32px)
}
&.size-48 {
.view-grid-sized(48px)
}
&.size-64 {
.view-grid-sized(64px)
}
&.size-96 {
.view-grid-sized(96px)
}
}