Commit dbd4e73b by Dave St.Germain

Fixes LMS-2352 by unifying :hover and :focus styles.

parent ac6b9f8e
......@@ -250,7 +250,7 @@ section.combined-open-ended-status {
margin-bottom: 2px;
padding: $baseline/2;
&:hover {
&:hover, &:focus {
background-color: #eee;
}
.rubric-label-selected{
......@@ -477,7 +477,7 @@ div.rubric {
padding: $baseline/2;
border-radius: $baseline/4;
&:hover {
&:hover, &:focus {
background-color: #eee;
}
......
......@@ -17,7 +17,7 @@
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}
......
......@@ -20,7 +20,7 @@
margin-left: 7px;
border-radius: 2px;
&:hover {
&:hover, &:focus {
background: rgba(255, 255, 255, .5);
}
}
......
......@@ -90,7 +90,7 @@ ul {
}
a {
&:link, &:visited, &:hover, &:active {
&:link, &:visited, &:hover, &:active, &:focus {
color: #1d9dd9;
}
}
......
......@@ -17,7 +17,7 @@
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}
......
......@@ -5,7 +5,7 @@ $border-color: #C8C8C8;
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
&:hover, &:focus {
background: none;
}
}
......@@ -23,7 +23,7 @@ $border-color: #C8C8C8;
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
&:hover, &:focus {
background: none;
}
}
......@@ -131,7 +131,7 @@ nav.sequence-nav {
// color: #aaa;
// }
&:hover {
&:hover, &:focus {
background-color: #fff;
background-repeat: no-repeat;
background-position: center 14px;
......@@ -282,7 +282,7 @@ nav.sequence-nav {
outline: 0;
}
*/
&:hover {
&:hover, &:focus {
opacity: 0.5;
}
......@@ -353,7 +353,7 @@ nav.sequence-bottom {
text-indent: -9999px;
@include transition(all .2s $ease-in-out-quad 0s);
&:hover {
&:hover, &:focus {
opacity: 0.5;
background-position: center 15px;
}
......
......@@ -79,7 +79,7 @@
cursor: default;
}
&:hover {
&:hover, &:focus {
box-shadow: inset 0 1px 2px 1px $shadow;
background-image: linear-gradient(#009FE6, #009FE6) !important;
}
......
......@@ -48,7 +48,7 @@ $blue-s1: saturate($blue,15%);
font-size: 14px;
line-height: 23px;
&:hover {
&:hover, &:focus {
color: $gray-d1;
}
}
......
......@@ -58,7 +58,7 @@ div.video {
padding: ($baseline*.75);
color: $lighter-base-font-color;
&:hover {
&:hover, &:focus {
background-color: $action-primary-active-bg;
color: $very-light-text;
}
......@@ -166,7 +166,7 @@ div.video {
color: #ccc;
position: relative;
&:hover {
&:hover, &:focus {
ul, div {
opacity: 1;
}
......@@ -188,7 +188,7 @@ div.video {
border-style: solid;
border-color: #000;
&:hover {
&:hover, &:focus {
background-color: #444;
color: #fff;
text-decoration: none;
......@@ -370,7 +370,7 @@ div.video {
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
&:hover, &:focus {
background-color: #666;
color: #aaa;
outline-offset: -4px;
......@@ -617,7 +617,7 @@ div.video {
outline-offset: -1px;
}
&:hover {
&:hover, &:focus {
text-decoration: underline;
}
......
......@@ -133,12 +133,12 @@
color: $gray-d1 !important;
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}
&:hover, &.active {
&:hover, &:focus, &:active {
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
}
}
......@@ -152,7 +152,7 @@
background-color: $green;
color: $white;
&:hover {
&:hover, &:focus {
background-color: $green-s1;
color: $white;
}
......@@ -173,7 +173,7 @@
background-color: $blue;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $blue-s2;
color: $white;
}
......@@ -194,7 +194,7 @@
background-color: $red;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $red-s1;
color: $white;
}
......@@ -215,7 +215,7 @@
background-color: $pink;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $pink-s1;
color: $white;
}
......@@ -237,7 +237,7 @@
background-color: $orange;
color: $gray-d2;
&:hover {
&:hover, &:focus {
background-color: $orange-s2;
color: $gray-d2;
}
......@@ -260,7 +260,7 @@
color: rgb(92, 103, 122);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
&:hover {
&:hover, &:focus {
background-color: rgb(222, 236, 247);
color: rgb(92, 103, 122);
}
......@@ -290,7 +290,7 @@
background-color: $gray-d2;
color: $gray-l3;
&:hover {
&:hover, &:focus {
background-color: $gray-d3;
color: $white;
}
......@@ -304,7 +304,7 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
color: $white;
&:hover {
&:hover, &:focus {
background-color: $gray-d4;
color: $white;
}
......@@ -373,7 +373,7 @@
background: #edf1f5;
font-size: 13px;
&:hover {
&:hover, &:focus {
background: $blue-l5;
.item-actions {
......
......@@ -180,14 +180,14 @@
line-height: 1.5em;
text-align: center;
&:hover, &:active {
&:hover, &:active, &:focus {
box-shadow: 0 2px 1px $shadow-l1;
}
&.current, &.active {
box-shadow: inset 1px 1px 2px $shadow-d1;
&:hover, &:active {
&:hover, &:active, &:focus {
box-shadow: inset 1px 1px 1px $shadow-d1;
}
}
......@@ -204,7 +204,7 @@
line-height: 1.5em;
text-align: center;
&:hover, &:active {
&:hover, &:active, &:focus {
}
......@@ -224,7 +224,7 @@
background-color: $white;
color: $blue-l2;
&:hover {
&:hover, &:focus {
border: 1px solid $blue;
background-color: $blue;
color: $white;
......@@ -249,7 +249,7 @@
vertical-align: middle;
color: $gray-l1;
&:hover {
&:hover, &:focus {
background-color: $gray-l1;
color: $white;
}
......
......@@ -76,7 +76,7 @@
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
&:hover:not(:disabled),&:focus:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
......
......@@ -34,7 +34,7 @@
color: #666;
}
&.ui-state-hover {
&.ui-state-hover, &.ui-state-focus {
a {
color: #666;
}
......
......@@ -467,7 +467,7 @@ section.instructor-dashboard-content-2 {
color: $lighter-base-font-color;
cursor: pointer;
&:hover {
&:hover, &:focus {
color: $alert-color;
}
}
......
......@@ -65,7 +65,7 @@ div.calc-main {
-webkit-appearance: none;
width: flex-grid(.5) + flex-gutter();
&:hover {
&:hover, &:focus {
color: #333;
}
}
......
......@@ -108,7 +108,7 @@ header.global.slim {
text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
vertical-align: middle;
&:hover, &.active {
&:hover, &:active, &:focus {
@include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
}
}
......
......@@ -38,7 +38,7 @@
box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
padding: ($baseline/2) $baseline;
&:hover, &.active {
&:hover, &:active, &:focus {
text-decoration: none;
}
......@@ -54,7 +54,7 @@
background-color: $action-primary-bg;
color: $action-primary-fg;
&:hover, &.active {
&:hover, &:active, &:focus {
background-color: $action-primary-focused-bg;
color: $action-primary-focused-fg;
}
......@@ -129,7 +129,7 @@
background: shade($error-color, 25%);
color: $white;
&:hover, &:active {
&:hover, &:active, &:focus {
background: $error-color;
color: $white;
}
......
......@@ -90,7 +90,7 @@
text-shadow: none;
color: inherit;
&:hover {
&:hover, &:focus {
color: $action-primary-bg;
}
}
......
......@@ -24,7 +24,7 @@
@include transition(all 0.15s linear 0s);
text-transform: lowercase;
&:hover, &.active, &:focus {
&:hover, &:active, &:focus {
border-color: rgb(200,200,200);
color: $base-font-color;
text-decoration: none;
......
......@@ -67,7 +67,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
&:hover {
&:hover, &:focus {
color: $link-color;
}
}
......@@ -84,7 +84,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
&:hover {
&:hover, &:focus {
color: $link-color;
}
}
......@@ -110,13 +110,13 @@
text-align: center;
width: flex-grid(6);
&:hover {
&:hover, &:focus {
color: rgb(255,255,255);
}
}
a {
&:hover, &:visited {
&:hover, &:visited, &:focus {
text-decoration: none;
}
}
......@@ -134,7 +134,7 @@
text-align: center;
width: flex-grid(3, 8);
&:hover {
&:hover, &:focus {
color: rgb(255,255,255);
}
}
......@@ -261,7 +261,7 @@
margin-left: 0px;
}
&:hover, &.active, &:focus {
&:hover, &:active, &:focus {
border-color: $border-color-2;
color: $base-font-color;
text-decoration: none;
......
......@@ -71,7 +71,7 @@
display: block;
}
a:hover {
a:hover, a:focus {
text-decoration: none;
}
......@@ -116,7 +116,7 @@
display: block;
height: 50px;
&:hover {
&:hover, &:focus {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
text-decoration: none;
......
......@@ -98,7 +98,7 @@ header.global {
margin-right: 0px;
}
&:hover, &:focus, &.active {
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
}
......
......@@ -33,7 +33,7 @@
@extend %ui-fake-link;
color: $m-blue-d2;
&:hover {
&:hover, &:focus {
color: $m-blue;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment