uxcore-album
Version:
uxcore-album component for uxcore.
485 lines (482 loc) • 12.5 kB
text/less
/**
* Album Component Style for uxcore
* @author vincent.bian
*
* Copyright 2015-2016, Uxcore Team, Alinw.
* All rights reserved.
*/
@__albumPrefixCls: kuma-uxcore-album;
@thumb-width: 120px;
@thumb-height: 70px;
.@{__albumPrefixCls} {
&.no-rgba {
.album-overlay {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxOUU4MUM2RjM1REYxMUU2QURFRDlDNkZERjM3QTYxQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxOUU4MUM3MDM1REYxMUU2QURFRDlDNkZERjM3QTYxQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE5RTgxQzZEMzVERjExRTZBREVEOUM2RkRGMzdBNjFBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE5RTgxQzZFMzVERjExRTZBREVEOUM2RkRGMzdBNjFBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fkgY4wAAABtJREFUeNpiZGBgOMNABGBiIBKMKqSOQoAAAwBVNQDgpAAyvAAAAABJRU5ErkJggg==') repeat;
.album-control,
.album-carousel-control {
background-color: @dark-alpha-3;
}
}
}
.album-icon {
font-family: kuma;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale;
}
.album-cover {
position: relative;
overflow: hidden;
writing-mode: initial;
>.album-item {
position: relative;
width: 100%;
height: 100%;
transition: transform @transition-ease @transition-duration;
>img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
}
&:before {
content: '\e63d';
position: absolute;
left: 50%;
top: 50%;
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
background-color: rgba(51, 51, 51, .6);
border-radius: 16px 16px;
z-index: 2;
color: #fff;
text-align: center;
line-height: 32px;
cursor: pointer;
opacity: 0;
transform: scale(1.2);
transition: transform @transition-ease @transition-duration, opacity @transition-ease @transition-duration;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 1;
transition: background-color @transition-ease @transition-duration;
}
&:hover {
>.album-item {
transform: scale(1.1);
}
&:before {
opacity: 1;
transform: scale(1);
}
&:after {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
.album-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
z-index: 1000;
&-hide {
display: none;
}
>.album-control {
position: absolute;
z-index: 1;
top: 50%;
margin-top: -70px;
width: 60px;
height: 80px;
background-color: @dark-alpha-4;
font-size: 50px;
color: @basic-100;
line-height: 80px;
text-align: center;
transition: background-color @transition-ease @transition-duration;
&:hover {
background-color: @dark-alpha-2;
text-decoration: none;
cursor: pointer;
}
&.disabled {
background-color: @bg-disabled-color;
color: @text-disabled-color;
cursor: default;
}
&.album-prev {
left: 0;
&:before {
content: '\e644';
}
}
&.album-next {
right: 0;
&:before {
content: '\e643';
}
}
}
&.album-overlay-no-control {
.album-stage {
padding: 20px;
}
}
.album-stage {
margin-bottom: -100px;
padding-bottom: 100px;
padding: 20px 20px 120px;
height: 100%;
position: relative;
>.album-item {
position: relative;
width: 100%;
height: 100%;
>img {
transition: transform @transition-ease @transition-duration;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%; // box-shadow: 0 0 10px 5px rgba(0, 0, 0, .6);
}
}
.album-func-button {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 150px;
background: @dark-alpha-3;
border: 1px solid @white-alpha-4;
border-radius: 80px;
overflow: hidden;
&-item {
display: inline-block;
width: 40px;
height: 26px;
color: white;
text-align: center;
cursor: pointer;
position: relative;
vertical-align: top;
&:before {
content: '';
width: 1px;
height: 16px;
position: absolute;
top: 5px;
left: -1px;
font-size: 16px;
border: 1px solid rgba(255, 255, 255, 0.2)
}
&.album-func-button-item__first {
&:before {
display: none;
}
}
>.uxcore-icon {
display: block;
height: 26px;
line-height: 26px;
&:hover{
background-color: #000;
opacity: .8;
}
}
&.disabled {
>.uxcore-icon {
color: rgba(255, 255, 255, 0.2);
}
}
}
}
}
.album-close {
position: absolute;
cursor: pointer;
right: 16px;
top: 16px;
font-size: 30px;
line-height: 1;
color: #fff;
&:hover {
text-decoration: none;
}
&:after {
content: '\e610';
}
}
.album-carousel-list {
.item-active {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 72px;
border: 2px solid #fff;
transition: transform @transition-ease @transition-duration, left @transition-ease @transition-duration;
}
}
}
.album-carousel {
position: relative;
margin: 0 20px;
padding: 0 36px;
z-index: 1;
&-container {
overflow: hidden;
text-align: center;
}
&-list {
position: relative;
display: inline-block;
white-space: nowrap;
transition: transform cubic-bezier(0.6, 0, 0.3, 1) 1s;
>.item {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 6px;
width: @thumb-width;
height: 72px;
&:hover {
.album-item {
transform: scale(1.1);
}
}
&-border {
display: none;
}
.album-item {
position: absolute;
left: 0;
top: 0;
width: @thumb-width;
height: 72px;
z-index: -1;
text-align: center;
opacity: .6;
transition: all @transition-ease @transition-duration;
}
img {
max-width: 100%;
max-height: 100%;
}
&.active {
// border: 2px solid #fff;
.album-item {
// left: -2px;
// top: -2px;
opacity: 1;
}
}
}
}
&-control {
position: absolute;
display: inline-block;
cursor: pointer;
width: 24px;
height: 72px;
background-color: @dark-alpha-3;
color: @basic-100;
line-height: 72px;
font-size: 26px;
transition: background-color @transition-ease @transition-duration;
&:hover {
background-color: @dark-alpha-2;
text-decoration: none;
}
&.disabled {
background-color: rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .2);
cursor: default;
}
&.control-prev {
left: 0;
top: 0;
&:before {
content: '\e644';
}
}
&.control-next {
right: 0;
top: 0;
&:before {
content: '\e643';
}
}
}
}
&.has-thumb {
&.thumb-placement-right {
direction: ltl;
}
&.thumb-placement-left {
direction: rtl;
& .album-overlay {
direction: ltr;
}
}
&.thumb-placement-top {
writing-mode: vertical-lr;
direction: rtl;
& .album-overlay {
writing-mode: horizontal-tb;
direction: ltr;
}
}
&.thumb-placement-bottom {
writing-mode: vertical-lr;
& .album-overlay {
writing-mode: horizontal-tb;
}
}
.thumbs-preview {
display: inline-block;
margin: 0;
padding: 0;
.album-carousel-control {
background: @normal-alpha-8;
color: @normal-alpha-4;
text-align: center;
&:hover {
cursor: pointer;
background: @normal-alpha-7;
color: @normal-alpha-3;
}
&.disabled {
background: @bg-disabled-color;
color: @text-disabled-color;
}
}
.album-carousel-list {
.item-active {
display: none;
}
}
}
&.thumb-placement-left,
&.thumb-placement-right {
.album-cover {
display: inline-block;
margin: 0 5px;
}
& .thumbs-preview {
& .album-carousel-control {
width: @thumb-width;
height: 20px;
line-height: 20px;
font-size: 20px;
&.control-up {
top: 0;
&:before {
content: '\e641';
}
}
&.control-down {
bottom: 0;
&:before {
content: '\e642';
}
}
}
& .album-carousel-container {
margin: 25px 0;
position: absolute;
top: 0;
overflow: hidden;
.album-carousel-list {
width: @thumb-width;
white-space: normal;
&>.item {
margin: 6px 0;
display: block;
width: @thumb-width;
height: 72px;
cursor: pointer;
background: #fff;
border: 1px solid #ededed;
overflow: hidden;
}
.album-item {
z-index: 1;
}
}
}
}
}
&.thumb-placement-top,
&.thumb-placement-bottom {
.album-cover {
display: inline-block;
margin: 5px 0;
}
& .thumbs-preview {
.album-carousel-container {
margin: 0 25px;
position: absolute;
left: 0;
overflow: hidden;
.album-carousel-list {
white-space: normal;
&>.item {
width: @thumb-width;
height: 72px;
writing-mode: horizontal-tb;
margin: 0 6px;
display: block;
cursor: pointer;
border: 1px solid #ededed;
background: #fff;
}
.album-item {
z-index: 1;
}
}
}
& .album-carousel-control {
writing-mode: horizontal-tb;
width: 20px;
height: @thumb-height;
line-height: @thumb-height;
font-size: 20px;
&.control-up {
left: 0;
&:before {
content: '\e644';
}
}
&.control-down {
right: 0;
&:before {
content: '\e643';
}
}
}
}
}
}
}
@import './animate.less';