Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Remove form focus halo

Browse source 
No issue

- Removed the blue halo from around focused form elements
- Slightly refactored the forms to target less text inputs and have cleaner syntax
This commit is contained in:
Paul Adam Davis 2014-09-03 14:28:52 +01:00
parent f7b85524d8
commit a8a72dc55c
1 changed files with 9 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
core/client/assets/sass/patterns/forms.scss
View file

@ -3,20 +3,14 @@
// --------------------------------------------------
// Labels
%label {
display: block;
color: $darkgrey;
font-size: 1.3rem;
font-weight: bold;
}
// Form Wrapper
form {
label {
@extend %label;
display: block;
color: $darkgrey;
font-size: 1.3rem;
font-weight: bold;
}
} // form
@ -55,13 +49,7 @@ form {
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
input[type="date"] {
padding-left: 3.2rem;
}
.gh-select {
@ -154,13 +142,7 @@ input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
.gh-select,
select {
@ -178,6 +160,7 @@ select {
&:focus {
border-color: $brown;
outline: 0;
}
}
@ -189,13 +172,7 @@ textarea {
height: auto;
min-height: 10rem;
line-height: 1.5;
}
input[type="number"] {
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
padding-right: 6px;
}
resize: vertical;
}
@ -256,7 +233,7 @@ input[type="number"] {
// </div>
.for-radio {
.input-toggle-component {
border-radius: 100%;
border-radius: 100px; // Use px to prevent ovals
}
label {
.input-toggle-component {
@ -333,11 +310,6 @@ input[type="number"] {
// Hover style - Not used, but works
&:hover {}
// Focus style
&:focus {
outline: none;
}
// This hides focus around selected option in FF
&:-moz-focusring {
color: transparent;
@ -354,4 +326,4 @@ input[type="number"] {
padding: 7px 10px 7px 8px;
}
}
} // @-moz-document
} // @-moz-document