mirror of
https://github.com/primer/css.git
synced 2025-01-05 21:22:57 +03:00
Refresh inputs
This commit is contained in:
simurai
parent
03cd2802e0
commit
a726536adf
@ -22,8 +22,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
```html live
|
||||
<p>
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||
@ -35,8 +36,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
|
||||
<p>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||
<select class="form-select select-sm" aria-label="Important decision">
|
||||
@ -168,15 +170,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select select-sm" aria-label="Preference">
|
||||
<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>
|
||||
<button class="btn btn-sm ml-1"> Small button</button>
|
||||
```
|
||||
|
||||
#### Form groups
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: transparent;
|
||||
box-shadow: $btn-input-focus-shadow;
|
||||
box-shadow: $focus-shadow;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -19,8 +19,8 @@ label {
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px $spacer-2;
|
||||
font-size: $h4-size;
|
||||
padding: 6px $spacer-3;
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
@ -28,17 +28,16 @@ label {
|
||||
background-color: $bg-white;
|
||||
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
||||
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border: $border-width $border-style $border-color;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow;
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue-400;
|
||||
border-color: $border-blue;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
|
||||
box-shadow: $focus-shadow;
|
||||
}
|
||||
|
||||
// Ensures inputs don't zoom on mobile but are body-font size on desktop
|
||||
@ -47,6 +46,12 @@ label {
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
textarea.form-control {
|
||||
padding-right: $spacer-2;
|
||||
padding-left: $spacer-2;
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
.input-contrast {
|
||||
background-color: $bg-gray-light;
|
||||
@ -94,7 +99,7 @@ label {
|
||||
|
||||
// Large inputs
|
||||
.input-lg {
|
||||
padding: $spacer-1 10px;
|
||||
padding: $spacer-1 $spacer-3;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
|
||||
@ -139,11 +139,9 @@
|
||||
z-index: 10;
|
||||
display: block; // Show up in errored/warn state
|
||||
max-width: 450px; // Keep our long errors readable
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px $spacer-2;
|
||||
margin: $spacer-1 0 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
margin: $spacer-2 0 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
@ -178,16 +176,19 @@
|
||||
}
|
||||
|
||||
&.warn {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $yellow-600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
background-color: $yellow-200;
|
||||
border-color: $border-yellow;
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $yellow-100;
|
||||
border-bottom-color: $yellow-200;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -197,13 +198,16 @@
|
||||
}
|
||||
|
||||
&.errored {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $red-600;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
.error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-red-light;
|
||||
|
||||
|
||||
@ -15,8 +15,8 @@ $border-green: $green-400 !default;
|
||||
$border-green-light: desaturate($green-300, 40%) !default;
|
||||
$border-purple: $purple !default;
|
||||
$border-red: $red !default;
|
||||
$border-red-light: desaturate($red-300, 60%) !default;
|
||||
$border-yellow: desaturate($yellow-300, 60%) !default;
|
||||
$border-red-light: $red-300 !default;
|
||||
$border-yellow: $yellow-600 !default;
|
||||
|
||||
// Background colors
|
||||
$bg-white: $white !default;
|
||||
@ -34,7 +34,7 @@ $bg-purple: $purple-500 !default;
|
||||
$bg-purple-light: $purple-000 !default;
|
||||
$bg-pink: $pink-500 !default;
|
||||
$bg-red: $red-500 !default;
|
||||
$bg-red-light: $red-100 !default;
|
||||
$bg-red-light: $red-000 !default;
|
||||
$bg-yellow: $yellow-500 !default;
|
||||
$bg-yellow-light: $yellow-200 !default;
|
||||
$bg-yellow-dark: $yellow-700 !default;
|
||||
|
||||
@ -13,13 +13,14 @@ $box-shadow-medium: 0 1px 5px $black-fade-15 !default;
|
||||
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
|
||||
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
|
||||
|
||||
// Focus shadow
|
||||
$focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default;
|
||||
|
||||
// Button and form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate? It's now unused.
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $focus-shadow
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? It's now unused.
|
||||
|
||||
$focus-shadow: 0 0 0 3px rgba($blue, 0.4) !default;
|
||||
|
||||
$border-color-button: $border-color !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
Loading…
Reference in New Issue
Block a user