From d0d02963107c73249011d99fc09a88bc5b506ee1 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 1 Feb 2013 19:57:17 -0500
Subject: [PATCH] studio - revising course-based navigation - initial scss
 setup

---
 cms/static/img/logo-edx-studio.png | Bin 0 -> 2461 bytes
 cms/static/sass/_extends.scss      |  78 +++++++++++++++++++++++++++++
 cms/static/sass/base-style.scss    |   1 +
 cms/templates/base.html            |   2 +-
 common/static/sass/_mixins.scss    |   6 +--
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 cms/static/img/logo-edx-studio.png
 create mode 100644 cms/static/sass/_extends.scss

diff --git a/cms/static/img/logo-edx-studio.png b/cms/static/img/logo-edx-studio.png
new file mode 100644
index 0000000000000000000000000000000000000000..006194a195d546fb40564b6bb07cf926c25cff7a
GIT binary patch
literal 2461
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

literal 0
HcmV?d00001

diff --git a/cms/static/sass/_extends.scss b/cms/static/sass/_extends.scss
new file mode 100644
index 0000000000..5907481bd1
--- /dev/null
+++ b/cms/static/sass/_extends.scss
@@ -0,0 +1,78 @@
+.faded-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-medium {
+  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
+                                                    rgba(240,240,240, 1) 50%,
+                                                    rgba(240,240,240, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-light {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.8) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-vertical-divider {
+  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.faded-vertical-divider-light {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.6) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.vertical-divider {
+  @extend .faded-vertical-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+  }
+}
+
+.horizontal-divider {
+  border: none;
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
+
+.fade-right-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1)));
+  border: none;
+}
+
+.fade-left-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
+                                                    rgba(200,200,200, 0)));
+  border: none;
+}
\ No newline at end of file
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index e3463477c1..7fb86bfaaa 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -8,6 +8,7 @@
 @import "fonts";
 @import "variables";
 @import "cms_mixins";
+@import "extends";
 @import "base";
 @import "header";
 @import "dashboard";
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 84f10fc2d1..5b25746a0f 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -29,8 +29,8 @@
     <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/jquery.markitup.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
-    <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
     <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
+    <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
 
     <%static:js group='main'/>
     <%static:js group='module-js'/>
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 58a92d1ee6..375ce20b92 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -7,10 +7,10 @@
   @return $body-line-height * $amount;
 }
 
-@mixin hide-text(){
-  text-indent: -9999px;
+@mixin hide-text() {
+  text-indent: -100%;
+  white-space: nowrap;
   overflow: hidden;
-  display: block;
 }
 
 @mixin vertically-and-horizontally-centered ( $height, $width ) {