0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

Refactor :focus styles

Closes #61
This commit is contained in:
Paul Adam Davis 2014-07-12 12:12:43 +01:00
parent 892b93b155
commit c936a855c4
7 changed files with 82 additions and 39 deletions

View file

@ -94,7 +94,9 @@
bottom: 0;
right: -1px;
overflow: auto;
@media (max-width: 800px) { right: 0; };
@media (max-width: 800px) {
right: 0;
};
// Create placeholder the same height as the floating header
// to push content down by the same amount
@ -122,7 +124,10 @@
border-bottom: none;
@media (max-width: 1000px) { padding-left: 15px; }
@media (max-width: 800px) {
@include icon-after($i-chevron) {float: right;margin-top: 5px;};
@include icon-after($i-chevron) {
float: right;
margin-top: 5px;
};
}
}
@ -148,7 +153,9 @@
color: $darkgrey;
font-weight: bold;
background: #fff;
&:focus {
background: $lightbrown;
}
}
}

View file

@ -8,6 +8,7 @@
* Box Sizing
* Text Selection
* Colour Classes
* Focus Styles
*/
/* ==========================================================================
@ -57,4 +58,16 @@
.#{nth($colour, 1)} {
color: nth($colour, 2);
}
}
/* ==========================================================================
Focus Styles
---
These are applied globally, to everything except images
========================================================================== */
*:not(img):focus {
outline: 0;
outline-width: 0;
}

View file

@ -36,7 +36,8 @@
@include transition(background 0.3s ease, border-color 0.3s ease);
&:hover,
&.hover {
&.hover,
&:focus {
will-change: border-color, background;
border-color: transparent;
background: #f8f8f8;
@ -116,7 +117,8 @@ input[type="button"] {
font-weight: normal;
background: #eee;
box-shadow: none;
&:hover {
&:hover,
&:focus {
border-color: rgba(0,0,0,0.1);
}
}
@ -128,7 +130,8 @@ input[type="button"] {
background: #A1ADB3;
box-shadow: none;
border-color: #A1ADB3;
&:hover {
&:hover,
&:focus {
border-color: darken(#A1ADB3, 10%);
background: darken(#A1ADB3, 10%);
}
@ -141,7 +144,8 @@ input[type="submit"] {
@extend %btn;
background: $blue;
box-shadow: none;
&:hover {
&:hover,
&:focus {
background: darken($blue, 10%);
}
}
@ -152,7 +156,8 @@ button[type="submit"].button-add,
input[type="submit"].button-add {
@extend %btn;
background: $green;
&:hover {
&:hover,
&:focus {
background: darken($green, 8%);
}
}
@ -164,7 +169,8 @@ input[type="reset"] {
@extend %btn;
background: $red;
box-shadow: none;
&:hover {
&:hover,
&:focus {
background: darken($red, 10%);
}
}
@ -173,7 +179,8 @@ input[type="reset"] {
.button-alt {
@extend %btn;
background: lighten($darkgrey, 10%);
&:hover {
&:hover,
&:focus {
background: $darkgrey;
}
&[class*='icon-']:before {
@ -185,7 +192,8 @@ input[type="reset"] {
.button-info {
@extend %btn;
background: #A1ADB3;
&:hover {
&:hover,
&:focus {
background: lighten(#A1ADB3, 10%);
}
}
@ -196,7 +204,8 @@ input[type="reset"] {
color: $blue;
background: transparent;
border: none;
&:hover {
&:hover,
&:focus {
background: transparent;
text-decoration: underline;
}
@ -231,7 +240,8 @@ input[type="reset"] {
@include transition(border-color 0.3s ease);
}
&:hover {
&:hover,
&:focus {
color: #fff;
background: darken($blue, 10%);
border-color: darken($blue, 10%);
@ -304,7 +314,8 @@ input[type="reset"] {
}
// Spin the arrow on hover and while menu is open
&:hover {
&:hover,
&:focus {
will-change: box-shadow, background;
box-shadow: none;
background: #f8f8f8;
@ -315,7 +326,8 @@ input[type="reset"] {
}
// If it has a class of "up" spin it an extra 180degress to point up
&.up:hover {
&.up:hover,
&.up:focus {
@include icon($i-chevron-down) {
margin-top:-4px;
@include transform(rotate(540deg));
@ -332,7 +344,8 @@ input[type="reset"] {
@extend %splitbtn;
.options {
color:#777;
&:hover {
&:hover,
&:focus {
box-shadow:
rgba(0,0,0,0.07) 0 1px 0 inset,
rgba(0,0,0,0.07) -1px 0 0 inset,
@ -346,7 +359,9 @@ input[type="reset"] {
@extend %splitbtn;
.options {
background: darken($blue, 5%);
&:hover, &.active {
&:hover,
&.active,
&:focus {
background: darken($blue, 10%);
}
}
@ -357,7 +372,8 @@ input[type="reset"] {
@extend %splitbtn;
.options {
background: darken($green, 6%);
&:hover {
&:hover,
&:focus {
background: darken($green, 8%);
}
}
@ -368,7 +384,8 @@ input[type="reset"] {
@extend %splitbtn;
.options {
background: darken($red, 6%);
&:hover {
&:hover,
&:focus {
background: darken($red, 10%);
}
}
@ -379,7 +396,8 @@ input[type="reset"] {
@extend %splitbtn;
.options {
background: lighten($darkgrey, 4%);
&:hover {
&:hover,
&:focus {
background: $darkgrey;
}
}

View file

@ -171,6 +171,10 @@ textarea,
@include transition(border-color, 0.15s linear);
&:focus {
border-color: $brown;
}
}
textarea {
@ -181,13 +185,6 @@ textarea {
min-height: 6.5em;
}
#{$all-text-inputs-focus},
textarea:focus {
border-color: $brown;
outline: 0;
outline-width: 0;
}
// 'vanilla' CSS hack to specifically target Firefox
@-moz-document url-prefix() {
select {

View file

@ -24,12 +24,14 @@
color: lighten($grey, 10%);
@include box-sizing(border-box);
&:hover {
&:hover,
&:focus {
text-decoration: none;
}
}
.ghost-logo:hover {
.ghost-logo:hover,
.ghost-logo:focus {
color: $lightgrey;
background: darken($darkgrey, 2%);
}
@ -75,6 +77,7 @@
}
a:hover,
a:focus,
&.active a {
color: $lightgrey;
text-decoration: none;
@ -174,7 +177,8 @@
a {
color: $lightgrey;
&:hover {
&:hover,
&:focus {
background: darken($darkgrey, 10%);
@include transition(none);
box-shadow: none;
@ -286,6 +290,7 @@
border-bottom: $grey 1px solid;
a:hover,
a:focus,
&.active a {
box-shadow: none;
}
@ -329,7 +334,8 @@
@include transition(left 0.3s ease 0s);
}
> a {
&:hover {
&:hover,
&:focus {
background: inherit;
}
&.active {
@ -354,7 +360,8 @@
a {
background: darken($grey, 3%);
&:hover {
&:hover,
&:focus {
background: darken($grey, 8%);
}
&:before {

View file

@ -26,7 +26,8 @@ nav {
color: $brown;
border-bottom: $lightbrown 1px solid;
&:hover {
&:hover,
&:focus {
color: $darkgrey;
background: $lightbrown;
text-decoration: none;

File diff suppressed because one or more lines are too long