Merge pull request #51 from unlimitedlabs/stylesheets

Separate styles by feature

orchestra/static/orchestra/common/css/base.scss

@@ -0,0 +1,104 @@
+/**
+ * Base stylesheet for Orchestra.
+ *
+ * This partial styles the base Django template and serves as the foundation for
+ * each Orchestra view.
+ */
+
+html, body {
+  font-size: $base-font-size;
+}
+
+section.wrapper {
+  margin-top: 52px;
+}
+
+section#main-content {
+  margin-left: 0;
+  color: $dark-gray;
+}
+
+header.header {
+  background: darken($main-blue, 10);
+  box-shadow: 0 1px 3px black;
+  min-height: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+  padding: 0
+}
+
+a {
+  color: $main-blue;
+  text-decoration: none;
+  &:hover, &:focus, &:visited {
+    color: $main-blue;
+    text-decoration: underline;
+  }
+}
+
+a.logo {
+  font-size: 2rem;
+  color: white;
+  margin: 12px 30px;
+  &:hover, &:focus, &:visited {
+    color: white;
+  }
+}
+
+#nav-options {
+  cursor: pointer;
+  font-size: 2rem;
+  color: white;
+  float: right;
+  margin: 12px 30px;
+  z-index: 1003;
+  .dropdown-menu {
+    a {
+      color: $main-blue;
+      &:hover {
+        color: $main-blue;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.section-panel {
+  margin: $panel-button-margin;
+  box-shadow: 0 1px 3px black;
+  background-color: white;
+  .section-header {
+    margin-top: 0;
+    color: white;
+    background-color: $main-blue;
+    h3 {
+      margin: 1.3rem 0;
+      font-size: 1.8rem;
+    }
+    .btn {
+      display: inline-block;
+      color: white;
+      background-color: $light-green;
+      &:first-child {
+        margin-left: $panel-button-margin;
+      }
+      &:hover:not(.disabled) {
+        border: 1px solid white;
+      }
+      &.disabled {
+        color: $light-gray;
+        background-color: rgba($light-green, 0.6);
+      }
+    }
+  }
+  .row:not(.section-header) {
+    &.padded {
+      > [class*="col-"] {
+        padding-top: $panel-padding;
+        padding-bottom: $panel-padding;
+      }
+    }
+  }
+}

orchestra/static/orchestra/common/css/common.scss

@@ -0,0 +1,28 @@
+/**
+ * Common stylesheet for Orchestra.
+ *
+ * This partial provides common variables and mixins useful for various view and
+ * component styles.
+ */
+
+$main-blue: rgb(0, 121, 191);
+$light-gray: rgb(204, 204, 204);
+$dark-gray: rgb(60, 60, 60);
+$light-green: rgb(46, 204, 113);
+$dark-green: rgb(39, 174, 96);
+$bold-yellow: rgb(230, 198, 55);
+
+$sqrt-2: 1.4142;
+
+$base-font-size: 10px;
+$panel-margin: 3rem;
+$panel-padding: 1.5rem;
+$panel-button-margin: 1.5rem;
+
+@mixin vendor-prefix($name, $argument) {
+  -webkit-#{$name}: #{$argument};
+  -ms-#{$name}: #{$argument};
+  -moz-#{$name}: #{$argument};
+  -o-#{$name}: #{$argument};
+  #{$name}: #{$argument};
+}