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.
198 lines
3.3 KiB
SCSS
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;
|
|
}
|
|
}
|