From dea2b5f0d710ec5eb70775cd49993cb067d558bc Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Fri, 21 Sep 2018 17:27:30 +0200 Subject: [PATCH] menu sort of working --- static/css/styles2.css | 155 +++++++++++------------------------------ 1 file changed, 41 insertions(+), 114 deletions(-) diff --git a/static/css/styles2.css b/static/css/styles2.css index 836eadec..ec3087b6 100644 --- a/static/css/styles2.css +++ b/static/css/styles2.css @@ -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; } + +