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

Refactor dropdowns to use extends

Browse source
This commit is contained in:
Paul Adam Davis 2014-07-29 12:46:19 +01:00
parent 2ac2934118
commit 49eed8b6cd
2 changed files with 93 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
ghost/admin/assets/sass/modules/dropdowns.scss
View file

@ -23,62 +23,55 @@
} }
} // .dropdown-menu } // .dropdown-menu
// Triangle & positioning placeholders
%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
} // %triangle
%triangle-top {
@extend %triangle;
&:before {
border-width: 0 10px 10px 10px;
top: -10px;
}
&:after {
top: -5px;
}
} // %triangle-top
%triangle-bottom {
@extend %triangle;
&:before {
border-width: 10px 10px 0 10px;
bottom: -10px;
}
&:after {
bottom: -5px;
}
} // %triangle-bottom
.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 { &.triangle-top {
@extend %triangle-top;
&:before { &:before {
left: 50%; left: 50%;
margin-left: -10px; margin-left: -10px;
@ -89,9 +82,40 @@
} }
} // &.triangle-top } // &.triangle-top
// Top & Bottom Sides &.triangle-top-left {
&.triangle-top-left, @extend %triangle-top;
&:before {
left: 2rem;
}
&:after {
left: 2rem;
}
} // &.triangle-top-left
&.triangle-top-right {
@extend %triangle-top;
&:before {
right: 2rem;
}
&:after {
right: 2rem;
}
} // &.triangle-top-right
&.triangle-bottom {
@extend %triangle-bottom;
&:before {
left: 50%;
margin-left: -10px;
}
&:after {
left: 50%;
margin-left: -10px;
}
} // &.triangle-bottom
&.triangle-bottom-left { &.triangle-bottom-left {
@extend %triangle-bottom;
&:before { &:before {
left: 2rem; left: 2rem;
} }
@ -99,8 +123,9 @@
left: 2rem; left: 2rem;
} }
} // &.triangle-bottom-left } // &.triangle-bottom-left
&.triangle-top-right,
&.triangle-bottom-right { &.triangle-bottom-right {
@extend %triangle-bottom;
&:before { &:before {
right: 2rem; right: 2rem;
} }
@ -125,14 +150,15 @@
&[class*='icon-'] { &[class*='icon-'] {
position: relative; position: relative;
} &:before {
position: absolute;
&[class*='icon-']:before { top: 50%;
position: absolute; left: 1.5rem;
left: 1.5rem; font-size: 1.2rem;
font-size: 1.2rem; line-height: 1;
line-height: 1.2; margin-top: -0.6rem;
} }
} // &[class*='icon-']
&.divider { &.divider {
position: relative; position: relative;
@ -146,5 +172,7 @@
height: 1px; height: 1px;
background: #eee; background: #eee;
} // :before } // :before
} // .divider } // .divider
} // .dropdown-item } // .dropdown-item

2
ghost/admin/docs/dropdown.html
View file

@ -1,6 +1,6 @@
--- ---
layout: raw layout: raw
title: Ghost UI · Making publishing beautiful. title: Dropdowns - Ghost UI
--- ---
<!-- <!--