Skip to content

E
edx-platform
Commit a496cc0a by Brian Talbot
Options

studio - Sass Cleanup: moved all page/view specific css to their own views and… 

studio - Sass Cleanup: moved all page/view specific css to their own views and created forms specific sheet
parent 524db5e3
Showing with 361 additions and 196 deletions
cms/static/sass/_base.scss
...@@ -350,10 +350,11 @@ h1 { ...@@ -350,10 +350,11 @@ h1 {
// layout - grandfathered // layout - grandfathered
.main-wrapper { .main-wrapper {
position: relative; position: relative;
margin: 0 40px; margin: 40px;
} }
.inner-wrapper { .inner-wrapper {
@include clearfix();
position: relative; position: relative;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
...@@ -363,6 +364,12 @@ h1 { ...@@ -363,6 +364,12 @@ h1 {
} }
} }
.main-column {
clear: both;
float: left;
width: 70%;
}
.sidebar { .sidebar {
float: right; float: right;
width: 28%; width: 28%;
...@@ -378,86 +385,6 @@ h1 { ...@@ -378,86 +385,6 @@ h1 {
// ==================== // ====================
// forms
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
}
// forms - specific
input.search {
padding: 6px 15px 8px 30px;
@include box-sizing(border-box);
border: 1px solid $darkGrey;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
label {
font-size: 12px;
}
code {
padding: 0 4px;
border-radius: 3px;
background: #eee;
font-family: Monaco, monospace;
}
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
}
// ====================
// UI - chrome
// ====================
// UI - actions // UI - actions
.new-unit-item, .new-unit-item,
.new-subsection-item, .new-subsection-item,
...@@ -839,13 +766,3 @@ body.hide-wip { ...@@ -839,13 +766,3 @@ body.hide-wip {
display: none; display: none;
} }
} }
\ No newline at end of file
// ====================
// needed fudges for now
body.dashboard {
.my-classes {
margin-top: $baseline;
}
}
\ No newline at end of file
cms/static/sass/base-style.scss
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
@import 'elements/header'; @import 'elements/header';
@import 'elements/footer'; @import 'elements/footer';
@import 'elements/navigation'; @import 'elements/navigation';
@import 'elements/forms';
@import 'elements/modal'; @import 'elements/modal';
@import 'elements/alerts'; @import 'elements/alerts';
@import 'elements/jquery-ui-calendar'; @import 'elements/jquery-ui-calendar';
......
cms/static/sass/elements/_footer.scss
// studio - global footer // studio - elements - global footer
// ==================== // ====================
.wrapper-footer { .wrapper-footer {
......
cms/static/sass/elements/_forms.scss 0 → 100644
// studio - elements - forms
// ====================
// forms - general
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
}
// forms - specific
input.search {
padding: 6px 15px 8px 30px;
@include box-sizing(border-box);
border: 1px solid $darkGrey;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
label {
font-size: 12px;
}
code {
padding: 0 4px;
border-radius: 3px;
background: #eee;
font-family: Monaco, monospace;
}
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
}
\ No newline at end of file
cms/static/sass/elements/_header.scss
// studio - global header // studio - elements - global header
// ==================== // ====================
.wrapper-header { .wrapper-header {
......
cms/static/sass/views/_assets.scss
// studio - views - assets // studio - views - assets
// ==================== // ====================
.uploads { body.course.uploads {
input.asset-search-input { input.asset-search-input {
float: left; float: left;
width: 260px; width: 260px;
......
cms/static/sass/views/_dashboard.scss
// studio - views - user dashboard // studio - views - user dashboard
// ==================== // ====================
.class-list { body.dashboard {
.my-classes {
margin-top: $baseline;
}
.class-list {
margin-top: 20px; margin-top: 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
...@@ -61,9 +67,9 @@ ...@@ -61,9 +67,9 @@
pointer-events: auto; pointer-events: auto;
} }
} }
} }
.new-course { .new-course {
padding: 15px 25px; padding: 15px 25px;
margin-top: 20px; margin-top: 20px;
border-radius: 3px; border-radius: 3px;
...@@ -114,4 +120,5 @@ ...@@ -114,4 +120,5 @@
.new-course-cancel { .new-course-cancel {
@include white-button; @include white-button;
} }
}
} }
\ No newline at end of file
cms/static/sass/views/_export.scss
// studio - views - course export // studio - views - course export
// ==================== // ====================
.export { body.course.export {
.export-overview { .export-overview {
@extend .window; @extend .window;
@include clearfix; @include clearfix;
...@@ -121,6 +122,4 @@ ...@@ -121,6 +122,4 @@
} }
} }
} }
} }
\ No newline at end of file
cms/static/sass/views/_import.scss
// studio - views - course import // studio - views - course import
// ==================== // ====================
.import { body.course.import {
.import-overview { .import-overview {
@extend .window; @extend .window;
@include clearfix; @include clearfix;
......
cms/static/sass/views/_index.scss
// studio - views - how it works // studio - views - how it works
// ==================== // ====================
.index { body.index {
&.not-signedin { &.not-signedin {
......
cms/static/sass/views/_outline.scss
// studio - views - course outline // studio - views - course outline
// ==================== // ====================
input.courseware-unit-search-input { body.course.outline {
input.courseware-unit-search-input {
float: left; float: left;
width: 260px; width: 260px;
background-color: #fff; background-color: #fff;
} }
.branch { .branch {
.section-item { .section-item {
@include clearfix(); @include clearfix();
...@@ -128,7 +130,7 @@ input.courseware-unit-search-input { ...@@ -128,7 +130,7 @@ input.courseware-unit-search-input {
} }
.courseware-section { .courseware-section {
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
...@@ -519,9 +521,9 @@ input.courseware-unit-search-input { ...@@ -519,9 +521,9 @@ input.courseware-unit-search-input {
} }
} }
} }
} }
.toggle-button-sections { .toggle-button-sections {
display: none; display: none;
position: relative; position: relative;
float: right; float: right;
...@@ -547,29 +549,29 @@ input.courseware-unit-search-input { ...@@ -547,29 +549,29 @@ input.courseware-unit-search-input {
.label { .label {
display: inline-block; display: inline-block;
} }
} }
.new-section-name, .new-section-name,
.new-subsection-name-input { .new-subsection-name-input {
width: 515px; width: 515px;
} }
.new-section-name-save, .new-section-name-save,
.new-subsection-name-save { .new-subsection-name-save {
@include blue-button; @include blue-button;
padding: 4px 20px 7px; padding: 4px 20px 7px;
margin: 0 5px; margin: 0 5px;
color: #fff !important; color: #fff !important;
} }
.new-section-name-cancel, .new-section-name-cancel,
.new-subsection-name-cancel { .new-subsection-name-cancel {
@include white-button; @include white-button;
padding: 4px 20px 7px; padding: 4px 20px 7px;
color: #8891a1 !important; color: #8891a1 !important;
} }
.dummy-calendar { .dummy-calendar {
display: none; display: none;
position: absolute; position: absolute;
top: 55px; top: 55px;
...@@ -577,26 +579,13 @@ input.courseware-unit-search-input { ...@@ -577,26 +579,13 @@ input.courseware-unit-search-input {
z-index: 9999; z-index: 9999;
border: 1px solid #3C3C3C; border: 1px solid #3C3C3C;
@include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
}
.unit-name-input {
padding: 20px 40px;
label {
display: block;
} }
input { .preview {
width: 100%;
font-size: 20px;
}
}
.preview {
background: url(../img/preview.jpg) center top no-repeat; background: url(../img/preview.jpg) center top no-repeat;
} }
.edit-subsection-publish-settings { .edit-subsection-publish-settings {
display: none; display: none;
position: fixed; position: fixed;
top: 100px; top: 100px;
...@@ -648,17 +637,17 @@ input.courseware-unit-search-input { ...@@ -648,17 +637,17 @@ input.courseware-unit-search-input {
.cancel-button { .cancel-button {
font-size: 16px; font-size: 16px;
} }
} }
.collapse-all-button { .collapse-all-button {
float: right; float: right;
margin-top: 10px; margin-top: 10px;
font-size: 13px; font-size: 13px;
color: $darkGrey; color: $darkGrey;
} }
// sort/drag and drop // sort/drag and drop
.ui-droppable { .ui-droppable {
@include transition (padding 0.5s ease-in-out 0s); @include transition (padding 0.5s ease-in-out 0s);
min-height: 20px; min-height: 20px;
padding: 0; padding: 0;
...@@ -666,9 +655,9 @@ input.courseware-unit-search-input { ...@@ -666,9 +655,9 @@ input.courseware-unit-search-input {
&.dropover { &.dropover {
padding: 15px 0; padding: 15px 0;
} }
} }
.ui-draggable-dragging { .ui-draggable-dragging {
@include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
opacity : 0.2; opacity : 0.2;
...@@ -683,9 +672,9 @@ input.courseware-unit-search-input { ...@@ -683,9 +672,9 @@ input.courseware-unit-search-input {
.new-unit-item { .new-unit-item {
display: none; display: none;
} }
} }
ol.ui-droppable .branch:first-child .section-item { ol.ui-droppable .branch:first-child .section-item {
border-top: none; border-top: none;
}
} }
\ No newline at end of file
cms/static/sass/views/_static-pages.scss
// studio - views - course static pages // studio - views - course static pages
// ==================== // ====================
.static-pages { body.course.static-pages {
.new-static-page-button { .new-static-page-button {
@include grey-button; @include grey-button;
display: block; display: block;
......
cms/static/sass/views/_subsection.scss
// studio - views - course subsection // studio - views - course subsection
// ==================== // ====================
.subsection .main-wrapper { body.course.subsection {
margin: 40px;
}
.subsection .inner-wrapper { .unit-settings {
@include clearfix(); .window-contents {
} padding: 10px 20px;
}
.unit-actions {
border-bottom: none;
padding-bottom: 0;
}
.published-alert {
display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
div {
margin-top: 15px;
}
}
input[type="radio"] {
margin-right: 7px;
}
.status {
font-size: 12px;
strong {
font-weight: 700;
}
}
.preview-button, .view-button {
@include white-button;
margin-bottom: 10px;
}
.publish-button {
@include orange-button;
}
.delete-button {
@include blue-button;
}
.delete-draft {
display: inline-block;
}
.delete-button,
.preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
.window-contents {
display: none;
}
}
ol {
border: 1px solid #ced2db;
.subsection-body { li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.checked {
background: #d1dae3;
}
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
}
}
}
}
.unit-location {
.url {
width: 100%;
margin-bottom: 10px;
@include box-shadow(none);
}
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.window-contents > ol {
@include tree-view;
.section-item {
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
}
ol {
.section-item {
padding-left: 20px;
}
.new-unit-item {
margin-left: 20px;
}
}
ol ol {
.section-item {
padding-left: 34px;
}
.new-unit-item {
margin: 0 0 10px 41px;
}
}
}
}
.subsection-body {
padding: 32px 40px; padding: 32px 40px;
@include clearfix; @include clearfix;
...@@ -104,9 +255,9 @@ ...@@ -104,9 +255,9 @@
vertical-align: middle; vertical-align: middle;
} }
} }
} }
.subsection-name-input { .subsection-name-input {
label { label {
display: block; display: block;
} }
...@@ -115,10 +266,10 @@ ...@@ -115,10 +266,10 @@
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
} }
} }
.scheduled-date-input, .scheduled-date-input,
.due-date-input { .due-date-input {
@include clearfix; @include clearfix;
.date-input, .date-input,
...@@ -138,9 +289,9 @@ ...@@ -138,9 +289,9 @@
font-size: 11px; font-size: 11px;
color: #999; color: #999;
} }
} }
.due-date-input { .due-date-input {
label { label {
display: inline-block !important; display: inline-block !important;
margin-right: 10px; margin-right: 10px;
...@@ -160,9 +311,9 @@ ...@@ -160,9 +311,9 @@
.remove-date { .remove-date {
display: block; display: block;
} }
} }
.row.visibility { .row.visibility {
label { label {
display: inline-block !important; display: inline-block !important;
margin-right: 10px; margin-right: 10px;
...@@ -189,9 +340,9 @@ ...@@ -189,9 +340,9 @@
background-position: 0 -5px; background-position: 0 -5px;
} }
} }
} }
.gradable { .gradable {
label { label {
display: inline-block; display: inline-block;
...@@ -295,4 +446,5 @@ ...@@ -295,4 +446,5 @@
} }
} }
} }
}
} }
\ No newline at end of file
cms/static/sass/views/_unit.scss
// studio - views - course unit // studio - views - unit
// ==================== // ====================
.unit .main-wrapper { body.course.unit {
.unit .main-wrapper {
@include clearfix(); @include clearfix();
margin: 40px; margin: 40px;
} }
//Problem Selector tab menu requirements //Problem Selector tab menu requirements
.js .tabs .tab { .js .tabs .tab {
display: none; display: none;
} }
//end problem selector reqs //end problem selector reqs
.main-column { .main-column {
clear: both; clear: both;
float: left; float: left;
width: 70%; width: 70%;
} }
.unit-body.published { .unit-body.published {
.components > li { .components > li {
border: none; border: none;
...@@ -26,9 +28,23 @@ ...@@ -26,9 +28,23 @@
padding: 0 20px; padding: 0 20px;
} }
} }
} }
.unit-body {
.unit-name-input {
padding: 20px 40px;
label {
display: block;
}
input {
width: 100%;
font-size: 20px;
}
}
.unit-body {
.breadcrumbs { .breadcrumbs {
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
...@@ -445,9 +461,9 @@ ...@@ -445,9 +461,9 @@
margin: 15px 8px 0 0; margin: 15px 8px 0 0;
} }
} }
} }
.unit-settings { .unit-settings {
.window-contents { .window-contents {
padding: 10px 20px; padding: 10px 20px;
} }
...@@ -508,9 +524,9 @@ ...@@ -508,9 +524,9 @@
margin-top: 10px; margin-top: 10px;
padding: 6px 15px 8px; padding: 6px 15px 8px;
} }
} }
.unit-history { .unit-history {
&.collapsed { &.collapsed {
h4 { h4 {
border-bottom: none; border-bottom: none;
...@@ -552,9 +568,9 @@ ...@@ -552,9 +568,9 @@
} }
} }
} }
} }
.unit-location { .unit-location {
.url { .url {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -602,9 +618,9 @@ ...@@ -602,9 +618,9 @@
} }
} }
} }
} }
.edit-state-draft { .edit-state-draft {
.visibility, .visibility,
.edit-draft-message, .edit-draft-message,
...@@ -615,9 +631,9 @@ ...@@ -615,9 +631,9 @@
.published-alert { .published-alert {
display: block; display: block;
} }
} }
.edit-state-public { .edit-state-public {
.delete-draft, .delete-draft,
.component-actions, .component-actions,
.new-component-item, .new-component-item,
...@@ -634,9 +650,9 @@ ...@@ -634,9 +650,9 @@
.drag-handle { .drag-handle {
display: none !important; display: none !important;
} }
} }
.edit-state-private { .edit-state-private {
.delete-draft, .delete-draft,
.publish-draft, .publish-draft,
.editing-draft-alert, .editing-draft-alert,
...@@ -644,10 +660,10 @@ ...@@ -644,10 +660,10 @@
.view-button { .view-button {
display: none; display: none;
} }
} }
// editing units from courseware // editing units from courseware
body.unit { body.unit {
.component { .component {
padding-top: 30px; padding-top: 30px;
...@@ -667,4 +683,5 @@ body.unit { ...@@ -667,4 +683,5 @@ body.unit {
padding-top: 0; padding-top: 0;
} }
} }
}
} }
\ No newline at end of file
cms/static/sass/views/_updates.scss
// studio - views - course updates // studio - views - course updates
// ==================== // ====================
.course-info { body.course.updates {
h2 { h2 {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 22px; font-size: 22px;
......
cms/static/sass/views/_users.scss
// studio - views - course users // studio - views - course users
// ==================== // ====================
.users { body.course.users {
.new-user-form { .new-user-form {
display: none; display: none;
padding: 15px 20px; padding: 15px 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment