Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-12 09:13:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tweaks to make menu toggle work cleaner

Browse source
This commit is contained in:
Dave Cranwell 2015-02-11 10:31:40 +00:00
parent 53b854d4cc
commit dc6b06e585
2 changed files with 48 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
View file

@ -312,6 +312,34 @@
opacity:1;
z-index:5;
.toggle{
@include transition(all 0.2s ease);
@include border-radius(50px);
position:absolute;
top:-0.5em;
left:0;
right:0;
margin:0 auto;
cursor:pointer;
font-size:1.7em;
width:1em;
height:1em;
display:block;
z-index:5;
color:$color-grey-1;
background-color:white;
&:before{
@include transition(all 0.2s ease);
@include transform(rotate(-45deg));
position:absolute;
font-family:wagtail;
content:"B";
line-height:1em;
text-align:center;
}
}
.stream-menu-inner{
@include transition(max-height 0.2s ease);
max-width:50em;
@ -324,12 +352,18 @@
@include transition(all 0.2s ease);
@include clearfix;
opacity:1;
padding:1em;
padding:1em 1em 0 1em;
overflow:hidden;
}
li{
@include column(2);
padding-bottom:$grid-gutter-width;
padding-left:0;
padding-right:0;
&:nth-child(6n+7){
clear:left;
}
}
button{
@ -343,9 +377,8 @@
padding:0 0 0.5em 0;
span{
text-overflow:ellipsis;
text-transform:none;
white-space: nowrap;
text-transform:capitalize;
white-space: pre-wrap;
width:100%;
display:block;
overflow:hidden;
@ -369,48 +402,32 @@
}
}
&:before{
@include transition(all 0.2s ease);
@include transform(rotate(-45deg));
@include border-radius(50px);
cursor:pointer;
font-family:wagtail;
content:"B";
width:1em;
height:1em;
display:block;
margin:-0.5em auto auto auto;
z-index:5;
color:$color-grey-1;
background-color:white;
font-size:1.7em;
line-height:1em;
text-align:center;
}
&.stream-menu-closed{
@include box-shadow(none);
height:0px;
border-top:1px solid lighten($color-grey-4, 3%);
.toggle{
color:$color-grey-3;
background-color:white;
&:before{
@include transform(rotate(0deg));
}
}
.stream-menu-inner{
max-height:1em;
}
ul{
opacity:0;
padding:10em;
}
&:before{
@include transform(rotate(0deg));
color:$color-grey-3;
background-color:white;
}
}
&:hover{
border-top-color:$color-teal;
&:before{
.toggle{
color:$color-teal;
}
}

1
wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html
View file

@ -1,4 +1,5 @@
<div class="stream-menu {% if state == 'closed' %}stream-menu-closed{% endif %}">
<div class="toggle"></div>
<div class="stream-menu-inner">
<ul>
{% for child_block in child_blocks %}