Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Better dropdowns styles and docs

Browse source
This commit is contained in:
Paul Adam Davis 2014-07-29 16:19:00 +01:00
parent 593b6f0200
commit aab0bf4fa7
2 changed files with 71 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
core/client/assets/sass/modules/dropdowns.scss
View file

@ -8,16 +8,18 @@
// List
.dropdown-menu {
background: #fff;
box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
display: inline-block;
border-radius: 2px;
min-width: 160px;
padding: 0.5rem 0;
margin: 0;
position: relative;
font-size: 1.4rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 12px rgba(0,0,0,0.175);
border-radius: 2px;
// Dropdown Resets - This means we can use any element
// Item Resets - This means we can use any element
li {
list-style: none;
}
@ -41,7 +43,7 @@
height: 20px;
background: #fff;
transform: rotate(45deg);
box-shadow: rgba(0,0,0,0.1) 0 0 5px 5px;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.175);
z-index: -1;
} // :after
} // %triangle
@ -133,46 +135,49 @@
right: 2rem;
}
} // &.triangle-bottom-right
} // .dropdown-menu
// List Item
.dropdown-item {
color: #000;
display: block;
width: 100%;
padding: 0.7rem 3.5rem;
padding: 0.6rem 2rem;
font-size: 1.4rem;
line-height: 1;
color: #000;
&:not(.divider):hover,
&:not(.divider):focus {
background: #f6f6f6;
}
} // .dropdown-item
// Divider
.dropdown-menu .divider {
display: block;
padding: 0;
margin: 0.9rem 0;
height: 1px;
width: 100%;
position: relative;
background: #eee;
overflow: hidden;
} // .dropdown-menu .divider
// Icons
.dropdown-with-icons {
.dropdown-item:not(.divider) {
padding: 0.6rem 3rem;
&[class*='icon-'] {
position: relative;
&:before {
position: absolute;
top: 50%;
left: 1.5rem;
left: 1rem;
font-size: 1.2rem;
line-height: 1;
margin-top: -0.6rem;
}
} // &[class*='icon-']
&.divider {
position: relative;
height: 1.5rem;
&:before {
content: '';
position: absolute;
top: 0.7rem;
left: 0;
width: 100%;
height: 1px;
background: #eee;
} // :before
} // .divider
} // .dropdown-item
} // .dropdown-with-icons

41
core/client/docs/dropdown.html
View file

@ -8,15 +8,34 @@ title: Dropdowns - Ghost UI
This is used to show, hide and position the dropdown
-->
<h1>Default Dropdown</h1>
<h1>Dropdowns</h1>
<p>Basic usage notes</p>
<ul>
<li>The styles should be markup-independent, so you can use divs, lists, and so on.</li>
<li>Add the class <code>.dropdown-with-icons</code> to <code>.dropdown-menu</code> is you will be using icons in the dropdown items.</li>
<li>Triangles are optional class on the <code>.dropdown-menu</code> element, and have 6 positions:
<ul>
<li><code>.triangle-bottom</code></li>
<li><code>.triangle-bottom-left</code></li>
<li><code>.triangle-bottom-right</code></li>
<li><code>.triangle-top</code></li>
<li><code>.triangle-top-left</code></li>
<li><code>.triangle-top-right</code></li>
</ul>
</li>
</ul>
<h2>Default Dropdown</h2>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<ul class="dropdown-menu dropdown-with-icons" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation">
<span class="dropdown-item divider"></span>
<span class="divider"></span>
</li>
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
@ -24,7 +43,7 @@ title: Dropdowns - Ghost UI
<hr>
<h1>Bottom Triangle</h1>
<h2>Bottom Triangle</h2>
<div class="dropdown">
<ul class="dropdown-menu triangle-bottom" role="menu" aria-labelledby="dropdownMenu1">
@ -33,7 +52,7 @@ title: Dropdowns - Ghost UI
</ul>
</div>
<h2>Bottom Left Triangle</h2>
<h3>Bottom Left Triangle</h3>
<div class="dropdown">
<ul class="dropdown-menu triangle-bottom-left" role="menu" aria-labelledby="dropdownMenu1">
@ -42,7 +61,7 @@ title: Dropdowns - Ghost UI
</ul>
</div>
<h2>Bottom Right Triangle</h2>
<h3>Bottom Right Triangle</h3>
<div class="dropdown">
<ul class="dropdown-menu triangle-bottom-right" role="menu" aria-labelledby="dropdownMenu1">
@ -53,7 +72,7 @@ title: Dropdowns - Ghost UI
<hr>
<h1>Top Triangle</h1>
<h2>Top Triangle</h2>
<div class="dropdown">
<ul class="dropdown-menu triangle-top" role="menu" aria-labelledby="dropdownMenu1">
@ -62,7 +81,7 @@ title: Dropdowns - Ghost UI
</ul>
</div>
<h2>Top Left Triangle</h2>
<h3>Top Left Triangle</h3>
<div class="dropdown">
<ul class="dropdown-menu triangle-top-left" role="menu" aria-labelledby="dropdownMenu1">
@ -71,7 +90,7 @@ title: Dropdowns - Ghost UI
</ul>
</div>
<h2>Top Right Triangle</h2>
<h3>Top Right Triangle</h3>
<div class="dropdown">
<ul class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
@ -80,8 +99,8 @@ title: Dropdowns - Ghost UI
</ul>
</div>
<h2>Div &amp; Button Markup</h2>
<h3>Div &amp; Button Markup</h3>
<!-- TODO: When button styles are in, check these look correct -->
<div class="dropdown">
<div class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Action</button></span>