h5ai-flpsite/src/_h5ai/client/css/inc/view-details.less
2014-12-09 01:40:55 +01:00

144 lines
2.3 KiB
Plaintext

.view-details-sized(@size) {
.item {
a, a:active, a:visited {
height: @size + 14px;
}
.label, .date, .size {
padding: (@size/2 - 2px) 8px;
}
}
.icon.square {
width: @size;
img {
width: @size;
height: @size;
}
}
.label {
margin: 0 246px 0 (@size + 32px);
}
}
#view.view-details {
.header {
display: list-item;
background: #fafafa;
border-bottom: 1px solid rgba(0,0,0,0.065);
a, a:active, a:visited {
padding: 12px 8px;
opacity: 0.4;
.transition(all 0.2s ease-in-out);
&:hover {
color: #555;
opacity: 0.9;
}
}
img {
display: none;
position: relative;
top: -2px;
width: 12px;
height: 12px;
padding: 0 8px;
}
.ascending img.ascending,
.descending img.descending {
display: inline;
}
}
.item {
border-bottom: 1px solid rgba(0,0,0,0.065);
a, a:active, a:visited {
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 16px;
top: -1px;
}
.date {
position: absolute;
right: 116px;
top: 0;
}
.size {
position: absolute;
right: 16px;
top: 0;
}
.selector {
margin-top: -1px;
}
.view-details-sized(24px);
&.size-16 {
.view-details-sized(16px)
}
&.size-24 {
.view-details-sized(24px)
}
&.size-32 {
.view-details-sized(32px)
}
&.size-48 {
.view-details-sized(48px)
}
&.size-64 {
.view-details-sized(64px)
}
&.size-96 {
.view-details-sized(96px)
}
&.size-128 {
.view-details-sized(128px)
}
&.size-192 {
.view-details-sized(192px)
}
&.size-256 {
.view-details-sized(256px)
}
&.size-384 {
.view-details-sized(384px)
}
}