mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00
Code Issues Releases Wiki Activity

tweaks to listing styles

Browse Source
This commit is contained in:
Dave Cranwell 2014-07-24 15:11:45 +01:00
parent 09097f651e
commit cbc96ac97e
2 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
View File

@ -153,6 +153,38 @@
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
</ul>
<h3><code>ul</code> listings with multiple columns</h3>
<ul class="listing">
<li>
<div class="row row-flush">
<div class="col6 title">
<h2><a href="">Something here</a></h2>
</div>
<small class="col6" style="text-align:right">Something else</small>
</div>
</li>
<li>
<div class="row row-flush">
<div class="col6">
<a href="">Something here</a>
</div>
<small class="col6" style="text-align:right">Something else</small>
</div>
</li>
<li>
<div class="row row-flush">
<div class="col6">
<a href="">Something here</a>
</div>
<small class="col6" style="text-align:right">Something else</small>
</div>
</li>
</ul>
<h3>Listings used for choosing a list item</h3>

83
wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
View File

@ -5,6 +5,9 @@ ul.listing{
.listing{
margin-bottom:2em;
color:lighten($color-text-base, 20%);
font-size:0.95em;
ul{
@include unlist();
}
@ -27,7 +30,8 @@ ul.listing{
}
thead{
color: $color-grey-2;
font-size:1.1em;
color: $color-text-base;
border-bottom:1px solid $color-grey-4;
th{
@ -51,22 +55,6 @@ ul.listing{
right:0;
}
}
/*
.dropdown{
padding:0;
}
.dropdown-toggle{
display:block;
padding:1.5em;
}
.dropdown:hover,
.dropdown.open{
@include box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2));
background-color:white;
margin-left:-$grid-gutter-width * 2;
}
*/
}
&.full-width td:first-child,
@ -87,20 +75,24 @@ ul.listing{
tbody{
border-bottom:1px dashed $color-input-border;
}
tbody tr{
border-top:1px dashed $color-input-border;
&:first-child{
tr{
border-top:1px dashed $color-input-border;
&:first-child{
border-top:1px dashed $color-input-border;
}
}
}
&.full-width tbody{
border:0;
}
&.full-width tbody tr:hover{
background-color:#FDFDFD;
}
&.chooser {
tbody .title a{
display:block;
@ -140,22 +132,10 @@ ul.listing{
font-size:1em;
}
.divider{
text-transform:uppercase;
font-size:0.8em;
background-color:$color-grey-3;
td{
padding-top:0.5em;
padding-bottom:0.5em;
}
}
&.full-width .divider td{
padding-left:20px;
}
/* specific columns */
.bulk{
padding-right:0;
@ -179,9 +159,9 @@ ul.listing{
h2{
text-transform:none;
margin:0;
font-size:1.1em;
font-size:1.15em;
font-weight:700;
color:$color-grey-2;
color:darken($color-grey-2, 10%);
line-height:1.5em;
a{
@ -233,27 +213,30 @@ ul.listing{
.children,
.no-children{
padding:0 !important;
border-left:1px dashed $color-input-border;
&:hover{
background-color:$color-grey-5;
}
}
.children a,
.no-children a{
display:block;
padding:2em 0;
a{
display:block;
padding:2em 0;
}
}
.children a{
color:$color-teal;
display:block;
&:before{
font-size:3rem;
}
}
.no-children a{
color:$color-grey-3;
display:block;
&:before{
font-size:1.5rem;
}
@ -261,6 +244,7 @@ ul.listing{
color:$color-teal;
}
}
&.small .children a:before{
font-size:30px;
}
@ -293,7 +277,6 @@ ul.listing{
border:1px dashed $color-input-border;
border-width:1px 0;
td{
display:none;
@ -546,15 +529,17 @@ table.listing{
}
.no-children {
border-color:transparent;
a{
opacity:0;
}
}
.no-children a{
opacity:0;
}
.no-children:hover{
border-color:$color-input-border;
a{opacity:1;}
tr:hover .no-children a{
opacity:1;
}
table .no-results-message{
padding-left:50px;
}