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:
commit
bedf2e4f55
@ -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
@ -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;
|
||||
|
@ -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.
|
||||
|
@ -400,6 +400,8 @@ linters:
|
||||
additional_identifiers: []
|
||||
excluded_identifiers: []
|
||||
severity: error
|
||||
exclude:
|
||||
- 'scss/_forms.scss'
|
||||
|
||||
ZeroUnit:
|
||||
enabled: true
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user