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 202 additions and 197 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/_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/_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