263 lines
6.6 KiB
CSS
263 lines
6.6 KiB
CSS
|
/*!
|
||
|
* =====================================================
|
||
|
* V0.4.3 - powered by chinieer
|
||
|
* =====================================================
|
||
|
*/
|
||
|
|
||
|
/*.hairline(@position, @color) when (@position = top) {
|
||
|
&:before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
bottom: auto;
|
||
|
right: auto;
|
||
|
height: 1px;
|
||
|
width: 100%;
|
||
|
background-color: @color;
|
||
|
display: block;
|
||
|
z-index: 15;
|
||
|
transform-origin: 50% 0%;
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
|
transform: scaleY(0.5);
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
|
||
|
transform: scaleY(0.33);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.hairline(@position, @color) when (@position = left) {
|
||
|
&:before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
bottom: auto;
|
||
|
right: auto;
|
||
|
width: 1px;
|
||
|
height: 100%;
|
||
|
background-color: @color;
|
||
|
display: block;
|
||
|
z-index: 15;
|
||
|
transform-origin: 0% 50%;
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
|
transform: scaleY(0.5);
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
|
||
|
transform: scaleY(0.33);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.hairline(@position, @color) when (@position = bottom) {
|
||
|
&:after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
right: auto;
|
||
|
top: auto;
|
||
|
height: 1px;
|
||
|
width: 100%;
|
||
|
background-color: @color;
|
||
|
display: block;
|
||
|
z-index: 15;
|
||
|
transform-origin: 50% 100%;
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
|
transform: scaleY(0.5);
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
|
||
|
transform: scaleY(0.33);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.hairline(@position, @color) when (@position = right) {
|
||
|
&:after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
left: auto;
|
||
|
bottom: auto;
|
||
|
width: 1px;
|
||
|
height: 100%;
|
||
|
background-color: @color;
|
||
|
display: block;
|
||
|
z-index: 15;
|
||
|
transform-origin: 100% 50%;
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
|
transform: scaleY(0.5);
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
|
||
|
transform: scaleY(0.33);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
// For right and bottom
|
||
|
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
|
||
|
&:after {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
// For left and top
|
||
|
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
|
||
|
&:before {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
// For right and bottom
|
||
|
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
|
||
|
&:after {
|
||
|
background-color: @color;
|
||
|
}
|
||
|
}
|
||
|
// For left and top
|
||
|
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
|
||
|
&:before {
|
||
|
background-color: @color;
|
||
|
}
|
||
|
}*/
|
||
|
/*.transition(@d) {
|
||
|
-webkit-transition-duration: @d;
|
||
|
transition-duration: @d;
|
||
|
}
|
||
|
.delay(@d) {
|
||
|
-webkit-transition-delay: @d;
|
||
|
transition-delay: @d;
|
||
|
}
|
||
|
.transform(@t) {
|
||
|
-webkit-transform: @t;
|
||
|
transform: @t;
|
||
|
}
|
||
|
.transform-origin(@to) {
|
||
|
-webkit-transform-origin: @to;
|
||
|
transform-origin: @to;
|
||
|
}
|
||
|
.translate3d(@x:0, @y:0, @z:0) {
|
||
|
-webkit-transform: translate3d(@x,@y,@z);
|
||
|
transform: translate3d(@x,@y,@z);
|
||
|
}
|
||
|
.animation(@a) {
|
||
|
-webkit-animation: @a;
|
||
|
animation: @a;
|
||
|
}
|
||
|
.border-box(){
|
||
|
-webkit-box-sizing: border-box;
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
.box-shadow(@bs) {
|
||
|
-webkit-box-shadow: @bs;
|
||
|
box-shadow: @bs;
|
||
|
}
|
||
|
.animation-name(@name) {
|
||
|
-webkit-animation-name: @name;
|
||
|
-moz-animation-name: @name;
|
||
|
animation-name: @name;
|
||
|
}
|
||
|
.animation-duration(@duration) {
|
||
|
-webkit-animation-duration: @duration;
|
||
|
-moz-animation-duration: @duration;
|
||
|
animation-duration: @duration;
|
||
|
}
|
||
|
.animation-direction(@direction) {
|
||
|
-webkit-animation-direction: @direction;
|
||
|
-moz-animation-direction: @direction;
|
||
|
animation-direction: @direction;
|
||
|
}
|
||
|
*/
|
||
|
.list-block .swipeout {
|
||
|
overflow: hidden;
|
||
|
-webkit-transform-style: preserve-3d;
|
||
|
transform-style: preserve-3d;
|
||
|
}
|
||
|
.list-block .swipeout.deleting {
|
||
|
-webkit-transition: 300ms;
|
||
|
-o-transition: 300ms;
|
||
|
transition: 300ms;
|
||
|
}
|
||
|
.list-block .swipeout.deleting .swipeout-content {
|
||
|
-webkit-transform: translateX(-100%);
|
||
|
-ms-transform: translateX(-100%);
|
||
|
-o-transform: translateX(-100%);
|
||
|
transform: translateX(-100%);
|
||
|
}
|
||
|
.list-block .swipeout.transitioning .swipeout-content,
|
||
|
.list-block .swipeout.transitioning .swipeout-actions-right a,
|
||
|
.list-block .swipeout.transitioning .swipeout-actions-left a,
|
||
|
.list-block .swipeout.transitioning .swipeout-overswipe {
|
||
|
-webkit-transition: 300ms;
|
||
|
-o-transition: 300ms;
|
||
|
transition: 300ms;
|
||
|
}
|
||
|
.list-block .swipeout-content {
|
||
|
position: relative;
|
||
|
z-index: 10;
|
||
|
}
|
||
|
.list-block .swipeout-overswipe {
|
||
|
-webkit-transition: 200ms left;
|
||
|
-o-transition: 200ms left;
|
||
|
transition: 200ms left;
|
||
|
}
|
||
|
.list-block .swipeout-actions-left,
|
||
|
.list-block .swipeout-actions-right {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
height: 100%;
|
||
|
display: -webkit-box;
|
||
|
display: -ms-flexbox;
|
||
|
display: -webkit-flex;
|
||
|
display: flex;
|
||
|
}
|
||
|
.list-block .swipeout-actions-left a,
|
||
|
.list-block .swipeout-actions-right a {
|
||
|
padding: 0 1.5rem;
|
||
|
color: #fff;
|
||
|
background: #c7c7cc;
|
||
|
display: -webkit-box;
|
||
|
display: -ms-flexbox;
|
||
|
display: -webkit-flex;
|
||
|
display: flex;
|
||
|
-webkit-box-align: center;
|
||
|
-ms-flex-align: center;
|
||
|
-webkit-align-items: center;
|
||
|
align-items: center;
|
||
|
position: relative;
|
||
|
left: 0;
|
||
|
}
|
||
|
.list-block .swipeout-actions-left a:after,
|
||
|
.list-block .swipeout-actions-right a:after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
width: 600%;
|
||
|
height: 100%;
|
||
|
background: inherit;
|
||
|
z-index: -1;
|
||
|
}
|
||
|
.list-block .swipeout-actions-left a.swipeout-delete,
|
||
|
.list-block .swipeout-actions-right a.swipeout-delete {
|
||
|
background: #f6383a;
|
||
|
}
|
||
|
.list-block .swipeout-actions-right {
|
||
|
right: 0%;
|
||
|
-webkit-transform: translateX(100%);
|
||
|
-ms-transform: translateX(100%);
|
||
|
-o-transform: translateX(100%);
|
||
|
transform: translateX(100%);
|
||
|
}
|
||
|
.list-block .swipeout-actions-right a:after {
|
||
|
left: 100%;
|
||
|
margin-left: -1px;
|
||
|
}
|
||
|
.list-block .swipeout-actions-left {
|
||
|
left: 0%;
|
||
|
-webkit-transform: translateX(-100%);
|
||
|
-ms-transform: translateX(-100%);
|
||
|
-o-transform: translateX(-100%);
|
||
|
transform: translateX(-100%);
|
||
|
}
|
||
|
.list-block .swipeout-actions-left a:after {
|
||
|
right: 100%;
|
||
|
margin-right: -1px;
|
||
|
}
|