1
1
mirror of https://github.com/primer/css.git synced 2024-11-30 01:04:04 +03:00

Merge pull request #127 from primer/select-boxes

Custom select box styling
This commit is contained in:
Mark Otto 2015-06-24 11:58:31 -07:00
commit bedf2e4f55
6 changed files with 134 additions and 13 deletions

View File

@ -7,17 +7,17 @@
### css/primer.css
- **Total Stylesheets:** 1
- **Total Stylesheet Size:** 27264
- **Total Stylesheet Size:** 28454
- **Total Media Queries:** 1
- **Total Rules:** 361
- **Selectors Per Rule:** 1.481994459833795
- **Total Selectors:** 535
- **Identifiers Per Selector:** 2.1252336448598133
- **Specificity Per Selector:** 16.452336448598132
- **Total Rules:** 366
- **Selectors Per Rule:** 1.489071038251366
- **Total Selectors:** 545
- **Identifiers Per Selector:** 2.1247706422018346
- **Specificity Per Selector:** 16.387155963302753
- **Top Selector Specificity:** 50
- **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
- **Total Id Selectors:** 0
- **Total Identifiers:** 1137
- **Total Declarations:** 896
- **Total Identifiers:** 1158
- **Total Declarations:** 921
- **Total Unique Colors:** 79
- **Total Important Keywords:** 1

File diff suppressed because one or more lines are too long

View File

@ -293,6 +293,19 @@ body {
margin-bottom: 0;
}
dl.form {
margin: 15px 0;
> dt {
margin: 0 0 6px;
font-style: normal;
}
> dd {
padding: 0;
}
}
// Flex table
.flex-table-item > .btn {
margin-left: 10px;

View File

@ -87,19 +87,81 @@ Make inputs smaller, larger, or full-width with an additional class.
</form>
{% endexample %}
## Selects
Primer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
{% example html %}
<form>
<select>
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
<option>Social Coding</option>
<option>Beets</option>
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
</form>
{% endexample %}
### Custom
Custom `<select>`s are also available—just add `.select`. **Only available in latest WebKit, Firefox, and IE browsers.**
{% example html %}
<form>
<select class="select">
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
<option>Social Coding</option>
<option>Beets</option>
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
</form>
{% endexample %}
### Small
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).
{% example html %}
<select class="select-sm">
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
<option>Social Coding</option>
<option>Beets</option>
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
<select class="select select-sm">
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
<option>Social Coding</option>
<option>Beets</option>
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
{% endexample %}
## Form groups
{% example html %}
<form>
<dl class="form">
<dt><label>Example Text</label></dt>
<dd><input type="text" class="textfield" value="Example Value"></dd>
<dd><input type="text" value="Example Value"></dd>
</dl>
<dl class="form">
<dt><label>Example Label</label></dt>
<dd>
<select>
<select class="select">
<option>Choose an option</option>
<option>Git</option>
<option>Subversion</option>
@ -113,8 +175,6 @@ Make inputs smaller, larger, or full-width with an additional class.
</form>
{% endexample %}
## Notes
## Checkboxes and radios
Utilities to spice up the alignment and styling of checkbox and radio controls.

View File

@ -400,6 +400,8 @@ linters:
additional_identifiers: []
excluded_identifiers: []
severity: error
exclude:
- 'scss/_forms.scss'
ZeroUnit:
enabled: true

View File

@ -20,6 +20,7 @@ input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
min-height: 34px;
padding: 7px 8px;
@ -41,6 +42,13 @@ textarea {
}
}
select {
&:not([multiple]) {
height: 34px;
vertical-align: middle;
}
}
// Inputs with contrast for easy light gray backgrounds against white.
// input.class is needed here to increase specificity over input[]
input.input-contrast,
@ -91,6 +99,7 @@ dl.form {
input[type="password"],
input[type="email"],
input[type="url"],
select,
textarea {
background-color: #fafafa;
@ -469,3 +478,40 @@ input::-webkit-inner-spin-button {
color: $brand-red;
content: "\f02d"; // octicon-x
}
// Custom select
//
// Apply `.select` to any `<select>` element for custom styles.
.select {
display: inline-block;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAMAAACNQ/wIAAAAYFBMVEUzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMS2aZBAAAAH3RSTlMAAQYNDg8VJDQ2N0JbdXZ4h4mKpL3Iycvb6vDx8vn+GLdSCAAAAHBJREFUeNq90TcSgDAMRFGRMwZMTnv/W+IBm6BxzSt/pUBGURKT73v+LdkGbNm7xDOUOXlKNOE0RaaEI7QxvIrX4db5pLgtXlqXyJH4kA5VYCr6Xw2msYxqWUgJetyGwH4cfkIjXaCsqfUd/GmMEKQdADIVzQIQilIAAAAASUVORK5CYII=) no-repeat right 8px center;
background-size: 9px 13px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
}
// Hides the caret in IE11
&::-ms-expand {
opacity: 0;
}
}
.select-sm {
height: 26px;
min-height: 26px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
}