...
 
Commits (4)
Sat 3 Feb 2018 Yasuhiro Asaka <[email protected]>
* Arrange document (Add Components section)
* Create dropdown action menu button
Thu 1 Feb 2018 Yasuhiro Asaka <[email protected]>
* Bump version 0.0.30
* Add grouped button style
......
......@@ -41,22 +41,23 @@ See `doc/index.html`
### Styles
* [Box](https://grauwoelfchen.gitlab.io/styr/box.html)
* [Breadcrumb](https://grauwoelfchen.gitlab.io/styr/breadcrumb.html)
* [Button](https://grauwoelfchen.gitlab.io/styr/button.html)
* [Form](https://grauwoelfchen.gitlab.io/styr/form.html)
* [Grid](https://grauwoelfchen.gitlab.io/styr/grid.html)
* [Label](https://grauwoelfchen.gitlab.io/styr/label.html)
* [Menu](https://grauwoelfchen.gitlab.io/styr/menu.html)
* [Message](https://grauwoelfchen.gitlab.io/styr/message.html)
* [Pagination](https://grauwoelfchen.gitlab.io/styr/pagination.html)
* [Table](https://grauwoelfchen.gitlab.io/styr/table.html)
* [Text](https://grauwoelfchen.gitlab.io/styr/text.html)
* [Typography](https://grauwoelfchen.gitlab.io/styr/typography.html)
### Modules
### Components
* [Box](https://grauwoelfchen.gitlab.io/styr/box.html)
* [Breadcrumb](https://grauwoelfchen.gitlab.io/styr/breadcrumb.html)
* [Menu](https://grauwoelfchen.gitlab.io/styr/menu.html)
* [Message](https://grauwoelfchen.gitlab.io/styr/message.html)
* [Pagination](https://grauwoelfchen.gitlab.io/styr/pagination.html)
* [Dropdown](https://grauwoelfchen.gitlab.io/styr/dropdown.html)
* [Sidebar](https://grauwoelfchen.gitlab.io/styr/sidebar.html)
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item active" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item active" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item active" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item active" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item active" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styr</title>
<link rel="stylesheet" href="css/styr.css">
<link rel="stylesheet" href="css/docs.css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<h2 class="item">Documents</h2>
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item active" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
<h4 class="header">Styr</h4>
<p><a class="link" href="https://gitlab.com/grauwoelfchen/styr">gitlab.com:grauwoelfchen/styr</a></p>
</div>
</div>
</div>
<div class="content">
<div class="breadcrumb">
<a class="item" href="index.html">Home</a>
<span class="divider">/</span>
<span class="item active" href="dropdown.html">Dropdown</span>
</div>
<h2 class="title">Dropdown</h2>
<section>
<h2 class="title">Action + Dropdown</h2>
<p class="description">Expand dropdown menu.</p>
<div class="flat box">
<div class="dropdown-container">
<a class="action" href="#">Comment</a>
<input id="dropdown_checkbox" type="checkbox">
<label for="dropdown_checkbox"></label>
<div class="dropdown">
<a class="item" href="#foo">
<h6>Foo Note</h6>
<span>This is a secret documentation about a robot...</span>
</a>
<a class="item" href="#bar">
<h6>Bar Story</h6>
<span>This is a secret documentation about a robot...</span>
</a>
</div>
</div>
</div>
<pre>&lt;div class="dropdown-container"&gt;
&lt;a class="action" href="#"&gt;Comment&lt;/a&gt;
&lt;input id="[id_name]" type="checkbox"&gt;
&lt;label for="[id_name]"&gt;&lt;/label&gt;
&lt;div class="dropdown"&gt;
&lt;a class="item" href="#foo"&gt;
&lt;h6&gt;Foo Note&lt;/h6&gt;
&lt;span&gt;This is a ...&lt;/span&gt;
&lt;/a&gt;
...
&lt;/div&gt;
&lt;/div&gt;</pre>
</section>
</div>
</div>
</body>
</html>
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item active" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item active" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item active" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item active" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item active" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item active" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item active" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item active" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item active" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item active" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item active" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......@@ -61,20 +62,21 @@
<div class="item">
</div>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item active" href="sidebar.html">Sidebar</a>
</div>
</div>
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item active" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item active" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
......@@ -14,20 +14,21 @@
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item active" href="typography.html">Typography</a>
<hr>
<h6 class="item">Modules</h6>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
@require './_colour.styl'
$basic-text-colour = #3d4448
.dropdown-container
position relative
display inline-block
input[type="checkbox"]
display none
&:checked ~ .dropdown
display block
.action
opacity 0.94
border-radius 0.16rem 0 0 0.16rem
border 1px solid rgba(27, 31, 35, 0.2)
color $basic-text-colour
padding 0.31rem 0.88rem
display inline-block
text-decoration none
background-color #fbfbfc
font-size 0.82em
font-weight 300
line-height 1.37em
&:hover
text-decoration none
cursor pointer
color darken($basic-text-colour, 46%)
border 1px solid rgba(13, 31, 35, 0.35)
label
opacity 0.94
margin 0
cursor pointer
float right
display inline-block
margin-left -0.07rem
box-sizing border-box
display inline-block
border-radius 0 0.16rem 0.16rem 0
border 1px solid rgba(27, 31, 35, 0.2)
padding 0.885rem 0.24rem 0.805rem 0.24rem
font-size 0.82em
font-weight 300
line-height 0.98em
min-width 1.88rem
user-select none
-moz-user-select none
-ms-user-select none
-webkit-user-select none
-webkit-touch-callout none
background transparent
background-color #fbfbfc
background-position right center
background-size 2.89ex
// unicode filled down triangle sign
background-image url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+")
background-repeat no-repeat
background-position-x 49.7%
&:hover
text-decoration none
cursor pointer
color darken($basic-text-colour, 46%)
border 1px solid rgba(13, 31, 35, 0.35)
.dropdown
clear both
position absolute
margin-top 0.19em
background-color $white0
display none
min-width 18em
width 100%
border-radius 0.16rem
border 1px solid lighten($line-colour, 58%)
box-shadow 0 0.1rem 0.32rem darken($gray0, 9%)
.item
display block
position relative
background-color $white2
cursor pointer
padding 0.51rem 0.99rem 0.88rem 1.01rem
font-size 0.96em
font-weight 300
line-height 1.18em
margin 0
color $basic-text-colour
&:not(:last-child)
border-bottom 1px solid darken($gray0, 9%)
&:hover
text-decoration none
color darken($black2, 9%)
background-color darken($gray0, 3%)
a.item
text-decoration none
ul.dropdown
list-style none