mirror of
https://github.com/primer/css.git
synced 2024-09-21 05:39:15 +03:00
Merge pull request #862 from primer/input-dark
Import Dropdown component; add dark variants for dropdown and text fields
This commit is contained in:
Shawn Allen
GitHub
commit
9935981fb8
@ -1,34 +1,9 @@
|
||||
---
|
||||
title: Dropdown
|
||||
path: components/dropdown
|
||||
status: Stable
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/dropdown.scss'
|
||||
symbols:
|
||||
[
|
||||
active,
|
||||
anim-scale-in,
|
||||
btn-link,
|
||||
dropdown,
|
||||
dropdown-caret,
|
||||
dropdown-divider,
|
||||
dropdown-header,
|
||||
dropdown-item,
|
||||
dropdown-menu,
|
||||
dropdown-menu-content,
|
||||
dropdown-menu-e,
|
||||
dropdown-menu-ne,
|
||||
dropdown-menu-no-overflow,
|
||||
dropdown-menu-s,
|
||||
dropdown-menu-se,
|
||||
dropdown-menu-sw,
|
||||
dropdown-menu-w,
|
||||
dropdown-signout,
|
||||
octicon,
|
||||
zeroclipboard-is-hover,
|
||||
]
|
||||
status: New
|
||||
---
|
||||
|
||||
Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
|
||||
## Basic examples
|
||||
|
||||
@ -37,35 +12,39 @@ Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a di
|
||||
Using a GitHub button:
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using a button customized with additional utilities:
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="text-gray p-2 d-inline" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="text-gray p-2 d-inline" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Options
|
||||
@ -75,133 +54,175 @@ Using a button customized with additional utilities:
|
||||
Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-ne
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-top: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-ne
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-ne">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-ne">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-e
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-e
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-e">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-e">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-se
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-se
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-s
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-center">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-s
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-s">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-s">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-sw
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-sw
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-sw">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-sw">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-w
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-w
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-w">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-w">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dividers
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 170px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="separator"></li>
|
||||
<li><a class="dropdown-item" href="#url">Another item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">One more</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="separator"></li>
|
||||
<li><a class="dropdown-item" href="#url">Another item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">One more</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Headers
|
||||
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div style="margin-bottom: 126px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-se">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
<div class="dropdown-menu dropdown-menu-se">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3 mb-n3" style="min-height: 240px;">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="none"></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -111,6 +111,15 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3">
|
||||
<input class="form-control input-dark" type="text" placeholder="Dark input" aria-label="Dark input">
|
||||
<input class="form-control input-dark input-sm" type="text" placeholder="Dark input small" aria-label="Dark input">
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Hide webkit's contact info autofill icon
|
||||
|
||||
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
#!/usr/bin/env node
|
||||
const fetch = require('node-fetch')
|
||||
const filesize = require('filesize')
|
||||
const cssstats = require('cssstats')
|
||||
const minimist = require('minimist')
|
||||
const {green, gray, yellow, red} = require('colorette')
|
||||
const {table, getBorderCharacters} = require('table')
|
||||
@ -44,10 +45,15 @@ Promise.all(
|
||||
const entry = {
|
||||
name: bundle.name,
|
||||
path: bundle.css,
|
||||
local: require(`../${bundle.stats}`)
|
||||
local: require(`../${bundle.stats}`),
|
||||
remote: {}
|
||||
}
|
||||
return fetch(unpkgBaseURL + bundle.stats)
|
||||
.then(res => res.json())
|
||||
.catch(error => {
|
||||
console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
|
||||
return cssstats('')
|
||||
})
|
||||
.then(stats => (entry.remote = stats))
|
||||
.then(() => entry)
|
||||
})
|
||||
|
||||
25
src/dropdown/README.md
Normal file
25
src/dropdown/README.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
bundle: "dropdown"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `dropdown` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/dropdown/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/dropdown.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
327
src/dropdown/dropdown.scss
Normal file
327
src/dropdown/dropdown.scss
Normal file
@ -0,0 +1,327 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
.dropdown-menu-content {
|
||||
display: block;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
border-width: $spacer-1 $spacer-1 0;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
|
||||
// way the menu should render from the element triggering it.
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 160px;
|
||||
padding-top: $spacer-1;
|
||||
padding-bottom: $spacer-1;
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
background-clip: padding-box;
|
||||
border: $border-width $border-style $black-fade-15;
|
||||
border-radius: $spacer-1;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
border: $spacer-2 solid transparent;
|
||||
border-bottom-color: $black-fade-15;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: 7px solid transparent;
|
||||
border-bottom-color: $white;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-max-type
|
||||
> ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-no-overflow {
|
||||
width: auto;
|
||||
|
||||
.dropdown-item {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
overflow: visible;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown items (can be links or buttons)
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
|
||||
overflow: hidden;
|
||||
color: $text-gray-dark;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
text-decoration: none;
|
||||
background-color: $bg-blue;
|
||||
outline: none;
|
||||
|
||||
> .octicon {
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-signout {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: $spacer-2 0;
|
||||
border-top: $border;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
font-size: $h6-size;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
.dropdown-menu-content {
|
||||
display: none;
|
||||
|
||||
// stylelint-disable-next-line primer/no-override
|
||||
&.anim-scale-in {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item[aria-checked="false"] .octicon-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Directional classes
|
||||
//
|
||||
// Move the menu and the caret attached to it. Requires at least one of these on
|
||||
// the `.dropdown-menu` element.
|
||||
|
||||
.dropdown-menu-w {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-right: $spacer-2;
|
||||
|
||||
&::before {
|
||||
top: 10px;
|
||||
right: -$spacer-3;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $black-fade-15;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
right: -14px;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-e {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-left: $spacer-2;
|
||||
|
||||
&::before {
|
||||
top: $spacer-2;
|
||||
left: -$spacer-3;
|
||||
border-color: transparent;
|
||||
border-right-color: $black-fade-15;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
left: -14px;
|
||||
border-color: transparent;
|
||||
border-right-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-ne {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -$spacer-2;
|
||||
left: 9px;
|
||||
border-top: $spacer-2 solid $black-fade-15;
|
||||
border-right: $spacer-2 solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $spacer-2 solid transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
border-top: 7px solid $white;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-s {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translateX(50%);
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-sw {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
right: 9px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-se {
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
color: $white;
|
||||
background: $gray-800;
|
||||
border-color: $gray-700;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $gray-700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $gray-800;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-color: $border-gray-darker;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Directional classes
|
||||
|
||||
&.dropdown-menu-w {
|
||||
&::before {
|
||||
border-color: transparent transparent transparent $gray-700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent transparent $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-e {
|
||||
&::before {
|
||||
border-color: transparent $gray-700 transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent $gray-800 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-ne {
|
||||
&::before {
|
||||
border-color: $gray-700 transparent transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $gray-800 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
2
src/dropdown/index.scss
Normal file
2
src/dropdown/index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./dropdown.scss";
|
||||
@ -51,6 +51,24 @@ label {
|
||||
&:focus { background-color: $bg-white; }
|
||||
}
|
||||
|
||||
// Inputs to be used against dark backgrounds.
|
||||
.input-dark {
|
||||
color: $text-white;
|
||||
background-color: $white-fade-15;
|
||||
border-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.6; // inceases contrast ratio to 4.52
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
border-color: $black-fade-30;
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom styling for HTML5 validation bubbles (WebKit only)
|
||||
::placeholder {
|
||||
color: $text-gray-light;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@import "../avatars/index.scss";
|
||||
@import "../blankslate/index.scss";
|
||||
@import "../branch-name/index.scss";
|
||||
@import "../dropdown/index.scss";
|
||||
@import "../header/index.scss";
|
||||
@import "../labels/index.scss";
|
||||
@import "../markdown/index.scss";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user