Files
edx-platform/lms/static/sass/course/wiki/_wiki.scss
Kyle Fiedler bce61cd6e5 Revert "Merge pull request #642 from MITx/bug/kfiedler/ie"
This reverts commit 2b5e8a4944, reversing
changes made to db0549be78.
2012-09-07 14:18:34 -04:00

1093 lines
16 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
section.wiki {
padding-top: 25px;
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.wiki-wrapper {
@include clearfix;
> header {
height: 33px;
padding: 24px 0 26px;
border-bottom: 1px solid #ccc;
border-radius: 3px 3px 0 0;
background-color: $sidebar-color;
}
}
/*-----------------
Breadcrumbs
-----------------*/
.breadcrumb {
list-style: none;
padding-left: 0;
margin: 0 0 0 40px;
li {
float: left;
margin-right: 10px;
font-size: 0.9em;
a {
float: left;
display: block;
overflow: hidden;
height: 30px;
line-height: 31px;
max-width: 200px;
height: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
&:after {
content: '';
display: inline;
margin-left: 10px;
color: $base-font-color;
height: 30px;
line-height: 31px;
}
}
}
.dropdown-menu {
display: none;
}
/*-----------------
Global Functions
-----------------*/
.global-functions {
display: block;
width: auto;
margin-right: 20px;
}
.add-article-btn {
@include button(simple, #eee);
margin-left: 25px;
padding: 7px 15px !important;
font-size: 0.72em;
font-weight: 600;
&:hover {
text-decoration: none;
}
}
.search-wiki {
margin-top: 3px;
input {
width: 180px;
height: 27px;
padding: 0 15px 0 35px;
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
border: 1px solid #c8c8c8;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
font-family: $sans-serif;
font-size: 12px;
outline: none;
@include transition(border-color .1s);
&:-webkit-input-placholder {
font-style: italic;
}
&:focus {
border-color: $blue;
}
}
}
/*-----------------
Article
-----------------*/
.article-wrapper {
}
h1 {
font-weight: bold;
letter-spacing: 0;
}
.main-article {
float: left;
width: flex-grid(9);
padding: 40px 0 40px 40px;
color: $base-font-color;
@include box-sizing(border-box);
}
&.view .main-article {
h2 {
padding-bottom: 8px;
margin-bottom: 22px;
border-bottom: 1px solid $light-gray;
font-size: 1.6em;
font-weight: bold;
color: $base-font-color;
text-transform: none;
letter-spacing: 0;
}
h3 {
margin-top: 40px;
margin-bottom: 20px;
font-weight: bold;
font-size: 1.25em;
}
h4 {
margin: 30px 0 10px;
font-size: 1em;
color: #999;
font-weight: bold;
}
h5 {
margin: 20px 0 10px;
font-size: .8em;
font-weight: bold;
text-transform: uppercase;
}
h6 {
margin: 20px 0 10px;
font-size: .8em;
font-weight: bold;
color: #999;
text-transform: uppercase;
}
ul {
font-size: inherit;
line-height: inherit;
color: inherit;
}
li {
margin-bottom: 15px;
line-height: 1.6em;
}
pre {
padding: 10px;
border: 1px solid #ddd;
background: #f8f8f8;
border-radius: 4px;
font-size: 0.9em;
font-family: Monaco, monospace;
}
.toc {
background-color: $sidebar-color;
padding: 9px;
margin: 10px 0;
@include border-radius(5px);
ul {
margin: 0;
}
}
}
/*-----------------
Sidebar
-----------------*/
.article-functions {
float: left;
width: flex-grid(3);
padding: 40px 40px;
@include box-sizing(border-box);
.timestamp{
margin-top: 15px;
padding: 15px 0 0 10px;
border-top: 1px solid $light-gray;
.label {
font-size: 0.7em;
color: #aaa;
text-transform: uppercase;
}
.date {
font-size: 0.9em;
}
}
.see-children {
padding: 15px 0 0;
border-top: 1px solid $light-gray;
margin-top: 15px;
a {
display: block;
padding: 2px 4px 2px 10px;
border-radius: 3px;
font-size: 0.9em;
line-height: 25px;
&:hover {
background-color: #f6f6f6;
text-decoration: none;
}
}
}
}
.nav-tabs {
list-style: none;
padding: 0;
margin: 0;
li {
&.active {
a {
color: $blue;
.icon-view,
.icon-home {
background-position: -25px 0;
}
.icon-edit {
background-position: -25px -25px;
}
.icon-changes,
.icon-time {
background-position: -25px -49px;
}
.icon-attachments,
.icon-file {
background-position: -25px -73px;
}
.icon-settings {
background-position: -25px -99px;
}
&:hover {
background: none;
}
}
}
}
a {
display: block;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.9em;
line-height: 25px;
color: #8f8f8f;
.icon {
float: left;
display: block;
width: 25px;
height: 25px;
margin-right: 3px;
background: url(../images/wiki-icons.png) no-repeat;
}
.icon-view,
.icon-home {
background-position: 0 0;
}
.icon-edit {
background-position: 0 -25px;
}
.icon-changes,
.icon-time {
background-position: 0 -49px;
}
.icon-attachments,
.icon-file {
background-position: 0 -73px;
}
.icon-settings {
background-position: 0 -99px;
}
&:hover {
background-color: #f6f6f6;
text-decoration: none;
}
}
}
/*-----------------
Edit
-----------------*/
label {
font-family: $sans-serif;
font-size: 0.9em;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
color: #aaa;
}
input {
font-family: $sans-serif;
font-style: normal;
font-weight: normal;
}
#id_title,
#id_content {
width: 100%;
}
#id_content,
.CodeMirror {
font-family: $monospace;
font-size: 0.8em;
line-height: 1.4em;
}
#div_id_content {
position: relative;
}
#hint_id_content {
position: absolute;
top: 10px;
right: 0%;
font-size: 12px;
text-align:right;
}
.CodeMirror {
background: #fafafa;
border: 1px solid #c8c8c8;
@include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1));
}
.CodeMirror-scroll {
padding: 7px;
}
.schematic_container {
position: relative;
canvas {
@include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2));
}
&:before {
content: 'click to edit schematic';
position: absolute;
top: 10px;
left: 7px;
z-index: 9999;
font-family: $sans-serif;
font-size: 0.75em;
color: #aaa;
pointer-events: none;
}
}
.markItUpContainer {
margin-right: 0;
}
.control-group {
margin-bottom: 20px;
}
#hint_id_summary {
display: inline-block;
font-size: 0.9em;
line-height: 32px;
margin-left: 15px;
}
.asteriskField {
display: none;
}
button {
font-family: $sans-serif;
}
.btn {
@include button(simple, #eee);
font-size: 0.8em;
margin-right: 5px;
line-height: 1.2em;
text-transform: none !important;
letter-spacing: 0 !important;
&:hover {
color: $base-font-color;
text-decoration: none;
}
&.btn-primary {
@include button;
font-size: 0.8em;
}
&.btn-danger {
@include button(simple, $pink);
font-size: 0.8em;
}
&.btn-info {
@include button(simple, #ccc);
font-size: 0.8em;
}
}
a.btn {
padding: 7px 18px 8px !important;
}
.modal {
width: 960px;
z-index: 9999;
min-height: 500px;
margin-left: -480px;
top: 150px;
&.upload-modal,
&.search-file-modal {
width: 400px;
min-height: 0;
margin-left: -200px;
h4 {
margin-bottom: 20px;
font-weight: bold;
}
.help-block {
font-size: 0.8em;
}
}
&.search-file-modal {
width: 500px;
margin-left: -250px;
p {
font-size: 0.8em;
line-height: 1.4em;
}
.form-search {
margin: 30px 0 15px;
input {
width: 350px;
}
button {
height: 35px;
}
}
}
.modal-header {
h1, p {
color: #fff;
}
h1 {
margin: 3px 12px 8px;
font-size: 1.1em;
}
p {
font-size: 0.9em;
margin: 5px 12px 20px;
line-height: 1em;
}
}
.modal-body {
padding-bottom: 8px;
}
iframe {
width: 100%;
min-height: 450px;
border: 0;
}
.modal-footer {
margin: 12px;
}
.modal-footer .btn {
margin-right: 10px;
}
}
.modal-inner-wrapper {
background: #fff;
padding: 20px;
}
#previewWindow body {
background: #f00 !important;
}
#cheatsheetLink {
text-align: right;
display: float;
}
#cheatsheetModal {
width: 950px;
margin-left: -450px;
margin-top: -100px;
.left-column {
margin-right: 10px;
}
.left-column,
.right-column {
float: left;
width: 450px;
}
.close-btn {
display: block;
position: absolute;
top: -8px;
right: -8px;
width: 30px;
height: 30px;
border-radius: 30px;
border: 1px solid #ccc;
@include linear-gradient(top, #eee, #d2d2d2);
font-size: 22px;
line-height: 28px;
color: #333;
text-align: center;
@include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2));
}
}
#cheatsheet-body {
background: #fff;
text-align: left;
padding: 20px;
font-size: 14px;
@include clearfix;
h3 {
font-weight: bold;
}
ul {
list-style: circle;
line-height: 1.4;
color: #333;
}
}
#cheatsheet-body section + section {
margin-top: 40px;
}
#cheatsheet-body pre{
color: #000;
text-align: left;
background: #eee;
padding: 10px;
font-size: 12px;
}
/*-----------------
Changes
-----------------*/
&.history {
.accordion {
margin-bottom: 15px;
padding: 15px;
border: 1px solid $light-gray;
background: #f9f9f9;
border-radius: 5px;
a:hover {
text-decoration: none;
}
}
}
.accordion small {
font-size: 0.8em;
color: #aaa;
}
.accordion-toggle div {
margin-top: 8px;
}
.collapse {
display: none;
&.in {
display: block;
}
}
.diff-container {
overflow-x: scroll;
table {
min-width: 100%;
}
th {
font-family: $sans-serif;
font-size: 0.7em;
}
td {
font-family: $monospace;
}
.linenumber,
.data {
font-size: 0.75em;
}
}
/*-----------------
Settings
-----------------*/
#settings_form {
.well {
margin-bottom: 15px;
@include clearfix;
}
.control-group {
float: left;
margin-bottom: 0;
clear: both;
}
label {
margin-left: 15px;
}
.controls {
padding-top: 4px;
}
label,
.controls {
float: right;
}
}
/*-----------------
New
-----------------*/
.new-article {
margin: auto;
float: none;
.add-on {
line-height: 34px;
margin-right: 6px;
}
}
#hint_id_slug {
display: inline-block;
font-size: 0.9em;
line-height: 1.3em;
margin-top: 9px;
}
.error {
font-size: 1em;
color: $pink;
.help-block {
margin-top: 10px;
}
input {
border-color: $pink;
}
}
.back {
float: right;
}
/*-----------------
Directory
-----------------*/
.directory-toolbar {
background-color: $sidebar-color;
padding: 9px;
margin: 0 -9px 20px;
@include border-radius(5px);
.well-small {
@include clearfix;
a {
@include inline-block;
}
}
+ p {
font-size: 0.9em;
color: #aaa;
}
}
.filter-clear {
margin-right: 10px;
margin-top: 10px;
font-size: .9em;
a {
color: #aaa;
&:hover {
color: #777;
}
}
}
.table.table-striped {
width: 100%;
margin-top: 20px;
th, td {
border-bottom: 1px solid $light-gray;
padding: 8px;
overflow: hidden;
}
a.list-children {
margin-left: 3px;
}
tr:nth-child(even) {
background: #F6F6F6;
}
}
/*-----------------
Attachments
-----------------*/
.attachment-options {
height: 40px;
margin: 40px 0 30px;
}
.attachment-list {
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 15px;
border: 1px solid #DDD;
background: #F9F9F9;
@include border-radius(5px);
}
header,
.attachment-details {
padding: 12px 15px;
}
.attachment-details {
background: #eee;
@include border-radius(0 0 5px 5px);
}
h3 {
a {
font-weight: bold;
font-size: 0.9em;
}
.badge {
float: right;
font-size: 0.6em;
line-height: 20px;
color: #aaa;
}
}
.attachment-description {
font-size: 0.8em;
}
table {
width: 100%;
font-size: 0.8em;
}
.attachment-actions {
width: 175px;
}
.attachment-actions .btn {
float: right;
}
}
/*-----------------
Delete
-----------------*/
#div_id_confirm {
position: relative;
height: 30px;
margin: 40px 0;
#id_confirm {
position: absolute;
top: 6px;
}
label {
position: absolute;
left: 25px;
font-size: 1.4em;
}
}
section.delete {
padding: 40px;
}
/*-----------------
Alerts
-----------------*/
.alert {
position: relative;
margin: 24px 40px;
padding: 8px 12px;
border: 1px solid #EBE8BF;
border-radius: 3px;
background: $yellow;
font-size: 0.9em;
.close {
position: absolute;
right: 12px;
font-size: 1.3em;
top: 6px;
color: #999;
text-decoration: none;
}
}
.main-article .alert {
margin: 0 0 24px;
}
.missing {
max-width: 400px;
margin: lh(2) auto;
display: block;
overflow: hidden;
background: $pink;
padding: lh();
@include box-shadow(inset 0 0 0 1px lighten($pink, 10%));
border: 1px solid darken($pink, 15%);
p {
color: #fff;
a {
display: block;
background: darken($pink, 8%);
margin: lh() (-(lh())) (-(lh()));
padding: lh();
border-top: 1px solid darken($pink, 15%);
color: #fff;
font-weight: bold;
font-size: em(18);
@include transition;
text-align: center;
-webkit-font-smoothing: antialiased;
&:hover {
background: darken($pink, 12%);
}
}
}
}
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
}
.modal-preview {
min-width: 0;
}
.modal-preview .container {
padding: 50px;
}
.modal-preview .main-article {
width: 100% !important;
margin-left: 0;
}
#circuit_editor_modal.modal {
width: 648px;
z-index: 9999;
margin-left: -325px;
top: 150px;
.modal-header {
h1, p {
color: #fff;
}
h1 {
margin: 3px 12px 8px;
font-size: 1.1em;
}
p {
font-size: 0.9em;
margin: 5px 12px 20px;
line-height: 1em;
}
}
.modal-body {
padding-bottom: 8px;
}
.modal-footer {
margin: 12px;
}
.modal-footer .btn {
@include button(simple, #eee);
font-size: 0.8em;
margin-right: 5px;
line-height: 1.2em;
text-transform: none !important;
letter-spacing: 0 !important;
&:hover {
color: $base-font-color;
text-decoration: none;
}
&.btn-primary {
@include button;
font-size: 0.8em;
}
margin-right: 10px;
}
}