Skip to content

E
edx-platform
Commit 2ee48873 by Brian Talbot
Options

cms pull request 1160 - brought back all css changes lost in this request - mostly overview related

parent e57b5b14
Showing with 463 additions and 424 deletions
cms/static/sass/_cms_mixins.scss
...@@ -48,17 +48,17 @@ ...@@ -48,17 +48,17 @@
} }
@mixin green-button { @mixin green-button {
@include button; @include button;
border: 1px solid #0d7011; border: 1px solid #0d7011;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $green; background-color: $green;
color: #fff; color: #fff;
&:hover { &:hover {
background-color: #129416; background-color: #129416;
color: #fff; color: #fff;
} }
} }
@mixin white-button { @mixin white-button {
...@@ -277,12 +277,12 @@ ...@@ -277,12 +277,12 @@
} }
@mixin sr-text { @mixin sr-text {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
\ No newline at end of file
cms/static/sass/_courseware.scss
...@@ -5,6 +5,127 @@ input.courseware-unit-search-input { ...@@ -5,6 +5,127 @@ input.courseware-unit-search-input {
background-color: #fff; background-color: #fff;
} }
.branch {
.section-item {
@include clearfix();
.details {
display: block;
float: left;
margin-bottom: 0;
width: 650px;
}
.gradable-status {
float: right;
position: relative;
top: -4px;
right: 50px;
width: 145px;
.status-label {
position: absolute;
top: 2px;
right: -5px;
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;
}
.menu-toggle {
z-index: 10;
position: absolute;
top: 0;
right: 5px;
padding: 5px;
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 {
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 {
color: $blue;
&.is-selected {
font-weight: bold;
}
}
}
// dropdown state
&.is-active {
.menu {
z-index: 1000;
display: block;
opacity: 1.0;
}
.menu-toggle {
z-index: 10000;
}
}
// set state
&.is-set {
.menu-toggle {
color: $blue;
}
.status-label {
display: block;
color: $blue;
}
}
}
}
}
.courseware-section { .courseware-section {
position: relative; position: relative;
background: #fff; background: #fff;
...@@ -32,6 +153,39 @@ input.courseware-unit-search-input { ...@@ -32,6 +153,39 @@ input.courseware-unit-search-input {
margin-left: 10px; margin-left: 10px;
} }
.section-published-date {
position: absolute;
top: 19px;
right: 90px;
padding: 4px 10px;
border-radius: 3px;
background: $lightGrey;
text-align: right;
.published-status {
font-size: 12px;
margin-right: 15px;
strong {
font-weight: bold;
}
}
.schedule-button {
@include blue-button;
}
.edit-button {
@include blue-button;
}
.schedule-button,
.edit-button {
font-size: 11px;
padding: 3px 15px 5px;
}
}
.datepair .date, .datepair .date,
.datepair .time { .datepair .time {
padding-left: 0; padding-left: 0;
...@@ -68,190 +222,193 @@ input.courseware-unit-search-input { ...@@ -68,190 +222,193 @@ input.courseware-unit-search-input {
} }
.item-details { .item-details {
float: none;
display: inline-block; display: inline-block;
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
@include clearfix(); @include clearfix();
.section-name { .section-name {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
width: 350px; width: 350px;
font-size: 19px; font-size: 19px;
font-weight: bold; font-weight: bold;
color: $blue; color: $blue;
} }
.section-name-span { .section-name-span {
cursor: pointer; cursor: pointer;
@include transition(color .15s); @include transition(color .15s);
&:hover { &:hover {
color: $orange; color: $orange;
} }
} }
.section-name-edit { .section-name-edit {
position: relative; position: relative;
width: 400px; width: 400px;
background: $white; background: $white;
input { input {
font-size: 16px; font-size: 16px;
} }
.save-button { .save-button {
@include blue-button; @include blue-button;
padding: 7px 20px 7px; padding: 7px 20px 7px;
margin-right: 5px; margin-right: 5px;
} }
.cancel-button { .cancel-button {
@include white-button; @include white-button;
padding: 7px 20px 7px; padding: 7px 20px 7px;
} }
} }
.section-published-date { .section-published-date {
float: right; float: right;
width: 265px; width: 265px;
margin-right: 220px; margin-right: 220px;
padding: 4px 10px; @include border-radius(3px);
@include border-radius(3px); background: $lightGrey;
background: $lightGrey;
.published-status {
.published-status { font-size: 12px;
font-size: 12px; margin-right: 15px;
margin-right: 15px;
strong {
strong { font-weight: bold;
font-weight: bold; }
} }
}
.schedule-button {
.schedule-button { @include blue-button;
@include blue-button; }
}
.edit-button {
.edit-button { @include blue-button;
@include blue-button; }
}
.schedule-button,
.schedule-button, .edit-button {
.edit-button { font-size: 11px;
font-size: 11px; padding: 3px 15px 5px;
padding: 3px 15px 5px;
} }
} }
}
.gradable-status {
.gradable-status { position: absolute;
position: absolute; top: 20px;
top: 20px; right: 70px;
right: 70px; width: 145px;
width: 145px;
.status-label {
.status-label { position: absolute;
position: absolute; top: 0;
top: 0; right: 2px;
right: 2px; display: none;
display: none; width: 100px;
width: 100px; padding: 10px 35px 10px 10px;
padding: 10px 35px 10px 10px; @include border-radius(3px);
@include border-radius(3px); background: $lightGrey;
background: $lightGrey; color: $lightGrey;
color: $lightGrey; text-align: right;
text-align: right; font-size: 12px;
font-size: 12px; font-weight: bold;
font-weight: bold; line-height: 16px;
line-height: 16px; }
}
.menu-toggle {
.menu-toggle { z-index: 10;
z-index: 10; position: absolute;
position: absolute; top: 2px;
top: 2px; right: 5px;
right: 5px; padding: 5px;
padding: 5px; color: $lightGrey;
color: $lightGrey;
&:hover, &.is-active {
&:hover, &.is-active { color: $blue;
color: $blue; }
} }
}
.menu {
.menu { z-index: 1;
z-index: 1; display: none;
display: none; opacity: 0.0;
opacity: 0.0; position: absolute;
position: absolute; top: -1px;
top: -1px; left: 2px;
left: 2px; margin: 0;
margin: 0; padding: 8px 12px;
padding: 8px 12px; background: $white;
background: $white; border: 1px solid $mediumGrey;
border: 1px solid $mediumGrey; font-size: 12px;
font-size: 12px; @include border-radius(4px);
@include border-radius(4px); @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); @include transition(opacity .15s);
@include transition(opacity .15s); @include transition(display .15s);
@include transition(display .15s);
li {
li { width: 115px;
width: 115px; margin-bottom: 3px;
margin-bottom: 3px; padding-bottom: 3px;
padding-bottom: 3px; border-bottom: 1px solid $lightGrey;
border-bottom: 1px solid $lightGrey;
&:last-child {
&:last-child { margin-bottom: 0;
margin-bottom: 0; padding-bottom: 0;
padding-bottom: 0; border: none;
border: none;
a {
a { color: $darkGrey;
color: $darkGrey; }
} }
} }
}
a {
a {
&.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;
} }
} }
}
float: left;
.item-actions { padding: 21px 0 0;
}
}
.item-actions {
margin-top: 21px; margin-top: 21px;
margin-right: 12px; margin-right: 12px;
...@@ -270,6 +427,13 @@ input.courseware-unit-search-input { ...@@ -270,6 +427,13 @@ input.courseware-unit-search-input {
.drag-handle { .drag-handle {
margin-left: 11px; margin-left: 11px;
} }
}
h3 {
font-size: 19px;
font-weight: 700;
color: $blue;
}
.section-name-span { .section-name-span {
cursor: pointer; cursor: pointer;
...@@ -305,9 +469,8 @@ input.courseware-unit-search-input { ...@@ -305,9 +469,8 @@ input.courseware-unit-search-input {
font-size: 12px; font-size: 12px;
color: #878e9d; color: #878e9d;
strong { strong {
font-weight: bold; font-weight: bold;
}
} }
} }
...@@ -324,124 +487,6 @@ input.courseware-unit-search-input { ...@@ -324,124 +487,6 @@ input.courseware-unit-search-input {
@include tree-view; @include tree-view;
border-top-width: 0; border-top-width: 0;
} }
.branch {
.section-item {
@include clearfix();
.details {
float: left;
width: 650px;
}
.gradable-status {
float: right;
position: relative;
top: -4px;
right: 50px;
width: 145px;
.status-label {
position: absolute;
top: 2px;
right: -5px;
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;
}
.menu-toggle {
z-index: 10;
position: absolute;
top: 0;
right: 5px;
padding: 5px;
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 {
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 {
color: $blue;
&.is-selected {
font-weight: bold;
}
}
}
// dropdown state
&.is-active {
.menu {
z-index: 1000;
display: block;
opacity: 1.0;
}
.menu-toggle {
z-index: 10000;
}
}
// set state
&.is-set {
.menu-toggle {
color: $blue;
}
.status-label {
display: block;
color: $blue;
}
}
}
}
}
} }
&.new-section { &.new-section {
...@@ -545,7 +590,7 @@ input.courseware-unit-search-input { ...@@ -545,7 +590,7 @@ input.courseware-unit-search-input {
} }
strong { strong {
font-weight: bold; font-weight: 700;
} }
.start-date, .start-date,
......
cms/static/sass/_subsection.scss
...@@ -182,106 +182,106 @@ ...@@ -182,106 +182,106 @@
.gradable { .gradable {
label { label {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.gradable-status { .gradable-status {
position: relative; position: relative;
top: -4px; top: -4px;
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
width: 65%; width: 65%;
.status-label { .status-label {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: transparent; background: transparent;
color: $blue; color: $blue;
border: none; border: none;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
.menu-toggle { .menu-toggle {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 20px; height: 20px;
background: transparent; background: transparent;
&:hover, &.is-active { &:hover, &.is-active {
color: $blue; color: $blue;
} }
} }
.menu { .menu {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: -12px; top: -12px;
left: -7px; left: -7px;
display: none; display: none;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 8px 12px; padding: 8px 12px;
opacity: 0.0; opacity: 0.0;
background: $white; background: $white;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
font-size: 12px; font-size: 12px;
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s); @include transition(opacity .15s);
li { li {
margin-bottom: 3px; margin-bottom: 3px;
padding-bottom: 3px; padding-bottom: 3px;
border-bottom: 1px solid $lightGrey; border-bottom: 1px solid $lightGrey;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
border: none; border: none;
} }
} }
a { a {
&.is-selected { &.is-selected {
font-weight: bold; font-weight: bold;
} }
} }
} }
// dropdown state // dropdown state
&.is-active { &.is-active {
.menu { .menu {
z-index: 10000; z-index: 10000;
display: block; display: block;
opacity: 1.0; opacity: 1.0;
} }
.menu-toggle { .menu-toggle {
z-index: 1000; z-index: 1000;
} }
} }
// 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;
} }
} }
} }
} }
\ No newline at end of file \ No newline at end of file
cms/static/sass/_variables.scss
...@@ -12,7 +12,6 @@ $body-line-height: golden-ratio(.875em, 1); ...@@ -12,7 +12,6 @@ $body-line-height: golden-ratio(.875em, 1);
$white: rgb(255,255,255); $white: rgb(255,255,255);
$black: rgb(0,0,0); $black: rgb(0,0,0);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
...@@ -21,12 +20,6 @@ $offBlack: #3c3c3c; ...@@ -21,12 +20,6 @@ $offBlack: #3c3c3c;
$black: rgb(0,0,0); $black: rgb(0,0,0);
$white: rgb(255,255,255); $white: rgb(255,255,255);
$blue: #5597dd; $blue: #5597dd;
$lightBlue: tint($blue, 75%);
$extraLightBlue: tint($lightBlue, 75%);
$darkBlue: shade($blue, 25%);
$extraDarkBlue: shade($darkBlue, 25%);
$lightTransparentBlue: rgba(167, 192, 221, 0.3);
$orange: #edbd3c; $orange: #edbd3c;
$red: #b20610; $red: #b20610;
$green: #108614; $green: #108614;
......
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