mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
First pass of dropdowns
This commit is contained in:
Paul Adam Davis
parent
91ef8680c8
commit
9ce280e81c
4 changed files with 264 additions and 1 deletions
150
core/client/assets/sass/modules/dropdowns.scss
Normal file
150
core/client/assets/sass/modules/dropdowns.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
//
|
||||
// Dropdown Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper
|
||||
// Does nothing yet...
|
||||
.dropdown {}
|
||||
|
||||
// List
|
||||
.dropdown-menu {
|
||||
background: #fff;
|
||||
box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-size: 1.4rem;
|
||||
|
||||
// Dropdown Resets - This means we can use any element
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
} // .dropdown-menu
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
&[class*='triangle-'] {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent;
|
||||
display: block;
|
||||
width: 0;
|
||||
} // :before
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: rgba(0,0,0,0.1) 0 0 5px 5px;
|
||||
z-index: -1;
|
||||
} // :after
|
||||
} // &[class*='triangle-']
|
||||
|
||||
// Bottom
|
||||
&[class*='triangle-bottom'] {
|
||||
&:before {
|
||||
border-width: 10px 10px 0 10px;
|
||||
bottom: -10px;
|
||||
}
|
||||
&:after {
|
||||
bottom: -5px;
|
||||
}
|
||||
}
|
||||
&.triangle-bottom {
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
} // &.triangle-bottom
|
||||
|
||||
// Top
|
||||
&[class*='triangle-top'] {
|
||||
&:before {
|
||||
border-width: 0 10px 10px 10px;
|
||||
top: -10px;
|
||||
}
|
||||
&:after {
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
&.triangle-top {
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
} // &.triangle-top
|
||||
|
||||
// Top & Bottom Sides
|
||||
&.triangle-top-left,
|
||||
&.triangle-bottom-left {
|
||||
&:before {
|
||||
left: 2rem;
|
||||
}
|
||||
&:after {
|
||||
left: 2rem;
|
||||
}
|
||||
} // &.triangle-bottom-left
|
||||
&.triangle-top-right,
|
||||
&.triangle-bottom-right {
|
||||
&:before {
|
||||
right: 2rem;
|
||||
}
|
||||
&:after {
|
||||
right: 2rem;
|
||||
}
|
||||
} // &.triangle-bottom-right
|
||||
|
||||
} // .dropdown-menu
|
||||
|
||||
// List Item
|
||||
.dropdown-item {
|
||||
color: #000;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.7rem 3.5rem;
|
||||
|
||||
&:not(.divider):hover,
|
||||
&:not(.divider):focus {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
&[class*='icon-'] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&[class*='icon-']:before {
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&.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
|
||||
|
|
@ -21,6 +21,13 @@
|
|||
|
||||
@import "patterns/global";
|
||||
|
||||
|
||||
// Modules - Re-usable elements
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "modules/dropdowns";
|
||||
|
||||
|
||||
//
|
||||
// Components - User interface objects
|
||||
// --------------------------------------------------
|
||||
|
|
@ -32,4 +39,4 @@
|
|||
// Layouts - Individual application screens
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "layouts/default";
|
||||
@import "layouts/default";
|
||||
|
|
|
|||
16
core/client/docs/_layouts/raw.html
Normal file
16
core/client/docs/_layouts/raw.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
{% include head.html %}
|
||||
</head>
|
||||
<body>
|
||||
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
|
||||
|
||||
<!-- Docs page -->
|
||||
<main id="gh-main" role="main">
|
||||
{{content}}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
core/client/docs/dropdown.html
Normal file
90
core/client/docs/dropdown.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
layout: raw
|
||||
title: Ghost UI · Making publishing beautiful.
|
||||
---
|
||||
|
||||
<!--
|
||||
.dropdown
|
||||
This is used to show, hide and position the dropdown
|
||||
-->
|
||||
|
||||
<h1>Default Dropdown</h1>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" 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>
|
||||
</li>
|
||||
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Bottom Triangle</h1>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-bottom" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Bottom Left Triangle</h2>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-bottom-left" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Bottom Right Triangle</h2>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-bottom-right" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Top Triangle</h1>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-top" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Top Left Triangle</h2>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-top-left" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Top Right Triangle</h2>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu triangle-top-right" 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" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Div & Button Markup</h2>
|
||||
|
||||
<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>
|
||||
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Another action</button></span>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue