sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

menu sort of working

Browse Source
This commit is contained in:
Sander Roosendaal
2018-09-21 17:27:30 +02:00
parent ca58ceb6d4
commit dea2b5f0d7
1 changed files with 41 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
static/css/styles2.css
View File

@@ -33,21 +33,29 @@
aside ul {
list-style: none;
margin: 0;
margin: 5px;
padding: 0;
}
}
aside li {
margin-left: 0;
}
aside li li {
margin-left: 30px;
}
aside a {
color: #a0f6aa;
text-decoration: none;
}
aside .cd-accordion-menu {
width: 90%;
/* max-width: 600px; */
width: 100%;
max-width: 600px;
background: #4d5158;
/* margin: 4em auto; */
/* margin: 4em auto; */
/* box-shadow: 0 4px 40px #70ac76; */
}
@@ -69,81 +77,44 @@
opacity: 0;
}
aside .cd-accordion-menu label, .cd-accordion-menu a {
aside .cd-accordion-menu label,
aside .cd-accordion-menu a {
position: relative;
display: block;
/* padding: 18px 18px 18px 64px; */
background: #4d5158;
color: #ffffff;
/* font-size: 1.6rem; */
}
aside .no-touch .cd-accordion-menu label:hover, aside .no-touch .cd-accordion-menu a:hover {
background: #52565d;
}
aside .cd-accordion-menu label::before,
aside .cd-accordion-menu label::after,
aside .cd-accordion-menu a::after {
aside .cd-accordion-menu label::before
{
/* icons */
content: '';
content: 'V';
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
aside .cd-accordion-menu label {
cursor: pointer;
}
aside .cd-accordion-menu label::before, aside .cd-accordion-menu label::after {
background-image: url(/static/img/cd-icons.svg);
background-repeat: no-repeat;
}
aside .cd-accordion-menu label::before {
/* arrow icon */
left: 18px;
background-position: 0 0;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
aside .cd-accordion-menu label::after {
/* folder icons */
left: 41px;
background-position: -16px 0;
}
aside .cd-accordion-menu a::after {
/* image icon */
left: 36px;
background: url(/static/img/cd-icons.svg) no-repeat -48px 0;
}
aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
/* rotate arrow */
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateY(0%) ;
-moz-transform: translateY(0%) ;
-ms-transform: translateY(0%) ;
-o-transform: translateY(0%) ;
transform: translateY(0%) ;
}
aside .cd-accordion-menu input[type=checkbox]:checked + label::after {
/* show open folder icon if item is checked */
background-position: -32px 0;
}
aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
@@ -154,57 +125,10 @@
aside .cd-accordion-menu ul label,
aside .cd-accordion-menu ul a {
background: #35383d;
box-shadow: inset 0 -1px #41444a;
padding-left: 0;
background: #35383d;
padding-left: 30px;
}
aside .no-touch .cd-accordion-menu ul label:hover,
aside .no-touch .cd-accordion-menu ul a:hover {
background: #3c3f45;
}
aside .cd-accordion-menu > li:last-of-type > label,
aside .cd-accordion-menu > li:last-of-type > a,
aside .cd-accordion-menu > li > ul > li:last-of-type label,
aside .cd-accordion-menu > li > ul > li:last-of-type a {
box-shadow: none;
}
aside .cd-accordion-menu ul label::before {
left: 36px;
}
aside .cd-accordion-menu ul label::after,
aside .cd-accordion-menu ul a::after {
left: 59px;
}
aside .cd-accordion-menu ul ul label,
aside .cd-accordion-menu ul ul a {
padding-left: 100px;
}
aside .cd-accordion-menu ul ul label::before {
left: 54px;
}
aside .cd-accordion-menu ul ul label::after,
aside .cd-accordion-menu ul ul a::after {
left: 77px;
}
aside .cd-accordion-menu ul ul ul label,
aside .cd-accordion-menu ul ul ul a {
padding-left: 118px;
}
aside .cd-accordion-menu ul ul ul label::before {
left: 72px;
}
aside .cd-accordion-menu ul ul ul label::after,
aside .cd-accordion-menu ul ul ul a::after {
left: 95px;
}
user ul {
list-style: none;
margin: 0;
@@ -311,13 +235,13 @@
@media (min-width: 768px) {
.wrapper {
grid-template-columns: 1fr 5fr 1fr;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header user"
"nav nav nav nav"
"sidebar content content content"
"sidebar content content content"
"ad footer footer footer"
"header header user"
"nav nav nav"
"sidebar content content"
"sidebar content content"
"ad footer footer"
}
nav ul {
@@ -334,9 +258,12 @@
}
aside .cd-accordion-menu.animated label::before {
/* this class is used if you're using jquery to animate the accordion */
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}