feat: lists UX + assets create folder UI (wip)
This commit is contained in:
@@ -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{
|
||||
|
Reference in New Issue
Block a user