Files
edx-platform/lms/static/sass/base/_base.scss
Greg Price 00729a8c13 Add an omnipresent help tab to the LMS
The help tab opens a modal dialog that directs the user at various resources
(e.g. the site FAQ and course forums) and allows the user to submit feedback
to the feedback endpoint (which will ultimately create a ticket for the
student support team).
2013-05-06 13:35:52 -04:00

264 lines
4.4 KiB
SCSS

html, body {
background: rgb(250,250,250);
font-family: $sans-serif;
font-size: 1em;
font-style: normal;
line-height: 1em;
//-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
color: $base-font-color;
font: normal 1.2em/1.2em $serif;
margin: 0px;
}
h1 {
color: $base-font-color;
font: normal 2em/1.4em $sans-serif;
letter-spacing: 1px;
margin-bottom: 30px;
text-align: center;
//text-transform: uppercase;
}
h2 {
color: $lighter-base-font-color;
font: normal 1.2em/1.2em $serif;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
p + h2, ul + h2, ol + h2 {
margin-top: 40px;
}
p {
color: $base-font-color;
font: normal 1em/1.6em $serif;
margin: 0px;
}
span {
font: normal 1em/1.6em $sans-serif;
color: $base-font-color;
}
/* Fix for CodeMirror: prevent top-level span from affecting deeply-embedded span in CodeMirror */
.CodeMirror span {
font: inherit;
}
p + p, ul + p, ol + p {
margin-top: 20px;
}
p {
a:link, a:visited {
color: $blue;
font: normal 1em/1em $serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: $blue;
text-decoration: underline;
}
}
}
a:link, a:visited {
color: $blue;
font: normal 1em/1em $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
text-decoration: underline;
}
}
.content-wrapper {
background: rgb(255,255,255);
margin: 0 auto 0;
width: flex-grid(12);
}
.container {
@include clearfix;
margin: 0 auto 0;
padding: 0px 30px;
max-width: grid-width(12);
min-width: 760px;
}
span.edx {
text-transform: none;
font: inherit;
}
.static-container {
@include clearfix;
margin: 0 auto 0;
max-width: 1200px;
padding: 60px 0px 120px;
width: flex-grid(12);
.inner-wrapper {
margin: 0 auto 0;
width: flex-grid(10);
}
ol, ul {
list-style: disc;
li {
color: $base-font-color;
font: normal 1em/1.4em $serif;
margin: 0px;
}
}
h1 {
margin-bottom: 30px;
}
h1 + hr {
margin-bottom: 60px;
}
p + h2, ul + h2, ol + h2 {
margin-top: 40px;
}
ul + p, ol + p {
margin-top: 20px;
}
}
.loading-animation {
position: absolute;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
background: url(../images/spinner.gif) no-repeat;
}
mark {
padding: 0 3px;
border-radius: 2px;
background-color: #f7e9a8;
color: #333;
}
.site-status {
display: none;
padding: 10px;
@include linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0));
background-color: $pink;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
font-size: 14px;
.white-error-icon {
position: relative;
top: -4px;
float: left;
display: block;
width: 27px;
height: 24px;
margin-right: 15px;
background: url(../images/large-white-error-icon.png) no-repeat;
}
.inner-wrapper {
margin: auto;
max-width: 1180px;
min-width: 760px;
}
p {
line-height: 1.3;
color: #fff;
}
}
.ie-banner {
display: none;
max-width: 1140px;
min-width: 720px;
margin: auto;
@include border-radius(0 0 3px 3px);
background: #f4f4e0;
color: #3c3c3c;
padding: 5px 20px 8px;
font-size: 13px;
text-align: center;
strong {
font-weight: 700;
}
}
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
top: 50%;
left: 0;
position: fixed;
z-index: 99;
a:link, a:visited {
cursor: pointer;
border: 1px solid #ccc;
border-top-style: none;
@include border-radius(0px 0px 10px 10px);
background: transparentize(#fff, 0.25);
color: transparentize(#333, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover {
color: #fff;
background: #1D9DD9;
}
}
}
.help-buttons {
padding: 10px 50px;
a:link, a:visited {
padding: 15px 0px;
text-align: center;
cursor: pointer;
background: #fff;
text-decoration: none;
display: block;
border: 1px solid #ccc;
&#feedback_link_problem {
border-bottom-style: none;
@include border-radius(10px 10px 0px 0px);
}
&#feedback_link_question {
border-top-style: none;
@include border-radius(0px 0px 10px 10px);
}
&:hover {
color: #fff;
background: #1D9DD9;
}
}
}
#feedback_form textarea[name="details"] {
height: 150px;
}