From 6aa6be071ca76b750c61998355f1c3a0f67f4602 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Wed, 30 Jul 2014 14:56:37 +0300 Subject: [PATCH] Import old dropdowns temporarily --- ghost/admin/assets/sass/patterns/_shame.scss | 151 ++++++++++++++++++- 1 file changed, 150 insertions(+), 1 deletion(-) diff --git a/ghost/admin/assets/sass/patterns/_shame.scss b/ghost/admin/assets/sass/patterns/_shame.scss index 87194bd70c..628141330f 100644 --- a/ghost/admin/assets/sass/patterns/_shame.scss +++ b/ghost/admin/assets/sass/patterns/_shame.scss @@ -188,4 +188,153 @@ main { } } // .floatingheader -} // .scrolling \ No newline at end of file +} // .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 + --- + Sadly !important is needed, to counteract the stringer selectors applying + a display property. + ========================================================================== */ + +.ghost-popover { + display: none !important; +} + +.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; +} \ No newline at end of file