mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Remove form focus halo
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:
parent
12595fc50e
commit
7a6f2e4208
1 changed files with 9 additions and 37 deletions
|
@ -3,20 +3,14 @@
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
// Labels
|
|
||||||
%label {
|
|
||||||
display: block;
|
|
||||||
color: $darkgrey;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form Wrapper
|
// Form Wrapper
|
||||||
form {
|
form {
|
||||||
|
|
||||||
label {
|
label {
|
||||||
@extend %label;
|
display: block;
|
||||||
|
color: $darkgrey;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
} // form
|
} // form
|
||||||
|
@ -55,13 +49,7 @@ form {
|
||||||
input[type="tel"],
|
input[type="tel"],
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="url"],
|
input[type="url"],
|
||||||
input[type="color"],
|
input[type="date"] {
|
||||||
input[type="date"],
|
|
||||||
input[type="datetime"],
|
|
||||||
input[type="datetime-local"],
|
|
||||||
input[type="month"],
|
|
||||||
input[type="time"],
|
|
||||||
input[type="week"] {
|
|
||||||
padding-left: 3.2rem;
|
padding-left: 3.2rem;
|
||||||
}
|
}
|
||||||
.gh-select {
|
.gh-select {
|
||||||
|
@ -154,13 +142,7 @@ input[type="search"],
|
||||||
input[type="tel"],
|
input[type="tel"],
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="url"],
|
input[type="url"],
|
||||||
input[type="color"],
|
|
||||||
input[type="date"],
|
input[type="date"],
|
||||||
input[type="datetime"],
|
|
||||||
input[type="datetime-local"],
|
|
||||||
input[type="month"],
|
|
||||||
input[type="time"],
|
|
||||||
input[type="week"],
|
|
||||||
textarea,
|
textarea,
|
||||||
.gh-select,
|
.gh-select,
|
||||||
select {
|
select {
|
||||||
|
@ -178,6 +160,7 @@ select {
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $brown;
|
border-color: $brown;
|
||||||
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -189,13 +172,7 @@ textarea {
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 10rem;
|
min-height: 10rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
resize: vertical;
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
&::-webkit-inner-spin-button,
|
|
||||||
&::-webkit-outer-spin-button {
|
|
||||||
padding-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -256,7 +233,7 @@ input[type="number"] {
|
||||||
// </div>
|
// </div>
|
||||||
.for-radio {
|
.for-radio {
|
||||||
.input-toggle-component {
|
.input-toggle-component {
|
||||||
border-radius: 100%;
|
border-radius: 100px; // Use px to prevent ovals
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
.input-toggle-component {
|
.input-toggle-component {
|
||||||
|
@ -333,11 +310,6 @@ input[type="number"] {
|
||||||
// Hover style - Not used, but works
|
// Hover style - Not used, but works
|
||||||
&:hover {}
|
&:hover {}
|
||||||
|
|
||||||
// Focus style
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This hides focus around selected option in FF
|
// This hides focus around selected option in FF
|
||||||
&:-moz-focusring {
|
&:-moz-focusring {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
|
@ -354,4 +326,4 @@ input[type="number"] {
|
||||||
padding: 7px 10px 7px 8px;
|
padding: 7px 10px 7px 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} // @-moz-document
|
} // @-moz-document
|
||||||
|
|
Loading…
Add table
Reference in a new issue