feat: lists UX + assets create folder UI (wip)

This commit is contained in:
Nick
2019-05-19 14:46:08 -04:00
parent 965f0ad2cd
commit 7b08c8bb31
6 changed files with 194 additions and 20 deletions

View File

@@ -235,6 +235,92 @@
li + li {
margin-top: .5rem;
}
&.links-list {
li {
background-color: mc('grey', '50');
background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
border-right: 1px solid mc('grey', '200');
border-bottom: 1px solid mc('grey', '200');
border-left: 5px solid mc('grey', '300');
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
padding: 1rem;
border-radius: 5px;
font-weight: 500;
&:hover {
background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
border-left-color: mc('blue', '500');
cursor: pointer;
}
&::before {
content: '';
display: none;
}
> a {
display: block;
text-decoration: none;
margin: -1rem;
padding: 1rem;
}
@at-root .theme--dark & {
background-color: mc('grey', '50');
background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 5%), mc('grey', '900'));
border-right: 1px solid mc('grey', '900');
border-bottom: 1px solid mc('grey', '900');
border-left: 5px solid mc('grey', '700');
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
&:hover {
background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
border-left-color: mc('blue', '500');
cursor: pointer;
}
}
}
}
&.grid-list {
margin: 1rem 24px 0 24px;
background-color: #FFF;
border: 1px solid mc('grey', '200');
padding: 1px;
display: inline-block;
@at-root .theme--dark & {
background-color: #000;
border: 1px solid mc('grey', '800');
}
li {
background-color: mc('grey', '50');
padding: .6rem 1rem;
display: block;
&:nth-child(odd) {
background-color: mc('grey', '100');
}
& + li {
margin-top: 0;
}
&::before {
color: mc('grey', '400');
}
@at-root .theme--dark & {
background-color: mc('grey', '900');
&:nth-child(odd) {
background-color: darken(mc('grey', '900'), 5%);
}
}
}
}
}
ul {
@@ -264,6 +350,11 @@
&::before, &::after {
display: none;
}
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 5%);
color: mc('indigo', '100');
}
}
.prismjs{