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 1685 additions and 1520 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,
...@@ -838,14 +765,4 @@ body.hide-wip { ...@@ -838,14 +765,4 @@ body.hide-wip {
.wip-box { .wip-box {
display: none; display: none;
} }
}
// ====================
// 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 {
margin-top: 20px;
border-radius: 3px;
border: 1px solid $darkGrey;
background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
li {
position: relative;
border-bottom: 1px solid $mediumGrey;
&:last-child {
border-bottom: none;
}
.class-link { .my-classes {
z-index: 100; margin-top: $baseline;
display: block; }
padding: 20px 25px;
line-height: 1.3; .class-list {
margin-top: 20px;
&:hover { border-radius: 3px;
background: $paleYellow; border: 1px solid $darkGrey;
background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+ .view-live-button { li {
opacity: 1.0; position: relative;
pointer-events: auto; border-bottom: 1px solid $mediumGrey;
&:last-child {
border-bottom: none;
}
.class-link {
z-index: 100;
display: block;
padding: 20px 25px;
line-height: 1.3;
&:hover {
background: $paleYellow;
+ .view-live-button {
opacity: 1.0;
pointer-events: auto;
}
} }
} }
} }
}
.class-name { .class-name {
display: block; display: block;
font-size: 19px; font-size: 19px;
font-weight: 300; font-weight: 300;
} }
.detail { .detail {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-right: 20px; margin-right: 20px;
color: #3c3c3c; color: #3c3c3c;
} }
// view live button
.view-live-button {
z-index: 10000;
position: absolute;
top: 15px;
right: $baseline;
padding: ($baseline/4) ($baseline/2);
opacity: 0;
pointer-events: none;
// view live button &:hover {
.view-live-button { opacity: 1.0;
z-index: 10000; pointer-events: auto;
position: absolute; }
top: 15px;
right: $baseline;
padding: ($baseline/4) ($baseline/2);
opacity: 0;
pointer-events: none;
&:hover {
opacity: 1.0;
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; border: 1px solid $darkGrey;
border: 1px solid $darkGrey; background: #fff;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include clearfix;
.row {
margin-bottom: 15px;
@include clearfix; @include clearfix;
}
.column { .row {
float: left; margin-bottom: 15px;
width: 48%; @include clearfix;
} }
.column:first-child { .column {
margin-right: 4%; float: left;
} width: 48%;
}
.course-info { .column:first-child {
width: 600px; margin-right: 4%;
} }
label { .course-info {
display: block; width: 600px;
font-size: 13px; }
font-weight: 700;
}
.new-course-org, label {
.new-course-number, display: block;
.new-course-name { font-size: 13px;
width: 100%; font-weight: 700;
} }
.new-course-name { .new-course-org,
font-size: 19px; .new-course-number,
font-weight: 300; .new-course-name {
} width: 100%;
}
.new-course-save { .new-course-name {
@include blue-button; font-size: 19px;
} font-weight: 300;
}
.new-course-save {
@include blue-button;
}
.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 {
float: left;
width: 260px;
background-color: #fff;
}
.branch { input.courseware-unit-search-input {
float: left;
.section-item { width: 260px;
@include clearfix(); background-color: #fff;
}
.details { .branch {
display: block;
float: left;
margin-bottom: 0;
width: 650px;
}
.gradable-status { .section-item {
float: right; @include clearfix();
position: relative;
top: -4px;
right: 50px;
width: 145px;
.status-label { .details {
position: absolute; display: block;
top: 2px; float: left;
right: -5px; margin-bottom: 0;
display: none; width: 650px;
width: 110px;
padding: 5px 40px 5px 10px;
@include border-radius(3px);
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
} }
.menu-toggle { .gradable-status {
z-index: 10; float: right;
position: absolute; position: relative;
top: 0; top: -4px;
right: 5px; right: 50px;
padding: 5px; width: 145px;
color: $mediumGrey;
&:hover, &.is-active {
color: $blue;
}
}
.menu {
z-index: 1;
display: none;
opacity: 0.0;
position: absolute;
top: -1px;
left: 5px;
margin: 0;
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
li { .status-label {
width: 115px; position: absolute;
margin-bottom: 3px; top: 2px;
padding-bottom: 3px; right: -5px;
border-bottom: 1px solid $lightGrey; display: none;
width: 110px;
padding: 5px 40px 5px 10px;
@include border-radius(3px);
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
&:last-child { .menu-toggle {
margin-bottom: 0; z-index: 10;
padding-bottom: 0; position: absolute;
border: none; top: 0;
right: 5px;
padding: 5px;
color: $mediumGrey;
&:hover, &.is-active {
color: $blue;
}
}
a { .menu {
color: $darkGrey; z-index: 1;
display: none;
opacity: 0.0;
position: absolute;
top: -1px;
left: 5px;
margin: 0;
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
li {
width: 115px;
margin-bottom: 3px;
padding-bottom: 3px;
border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
a {
color: $darkGrey;
}
} }
} }
}
a { a {
color: $blue; color: $blue;
&.is-selected { &.is-selected {
font-weight: bold; font-weight: bold;
}
} }
} }
}
// dropdown state // dropdown state
&.is-active { &.is-active {
.menu { .menu {
z-index: 1000; z-index: 1000;
display: block; display: block;
opacity: 1.0; opacity: 1.0;
} }
.menu-toggle { .menu-toggle {
z-index: 10000; z-index: 10000;
}
} }
}
// set state // set state
&.is-set { &.is-set {
.menu-toggle { .menu-toggle {
color: $blue; color: $blue;
} }
.status-label { .status-label {
display: block; display: block;
color: $blue; color: $blue;
}
} }
} }
} }
} }
}
.courseware-section {
position: relative;
background: #fff;
border-radius: 3px;
border: 1px solid $mediumGrey;
margin-top: 15px;
padding-bottom: 12px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
&:first-child { .courseware-section {
margin-top: 0; position: relative;
} background: #fff;
border-radius: 3px;
&.collapsed { border: 1px solid $mediumGrey;
padding-bottom: 0; margin-top: 15px;
} padding-bottom: 12px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
label { &:first-child {
float: left; margin-top: 0;
line-height: 29px; }
}
.datepair { &.collapsed {
float: left; padding-bottom: 0;
margin-left: 10px; }
}
.section-published-date { label {
position: absolute; float: left;
top: 19px; line-height: 29px;
right: 90px; }
padding: 4px 10px;
border-radius: 3px;
background: $lightGrey;
text-align: right;
.published-status { .datepair {
font-size: 12px; float: left;
margin-right: 15px; margin-left: 10px;
}
strong { .section-published-date {
font-weight: bold; position: absolute;
} top: 19px;
} right: 90px;
padding: 4px 10px;
border-radius: 3px;
background: $lightGrey;
text-align: right;
.schedule-button { .published-status {
@include blue-button; font-size: 12px;
} margin-right: 15px;
.edit-button { strong {
@include blue-button; font-weight: bold;
} }
}
.schedule-button, .schedule-button {
.edit-button { @include blue-button;
font-size: 11px; }
padding: 3px 15px 5px;
}
}
.datepair .date, .edit-button {
.datepair .time { @include blue-button;
padding-left: 0; }
padding-right: 0;
border: none;
background: none;
@include box-shadow(none);
font-size: 13px;
font-weight: bold;
color: $blue;
cursor: pointer;
}
.datepair .date { .schedule-button,
width: 80px; .edit-button {
} font-size: 11px;
padding: 3px 15px 5px;
}
}
.datepair .time { .datepair .date,
width: 65px; .datepair .time {
} padding-left: 0;
padding-right: 0;
border: none;
background: none;
@include box-shadow(none);
font-size: 13px;
font-weight: bold;
color: $blue;
cursor: pointer;
}
&.collapsed .subsection-list, .datepair .date {
.collapsed .subsection-list, width: 80px;
.collapsed > ol { }
display: none !important;
}
header { .datepair .time {
min-height: 75px; width: 65px;
@include clearfix(); }
.item-details, .section-published-date { &.collapsed .subsection-list,
.collapsed .subsection-list,
.collapsed > ol {
display: none !important;
}
} header {
min-height: 75px;
@include clearfix();
.item-details { .item-details, .section-published-date {
display: inline-block;
padding: 20px 0 10px 0;
@include clearfix();
.section-name { }
float: left;
margin-right: 10px;
width: 350px;
font-size: 19px;
font-weight: bold;
color: $blue;
}
.section-name-span { .item-details {
cursor: pointer; display: inline-block;
@include transition(color .15s); padding: 20px 0 10px 0;
@include clearfix();
&:hover { .section-name {
color: $orange; float: left;
margin-right: 10px;
width: 350px;
font-size: 19px;
font-weight: bold;
color: $blue;
} }
}
.section-name-edit {
position: relative;
width: 400px;
background: $white;
input { .section-name-span {
font-size: 16px; cursor: pointer;
} @include transition(color .15s);
.save-button {
@include blue-button;
padding: 7px 20px 7px;
margin-right: 5px;
}
.cancel-button { &:hover {
@include white-button; color: $orange;
padding: 7px 20px 7px; }
} }
}
.section-published-date { .section-name-edit {
float: right; position: relative;
width: 265px; width: 400px;
margin-right: 220px; background: $white;
@include border-radius(3px);
background: $lightGrey;
.published-status { input {
font-size: 12px; font-size: 16px;
margin-right: 15px; }
.save-button {
@include blue-button;
padding: 7px 20px 7px;
margin-right: 5px;
}
strong { .cancel-button {
font-weight: bold; @include white-button;
padding: 7px 20px 7px;
} }
} }
.schedule-button { .section-published-date {
@include blue-button; float: right;
} width: 265px;
margin-right: 220px;
@include border-radius(3px);
background: $lightGrey;
.edit-button { .published-status {
@include blue-button; font-size: 12px;
} margin-right: 15px;
.schedule-button, strong {
.edit-button { font-weight: bold;
font-size: 11px; }
padding: 3px 15px 5px;
} }
}
.gradable-status { .schedule-button {
position: absolute; @include blue-button;
top: 20px;
right: 70px;
width: 145px;
.status-label {
position: absolute;
top: 0;
right: 2px;
display: none;
width: 100px;
padding: 10px 35px 10px 10px;
@include border-radius(3px);
background: $lightGrey;
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
} }
.menu-toggle { .edit-button {
z-index: 10; @include blue-button;
position: absolute; }
top: 2px;
right: 5px;
padding: 5px;
color: $lightGrey;
&:hover, &.is-active { .schedule-button,
color: $blue; .edit-button {
font-size: 11px;
padding: 3px 15px 5px;
} }
} }
.menu { .gradable-status {
z-index: 1;
display: none;
opacity: 0.0;
position: absolute; position: absolute;
top: -1px; top: 20px;
left: 2px; right: 70px;
margin: 0; width: 145px;
padding: 8px 12px;
background: $white; .status-label {
border: 1px solid $mediumGrey; position: absolute;
font-size: 12px; top: 0;
@include border-radius(4px); right: 2px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); display: none;
@include transition(opacity .15s); width: 100px;
@include transition(display .15s); padding: 10px 35px 10px 10px;
@include border-radius(3px);
background: $lightGrey;
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
li { .menu-toggle {
width: 115px; z-index: 10;
margin-bottom: 3px; position: absolute;
padding-bottom: 3px; top: 2px;
border-bottom: 1px solid $lightGrey; right: 5px;
padding: 5px;
color: $lightGrey;
&:last-child { &:hover, &.is-active {
margin-bottom: 0; color: $blue;
padding-bottom: 0; }
border: none; }
a { .menu {
color: $darkGrey; z-index: 1;
display: none;
opacity: 0.0;
position: absolute;
top: -1px;
left: 2px;
margin: 0;
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
@include transition(display .15s);
li {
width: 115px;
margin-bottom: 3px;
padding-bottom: 3px;
border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
a {
color: $darkGrey;
}
} }
} }
}
a { a {
&.is-selected { &.is-selected {
font-weight: bold; font-weight: bold;
}
} }
}
// dropdown state
&.is-active {
.menu {
z-index: 1000;
display: block;
opacity: 1.0;
} }
.menu-toggle {
z-index: 10000;
}
} }
// dropdown state // set state
&.is-active { &.is-set {
.menu { .menu-toggle {
z-index: 1000; color: $blue;
}
.status-label {
display: block; display: block;
opacity: 1.0; color: $blue;
} }
}
float: left;
padding: 21px 0 0;
}
}
.menu-toggle { .item-actions {
z-index: 10000; margin-top: 21px;
margin-right: 12px;
.edit-button,
.delete-button {
margin-top: -3px;
}
} }
}
// set state .expand-collapse-icon {
&.is-set { float: left;
margin: 29px 6px 16px 16px;
@include transition(none);
.menu-toggle { &.expand {
color: $blue; background-position: 0 0;
}
&.collapsed {
}
} }
.status-label { .drag-handle {
display: block; margin-left: 11px;
color: $blue;
} }
} }
float: left; h3 {
padding: 21px 0 0; font-size: 19px;
font-weight: 700;
color: $blue;
} }
}
.item-actions { .section-name-span {
margin-top: 21px; cursor: pointer;
margin-right: 12px; @include transition(color .15s);
.edit-button, &:hover {
.delete-button { color: $orange;
margin-top: -3px; }
} }
}
.expand-collapse-icon { .section-name-form {
float: left; margin-bottom: 15px;
margin: 29px 6px 16px 16px; }
@include transition(none);
&.expand { .section-name-edit {
background-position: 0 0; input {
} font-size: 16px;
}
.save-button {
@include blue-button;
padding: 7px 20px 7px;
margin-right: 5px;
}
&.collapsed { .cancel-button {
@include white-button;
} padding: 7px 20px 7px;
} }
}
.drag-handle { h4 {
margin-left: 11px; font-size: 12px;
} color: #878e9d;
}
h3 { strong {
font-size: 19px; font-weight: bold;
font-weight: 700; }
color: $blue; }
}
.section-name-span { .list-header {
cursor: pointer; @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
@include transition(color .15s); background-color: #ced2db;
border-radius: 3px 3px 0 0;
}
&:hover { .subsection-list {
color: $orange; margin: 0 12px;
}
}
.section-name-form { > ol {
margin-bottom: 15px; @include tree-view;
} border-top-width: 0;
}
}
.section-name-edit { &.new-section {
input {
font-size: 16px;
}
.save-button {
@include blue-button;
padding: 7px 20px 7px;
margin-right: 5px;
}
.cancel-button { header {
@include white-button; height: auto;
padding: 7px 20px 7px; @include clearfix();
} }
}
h4 { .expand-collapse-icon {
font-size: 12px; visibility: hidden;
color: #878e9d; }
strong { .item-details {
font-weight: bold; padding: 25px 0 0 0;
}
}
.list-header { .section-name {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); float: none;
background-color: #ced2db; width: 100%;
border-radius: 3px 3px 0 0; }
} }
}
}
.subsection-list { .toggle-button-sections {
margin: 0 12px; display: none;
position: relative;
float: right;
margin-top: 10px;
> ol { font-size: 13px;
@include tree-view; color: $darkGrey;
border-top-width: 0;
}
}
&.new-section { &.is-shown {
display: block;
}
header { .ss-icon {
height: auto; @include border-radius(20px);
@include clearfix(); position: relative;
} top: -1px;
display: inline-block;
margin-right: 2px;
line-height: 5px;
font-size: 11px;
}
.expand-collapse-icon { .label {
visibility: hidden; display: inline-block;
} }
}
.item-details { .new-section-name,
padding: 25px 0 0 0; .new-subsection-name-input {
width: 515px;
}
.section-name { .new-section-name-save,
float: none; .new-subsection-name-save {
width: 100%; @include blue-button;
} padding: 4px 20px 7px;
} margin: 0 5px;
} color: #fff !important;
} }
.toggle-button-sections { .new-section-name-cancel,
display: none; .new-subsection-name-cancel {
position: relative; @include white-button;
float: right; padding: 4px 20px 7px;
margin-top: 10px; color: #8891a1 !important;
}
font-size: 13px; .dummy-calendar {
color: $darkGrey; display: none;
position: absolute;
top: 55px;
left: 110px;
z-index: 9999;
border: 1px solid #3C3C3C;
@include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
}
&.is-shown { .preview {
display: block; background: url(../img/preview.jpg) center top no-repeat;
} }
.ss-icon { .edit-subsection-publish-settings {
@include border-radius(20px); display: none;
position: relative; position: fixed;
top: -1px; top: 100px;
display: inline-block; left: 50%;
margin-right: 2px; z-index: 99999;
line-height: 5px; width: 600px;
font-size: 11px; margin-left: -300px;
} background: #fff;
text-align: center;
.settings {
padding: 40px;
}
.label { h3 {
display: inline-block; font-size: 34px;
} font-weight: 300;
} }
.new-section-name,
.new-subsection-name-input {
width: 515px;
}
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 4px 20px 7px;
margin: 0 5px;
color: #fff !important;
}
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 4px 20px 7px;
color: #8891a1 !important;
}
.dummy-calendar {
display: none;
position: absolute;
top: 55px;
left: 110px;
z-index: 9999;
border: 1px solid #3C3C3C;
@include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
}
.unit-name-input {
padding: 20px 40px;
label {
display: block;
}
input { .picker {
width: 100%; margin: 30px 0 65px;
font-size: 20px; }
}
}
.preview {
background: url(../img/preview.jpg) center top no-repeat;
}
.edit-subsection-publish-settings {
display: none;
position: fixed;
top: 100px;
left: 50%;
z-index: 99999;
width: 600px;
margin-left: -300px;
background: #fff;
text-align: center;
.settings {
padding: 40px;
}
h3 { .description {
font-size: 34px; margin-top: 30px;
font-weight: 300; font-size: 14px;
} line-height: 20px;
}
.picker { strong {
margin: 30px 0 65px; font-weight: 700;
} }
.description { .start-date,
margin-top: 30px; .start-time {
font-size: 14px; font-size: 19px;
line-height: 20px; }
}
strong { .save-button {
font-weight: 700; @include blue-button;
} margin-right: 10px;
}
.start-date, .cancel-button {
.start-time { @include white-button;
font-size: 19px; }
}
.save-button { .save-button,
@include blue-button; .cancel-button {
margin-right: 10px; font-size: 16px;
} }
}
.cancel-button { .collapse-all-button {
@include white-button; float: right;
} margin-top: 10px;
font-size: 13px;
color: $darkGrey;
}
.save-button, // sort/drag and drop
.cancel-button { .ui-droppable {
font-size: 16px; @include transition (padding 0.5s ease-in-out 0s);
} min-height: 20px;
} padding: 0;
.collapse-all-button {
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
}
// sort/drag and drop
.ui-droppable {
@include transition (padding 0.5s ease-in-out 0s);
min-height: 20px;
padding: 0;
&.dropover {
padding: 15px 0;
}
}
.ui-draggable-dragging {
@include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
border: 1px solid $darkGrey;
opacity : 0.2;
&:hover {
opacity : 1.0;
.section-item {
background: $yellow !important;
}
}
// hiding unit button - temporary fix until this semantically corrected &.dropover {
.new-unit-item { padding: 15px 0;
display: none; }
} }
}
ol.ui-droppable .branch:first-child .section-item { .ui-draggable-dragging {
border-top: none; @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
} border: 1px solid $darkGrey;
opacity : 0.2;
&:hover {
opacity : 1.0;
.section-item {
background: $yellow !important;
}
}
// hiding unit button - temporary fix until this semantically corrected
.new-unit-item {
display: none;
}
}
ol.ui-droppable .branch:first-child .section-item {
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 {
@include clearfix();
}
.subsection-body {
padding: 32px 40px;
@include clearfix;
> div {
margin-bottom: 40px;
}
input {
font-size: 14px;
}
.unit-subtitle {
display: block;
width: 100%;
}
.sortable-unit-list {
ol {
@include tree-view;
}
}
.policy-list {
input[disabled] {
border: none;
@include box-shadow(none);
}
.policy-list-name {
margin-right: 5px;
margin-bottom: 10px;
}
.policy-list-value {
width: 320px;
margin-right: 10px;
}
}
.policy-list-element {
.save-button,
.cancel-button {
display: none;
}
.edit-icon {
margin-right: 8px;
}
&.editing,
&.new-policy-list-element {
.policy-list-name,
.policy-list-value {
border: 1px solid #b0b6c2;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
}
}
}
.new-policy-list-element {
padding: 10px 10px 0;
margin: 0 -10px 10px;
border-radius: 3px;
background: $mediumGrey;
.save-button {
@include blue-button;
margin-bottom: 10px;
}
.cancel-button {
@include white-button;
}
.edit-icon {
display: none;
}
.delete-icon {
display: none;
}
}
.new-policy-item {
margin: 10px 0;
.plus-icon-small {
position: relative;
top: -1px;
vertical-align: middle;
}
}
}
.subsection-name-input {
label {
display: block;
}
input {
width: 100%;
font-size: 20px;
}
}
.scheduled-date-input,
.due-date-input {
@include clearfix;
.date-input,
.time-input {
display: inline-block;
width: 100px;
}
.inherits-check {
label {
font-size: 13px;
}
}
.notice {
margin-top: 6px;
font-size: 11px;
color: #999;
}
}
.due-date-input {
label {
display: inline-block !important;
margin-right: 10px;
}
a {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.date-setter {
@include clearfix;
display: none;
}
.remove-date {
display: block;
}
}
.row.visibility {
label {
display: inline-block !important;
margin-right: 10px;
line-height: 21px;
}
a {
display: inline-block;
height: 31px;
margin-right: 8px;
vertical-align: middle;
font-size: 11px;
font-weight: 700;
line-height: 31px;
text-transform: uppercase;
}
.large-toggle {
width: 41px;
background: url(../img/large-toggles.png) no-repeat;
background-position: 0 -50px;
.hidden {
background-position: 0 -5px;
}
}
}
.gradable {
label {
display: inline-block;
vertical-align: top;
}
.gradable-status { .unit-settings {
position: relative; .window-contents {
top: -4px; padding: 10px 20px;
display: inline-block;
margin-left: 10px;
width: 65%;
.status-label {
margin: 0;
padding: 0;
background: transparent;
color: $blue;
border: none;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
} }
.menu-toggle { .unit-actions {
z-index: 100; border-bottom: none;
position: absolute; padding-bottom: 0;
top: 0; }
left: 0;
width: 100%;
height: 20px;
background: transparent;
&:hover, &.is-active { .published-alert {
color: $blue; display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
div {
margin-top: 15px;
} }
} }
.menu { input[type="radio"] {
z-index: 1; margin-right: 7px;
position: absolute; }
top: -12px;
left: -7px; .status {
display: none;
width: 100%;
margin: 0;
padding: 8px 12px;
opacity: 0.0;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px; font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
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;
li { li {
margin-bottom: 3px; display: block;
padding-bottom: 3px; padding: 6px 8px 8px 10px;
border-bottom: 1px solid $lightGrey; background: #edf1f5;
font-size: 12px;
&:last-child {
margin-bottom: 0; &:hover {
padding-bottom: 0; background: #fffcf1;
border: none;
.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;
}
a { .new-unit-item {
margin-left: 20px;
}
}
&.is-selected { ol ol {
font-weight: bold; .section-item {
padding-left: 34px;
}
.new-unit-item {
margin: 0 0 10px 41px;
} }
} }
} }
}
// dropdown state .subsection-body {
&.is-active { padding: 32px 40px;
@include clearfix;
.menu { > div {
z-index: 10000; margin-bottom: 40px;
display: block; }
opacity: 1.0;
input {
font-size: 14px;
}
.unit-subtitle {
display: block;
width: 100%;
}
.sortable-unit-list {
ol {
@include tree-view;
}
}
.policy-list {
input[disabled] {
border: none;
@include box-shadow(none);
} }
.menu-toggle { .policy-list-name {
z-index: 1000; margin-right: 5px;
margin-bottom: 10px;
}
.policy-list-value {
width: 320px;
margin-right: 10px;
} }
} }
// set state .policy-list-element {
&.is-set { .save-button,
.cancel-button {
display: none;
}
.menu-toggle { .edit-icon {
color: $blue; margin-right: 8px;
}
&.editing,
&.new-policy-list-element {
.policy-list-name,
.policy-list-value {
border: 1px solid #b0b6c2;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
}
}
}
.new-policy-list-element {
padding: 10px 10px 0;
margin: 0 -10px 10px;
border-radius: 3px;
background: $mediumGrey;
.save-button {
@include blue-button;
margin-bottom: 10px;
} }
.cancel-button {
@include white-button;
}
.edit-icon {
display: none;
}
.delete-icon {
display: none;
}
}
.new-policy-item {
margin: 10px 0;
.plus-icon-small {
position: relative;
top: -1px;
vertical-align: middle;
}
}
}
.subsection-name-input {
label {
display: block;
}
input {
width: 100%;
font-size: 20px;
}
}
.scheduled-date-input,
.due-date-input {
@include clearfix;
.date-input,
.time-input {
display: inline-block;
width: 100px;
}
.inherits-check {
label {
font-size: 13px;
}
}
.notice {
margin-top: 6px;
font-size: 11px;
color: #999;
}
}
.due-date-input {
label {
display: inline-block !important;
margin-right: 10px;
}
a {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.date-setter {
@include clearfix;
display: none;
}
.remove-date {
display: block;
}
}
.row.visibility {
label {
display: inline-block !important;
margin-right: 10px;
line-height: 21px;
}
a {
display: inline-block;
height: 31px;
margin-right: 8px;
vertical-align: middle;
font-size: 11px;
font-weight: 700;
line-height: 31px;
text-transform: uppercase;
}
.large-toggle {
width: 41px;
background: url(../img/large-toggles.png) no-repeat;
background-position: 0 -50px;
.hidden {
background-position: 0 -5px;
}
}
}
.gradable {
label {
display: inline-block;
vertical-align: top;
}
.gradable-status {
position: relative;
top: -4px;
display: inline-block;
margin-left: 10px;
width: 65%;
.status-label { .status-label {
display: block; margin: 0;
padding: 0;
background: transparent;
color: $blue; color: $blue;
border: none;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.menu-toggle {
z-index: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: transparent;
&:hover, &.is-active {
color: $blue;
}
}
.menu {
z-index: 1;
position: absolute;
top: -12px;
left: -7px;
display: none;
width: 100%;
margin: 0;
padding: 8px 12px;
opacity: 0.0;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
li {
margin-bottom: 3px;
padding-bottom: 3px;
border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
}
a {
&.is-selected {
font-weight: bold;
}
}
}
// dropdown state
&.is-active {
.menu {
z-index: 10000;
display: block;
opacity: 1.0;
}
.menu-toggle {
z-index: 1000;
}
}
// set state
&.is-set {
.menu-toggle {
color: $blue;
}
.status-label {
display: block;
color: $blue;
}
} }
} }
} }
......
cms/static/sass/views/_unit.scss
// studio - views - course unit // studio - views - unit
// ==================== // ====================
.unit .main-wrapper { body.course.unit {
@include clearfix();
margin: 40px; .unit .main-wrapper {
} @include clearfix();
margin: 40px;
//Problem Selector tab menu requirements
.js .tabs .tab {
display: none;
}
//end problem selector reqs
.main-column {
clear: both;
float: left;
width: 70%;
}
.unit-body.published {
.components > li {
border: none;
.rendered-component {
padding: 0 20px;
}
} }
}
.unit-body {
.breadcrumbs {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
@include clearfix;
li {
float: left;
}
a, //Problem Selector tab menu requirements
.current-page { .js .tabs .tab {
display: block; display: none;
padding: 15px 35px 15px 30px;
font-size: 14px;
background: url(../img/breadcrumb-arrow.png) no-repeat right center;
}
} }
//end problem selector reqs
h2 { .main-column {
margin: 30px 40px 30px 0; clear: both;
color: #646464; float: left;
font-size: 19px; width: 70%;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
} }
.components { .unit-body.published {
.components > li {
border: none;
> li { .rendered-component {
position: relative; padding: 0 20px;
z-index: 10; }
margin: 20px 40px; }
}
.unit-body {
.unit-name-input {
padding: 20px 40px;
label {
display: block;
}
.title { input {
margin: 0 0 15px 0; width: 100%;
color: $mediumGrey; font-size: 20px;
}
}
.breadcrumbs {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
@include clearfix;
.value { li {
} float: left;
} }
&.new-component-item { a,
margin: 20px 0px; .current-page {
border-top: 1px solid $mediumGrey; display: block;
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; padding: 15px 35px 15px 30px;
background-color: $lightGrey; font-size: 14px;
margin-bottom: 0px; background: url(../img/breadcrumb-arrow.png) no-repeat right center;
padding-bottom: 20px; }
}
.new-component-button {
display: block;
padding: 20px;
text-align: center;
color: #edf1f5;
}
h5 { h2 {
margin: 20px 0px; margin: 30px 40px 30px 0;
color: #fff; color: #646464;
font-weight: 600; font-size: 19px;
font-size: 18px; font-weight: 300;
} letter-spacing: 1px;
text-transform: uppercase;
}
.rendered-component { .components {
display: none;
background: #fff;
border-radius: 3px 3px 0 0;
}
.new-component-type { > li {
position: relative;
z-index: 10;
margin: 20px 40px;
a,
li {
display: inline-block;
}
a {
border: 1px solid $mediumGrey;
width: 100px;
height: 100px;
color: #fff;
margin-right: 15px;
margin-bottom: 20px;
border-radius: 8px;
font-size: 15px;
line-height: 14px;
text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
.name { .title {
position: absolute; margin: 0 0 15px 0;
bottom: 5px; color: $mediumGrey;
left: 0;
width: 100%; .value {
padding: 10px;
@include box-sizing(border-box);
color: #fff;
}
} }
} }
.new-component-templates { &.new-component-item {
display: none; margin: 20px 0px;
margin: 20px 40px 20px 40px; border-top: 1px solid $mediumGrey;
border-radius: 3px; box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
border: 1px solid $mediumGrey; background-color: $lightGrey;
background-color: #fff; margin-bottom: 0px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); padding-bottom: 20px;
@include clearfix;
.new-component-button {
.cancel-button { display: block;
margin: 20px 0px 10px 10px; padding: 20px;
@include white-button; text-align: center;
color: #edf1f5;
} }
.problem-type-tabs { h5 {
margin: 20px 0px;
color: #fff;
font-weight: 600;
font-size: 18px;
}
.rendered-component {
display: none; display: none;
background: #fff;
border-radius: 3px 3px 0 0;
} }
// specific menu types .new-component-type {
&.new-component-problem {
padding-bottom:10px;
.ss-icon, .editor-indicator { a,
li {
display: inline-block; display: inline-block;
} }
.problem-type-tabs { a {
display: inline-block; border: 1px solid $mediumGrey;
width: 100px;
height: 100px;
color: #fff;
margin-right: 15px;
margin-bottom: 20px;
border-radius: 8px;
font-size: 15px;
line-height: 14px;
text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
.name {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
padding: 10px;
@include box-sizing(border-box);
color: #fff;
}
} }
} }
}
.new-component-type, .new-component-templates {
.new-component-template { display: none;
@include clearfix; margin: 20px 40px 20px 40px;
border-radius: 3px;
border: 1px solid $mediumGrey;
background-color: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include clearfix;
a { .cancel-button {
position: relative; margin: 20px 0px 10px 10px;
border: 1px solid $darkGreen; @include white-button;
background: tint($green,20%); }
color: #fff;
&:hover { .problem-type-tabs {
background: $brightGreen; display: none;
} }
}
}
.problem-type-tabs { // specific menu types
list-style-type: none; &.new-component-problem {
border-radius: 0; padding-bottom:10px;
width: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
li:first-child { .ss-icon, .editor-indicator {
margin-left: 20px; display: inline-block;
}
.problem-type-tabs {
display: inline-block;
}
}
} }
li { .new-component-type,
float:left; .new-component-template {
display:inline-block; @include clearfix;
text-align:center;
width: auto;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: tint($lightBluishGrey, 10%);
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
opacity:.8;
&:hover { a {
opacity:1; position: relative;
background-color: tint($lightBluishGrey, 20%); border: 1px solid $darkGreen;
} background: tint($green,20%);
color: #fff;
&.ui-state-active { &:hover {
border: 0px; background: $brightGreen;
@include active; }
opacity:1;
} }
} }
a{ .problem-type-tabs {
display: block; list-style-type: none;
padding: 15px 25px; border-radius: 0;
font-size: 15px; width: 100%;
line-height: 16px; @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
text-align: center; background-color: $lightBluishGrey;
color: #3c3c3c; @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
}
.new-component-template {
a { li:first-child {
background: #fff; margin-left: 20px;
border: 0px;
color: #3c3c3c;
@include transition (none);
&:hover {
background: tint($green,30%);
color: #fff;
@include transition(background-color .15s);
} }
}
li { li {
border:none; float:left;
border-bottom: 1px dashed $lightGrey; display:inline-block;
color: #fff; text-align:center;
} width: auto;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: tint($lightBluishGrey, 10%);
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
opacity:.8;
li:first-child { &:hover {
a { opacity:1;
border-top: 0px; background-color: tint($lightBluishGrey, 20%);
}
&.ui-state-active {
border: 0px;
@include active;
opacity:1;
}
} }
}
li:nth-child(2) { a{
a { display: block;
border-radius: 0px; padding: 15px 25px;
font-size: 15px;
line-height: 16px;
text-align: center;
color: #3c3c3c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
} }
} }
a { .new-component-template {
@include clearfix();
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 500;
.name { a {
float: left; background: #fff;
border: 0px;
color: #3c3c3c;
@include transition (none);
.ss-icon { &:hover {
@include transition(opacity .15s); background: tint($green,30%);
display: inline-block; color: #fff;
top: 1px; @include transition(background-color .15s);
margin-right: 5px;
opacity: 0.5;
width: 17;
height: 21px;
vertical-align: middle;
} }
} }
.editor-indicator { li {
@include transition(opacity .15s); border:none;
float: right; border-bottom: 1px dashed $lightGrey;
position: relative; color: #fff;
top: 3px;
font-size: 12px;
opacity: 0.3;
} }
.ss-icon, .editor-indicator { li:first-child {
display: none; a {
border-top: 0px;
}
} }
&:hover { li:nth-child(2) {
color: #fff; a {
border-radius: 0px;
}
}
.ss-icon { a {
opacity: 1.0; @include clearfix();
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 500;
.name {
float: left;
.ss-icon {
@include transition(opacity .15s);
display: inline-block;
top: 1px;
margin-right: 5px;
opacity: 0.5;
width: 17;
height: 21px;
vertical-align: middle;
}
} }
.editor-indicator { .editor-indicator {
opacity: 1.0; @include transition(opacity .15s);
float: right;
position: relative;
top: 3px;
font-size: 12px;
opacity: 0.3;
} }
}
}
// specific editor types .ss-icon, .editor-indicator {
.empty { display: none;
}
a { &:hover {
line-height: 1.4; color: #fff;
font-weight: 400;
background: #fff;
color: #3c3c3c;
.ss-icon {
opacity: 1.0;
}
&:hover { .editor-indicator {
background: tint($green,30%); opacity: 1.0;
color: #fff; }
}
} }
// specific editor types
.empty {
a {
line-height: 1.4;
font-weight: 400;
background: #fff;
color: #3c3c3c;
&:hover {
background: tint($green,30%);
color: #fff;
}
}
} }
} }
}
.new-component { .new-component {
text-align: center; text-align: center;
h5 { h5 {
color: $darkGreen; color: $darkGreen;
}
} }
} }
} }
} }
}
.component { .component {
border: 1px solid $lightBluishGrey2; border: 1px solid $lightBluishGrey2;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
@include transition(none); @include transition(none);
&:hover {
border-color: #6696d7;
&:hover { .drag-handle {
border-color: #6696d7; background-color: $blue;
border-color: $blue;
}
}
.drag-handle { &.editing {
background-color: $blue; border: 1px solid $lightBluishGrey2;
border-color: $blue; z-index: auto;
.drag-handle,
.component-actions {
display: none;
}
}
&.component-placeholder {
border-color: #6696d7;
} }
}
&.editing {
border: 1px solid $lightBluishGrey2;
z-index: auto;
.drag-handle,
.component-actions { .component-actions {
display: none; position: absolute;
top: 7px;
right: 9px;
} }
}
&.component-placeholder { .drag-handle {
border-color: #6696d7; position: absolute;
display: block;
top: -1px;
right: -16px;
z-index: 10;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid $lightBluishGrey2;
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
cursor: move;
@include transition(none);
}
} }
.component-actions { .xmodule_display {
position: absolute; padding: 40px 20px 20px;
top: 7px; overflow-x: auto;
right: 9px;
}
.drag-handle { h1 {
position: absolute; float: none;
display: block; margin-left: 0;
top: -1px; }
right: -16px;
z-index: 10;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid $lightBluishGrey2;
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
cursor: move;
@include transition(none);
} }
}
.xmodule_display {
padding: 40px 20px 20px;
overflow-x: auto;
h1 { .wrapper-component-editor {
float: none; z-index: 9999;
margin-left: 0; position: relative;
background: $lightBluishGrey2;
} }
}
.wrapper-component-editor { .component-editor {
z-index: 9999; @include edit-box;
position: relative; @include box-shadow(none);
background: $lightBluishGrey2; display: none;
} padding: 20px;
border-radius: 2px 2px 0 0;
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
.component-editor { li {
@include edit-box; margin-bottom: 10px;
@include box-shadow(none); }
display: none;
padding: 20px;
border-radius: 2px 2px 0 0;
.metadata_edit { label {
margin-bottom: 20px; display: inline-block;
font-size: 13px; margin-right: 10px;
}
}
li { h3 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
} }
label { h5 {
display: inline-block; margin-bottom: 8px;
margin-right: 10px; color: #fff;
font-weight: 700;
} }
}
h3 { .save-button {
margin-bottom: 10px; margin-top: 10px;
font-size: 18px; margin: 15px 8px 0 0;
font-weight: 700; }
} }
}
h5 { .unit-settings {
margin-bottom: 8px; .window-contents {
color: #fff; padding: 10px 20px;
font-weight: 700;
} }
.save-button { .unit-actions {
margin-top: 10px; border-bottom: none;
margin: 15px 8px 0 0; padding-bottom: 0;
} }
}
}
.unit-settings {
.window-contents {
padding: 10px 20px;
}
.unit-actions { .published-alert {
border-bottom: none; display: none;
padding-bottom: 0; padding: 10px;
} border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
.published-alert { div {
display: none; margin-top: 15px;
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"] { input[type="radio"] {
margin-right: 7px; margin-right: 7px;
} }
.status { .status {
font-size: 12px; font-size: 12px;
strong { strong {
font-weight: 700; font-weight: 700;
}
} }
}
.preview-button, .view-button { .preview-button, .view-button {
@include white-button; @include white-button;
margin-bottom: 10px; margin-bottom: 10px;
} }
.publish-button { .publish-button {
@include orange-button; @include orange-button;
} }
.delete-button { .delete-button {
@include blue-button; @include blue-button;
} }
.delete-draft { .delete-draft {
display: inline-block; display: inline-block;
} }
.delete-button, .delete-button,
.preview-button, .preview-button,
.publish-button, .publish-button,
.view-button { .view-button {
font-size: 11px; font-size: 11px;
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;
border-radius: 3px; border-radius: 3px;
} }
.window-contents { .window-contents {
display: none; display: none;
}
} }
}
ol { ol {
border: 1px solid #ced2db; border: 1px solid #ced2db;
li { li {
display: block; display: block;
padding: 6px 8px 8px 10px; padding: 6px 8px 8px 10px;
background: #edf1f5; background: #edf1f5;
font-size: 12px; font-size: 12px;
&:hover { &:hover {
background: #fffcf1; background: #fffcf1;
.item-actions { .item-actions {
display: block; display: block;
}
} }
}
&.checked { &.checked {
background: #d1dae3; background: #d1dae3;
} }
.item-actions { .item-actions {
display: none; display: none;
} }
input[type="radio"] { input[type="radio"] {
margin-right: 7px; margin-right: 7px;
}
} }
} }
} }
}
.unit-location { .unit-location {
.url { .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%; width: 100%;
font-size: 11px; margin-bottom: 10px;
padding: 2px 8px 4px; @include box-shadow(none);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
} }
ol { .draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.window-contents > ol {
@include tree-view;
.section-item { .section-item {
padding-left: 20px; 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);
} }
.new-unit-item { ol {
margin-left: 20px; .section-item {
} padding-left: 20px;
} }
ol ol { .new-unit-item {
.section-item { margin-left: 20px;
padding-left: 34px; }
} }
.new-unit-item { ol ol {
margin: 0 0 10px 41px; .section-item {
padding-left: 34px;
}
.new-unit-item {
margin: 0 0 10px 41px;
}
} }
} }
} }
}
.edit-state-draft { .edit-state-draft {
.visibility, .visibility,
.edit-draft-message, .edit-draft-message,
.view-button { .view-button {
display: none; display: none;
} }
.published-alert { .published-alert {
display: block; display: block;
} }
}
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
} }
.published-alert { .edit-state-public {
display: block; .delete-draft,
} .component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.drag-handle { .published-alert {
display: none !important; display: block;
}
.drag-handle {
display: none !important;
}
} }
}
.edit-state-private {
.edit-state-private { .delete-draft,
.delete-draft, .publish-draft,
.publish-draft, .editing-draft-alert,
.editing-draft-alert, .create-draft,
.create-draft, .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;
.component-actions { .component-actions {
@include box-sizing(border-box); @include box-sizing(border-box);
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 15px; padding: 15px;
top: 0; top: 0;
left: 0; left: 0;
border-bottom: 1px solid $lightBluishGrey2; border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey; background: $lightGrey;
} }
&.editing { &.editing {
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