spacedeck-open/styles/list.scss

618 lines
13 KiB
SCSS
Raw Permalink Normal View History

2017-04-07 01:29:05 +02:00
@import "vars";
@import "mixins";
@import "unicode";
.table-versions {
width: 100%;
margin-top: 25px;
margin-bottom: 25px;
tr {
border-bottom: 2px solid rgba(0,0,0,0.025);
&:last-child { border: none !important;}
td {
span {
position: relative;
}
&:first-child { padding-left: 15px; width: 1%; padding-right: 0px;}
&:last-child { padding-right: 40px; width: 1%; text-align: right;}
}
}
}
.grid {
padding: 15px;
margin: 0;
list-style: none;
text-align: left;
width: 100%;
@include user-select(none);
@include transition( all 0.2s ease-in-out);
@include translateY (0px);
&.select {
@include translateY (60px);
> li {
&.list-title > span,
&.folder-up > span {
@include translateX (0px);
}
&:active,
&.active,
&:hover {
&:before {
display: none !important;
}
}
.checkbox {
pointer-events: auto;
// @include translateX (0px);
@include scale(1,1);
}
}
}
> li {
display: block;
width: 33.333333%;
width: 50%;
float: left;
@include clearfix;
position: relative;
overflow: hidden;
// border-bottom: 2px solid rgba(0,0,0,0.05);
.sort-handle {
width: 44px;
position: absolute;
pointer-events: none;
top: 0;
right: 0;
@include transition-transform( 0.1s ease-in-out);
opacity: 0.05;
@include scale(0,0);
cursor: -webkit-grab; cursor: -moz-grab;
&:active {
opacity: 1;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
z-index: 100;
&:before {
width: 44px;
}
}
&:hover {
background-clip: padding-box;
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 0.25;
display: block;
}
}
&.checked {
&:before {
opacity: 0.5;
display: block;
}
}
&.editing { > span { color: transparent !important; } }
&.editing,
&:active,
&.loading,
&.active {
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 1 !important;
display: block;
}
> span {
color: white;
font-weight: 500;
&:after {
opacity: 1 !important;
color: white !important;
}
}
}
.item-thumbnail {
display: block;
width: 100%;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.025);
margin-bottom: 7px;
border-radius: $radius;
z-index: 50;
/* aspect ratio without spacer image */
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
// padding-top: 75%; /* initial ratio of 1:1*/
}
}
.checkbox {
@include transition-transform(0.2s ease-in-out);
position: absolute;
left: 0px;
pointer-events: none;
z-index: 100;
height: 100%;
width: 100%;
text-align: left;
@include transform-origin(top left);
@include scale(0,0);
&:before {
border-radius: 100%;
height: 30px;
width: 30px;
line-height: 29px;
background-color: $darker;
z-index: 10;
position: absolute;
}
&:after {
margin: -5px;
content: "";
display: block;
position: absolute;
top: 0;
border-bottom-right-radius: 50%;
height: 40px;
width: 40px;
line-height: 29px;
background-color: $darker;
z-index: 0;
}
}
> span {
padding: 5px;
padding-bottom: 10px;
display: block;
line-height: 1;
font-size: 15px;
font-size: 11px;
color: $medium;
text-decoration: none;
// text-align: center;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
}
.list {
counter-reset: list-counter;
padding: 0px;
margin: 0px;
list-style: none;
text-align: left;
// width: 100%;
display: block;
@include user-select(none);
@include transition( all 0.2s ease-in-out);
@include translateY (0px);
&.pages {
margin-left: -40px;
margin-right: -40px;
> li {
@include transition( margin-top 0.2s ease-in-out);
&.moving{
}
&.over{
}
counter-increment: list-counter;
position: relative;
display:block;
> span {
padding-left: 90px;
position: static;
&:before {
content: counter(list-counter);
position: absolute;
top: 50%;
margin-top: -13px;
left: 40px;
// background-color: $medium;
// color: $dark;
color: rgba(0,0,0,0.1);
border: 2px solid rgba(0,0,0,0.1);
border-radius: 100%;
display: inline-block;
text-align: center;
width: 26px;
height: 26px;
line-height: 22px;
font-weight: 700;
}
}
}
}
// &.versions {
// counter-reset: versions-counter;
// li {
// counter-increment: versions-counter;
// span {
// &:before {
// content: counter(versions-counter);
// display: block;
// }
// }
// }
// }
&.versions {
> li {
position: relative;
> span {
padding: 20px 25px;
position: static;
// padding-left: 65px;
// &:before {
// content: counter(list-counter);
// position: absolute;
// top: 50%;
// margin-top: -13px;
// left: 25px;
// // background-color: $medium;
// // color: $dark;
// color: $medium;
// border: 2px solid $medium;
// border-radius: 100%;
// display: inline-block;
// text-align: center;
// width: 26px;
// height: 26px;
// line-height: 22px;
// font-weight: 700;
// }
> span {
display: block;
line-height: 1.3;
font-family: $main-font;
font-size: 10px;
line-height: 1.5;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.version-name {font-size: 15px; }
&.version-author {opacity: 0.5; }
&.version-thumbnail {
float: left;
display: block;
width: 25%;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.025);
border-radius: $radius;
z-index: 50;
margin-right: 15px;
/* aspect ratio without spacer image */
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
// padding-top: 75%; /* initial ratio of 1:1*/
}
}
}
}
}
}
&.menu {
> li {
&:before {
display: none !important;
}
> span {
padding-left: 0px !important;
.icon {
margin-left: 8px;
margin-right: -8px;
}
.icon-md {
margin-top: -2px;
margin-right: -8px;
margin-left: 8px;
}
.icon-folder-plus {
color: $yellow;
}
}
}
}
&.select {
> li {
&.list-title > span,
&.folder-up > span {
@include translateX (0px);
}
&:active,
&.active,
&:hover {
&:before {
display: none !important;
}
}
.sort-handle {
@include scale(1,1);
pointer-events: auto;
}
.checkbox {
position: absolute;
left: 0px;
@include translateX (0px);
pointer-events: auto;
}
> span {
@include translateX (40px);
padding-right: 80px !important;
}
}
}
> li {
@include clearfix;
position: relative;
overflow: hidden;
display: block;
border-bottom: 2px solid rgba(0,0,0,0.05);
cursor: pointer;
.sort-handle {
width: 44px;
position: absolute;
pointer-events: none;
top: 0;
right: 0;
@include transition-transform( 0.1s ease-in-out);
opacity: 0.5;
@include scale(0,0);
cursor: -webkit-grab; cursor: -moz-grab;
&:active {
opacity: 1;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
z-index: 100;
&:before {
width: 44px;
}
}
&.deleted {-webkit-animation:collapse 0.35s ease-in-out forwards; }
&.loading {
> span:before {
@include transition( all 0.1s 0.1s ease-in-out);
-webkit-animation:pulse 0.35s infinite ease-in-out;
@include scale(1,1);
}
}
&.home > span:after{
@extend .icon-home:before;
opacity: 0.25;
}
&.folder-up > span:after,
&.folder > span:after {
@extend .icon-folder:before;
color: $yellow;
}
&.space > span:after {
@extend .icon-page-horizontal:before;
opacity: 0.25;
}
&.shaed > span:after {
@extend .icon-page-horizontal-up:before;
opacity: 0.25;
}
&.home,
&.folder-up,
&.folder,
&.space {
> span {
padding-left: 50px;
position: relative;
&:after {
@include icon;
@include icon-md;
position: absolute;
top: 6px;
left: 8px;
}
&:before {
@include icon;
position: absolute;
top: 0px;
left: auto;
right: -4px;
color: $medium !important;
color: $light !important;
@extend .icon-shape-circle:before;
}
&:after {
@include transition( transition-transform 0.1s 0.1s ease-in-out);
@include scale(1,1);
}
&:before {
@include transition( transition-transform 0.1s 0s ease-in-out);
@include scale(0,0);
}
}
}
&:before {
top: 50%;
left: 7px;
margin-top: -3px;
content: "";
display: block;
position: absolute;
height: 6px;
width: 6px;
background-color: $light;
border-radius: 100%;
display: none;
}
&:hover {
background-clip: content-box;
background-color: rgba(255,255,255,0.025);
&:before {
opacity: 0.25;
display: block;
}
}
&.checked {
&:before {
opacity: 0.5;
display: block;
}
}
&.editing { > span { color: transparent !important; } }
&.editing,
&:active,
&.loading,
&.active {
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 1 !important;
display: block;
}
> span {
color: white;
// font-weight: 500;
&:after {
opacity: 1 !important;
color: white !important;
}
}
}
&.list-title,
&.list-title:hover,
&.list-title:active {
background-color: transparent;
border: none;
cursor: default;
> span {
min-height: 30px;
line-height: 30px;
font-size: 11px;
color: $medium;
color: white;
padding: 0px 25px;
padding-top: 19px;
}
&:before {
display: none;
}
}
.checkbox {
@include transition-transform(0.2s ease-in-out);
@include translateX (-60px);
position: absolute !important;
left: 0px;
pointer-events: none;
width: 100%;
z-index: 100;
}
> span {
@include transition-transform(0.2s ease-in-out);
display: block;
min-height: 60px;
line-height: 58px;
font-size: 15px;
color: $medium;
text-decoration: none;
padding: 0px 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
// &:active {background-color: $dark !important; }
&:first-letter {
// text-transform: capitalize;
}
&.thumbnail {
padding: 0px 25px;
padding-top: 25px;
img {
display: block;
max-width: 100%;
}
}
}
}
}
.light .list > li{
&.editing,
&:active,
&.loading,
&.active {
> span {
color: black;
&:after {
color: black !important;
}
}
}
}
@-webkit-keyframes pulse {
0% { @include scale(0,0); }
50% { @include scale(0.3,0.3); }
100% { @include scale(0,0); }
}
@-webkit-keyframes collapse {
0% { max-height: 60px; }
100% { max-height: 0px; }
}