Files
edx-platform/lms/static/sass/course/_profile.scss
Giulio Gratta 5a46177a5e A11Y changes: better :focus styling, increased contrast, and added image alt texts
- Doubled up :hover and :focus styling to improve a11y
- Increase contrast of certain UI elements for improved a11y
- Added some image alt text for a11y
- Changed video caption styling to blue and made them underline on hover and added a skip link before video for screenreaders.

Fixes Bugs:
- LMS-1336
2013-10-24 12:47:19 -07:00

245 lines
4.7 KiB
SCSS

div.profile-wrapper {
color: #000;
section.user-info {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
border-radius: 0px 4px 4px 0;
border-right: 0;
&:after {
left: -1px;
right: auto;
}
header {
@extend .bottom-border;
margin: 0;
padding: lh(.5);
h1 {
margin: 0;
padding-right: 30px;
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
border-bottom: 1px solid #d3d3d3;
box-shadow: 0 1px 0 #eee;
color: lighten($text-color, 10%);
display: block;
padding: lh(.5) 0 lh(.5) lh(.5);
position: relative;
text-decoration: none;
@include transition(none);
div#location_sub, div#language_sub {
font-weight: bold;
@include inline-block();
form {
width: 100%;
}
input {
&[type="text"] {
@include box-sizing(border-box);
margin: lh(.5) 0;
width: 100%;
}
&[type="input"]{
}
}
&:empty {
padding: 0;
}
}
div#description {
font-size: 12px;
}
a#change_language,
a#change_location,
a.edit-email,
a.name-edit,
a.email-edit {
color: #999;
font-size: 12px;
position: absolute;
right: lh(.5);
text-transform: uppercase;
top: 9px;
&:hover, &:focus {
color: #555;
}
}
p {
color: #999;
font-size: 12px;
margin-bottom: 0;
margin-top: 4px;
}
a.deactivate {
color: #aaa;
font-style: italic;
}
input#pwd_reset_button {
background: none;
border: none;
box-shadow: none;
color: #999;
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 0;
position: absolute;
right: lh(.5);
text-transform: uppercase;
top: 9px;
&:hover, &:focus {
color: #555;
}
}
}
}
div#change_password_pop {
border-bottom: 1px solid #d3d3d3;
box-shadow: 0 1px 0 #eee;
color: #4D4D4D;
padding: 7px lh();
h2 {
font-size: $body-font-size;
font-weight: bold;
margin-top: 0;
text-transform: uppercase;
}
}
}
section.course-info {
@extend .content;
header {
@extend .clearfix;
@extend h1.top-header;
margin-bottom: lh();
h1 {
float: left;
font-size: 1em;
font-weight: 100;
margin: 0;
}
}
div#grade-detail-graph {
min-height: 400px;
width: 100%;
}
> ol {
border-top: 1px solid #e3e3e3;
list-style: none;
margin-top: lh();
padding-left: 0;
> li {
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
display: table;
padding: lh() 0;
width: 100%;
&:last-child {
border-bottom: 0px;
}
h2 {
border-right: 1px dashed #ddd;
@include box-sizing(border-box);
display: table-cell;
letter-spacing: 0;
margin: 0;
padding: 0;
padding-right: flex-gutter(9);
text-transform: none;
width: flex-grid(2, 9);
}
ol.sections {
display: table-cell;
list-style: none;
padding-left: flex-gutter(9);
width: flex-grid(7, 9);
> li {
padding:0 0 lh() 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
}
h3 {
color: #666;
span {
color: #999;
font-size: em(14);
font-weight: 100;
}
}
p {
color: #999;
font-size: em(14);
}
section.scores {
margin: lh(.5) 0;
h3 {
font-size: em(14);
@include inline-block;
}
ol {
list-style: none;
margin: 0;
padding: 0;
@include inline-block;
li {
@include inline-block;
font-size: em(14);
font-weight: normal;
padding-right: 1em;
}
}
}
}
}
}
}
}
}