mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Better dropdown organisation
This commit is contained in:
Paul Adam Davis
parent
a0387c46a7
commit
61a6d948b6
5 changed files with 103 additions and 314 deletions
|
|
@ -27,10 +27,7 @@
|
|||
li {
|
||||
list-style: none;
|
||||
}
|
||||
} // .dropdown-menu
|
||||
|
||||
// Triangle & positioning placeholders
|
||||
%triangle {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -43,109 +40,95 @@
|
|||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
width: ($dropdown_triangle * 1.5);
|
||||
height: ($dropdown_triangle * 1.5);
|
||||
background: #B0BEC4;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: #B0BEC4 0 0 0 1px;
|
||||
z-index: -1;
|
||||
} // :after
|
||||
} // %triangle
|
||||
|
||||
%triangle-top {
|
||||
@extend %triangle;
|
||||
|
||||
&:before {
|
||||
border-width: 0 6px 6px 6px;
|
||||
top: -6px;
|
||||
}
|
||||
&:after {
|
||||
top: -5px;
|
||||
}
|
||||
} // %triangle-top
|
||||
|
||||
%triangle-bottom {
|
||||
@extend %triangle;
|
||||
|
||||
&:before {
|
||||
border-width: 6px 6px 0 6px;
|
||||
bottom: -6px;
|
||||
}
|
||||
&:after {
|
||||
bottom: -5px;
|
||||
}
|
||||
} // %triangle-bottom
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
&.triangle-top {
|
||||
@extend %triangle-top;
|
||||
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
} // &.triangle-top
|
||||
|
||||
&.triangle-top-left {
|
||||
@extend %triangle-top;
|
||||
|
||||
&:before {
|
||||
left: 1.2rem;
|
||||
}
|
||||
&:after {
|
||||
left: 1.2rem;
|
||||
}
|
||||
} // &.triangle-top-left
|
||||
|
||||
&.triangle-top-right {
|
||||
@extend %triangle-top;
|
||||
|
||||
&:before {
|
||||
right: 1.2rem;
|
||||
}
|
||||
&:after {
|
||||
right: 1.2rem;
|
||||
}
|
||||
} // &.triangle-top-right
|
||||
|
||||
&.triangle-bottom {
|
||||
@extend %triangle-bottom;
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
} // &.triangle-bottom
|
||||
|
||||
&.triangle-bottom-left {
|
||||
@extend %triangle-bottom;
|
||||
&:before {
|
||||
left: 1.2rem;
|
||||
}
|
||||
&:after {
|
||||
left: 1.2rem;
|
||||
}
|
||||
} // &.triangle-bottom-left
|
||||
|
||||
&.triangle-bottom-right {
|
||||
@extend %triangle-bottom;
|
||||
&:before {
|
||||
right: 1.2rem;
|
||||
}
|
||||
&:after {
|
||||
right: 1.2rem;
|
||||
}
|
||||
} // &.triangle-bottom-right
|
||||
} // .dropdown-menu
|
||||
|
||||
|
||||
.dropdown-triangle-top {
|
||||
&:before {
|
||||
border-width: 0 $dropdown_triangle $dropdown_triangle $dropdown_triangle;
|
||||
top: -$dropdown_triangle;
|
||||
}
|
||||
&:after {
|
||||
top: -($dropdown_triangle - 1);
|
||||
}
|
||||
}
|
||||
.dropdown-triangle-bottom {
|
||||
&:before {
|
||||
border-width: $dropdown_triangle $dropdown_triangle 0 $dropdown_triangle;
|
||||
bottom: -$dropdown_triangle;
|
||||
}
|
||||
&:after {
|
||||
bottom: -($dropdown_triangle - 1);
|
||||
}
|
||||
}
|
||||
.dropdown-triangle-center {
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -$dropdown_triangle;
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -($dropdown_triangle * 1.5 / 2);
|
||||
}
|
||||
}
|
||||
// TODO: Make the values here use the $dropdown_triangle var
|
||||
.dropdown-triangle-left {
|
||||
&:before {
|
||||
left: 10px;
|
||||
}
|
||||
&:after {
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
.dropdown-triangle-right {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-top {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-center;
|
||||
@extend .dropdown-triangle-top;
|
||||
}
|
||||
.dropdown-top-left {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-top;
|
||||
@extend .dropdown-triangle-left;
|
||||
}
|
||||
.dropdown-top-right {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-top;
|
||||
@extend .dropdown-triangle-right;
|
||||
}
|
||||
.dropdown-bottom {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-center;
|
||||
@extend .dropdown-triangle-bottom;
|
||||
}
|
||||
.dropdown-bottom-left {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-bottom;
|
||||
@extend .dropdown-triangle-left;
|
||||
}
|
||||
.dropdown-bottom-right {
|
||||
@extend .dropdown-menu;
|
||||
@extend .dropdown-triangle-bottom;
|
||||
@extend .dropdown-triangle-right;
|
||||
}
|
||||
|
||||
// List Item
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ $red: #e25440;
|
|||
$orange: #F2A925;
|
||||
$green: #9FBB58;
|
||||
|
||||
$list-colours:
|
||||
$list-colours:
|
||||
('darkgrey' $darkgrey)
|
||||
('grey' $grey)
|
||||
('midgrey' $midgrey)
|
||||
|
|
@ -39,4 +39,6 @@ $default-transition-duration: 0.3s;
|
|||
$font-family: 'Open Sans', sans-serif;
|
||||
$font-family-mono: Inconsolata, monospace;
|
||||
|
||||
$at2x: 2 device-pixel-ratio;
|
||||
$at2x: 2 device-pixel-ratio;
|
||||
|
||||
$dropdown_triangle: 8px;
|
||||
|
|
@ -478,8 +478,7 @@ body.zen {
|
|||
}
|
||||
|
||||
.editor-options{
|
||||
@extend .menu;
|
||||
@extend .menu-right;
|
||||
@extend .dropdown-bottom-right;
|
||||
bottom: 140%;
|
||||
right: -3%;
|
||||
|
||||
|
|
@ -642,7 +641,7 @@ body.zen {
|
|||
}
|
||||
|
||||
.suggestions {
|
||||
@extend .menu;
|
||||
//@extend .dropdown-menu;
|
||||
bottom: 100%;
|
||||
|
||||
li.selected{
|
||||
|
|
|
|||
|
|
@ -190,23 +190,6 @@ main {
|
|||
|
||||
} // .scrolling
|
||||
|
||||
//
|
||||
// Old Dropdowns
|
||||
// --------------------------------------------------
|
||||
|
||||
.dropdown {
|
||||
@include icon-after($i-chevron-down, 8px) {
|
||||
padding-left: 6px;
|
||||
vertical-align: 0;
|
||||
};
|
||||
|
||||
&.active {
|
||||
color: $darkgrey;
|
||||
@include icon-after($i-chevron-down, 8px);
|
||||
}
|
||||
|
||||
} // .dropdown
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Dropdown Show & Hide
|
||||
|
|
@ -221,120 +204,4 @@ main {
|
|||
|
||||
.ghost-popover.open {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Menu
|
||||
---
|
||||
This is the base menu extend used for styles on interaction menus
|
||||
Default: Pop menu, chiclet bottom center.
|
||||
========================================================================== */
|
||||
|
||||
.menu {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 960;
|
||||
padding:6px 0;
|
||||
border: none;
|
||||
list-style: none;
|
||||
color: $lightgrey;
|
||||
background: $darkgrey;
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
|
||||
|
||||
// The triangle chiclet that points to where the menu came from
|
||||
// By default, this is bottom center.
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0 10px;
|
||||
border-style: solid;
|
||||
border-color: $darkgrey transparent;
|
||||
display: block;
|
||||
width: 0;
|
||||
} // &:before
|
||||
|
||||
// Stop :hover shadow from overflowing
|
||||
li {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a, p {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px 25px 10px 35px;
|
||||
border: none;
|
||||
color: $lightgrey !important; // It's dirty, but it's needed.
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: $blue;
|
||||
box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset;
|
||||
}
|
||||
} // a, p
|
||||
|
||||
// Add a check mark to the currently active menu item
|
||||
.active a {
|
||||
@include icon($i-check) {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
} // .menu
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Menu Positioning Options
|
||||
---
|
||||
Combine above classes into one usable class
|
||||
========================================================================== */
|
||||
|
||||
// This extend moves the chiclet to the top, for menus which drop down.
|
||||
.menu-drop {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
top: -10px;
|
||||
bottom: auto;
|
||||
border-width:0 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Chiclet to the left, for menus appearing close to left edge of the screen.
|
||||
.menu-left {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
left:10px;
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Chiclet to the right, for menus appearing close to right edge of the screen.
|
||||
.menu-right {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
left: auto;
|
||||
right:10px;
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Drop left, chiclet top left.
|
||||
.menu-drop-left {
|
||||
@extend .menu;
|
||||
@extend .menu-drop;
|
||||
@extend .menu-left;
|
||||
}
|
||||
|
||||
// Drop right, chiclet top right.
|
||||
.menu-drop-right {
|
||||
@extend .menu;
|
||||
@extend .menu-drop;
|
||||
@extend .menu-right;
|
||||
}
|
||||
|
|
@ -15,22 +15,14 @@ title: Dropdowns - Ghost UI
|
|||
<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>
|
||||
<hr>
|
||||
|
||||
<h2>Dropdown with Icons</h2>
|
||||
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu dropdown-with-icons" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<ul class="dropdown-top 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>
|
||||
|
|
@ -43,67 +35,13 @@ title: Dropdowns - Ghost UI
|
|||
|
||||
<hr>
|
||||
|
||||
<h2>Bottom Triangle</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Bottom Left Triangle</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Bottom Right Triangle</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Top Triangle</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Top Left Triangle</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Top Right Triangle</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Div & 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>
|
||||
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Another action</button></span>
|
||||
</div>
|
||||
</div>
|
||||
{% assign dropdown_classes = "dropdown-top|dropdown-top-left|dropdown-top-right|dropdown-bottom|dropdown-bottom-left|dropdown-bottom-right" | split: "|" %}
|
||||
{% for item in dropdown_classes %}
|
||||
<h2>Sample: <code>{{item}}</code></h2>
|
||||
<div class="dropdown">
|
||||
<ul class="{{item}}" 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>
|
||||
{% endfor %}
|
||||
Loading…
Add table
Reference in a new issue