HackFlowy/sass/app.scss

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/foundation-global"; // *always required
// @import "foundation/components/global"; // *always required
// @import "foundation/components/grid";
// @import "foundation/components/visibility";
// @import "foundation/components/block-grid";
// @import "foundation/components/type";
// @import "foundation/components/buttons";
// @import "foundation/components/forms"; // *requires components/buttons
// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
// @import "foundation/components/button-groups"; // *requires components/buttons
// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
// @import "foundation/components/split-buttons"; // *requires components/buttons
// @import "foundation/components/flex-video";
// @import "foundation/components/section";
// @import "foundation/components/top-bar";  // *requires components/grid
// @import "foundation/components/orbit";
// @import "foundation/components/reveal";
// @import "foundation/components/joyride";
// @import "foundation/components/clearing";
// @import "foundation/components/alert-boxes";
// @import "foundation/components/breadcrumbs";
// @import "foundation/components/keystrokes";
// @import "foundation/components/labels";
// @import "foundation/components/inline-lists";
// @import "foundation/components/pagination";
// @import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
// @import "foundation/components/progress-bars";
// @import "foundation/components/side-nav";
// @import "foundation/components/sub-nav";
// @import "foundation/components/switch";
// @import "foundation/components/magellan";
// @import "foundation/components/tables";
// @import "foundation/components/thumbs";
// @import "foundation/components/tooltips";
// @import "foundation/components/dropdown";

$grey: #333;
$lightgrey: #f9f9fa;
$fontcolor: $grey;
$backgroundcolor: $lightgrey;

body {
  background-color: $lightgrey;
  #hackflowy {
    background-color: white;
    min-height: 1000px;
    margin: 75px 100px;
    box-shadow: 0px 0px 10px 5px #ccc;
    padding: 60px 60px;
    #main {
      min-height: 880px;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      #name {
        h2 {
          font-weight: normal;
          font-size: 30px;
          margin: 25px 0 5px 0;
        }
      }
      .children {
        margin-left: 40px;
        li {
          list-style: none;
          .task {
            margin: 10px 0;
            height: 20px;
            color: $fontcolor;
            .link {
              vertical-align: middle;
              display: inline-block;
              margin-top: 1px;
              margin-left:1px;
              height: 18px;
              width:18px;
              color: #666;
              background: white;
              left:50px;
              text-indent:5px;
              font-size:24px;
              font-family: Arial;
              line-height:19px;
              z-index:6;
              -moz-border-radius:12px;
              -webkit-border-radius:12px;
              -khtml-border-radius:12px;
              border-radius:12px;
            }
            .with-children > .link {
              background-color: #e0e0e0;
            }
            .open > .link {
              background-color: white;
            }
            .link:hover {
              cursor: pointer;
              z-index: 8;
              background-color: #aaa;
            }
            input.edit {
              box-shadow: none;
              display: inline;
              background: transparent;
              resize: none;
              outline: 0;
              border: 0;
              padding: 0;
              margin: 0;
              width: 80%;
              font-family: inherit;
              font-size: inherit;
              font-weight: inherit;
              line-height: inherit;
              letter-spacing: inherit;
              color: inherit;
              overflow: hidden;
              position: relative;
              word-wrap: break-word;
              white-space: pre-wrap;
              text-align: start;
              -webkit-writing-mode: horizontal-tb;
            }
            input.edit:focus {
              background-color: white;
            }
          }
        }
        li.shift1 {
          margin-left: 30px;
        }
        li.shift2 {
          margin-left: 60px;
        }
        li.shift3 {
          margin-left: 90px;
        }
        li.shift4 {
          margin-left: 120px;
        }
        li.shift5 {
          margin-left: 150px;
        }
        li.shift6 {
          margin-left: 180px;
        }
        li.shift7 {
          margin-left: 210px;
        }
        li.shift8 {
          margin-left: 240px;
        }
        li.shift9 {
          margin-left: 270px;
        }
        ul.shift {
         margin-bottom: 0px;
        }
      }
    }
    #main > .children {
      margin-left: 0;
    }
    #footer {
      color: $fontcolor;
      margin: 10px 0;
      font-size: 12px;
    }
  }
}