Files
edx-platform/lms/static/sass/course/base/_base.scss
Jason Bau 2eefa494b1 Width of labels for multiple-choice capa problems = width of text
Stanford got some feedback from our students/faculty that students
were making accidental clicks on radio-button capa questions.
They would click way to the right of the label text, but it would
still select the corresponding input, which caused some students
to make unintentional changes to their answers.  This was because
labels for these inputs were display:block and width:100%

Changing these labels to float:left clear:both should fix it.
2013-06-21 23:46:56 -07:00

198 lines
3.3 KiB
SCSS

body {
min-width: 980px;
min-height: 100%;
background-image: $course-bg-image;
background-color: $course-bg-color;
}
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
text-align: left;
font-family: $sans-serif;
}
table {
table-layout: fixed;
}
a {
&:hover {
color: $pink;
text-decoration: none !important;
}
}
.content-wrapper {
background: none;
border: none;
}
.container {
padding: 20px 0 0 0;
> div {
display: table;
table-layout: fixed;
width: 100%;
border-radius: 3px;
border: 1px solid $outer-border-color;
background: $container-bg;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
}
form {
label {
display: block;
}
}
form.choicegroup {
label {
clear: both;
float: left;
}
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: $white;
border: 1px solid $border-color-2;
@include border-radius(0);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: normal 1em $sans-serif;
height: 35px;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
&:last-child {
margin-right: 0px;
}
&:focus {
border-color: lighten($link-color, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
}
label {
font-weight: normal;
font-style: normal;
}
input[type="reset"],
input[type="submit"],
input[type="button"],
button,
.button {
@extend .gray-button;
form & {
@extend .gray-button;
}
}
img {
max-width: 100%;
}
::selection, ::-moz-selection, ::-webkit-selection {
background: $selection-color-2;
color: #fff;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 99999;
padding: 0 10px;
border-radius: 3px;
background: rgba(0, 0, 0, .85);
font-size: 11px;
font-weight: 400;
line-height: 26px;
color: #fff;
pointer-events: none;
opacity: 0;
@include transition(opacity .1s);
&:after {
content: '';
display: block;
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -7px;
font-size: 20px;
color: rgba(0, 0, 0, .85);
}
}
.test-class {
border: 1px solid #f00;
}
.site-status {
display: block;
}
.toast-notification {
position: fixed;
top: 20px;
right: 20px;
z-index: 99999;
max-width: 350px;
padding: 15px 20px 17px;
border-radius: 3px;
border: 1px solid $border-color-3;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
font-size: 13px;
color: #fff;
opacity: 0;
-webkit-transition: all .2s;
p, span {
color: #fff;
}
strong {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
width: 27px;
height: 27px;
font-size: 22px;
font-weight: 700;
line-height: 25px;
color: #aaa;
text-align: center;
.close-icon {
font-size: 16px;
font-weight: 700;
}
}
.action-btn {
@include dark-grey-button;
margin-top: 10px;
text-align: center;
}
}