markuapad 0.1.7

data/src/styles/_file_browser.scss

@@ -0,0 +1,160 @@
+.markuapad .file-browser {
+  @extend %box-shadow;
+
+  @include flex(0 0 auto);
+  @include pad($file-browser-padding 0 $file-browser-padding $file-browser-padding);
+  @include user-select(none);
+  @include transition(flex-basis $base-transition-duration/2 ease-in-out);
+
+  background: $files-background;
+  min-height: $files-min-height;
+
+  .file-types-list {
+    padding-right: 70px;
+    li {
+      display: inline-block;
+      margin: 0 5px;
+    }
+  }
+
+  // The little file-type headers
+  .title {
+    color: #aaa;
+    font-variant: small-caps;
+    font-size: 1em;
+    cursor: pointer;
+
+    &:hover {
+      color: $light-blue;
+    }
+
+    &.selected {
+      color: $blue;
+    }
+  }
+
+  // The new file creation button
+  .new-file {
+    @include transition(all $base-transition-duration/2 ease-in-out);
+    border: thin solid rgba(0, 0, 0, .1);
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 6px 8px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    line-height: 16px;
+
+    i {
+      font-size: 1em;
+    }
+
+    &:hover,
+    &:active {
+      border-color: rgba(0, 0, 0, .4);
+    }
+
+    &.active {
+      @include transform(rotate(45deg));
+    }
+  }
+
+  // The new file creation form
+  .file-name {
+    @include display(flex);
+    margin: 0;
+
+    button {
+      font-size: .75em;
+      height: 36px;
+      margin: 0 5px;
+      width: 80px;
+    }
+  }
+
+  // Busy indicator
+  .busy-indicator {
+    position: absolute;
+    top: 3em;
+    left: 0;
+    right: 0;
+    text-align: center;
+    color: $light-blue;
+  }
+
+  // A file list item
+  .files-list-item {
+    position: relative;
+
+    a {
+      @include border-left-radius(3px);
+      @include transition(background $base-transition-duration/2 ease-in-out);
+      cursor: pointer;
+      display: block;
+      font-size: .9em;
+      padding: .2em 2.5em .2em .5em;
+    }
+
+    &.current a {
+      background: rgba(0, 0, 0, .1);
+    }
+
+    // Hover state
+    &:hover {
+      a { background: rgba(0, 0, 0, .05); }
+      button {
+        display: block;
+      }
+    }
+
+    // The delete button
+    > button {
+      @extend %vanilla-button;
+      padding: 5px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: none;
+    }
+  }
+
+  // Close the file browser button
+  .close-button {
+    @extend %close-button;
+
+    left: 0;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+
+    span {
+      @include transition(transform $base-transition-duration/2 ease-in-out);
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==');
+      background-position: center;
+      background-repeat: no-repeat;
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  // Open state
+  &.open {
+    @include flex-basis(auto);
+    .new-file { display: block; }
+
+    .close-button span {
+      @include transform(rotate(-90deg));
+    }
+  }
+
+  // Closed state
+  &.closed {
+    @include flex-basis(0);
+    .new-file { display: none; }
+    .close-button span {
+      @include transform(rotate(90deg));
+    }
+  }
+}
+

data/src/styles/_grid-settings.scss

@@ -0,0 +1,13 @@
+@import "../../bower_components/neat/app/assets/stylesheets/neat-helpers";
+
+// Neat Overrides
+$grid-columns: 12;
+$max-width: em(1024);
+
+// Neat Breakpoints
+$medium-screen: em(640);
+$large-screen: em(860);
+$small-screen: new-breakpoint(max-width em(860) 4);
+
+$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);

data/src/styles/_layout.scss

@@ -0,0 +1,18 @@
+.markuapad {
+  &.container,
+  .container {
+    @include outer-container;
+    @include pad(0 1em);
+  }
+
+  &.large-container,
+  .large-container {
+    @include outer-container;
+    @include pad;
+    max-width: em(1280); // Max width from design
+    @include media($large-screen) {
+      @include pad(0 1em);
+    }
+  }
+}
+

data/src/styles/_modal.scss

@@ -0,0 +1,145 @@
+.markuapad {
+  .modal {
+    $base-border-color: #dcdcdc !default;
+    $base-border-radius: 3px !default;
+    $base-background-color: #fff !default;
+    $base-font-size: 1em !default;
+    $base-line-height: 1.5em !default;
+    $action-color: #477dca !default;
+    $dark-gray: #333 !default;
+    $light-gray: #ddd !default;
+    $medium-screen: em(640) !default;
+    $large-screen: em(860) !default;
+    $base-font-color: $dark-gray !default;
+    $modal-padding: 3em;
+    $modal-background: $base-background-color;
+    $modal-close-color: $light-gray;
+    $modal-image-height: 135px;
+    $modal-image-width: $modal-image-height;
+    $modal-trigger-image-width: 300px;
+
+    label {
+      cursor: pointer;
+      margin-bottom: 0;
+
+      img {
+        border-radius: $modal-trigger-image-width / 2;
+        display: block;
+        max-width: $modal-trigger-image-width;
+      }
+    }
+
+    .modal-state {
+      display: none;
+    }
+
+    .modal-trigger {
+      padding: .8em 1em;
+    }
+
+    // Overlay
+    .modal-fade-screen {
+      @include position(fixed, 0 0 0 0);
+      background: rgba(0, 0, 0, .85);
+      opacity: 1;
+      padding-top: .6em;
+      text-align: left;
+      visibility: visible;
+      z-index: 99999999999;
+
+      @include media($large-screen) {
+        padding-top: 10em;
+      }
+
+      .modal-bg {
+        @include position(absolute, 0 0 0 0);
+        cursor: pointer;
+      }
+    }
+
+    .modal-close {
+      @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
+      @include size(1.5em);
+      background: $modal-background;
+      cursor: pointer;
+
+      &:after,
+      &:before {
+        @include position(absolute, 3px 3px 0 50%);
+        @include transform(rotate(45deg));
+        @include size(.15em 1.5em);
+        background: $modal-close-color;
+        content: '';
+        display: block;
+        margin: -3px 0 0 -1px;
+      }
+
+      &:hover:after,
+      &:hover:before {
+        background: darken($modal-close-color, 10%);
+      }
+
+      &:before {
+        @include transform(rotate(-45deg));
+      }
+    }
+
+    .modal-inner {
+      background: $modal-background;
+      border-radius: $base-border-radius;
+      margin: auto;
+      margin-top: 0;
+      max-height: 95%;
+      overflow: auto;
+      padding: $modal-padding / 2;
+      position: relative;
+      top: .5em;
+      width: 95%;
+
+      @include media($medium-screen) {
+        max-height: 70%;
+        padding: $modal-padding;
+        width: 60%;
+      }
+
+      @include media($large-screen) {
+        width: 50%;
+      }
+
+      h1 {
+        color: $base-font-color;
+        margin-bottom: 0 0 .6em 0;
+        text-align: left;
+        text-transform: capitalize;
+      }
+
+      p {
+        color: $base-font-color;
+        line-height: $base-line-height;
+      }
+
+      .modal-intro {
+        font-weight: 800;
+      }
+
+      .modal-content {
+        color: $base-font-color;
+      }
+
+      .cta {
+        color: #fff;
+        display: inline-block;
+        margin-right: .5em;
+        margin-top: 1em;
+
+        &:last-child {
+          padding: 0 2em;
+        }
+      }
+    }
+  }
+
+  .modal-open {
+    overflow: hidden;
+  }
+}

data/src/styles/_preview.scss

@@ -0,0 +1,65 @@
+.markuapad .preview {
+  @include transition(top $base-transition-duration/2 ease-in-out);
+
+  background: $white;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 10;
+  overflow: auto;
+
+  // Preview states
+  &.closed {
+    top: 100%;
+    > * { display: none; }
+  }
+
+  &.previewing,
+  &.done {
+    top: 0;
+  }
+
+  > header {
+    position: relative;
+  }
+
+  // The close button
+  .close {
+    @extend %vanilla-button;
+    position: absolute;
+    top: 10px;
+    right: 0;
+  }
+
+  .content {
+    margin-top: 4em;
+  }
+}
+
+
+// Shared content styles
+.markuapad .live-preview,
+.markuapad .preview {
+  // main content
+  .content {
+    em,
+    i,
+    {
+      font-style: italic;
+    }
+    ul { @extend %default-ul; }
+    ol { @extend %default-ol; }
+
+    &,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: "Roboto Slab", serif;
+    }
+  }
+}

data/src/styles/_toolbar.scss

@@ -0,0 +1,99 @@
+%nav-button {
+  display: inline-block;
+  margin: 0 5px;
+  position: relative;
+
+  &:hover > a {
+    background: #fff;
+    border-color: rgba(0, 0, 0, .2);
+  }
+
+  > a {
+    @include transition(all $base-transition-duration/2 ease-in-out);
+    border: thin solid rgba(0, 0, 0, .05);
+    border-radius: 18px;
+    cursor: pointer;
+    padding: 8px 20px;
+    color: #555;
+
+    &.active {
+      background: $blue;
+      color: white;
+    }
+
+    &.disabled {
+      color: #aaa;
+    }
+  }
+}
+
+.markuapad .toolbar {
+  @include display(flex);
+  margin: 20px 0;
+  padding: 0 10px;
+
+  .book-title {
+    @include flex(1);
+    @include order(1);
+    margin: 0;
+  }
+
+  .menus {
+    // For now we don't need this
+    display: none;
+
+    @include flex(1);
+    @include order(1);
+    z-index: 1;
+
+    .dropdown {
+      @extend %nav-button;
+
+      .dropdown-menu {
+        @include transition(all $base-transition-duration/2 ease-in-out);
+        height: 0;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        overflow: hidden;
+        background: #fff;
+        margin-top: 0;
+        min-width: 150px;
+        z-index: -1;
+        border-color: rgba(0, 0, 0, 0.1);
+        border-radius: 18px;
+
+        a {
+          padding: 8px 20px;
+          color: #555;
+          display: block;
+          white-space: nowrap;
+        }
+      }
+
+      // Hover state
+      &:hover {
+        > a {
+          @include border-bottom-radius(0);
+          border-bottom: none;
+        }
+
+        .dropdown-menu {
+          border-radius: 18px;
+          height: auto;
+          min-height: 100%;
+          border: thin solid rgba(0, 0, 0, .2);
+          border-top-left-radius: 0;
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+
+  .actions {
+    @include order(2);
+    li {
+      @extend %nav-button;
+    }
+  }
+}