From 577669d5b77e03f57391b6b40c3b11153fd08a58 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 16 Nov 2017 15:06:45 +0000 Subject: Update dropdowns.md --- doc/development/fe_guide/dropdowns.md | 56 ++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/doc/development/fe_guide/dropdowns.md b/doc/development/fe_guide/dropdowns.md index 319a4a46f5c..e1660ac5caa 100644 --- a/doc/development/fe_guide/dropdowns.md +++ b/doc/development/fe_guide/dropdowns.md @@ -1,36 +1,38 @@ # Dropdowns -Recently we refactored our dropdowns to make them all look the same. -## How to sttle a bootstrap dropdown + +## How to style a bootstrap dropdown 1. Use the HTML structure provided by the [docs][bootstrap-dropdowns] 1. Add a specific class to the top level `.dropdown` element -1. Include the mixin in CSS + + + ```Haml + .dropdown.my-dropdown + %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false } + %span.dropdown-toggle-text + Toggle Dropdown + = icon('chevron-down') + + %ul.dropdown-menu + %li + %a + item! + ``` -```Haml -.dropdown.my-dropdown - %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false } - %span.dropdown-toggle-text - Toggle Dropdown - = icon('chevron-down') + Or use the helpers + ```Haml + .dropdown.my-dropdown + = dropdown_toggle('Toogle!', { toggle: 'dropdown' }) + = dropdown_content + %li + %a + item! + ``` - %ul.dropdown-menu - %li - %a - item! -``` - -Or use the helpers -```Haml -.dropdown.my-dropdown - = dropdown_toggle('Toogle!', { toggle: 'dropdown' }) - = dropdown_content - %li - %a - item! -``` +1. Include the mixin in CSS -```SCSS -@include new-style-dropdown('.my-dropdown '); -``` + ```SCSS + @include new-style-dropdown('.my-dropdown '); + ``` [bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns -- cgit v1.2.1