Skip to content

E
edx-platform
Commit 6418d033 by Brian Talbot
Options

studio - adding files I forgot to add when cleaning up Sass and originally committing

parent 928ecb98
Showing with 3358 additions and 0 deletions
cms/static/sass/assets/_content-types.scss 0 → 100644
.content-type {
display: inline-block;
width: 14px;
height: 16px;
padding-left: 14px;
background-position: 8px center;
background-repeat: no-repeat;
vertical-align: middle;
}
.videosequence-icon {
@extend .content-type;
background-image: url('../img/content-types/videosequence.png');
}
.video-icon {
@extend .content-type;
background-image: url('../img/content-types/video.png');
}
.problemset-icon {
@extend .content-type;
background-image: url('../img/content-types/problemset.png');
}
.problem-icon {
@extend .content-type;
background-image: url('../img/content-types/problem.png');
}
.lab-icon {
@extend .content-type;
background-image: url('../img/content-types/lab.png');
}
.tab-icon {
@extend .content-type;
background-image: url('../img/content-types/lab.png');
}
.html-icon {
@extend .content-type;
background-image: url('../img/content-types/html.png');
}
.vertical-icon {
@extend .content-type;
background-image: url('../img/content-types/vertical.png');
}
.sequential-icon {
@extend .content-type;
background-image: url('../img/content-types/sequential.png');
}
.chapter-icon {
@extend .content-type;
background-image: url('../img/content-types/chapter.png');
}
.module-icon {
@extend .content-type;
background-image: url('../img/content-types/module.png');
}
.module-icon {
@extend .content-type;
background-image: url('../img/content-types/module.png');
}
cms/static/sass/assets/_fonts.scss 0 → 100644
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
cms/static/sass/assets/_graphics.scss 0 → 100644
.expand-collapse-icon {
position: relative;
display: inline-block;
width: 9px;
height: 11px;
margin-right: 10px;
background: url(../img/expand-collapse-icons.png) no-repeat;
@include transition(none);
&.expand {
top: 1px;
background-position: 0 0;
}
&.collapse {
top: -1px;
background-position: 0 -11px;
}
}
.sequence-icon {
display: inline-block;
width: 15px;
height: 9px;
margin-right: 5px;
background: url(../img/sequence-icon.png) no-repeat;
}
.video-icon {
display: inline-block;
width: 14px;
height: 12px;
margin-right: 5px;
background: url(../img/video-icon.png) no-repeat;
}
.upload-icon {
display: inline-block;
width: 22px;
height: 13px;
margin-right: 5px;
background: url(../img/upload-icon.png) no-repeat;
}
.list-icon {
display: inline-block;
width: 14px;
height: 10px;
margin-right: 5px;
background: url(../img/list-icon.png) no-repeat;
}
.close-icon {
display: inline-block;
width: 13px;
height: 12px;
background: url(../img/close-icon.png) no-repeat;
}
.home-icon {
display: inline-block;
width: 19px;
height: 16px;
background: url(../img/home-icon.png) no-repeat;
}
.small-home-icon {
display: inline-block;
width: 16px;
height: 14px;
background: url(../img/small-home-icon.png) no-repeat;
}
.log-out-icon {
display: inline-block;
width: 15px;
height: 13px;
background: url(../img/log-out-icon.png) no-repeat;
}
.collapse-all-icon {
display: inline-block;
width: 15px;
height: 9px;
background: url(../img/collapse-all-icon.png) no-repeat;
}
.calendar-icon {
display: inline-block;
width: 12px;
height: 11px;
margin-right: 5px;
background: url(../img/calendar-icon.png) no-repeat;
}
.edit-icon {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
background: url(../img/edit-icon.png) no-repeat;
&.white {
background: url(../img/edit-icon-white.png) no-repeat;
}
}
.visibility-toggle {
.toggle-icon {
display: inline-block;
width: 27px;
height: 20px;
background: url(../img/small-toggle-icons.png) no-repeat;
background-position: 0 -34px;
}
&.hidden .toggle-icon {
background-position: 0 -4px;
}
&.both .toggle-icon {
background-position: 0 -64px;
}
}
.delete-icon {
display: inline-block;
width: 10px;
height: 11px;
margin-right: 2px;
background: url(../img/delete-icon.png) no-repeat;
&.white {
background: url(../img/delete-icon-white.png) no-repeat;
}
}
.drag-handle {
display: inline-block;
float: right;
width: 7px;
height: 22px;
margin-left: 10px;
background: url(../img/drag-handles.png) no-repeat;
cursor: move;
}
.draft-tag,
.public-tag,
.private-tag {
margin-left: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
color: #a4aab7;
}
.draft-tag {
color: #9f7d10;
}
.plus-icon {
display: inline-block;
width: 11px;
height: 11px;
margin-right: 8px;
background: url(../img/plus-icon.png) no-repeat;
&.white {
background: url(../img/plus-icon-white.png) no-repeat;
}
}
.plus-icon-small {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 8px;
background: url(../img/plus-icon-small.png) no-repeat center;
}
.folder-icon {
display: inline-block;
width: 15px;
height: 11px;
margin-right: 4px;
background: url(../img/folder-icon.png) no-repeat;
}
.new-folder-icon {
display: inline-block;
width: 23px;
height: 11px;
margin-right: 8px;
background: url(../img/new-folder-icon.png) no-repeat;
}
.file-icon {
display: inline-block;
width: 10px;
height: 11px;
margin-right: 8px;
background: url(../img/file-icon.png) no-repeat;
}
.new-unit-icon {
display: inline-block;
width: 23px;
height: 12px;
margin-right: 8px;
background: url(../img/new-unit-icon.png) right no-repeat;
}
.new-policy-icon {
display: inline-block;
width: 23px;
height: 12px;
margin-right: 8px;
background: url(../img/new-unit-icon.png) right no-repeat;
}
.textbook-icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle;
background: url(../img/textbook-icon.png) no-repeat;
}
.slides-icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle;
background: url(../img/slides-icon.png) no-repeat;
}
.large-slide-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-slide-icon.png) center no-repeat;
}
.large-html-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/html-icon.png) center no-repeat;
}
.large-openended-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-openended-icon.png) center no-repeat;
}
.large-annotations-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-annotations-icon.png) center no-repeat;
}
.large-advanced-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-advanced-icon.png) center no-repeat;
}
.large-textbook-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-textbook-icon.png) center no-repeat;
}
.large-discussion-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-discussion-icon.png) center no-repeat;
}
.large-freeform-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-freeform-icon.png) center no-repeat;
}
.large-problem-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-problem-icon.png) center no-repeat;
}
.large-video-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-video-icon.png) center no-repeat;
}
.spinner-icon {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
background: url(../img/blue-spinner.gif) no-repeat;
}
.spinner-in-field-icon {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
background: url(../img/spinner-in-field.gif) no-repeat;
}
cms/static/sass/assets/_keyframes.scss 0 → 100644
@mixin bounce-in {
0% {
opacity: 0;
@include transform(scale(.3));
}
50% {
opacity: 1;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
}
@-moz-keyframes bounce-in { @include bounce-in(); }
@-webkit-keyframes bounce-in { @include bounce-in(); }
@-o-keyframes bounce-in { @include bounce-in(); }
@keyframes bounce-in { @include bounce-in();}
@mixin bounce-in-animation($duration, $timing: ease-in-out) {
@include animation-name(bounce-in);
@include animation-duration($duration);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
}
cms/static/sass/elements/_alerts.scss 0 → 100644
// studio - elements - alerts, notifications, prompts
// ====================
// notifications
.wrapper-notification {
@include clearfix();
@include box-sizing(border-box);
@include transition (bottom 2.0s ease-in-out 5s);
@include box-shadow(0 -1px 2px rgba(0,0,0,0.1));
position: fixed;
bottom: -100px;
z-index: 1000;
width: 100%;
overflow: hidden;
opacity: 0;
border-top: 1px solid $darkGrey;
padding: 20px 40px;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
&.wrapper-notification-warning {
border-color: shade($yellow, 25%);
background: tint($yellow, 25%);
}
&.wrapper-notification-error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
}
&.wrapper-notification-confirm {
border-color: shade($green, 30%);
background: tint($green, 40%);
color: shade($green, 30%);
}
}
.notification {
@include box-sizing(border-box);
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
.copy {
float: left;
width: flex-grid(9, 12);
margin-right: flex-gutter();
margin-top: 5px;
font-size: 14px;
.icon {
display: inline-block;
vertical-align: top;
margin-right: 5px;
font-size: 20px;
}
p {
width: flex-grid(8, 9);
display: inline-block;
vertical-align: top;
}
}
.actions {
float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2);
text-align: right;
li {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
.save-button {
@include blue-button;
}
.cancel-button {
@include white-button;
}
}
strong {
font-weight: 700;
}
}
// adopted alerts
.alert {
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 3px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
font-size: 14px;
@include clearfix;
.alert-message {
float: left;
margin-top: 4px;
}
strong {
font-weight: 700;
}
.alert-action {
float: right;
&.secondary {
@include orange-button;
}
}
}
body.error {
background: $darkGrey;
color: #3c3c3c;
.primary-header {
display: none;
}
.error-prompt {
width: 700px;
margin: 150px auto;
padding: 60px 50px 90px;
border-radius: 3px;
background: #fff;
text-align: center;
}
h1 {
float: none;
margin: 0;
font-size: 60px;
font-weight: 300;
color: #3c3c3c;
}
.description {
margin-bottom: 50px;
font-size: 21px;
}
.back-button {
@include blue-button;
padding: 14px 40px 18px;
font-size: 18px;
}
}
\ No newline at end of file
cms/static/sass/elements/_footer.scss 0 → 100644
// studio - global footer
// ====================
.wrapper-footer {
margin: ($baseline*1.5) 0 $baseline 0;
padding: $baseline;
position: relative;
width: 100%;
footer.primary {
@include clearfix();
@include font-size(13);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
padding-top: $baseline;
border-top: 1px solid $gray-l4;
color: $gray-l2;
.colophon {
width: flex-grid(4, 12);
float: left;
margin-right: flex-gutter(2);
}
.nav-peripheral {
width: flex-grid(6, 12);
float: right;
text-align: right;
.nav-item {
display: inline-block;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
}
a {
color: $gray-l1;
&:hover, &:active {
color: $blue;
}
}
}
}
\ No newline at end of file
cms/static/sass/elements/_jquery-ui-calendar.scss 0 → 100644
// studio - elements - JQUI calendar
// ====================
.ui-datepicker {
border-color: $darkGrey;
border-radius: 2px;
background: #fff;
font-family: $sans-serif;
font-size: 12px;
@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
.ui-widget-header {
background: $darkGrey;
border: none;
border-radius: 2px;
}
.ui-datepicker-next,
.ui-datepicker-prev {
@include transition(none);
&.ui-state-hover {
border-color: transparent;
background: $mediumGrey;
.ui-icon-circle-triangle-e,
.ui-icon-circle-triangle-w {
background-image: url(../css/vendor/ui-lightness/images/ui-icons_ffffff_256x240.png);
}
}
}
.ui-state-default {
border-color: $mediumGrey;
color: $blue;
@include transition(none);
&.ui-state-hover {
background: $orange;
border-color: $orange;
color: #fff;
}
}
.ui-state-highlight {
background: $blue;
border-color: $blue;
color: #fff;
}
.ui-state-active {
background: $orange;
border-color: $orange;
color: #fff;
}
}
\ No newline at end of file
cms/static/sass/elements/_modal.scss 0 → 100644
// studio - elements - modal windows
// ====================
.modal-cover {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
}
.modal {
display: none;
position: fixed;
top: 60px;
left: 50%;
z-index: 1001;
width: 930px;
height: 540px;
margin-left: -465px;
background: #fff;
.modal-body {
height: 400px;
padding: 40px;
overflow-y: scroll;
}
.modal-actions {
height: 60px;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
}
h2 {
margin: 0 10px 30px;
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
p {
margin: 20px;
}
.revert-button {
@include blue-button;
margin: 13px 6px 0 13px;
}
.close-button {
@include white-button;
margin-top: 13px;
}
}
// lean modal alternative
#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
display: none;
height: 100%;
width: 100%;
background: $black;
}
\ No newline at end of file
cms/static/sass/elements/_navigation.scss 0 → 100644
// studio - elements - navigation
// ====================
// common
// ====================
// primary
nav.primary {
.nav-item {
display: inline-block;
}
}
// ====================
// right hand side
// ====================
// tabs
// ====================
// dropdown
// ====================
//
\ No newline at end of file
cms/static/sass/views/_account.scss 0 → 100644
// studio - views - sign up/in
// ====================
body.signup, body.signin {
.wrapper-content {
margin: 0;
padding: 0 $baseline;
position: relative;
width: 100%;
}
.content {
@include clearfix();
@include font-size(16);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-d2;
header {
position: relative;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
h1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
}
.action {
@include font-size(13);
position: absolute;
right: 0;
top: 40%;
}
}
.introduction {
@include font-size(14);
margin: 0 0 $baseline 0;
}
}
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(8, 12);
margin-right: flex-gutter();
form {
@include box-sizing(border-box);
@include box-shadow(0 1px 2px $shadow-l1);
@include border-radius(2px);
width: 100%;
border: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5);
background: $white;
.form-actions {
margin-top: $baseline;
.action-primary {
@include blue-button;
@include transition(all .15s);
@include font-size(15);
display:block;
width: 100%;
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-transform: uppercase;
}
}
.list-input {
margin: 0;
padding: 0;
list-style: none;
.field {
margin: 0 0 ($baseline*0.75) 0;
&:last-child {
margin-bottom: 0;
}
&.required {
label {
font-weight: 600;
}
label:after {
margin-left: ($baseline/4);
content: "*";
}
}
label, input, textarea {
display: block;
}
label {
@include font-size(14);
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
}
}
input, textarea {
@include font-size(16);
height: 100%;
width: 100%;
padding: ($baseline/2);
&.long {
width: 100%;
}
&.short {
width: 25%;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
:-moz-placeholder {
color: $gray-l3;
}
::-moz-placeholder {
color: $gray-l3;
}
:-ms-input-placeholder {
color: $gray-l3;
}
&:focus {
+ .tip {
color: $gray;
}
}
}
textarea.long {
height: ($baseline*5);
}
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
& + label {
display: inline-block;
}
}
.tip {
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
}
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
.field {
display: block;
width: 47%;
border-bottom: none;
margin: 0 $baseline 0 0;
padding-bottom: 0;
&:nth-child(odd) {
float: left;
}
&:nth-child(even) {
float: right;
margin-right: 0;
}
input, textarea {
width: 100%;
}
}
}
}
}
}
.content-supplementary {
width: flex-grid(4, 12);
.bit {
@include font-size(13);
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
h3 {
@include font-size(14);
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
}
}
}
}
.signup {
}
.signin {
#field-password {
position: relative;
.action-forgotpassword {
@include font-size(13);
position: absolute;
top: 0;
right: 0;
}
}
}
// ====================
// messages
.message {
@include font-size(14);
display: block;
}
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
border-bottom: 2px solid $yellow-d2;
margin: 0 0 $baseline 0;
padding: ($baseline/2) $baseline;
font-weight: 500;
background: $yellow-d1;
color: $white;
.ss-icon {
position: relative;
top: 3px;
@include font-size(16);
display: inline-block;
margin-right: ($baseline/2);
}
.text {
display: inline-block;
}
&.error {
border-color: shade($red, 50%);
background: tint($red, 20%);
}
&.is-shown {
display: block;
}
}
cms/static/sass/views/_assets.scss 0 → 100644
// studio - views - assets
// ====================
.uploads {
input.asset-search-input {
float: left;
width: 260px;
background-color: #fff;
}
.asset-library {
@include clearfix;
table {
width: 100%;
border-radius: 3px 3px 0 0;
border: 1px solid #c5cad4;
td,
th {
padding: 10px 20px;
text-align: left;
vertical-align: middle;
}
thead th {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #ced2db;
font-size: 12px;
font-weight: 700;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
tbody {
background: #fff;
tr {
border-top: 1px solid #c5cad4;
&:first-child {
border-top: none;
}
}
.name-col {
font-size: 14px;
}
.date-col {
font-size: 12px;
}
}
.thumb-col {
width: 100px;
}
.date-col {
width: 220px;
}
.embed-col {
width: 250px;
}
.embeddable-xml-input {
@include box-shadow(none);
width: 100%;
}
.thumb {
width: 100px;
max-height: 80px;
img {
width: 100%;
}
}
}
.pagination {
float: right;
margin: 15px 10px;
ol, li {
display: inline;
}
a {
display: inline-block;
height: 25px;
padding: 0 4px;
text-align: center;
line-height: 25px;
}
}
}
.show-xml {
@include blue-button;
}
}
.upload-modal {
display: none;
width: 640px !important;
margin-left: -320px !important;
.modal-body {
height: auto !important;
overflow-y: auto !important;
text-align: center;
}
.file-input {
display: none;
}
.choose-file-button {
@include blue-button;
padding: 10px 82px 12px;
font-size: 17px;
}
.progress-bar {
display: none;
width: 350px;
height: 50px;
margin: 30px auto 10px;
border: 1px solid $blue;
&.loaded {
border-color: #66b93d;
.progress-fill {
background: #66b93d;
}
}
}
.progress-fill {
width: 0%;
height: 50px;
background: $blue;
color: #fff;
line-height: 48px;
}
h1 {
float: none;
margin: 40px 0 30px;
font-size: 34px;
font-weight: 300;
}
.close-button {
@include white-button;
position: absolute;
top: 0;
right: 15px;
width: 29px;
height: 29px;
padding: 0 !important;
border-radius: 17px !important;
line-height: 29px;
text-align: center;
}
.embeddable {
display: none;
margin: 30px 0 130px;
label {
display: block;
margin-bottom: 10px;
font-weight: 700;
}
}
.embeddable-xml-input {
@include box-shadow(none);
width: 400px;
}
.copy-button {
@include white-button;
display: none;
margin-bottom: 100px;
}
}
\ No newline at end of file
cms/static/sass/views/_dashboard.scss 0 → 100644
// studio - views - user dashboard
// ====================
.class-list {
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 {
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 {
display: block;
font-size: 19px;
font-weight: 300;
}
.detail {
font-size: 14px;
font-weight: 400;
margin-right: 20px;
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;
&:hover {
opacity: 1.0;
pointer-events: auto;
}
}
}
.new-course {
padding: 15px 25px;
margin-top: 20px;
border-radius: 3px;
border: 1px solid $darkGrey;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include clearfix;
.row {
margin-bottom: 15px;
@include clearfix;
}
.column {
float: left;
width: 48%;
}
.column:first-child {
margin-right: 4%;
}
.course-info {
width: 600px;
}
label {
display: block;
font-size: 13px;
font-weight: 700;
}
.new-course-org,
.new-course-number,
.new-course-name {
width: 100%;
}
.new-course-name {
font-size: 19px;
font-weight: 300;
}
.new-course-save {
@include blue-button;
}
.new-course-cancel {
@include white-button;
}
}
\ No newline at end of file
cms/static/sass/views/_export.scss 0 → 100644
// studio - views - course export
// ====================
.export {
.export-overview {
@extend .window;
@include clearfix;
padding: 30px 40px;
}
.description {
float: left;
width: 62%;
margin-right: 3%;
font-size: 14px;
h2 {
font-weight: 700;
font-size: 19px;
margin-bottom: 20px;
}
strong {
font-weight: 700;
}
p + p {
margin-top: 20px;
}
ul {
margin: 20px 0;
list-style: disc inside;
li {
margin: 0 0 5px 0;
}
}
}
.export-form-wrapper {
.export-form {
float: left;
width: 35%;
padding: 25px 30px 35px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 3px;
background: $lightGrey;
text-align: center;
h2 {
margin-bottom: 30px;
font-size: 26px;
font-weight: 300;
}
.error-block {
display: none;
margin-bottom: 15px;
font-size: 13px;
}
.error-block {
color: $error-red;
}
.button-export {
@include green-button;
padding: 10px 50px 11px;
font-size: 17px;
}
.message-status {
margin-top: 10px;
font-size: 12px;
}
.progress-bar {
display: none;
width: 350px;
height: 30px;
margin: 30px auto 10px;
border: 1px solid $blue;
&.loaded {
border-color: #66b93d;
.progress-fill {
background: #66b93d;
}
}
}
.progress-fill {
width: 0%;
height: 30px;
background: $blue;
color: #fff;
line-height: 48px;
}
}
// downloading state
&.is-downloading {
.progress-bar {
display: block;
}
.button-export {
padding: 10px 50px 11px;
font-size: 17px;
&.disabled {
pointer-events: none;
cursor: default;
}
}
}
}
}
\ No newline at end of file
cms/static/sass/views/_import.scss 0 → 100644
// studio - views - course import
// ====================
.import {
.import-overview {
@extend .window;
@include clearfix;
padding: 30px 40px;
}
.description {
float: left;
width: 62%;
margin-right: 3%;
font-size: 14px;
h2 {
font-weight: 700;
font-size: 19px;
margin-bottom: 20px;
}
strong {
font-weight: 700;
}
p + p {
margin-top: 20px;
}
}
.import-form {
float: left;
width: 35%;
padding: 25px 30px 35px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 3px;
background: $lightGrey;
text-align: center;
h2 {
margin-bottom: 30px;
font-size: 26px;
font-weight: 300;
}
.file-name-block,
.error-block {
display: none;
margin-bottom: 15px;
font-size: 13px;
}
.error-block {
color: $error-red;
}
.choose-file-button {
@include blue-button;
padding: 10px 50px 11px;
font-size: 17px;
}
.choose-file-button-inline {
display: block;
}
.file-input {
display: none;
}
.submit-button {
@include orange-button;
display: none;
max-width: 100%;
padding: 8px 20px 10px;
white-space: normal;
}
}
.progress-bar {
display: none;
width: 350px;
height: 30px;
margin: 30px auto 10px;
border: 1px solid $blue;
&.loaded {
border-color: #66b93d;
.progress-fill {
background: #66b93d;
}
}
}
.progress-fill {
width: 0%;
height: 30px;
background: $blue;
color: #fff;
line-height: 48px;
}
}
\ No newline at end of file
cms/static/sass/views/_index.scss 0 → 100644
// studio - views - how it works
// ====================
.index {
&.not-signedin {
.wrapper-header {
margin-bottom: 0;
}
.wrapper-footer {
margin: 0;
border-top: 2px solid $gray-l3;
footer.primary {
border: none;
margin-top: 0;
padding-top: 0;
}
}
.wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
@include box-sizing(border-box);
margin: 0;
padding: 0 $baseline;
position: relative;
width: 100%;
}
.content {
@include clearfix();
@include font-size(16);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-d2;
header {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
color: $gray-d3;
}
h2 {
}
h3 {
}
h4 {
}
}
// welcome content
.wrapper-content-header {
@include linear-gradient($blue-l1,$blue,$blue-d1);
padding-bottom: ($baseline*4);
padding-top: ($baseline*4);
}
.content-header {
position: relative;
text-align: center;
color: $white;
h1 {
@include font-size(52);
float: none;
margin: 0 0 ($baseline/2) 0;
border-bottom: 1px solid $blue-l1;
padding: 0;
font-weight: 500;
color: $white;
}
.logo {
@include text-hide();
position: relative;
top: 3px;
display: inline-block;
vertical-align: baseline;
width: 282px;
height: 57px;
background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
}
.tagline {
@include font-size(24);
margin: 0;
color: $blue-l3;
}
}
.arrow_box {
position: relative;
background: #fff;
border: 4px solid #000;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
// feature content
.wrapper-content-features {
@include box-shadow(0 -1px ($baseline/4) $shadow);
padding-bottom: ($baseline*2);
padding-top: ($baseline*3);
background: $white;
}
.content-features {
.list-features {
}
// indiv features
.feature {
@include clearfix();
margin: 0 0 ($baseline*2) 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 ($baseline*2) 0;
.img {
@include box-sizing(border-box);
float: left;
width: flex-grid(3, 12);
margin-right: flex-gutter();
a {
@include box-sizing(border-box);
@include box-shadow(0 1px ($baseline/10) $shadow-l1);
position: relative;
top: 0;
display: block;
overflow: hidden;
border: 1px solid $gray-l3;
padding: ($baseline/4);
background: $white;
.action-zoom {
@include transition(bottom .50s ease-in-out);
position: absolute;
bottom: -30px;
right: ($baseline/2);
opacity: 0;
.ss-icon {
@include font-size(18);
@include border-top-radius(3px);
display: inline-block;
padding: ($baseline/4) ($baseline/2);
background: $blue;
color: $white;
text-align: center;
}
}
&:hover {
border-color: $blue;
.action-zoom {
opacity: 1.0;
bottom: -2px;
}
}
}
img {
display: block;
width: 100%;
height: 100%;
}
}
.copy {
float: left;
width: flex-grid(9, 12);
margin-top: -($baseline/4);
h3 {
margin: 0 0 ($baseline/2) 0;
@include font-size(24);
font-weight: 600;
}
> p {
@include font-size(18);
color: $gray-d1;
}
strong {
color: $gray-d2;
font-weight: 500;
}
.list-proofpoints {
@include clearfix();
@include font-size(14);
width: flex-grid(9, 9);
margin: ($baseline*1.5) 0 0 0;
.proofpoint {
@include box-sizing(border-box);
@include border-radius(($baseline/4));
@include transition(color .50s ease-in-out);
position: relative;
top: 0;
float: left;
width: flex-grid(3, 9);
min-height: ($baseline*8);
margin-right: flex-gutter();
padding: ($baseline*0.75) $baseline;
color: $gray-l1;
.title {
@include font-size(16);
margin: 0 0 ($baseline/4) 0;
font-weight: 500;
color: $gray-d3;
}
&:hover {
@include box-shadow(0 1px ($baseline/10) $shadow-l1);
background: $blue-l5;
top: -($baseline/5);
.title {
color: $blue;
}
}
&:last-child {
margin-right: 0;
}
}
}
}
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
&:nth-child(even) {
.img {
float: right;
margin-right: 0;
margin-left: flex-gutter();
}
.copy {
float: right;
text-align: right;
}
.list-proofpoints {
.proofpoint {
float: right;
width: flex-grid(3, 9);
margin-left: flex-gutter();
margin-right: 0;
&:last-child {
margin-left: 0;
}
}
}
}
}
}
// call to action content
.wrapper-content-cta {
padding-bottom: ($baseline*2);
padding-top: ($baseline*2);
background: $white;
}
.content-cta {
border-top: 1px solid $gray-l4;
header {
border: none;
margin: 0;
padding: 0;
}
.list-actions {
position: relative;
margin-top: -($baseline*1.5);
li {
width: flex-grid(6, 12);
margin: 0 auto;
}
.action {
display: block;
width: 100%;
text-align: center;
}
.action-primary {
@include blue-button;
@include transition(all .15s);
@include font-size(18);
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.action-secondary {
@include font-size(14);
margin-top: ($baseline/2);
}
}
}
}
}
\ No newline at end of file
cms/static/sass/views/_static-pages.scss 0 → 100644
// studio - views - course static pages
// ====================
.static-pages {
.new-static-page-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
}
.unit-body {
padding: 0;
.details {
display: block !important;
h2 {
margin: 0 0 5px 0;
}
}
}
.component-editor {
border: none;
border-radius: 0;
}
.components > li {
margin: 0;
border-radius: 0;
&.new-component-item {
background: transparent;
border: none;
@include box-shadow(none);
}
}
.component {
border: 1px solid $mediumGrey;
border-top: none;
&:first-child {
border-top: 1px solid $mediumGrey;
}
&:hover {
border: 1px solid $mediumGrey;
border-top: none;
&:first-child {
border-top: 1px solid $mediumGrey;
}
.drag-handle {
background: url(../img/drag-handles.png) center no-repeat #fff;
}
}
.drag-handle {
top: 0;
right: 0;
z-index: 11;
width: 35px;
border: none;
background: url(../img/drag-handles.png) center no-repeat #fff;
&:hover {
background: url(../img/drag-handles.png) center no-repeat #fff;
}
}
.component-actions {
top: 26px;
right: 44px;
}
}
.component.editing {
border-left: 1px solid $mediumGrey;
border-right: 1px solid $mediumGrey;
.xmodule_display {
display: none;
}
}
.new .xmodule_display {
background: $yellow;
}
.xmodule_display {
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: #fff;
@include transition(background-color 3s);
}
.static-page-item {
position: relative;
margin: 10px 0;
padding: 22px 20px;
border: 1px solid $darkGrey;
border-radius: 3px;
background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
.page-name {
font-size: 19px;
font-weight: 700;
}
.item-actions {
margin-top: 19px;
margin-right: 12px;
}
}
}
.edit-static-page {
.main-wrapper {
margin-top: 40px;
}
.static-page-details {
@extend .window;
padding: 32px 40px;
.row {
border: none;
}
}
.page-display-name-input {
width: 100%;
font-size: 20px;
}
.page-contents {
@include box-sizing(border-box);
width: 100%;
height: 360px;
padding: 15px;
border: 1px solid #b0b6c2;
border-radius: 2px;
@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);
font-family: Monaco, monospace;
font-size: 13px;
color: #3c3c3c;
outline: 0;
}
}
\ No newline at end of file
cms/static/sass/views/_subsection.scss 0 → 100644
// studio - views - course subsection
// ====================
.subsection .main-wrapper {
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 {
position: relative;
top: -4px;
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 {
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;
}
}
}
}
\ No newline at end of file
cms/static/sass/views/_updates.scss 0 → 100644
// studio - views - course updates
// ====================
.course-info {
h2 {
margin-bottom: 24px;
font-size: 22px;
font-weight: 300;
}
.course-info-wrapper {
display: table;
width: 100%;
clear: both;
}
.main-column,
.course-handouts {
float: none;
display: table-cell;
}
.main-column {
border-radius: 3px 0 0 3px;
border-right-color: $mediumGrey;
}
.CodeMirror {
border: 1px solid #3c3c3c;
background: #fff;
color: #3c3c3c;
}
}
.course-updates {
padding: 30px 40px;
margin: 0;
.update-list > li {
padding: 34px 0 42px;
border-top: 1px solid #cbd1db;
&:first-child {
padding-top: 0;
border: none;
}
&.editing {
position: relative;
z-index: 1001;
padding: 0;
border-top: none;
border-radius: 3px;
background: #fff;
.post-preview {
display: none;
}
}
h1 {
float: none;
font-size: 24px;
font-weight: 300;
}
h2 {
margin-bottom: 18px;
font-size: 14px;
font-weight: 700;
line-height: 30px;
color: #646464;
letter-spacing: 1px;
text-transform: uppercase;
}
h3 {
margin: 34px 0 11px;
font-size: 16px;
font-weight: 700;
}
}
.update-contents {
p {
font-size: 16px;
line-height: 25px;
}
p + p {
margin-top: 25px;
}
.primary {
border: 1px solid #ddd;
background: #f6f6f6;
padding: 20px;
}
ol, ul {
margin: 1em 0;
padding: 0 0 0 1em;
color: $baseFontColor;
li {
margin-bottom: 0.708em;
}
}
ol {
list-style: decimal outside none;
}
ul {
list-style: disc outside none;
}
pre {
margin: 1em 0;
color: $baseFontColor;
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
code {
color: $baseFontColor;
font-family: monospace, serif;
background: none;
padding: 0;
}
}
.new-update-button {
@include blue-button;
display: block;
text-align: center;
padding: 18px 0;
margin-bottom: 28px;
}
.new-update-form {
@include edit-box;
margin-bottom: 24px;
padding: 30px;
border: none;
textarea {
height: 180px;
}
}
.post-actions {
float: right;
.edit-button,
.delete-button{
float: left;
@include white-button;
padding: 3px 10px 4px;
margin-left: 7px;
font-size: 12px;
font-weight: 400;
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
}
}
.course-handouts {
width: 30%;
padding: 20px 30px;
margin: 0;
border-radius: 0 3px 3px 0;
border-left: none;
background: $lightGrey;
h2 {
font-size: 18px;
font-weight: 700;
}
.edit-button {
float: right;
@include white-button;
padding: 3px 10px 4px;
margin-left: 7px;
font-size: 12px;
font-weight: 400;
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
.handouts-content {
font-size: 14px;
}
.treeview-handoutsnav li {
margin-bottom: 12px;
}
}
.edit-handouts-form {
@include edit-box;
position: absolute;
right: 0;
z-index: 10001;
width: 800px;
padding: 30px;
textarea {
height: 300px;
}
}
\ No newline at end of file
cms/static/sass/views/_users.scss 0 → 100644
// studio - views - course users
// ====================
.users {
.new-user-form {
display: none;
padding: 15px 20px;
background-color: $lightBluishGrey2;
#result {
display: none;
float: left;
margin-bottom: 15px;
padding: 3px 15px;
border-radius: 3px;
background: $error-red;
font-size: 14px;
color: #fff;
}
.form-elements {
clear: both;
}
label {
display: inline-block;
margin-right: 10px;
}
.email-input {
width: 350px;
padding: 8px 8px 10px;
border-color: $darkGrey;
}
.add-button {
@include blue-button;
padding: 5px 20px 9px;
}
.cancel-button {
@include white-button;
padding: 5px 20px 9px;
}
}
.user-list {
border: 1px solid $mediumGrey;
background: #fff;
li {
position: relative;
padding: 20px;
border-bottom: 1px solid $mediumGrey;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
}
.user-name {
margin-right: 10px;
font-size: 24px;
font-weight: 300;
}
.user-email {
font-size: 14px;
font-style: italic;
color: $mediumGrey;
}
.item-actions {
top: 24px;
}
}
}
}
\ No newline at end of file
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