mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 09:33:54 +01:00
Code Issues Releases Wiki Activity

moved streamfield styles to own component and styled to accomodate several common permutations of blocks within blocks, accounting for help text

Browse Source
This commit is contained in:
Dave Cranwell 2015-06-09 17:39:40 +01:00 committed by Matt Westcott
parent 8bd6d65a20
commit 171631c38d
1 changed files with 355 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

355
wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss Normal file
View File

@ -0,0 +1,355 @@
ul.sequence{
position:relative;
@include clearfix;
}
li.sequence-member{
@include clearfix;
position:relative;
&:hover{
background-color:$color-input-focus;
.sequence-member-inner{
> .struct-block > label,
> .char_field > label,
.sequence > label{
opacity:1;
}
}
}
.struct-block .fields{
@include column(10);
padding-left:0;
padding-right:0;
}
.struct-block .sequence-container{
@include column(9);
padding-left:0;
padding-right:0;
.sequence-member-inner{
padding:1.5em 0;
padding:1.5em 0;
}
}
/* The top level sequence doesn't have a sequnce-member-inner. This block is basically for things that should only affect inner blocks */
.sequence-member-inner{
@include clearfix;
position:relative;
padding:1.5em 50px;
/* sequences within sequences, such as a ListBlock within StructBlock*/
> .sequence .sequence-inner{
@include column(10);
padding-left:0;
padding-right:0;
}
.sequence-type-list .sequence-container-inner{
@include column(10);
padding-left:0;
padding-right:0;
}
.sequence-type-list .sequence-member-inner{
padding:0;
padding-top:0.5em;
padding-bottom:1.2em;
}
}
.fields > li{
position:relative;
}
}
/* Image chooser has special display in streamfields */
.widget-admin_image_chooser{
label{
display:none;
}
.field-content{
display:block;
float:none;
width:100%;
text-align:center;
max-width:500px;
margin:auto;
border:1px solid $color-grey-4;
padding:1em;
}
.chooser{
.chosen{
padding:0;
}
.unchosen{
&:before{
float:none;
font-size:4em;
margin:0;
}
}
.preview-image{
float:none;
margin:0;
}
}
}
/*
This horridly specific selector ensures text inputs, rich text fields and textareas that are direct children of highest level sequence
should be borderless and full-width
*/
.block_field > .field-content > .input > .sequence-container > .sequence-container-inner > .sequence > .sequence-member > .sequence-member-inner{
> .widget-text_input input,
> .widget-rich_text_area .richtext,
> .widget-textarea textarea{
border:0;
padding:0;
background-color:transparent;
max-width:1024px;
}
}
/* Object controls */
.stream-controls{
@include border-radius(5px);
@include transition(opacity 0.2s ease);
opacity:0;
visibility:hidden;
position:absolute;
top:-1.5em; right:1em;
z-index:1;
overflow:visible;
background-color:$color-input-focus;
padding:0.2rem 1em;
h3{
margin:0;
font-size:0.7rem;
display:inline-block;
margin-right:1em;
line-height:1.4rem;
label{
font-weight:normal;
text-transform:uppercase;
float:none;
width:auto;
padding:0;
margin:0;
}
}
button.icon.text-replace{
@include border-radius(50%);
width:1.4rem;
height:1.4rem;
&:before{
line-height:1.3em;
font-size:0.9rem;
}
}
/* .buttons only exists for menus in stream_member.html */
.buttons{
display:inline-block;
}
.buttons,
label{
@include transition(opacity 0.2s ease);
opacity:0.4;
}
&:hover .buttons,
&:hover label{
opacity:1;
}
.disabled{
display:none;
}
}
/* list controls are slightly different as they require close proximity to their associated fields */
.list-controls{
top:1.5em
}
.sequence-type-list .object-help{
margin-top:1.5em !important;
}
/* Menu of other blocks to be added at each position */
.stream-menu{
@include transition(all 0.2s ease);
@include box-shadow(inset 0 0 45px rgba(0,0,0,0.3));
position:relative;
background-color:$color-grey-1;
opacity:1;
z-index:5;
.toggle{
@include transition(color 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;
outline:none;
span{
@include visuallyhidden();
}
&:before{
@include transform(rotate(-45deg));
position:absolute;
font-family:wagtail;
content:"B";
line-height:1em;
text-align:center;
}
}
.stream-menu-inner{
@include transform(translate3d(0,0,0));
max-width:50em;
margin: auto;
overflow:hidden;
}
ul{
@include transform(translate3d(0,0,0));
@include transition(all 0.2s ease);
@include transform(scale(1));
@include clearfix;
visibility:visible;
opacity:1;
padding:1em 1em 0 1em;
overflow:hidden;
}
li{
@include column(3);
padding-bottom:$grid-gutter-width;
padding-left:0;
padding-right:0;
&:nth-child(4n+1){
clear:left;
}
}
button{
@include transition(all 0.2s ease);
background-color:transparent;
border:0;
color:darken($color-grey-3, 5%);
height:auto;
display:block;
width:100%;
padding:0 0 0.5em 0;
outline:$color-teal;
overflow:visible;
span{
text-transform:none;
white-space: pre-wrap;
width:100%;
display:block;
overflow:hidden;
padding:0 1em;
box-sizing: border-box;
}
&:before{
display:block;
font-family:wagtail;
font-size:2em;
width:100%;
height:2em;
line-height:2em;
text-align:center;
}
&:hover,
&:focus{
background-color:$color-teal;
color:white;
}
}
&.stream-menu-closed{
@include box-shadow(none);
.stream-menu-inner ul{
@include transform(scale(0.9));
opacity:0;
}
.toggle{
color:$color-grey-3;
background-color:white;
&:before{
@include transform(rotate(0deg));
}
&:focus{
color:$color-teal;
}
}
&:hover{
border-top-color:$color-teal;
.toggle{
color:$color-teal;
}
}
}
@media screen and (min-width: $breakpoint-mobile){
li{
@include column(2);
&:nth-child(4n+1){
clear:none;
}
&:nth-child(6n+1){
clear:left;
}
}
}
}
.sequence-member .stream-menu{
margin:auto auto 0em auto;
}
.sequence-member .stream-menu-closed{
opacity:0;
visibility:hidden;
}
.sequence-member:hover{
.stream-controls,
.list-controls{
visibility:visible;
opacity:1;
}
.stream-menu{
visibility:visible;
opacity:1;
}
}