dante-editor 0.0.3 → 0.0.4

data/app/assets/stylesheets/dante/_icons.scss

@@ -12,27 +12,26 @@
   }
 }
 
-.icon {
-  &-h2:before                   { content: "H1"; }
-  &-h3:before                   { content: "H2"; }
-  &-h4:before                   { content: "H3"; }
-  &-p:before                    { content:  "P"; }
-  &-code:before                 { content: ""; }
-  &-insertorderedlist:before    { content: ""; }
-  &-insertunorderedlist:before  { content: ""; }
-  &-inserthorizontalrule:before { content: ""; }
-  &-indent:before               { content: ""; }
-  &-outdent:before              { content: ""; }
-  &-bold:before                 { content: ""; }
-  &-italic:before               { content: ""; }
-  &-underline:before            { content: ""; }
-  &-createlink:before           { content: ""; }
-  &-blockquote:before           { content: ""; }
-}
-.icon {
-  &-h2:before,
-  &-h3:before,
-  &-h4:before {
-    font-weight: bold;
-  }
+
+.icon-h2:before                   { content: "H1"; }
+.icon-h3:before                   { content: "H2"; }
+.icon-h4:before                   { content: "H3"; }
+.icon-p:before                    { content:  "P"; }
+.icon-code:before                 { content: ""; }
+.icon-insertorderedlist:before    { content: ""; }
+.icon-insertunorderedlist:before  { content: ""; }
+.icon-inserthorizontalrule:before { content: ""; }
+.icon-indent:before               { content: ""; }
+.icon-outdent:before              { content: ""; }
+.icon-bold:before                 { content: ""; }
+.icon-italic:before               { content: ""; }
+.icon-underline:before            { content: ""; }
+.icon-createlink:before           { content: ""; }
+.icon-blockquote:before           { content: ""; }
+
+
+.icon-h2:before,
+.icon-h3:before,
+.icon-h4:before {
+  font-weight: bold;
 }

data/app/assets/stylesheets/dante/_menu.scss

@@ -1,43 +1,23 @@
 .dante-menu {
 
   // MENU
-  & {
-    position: absolute;
-    visibility: hidden;
-    z-index: 1000;
-    -webkit-transition: none;
-    transition: none;
-    display: none;
-    top: 0;
-    left: 0;
-    display:block;
-    white-space: nowrap;
+  position: absolute;
+  visibility: hidden;
+  z-index: 1000;
+  -webkit-transition: none;
+  transition: none;
+  display: none;
+  top: 0;
+  left: 0;
+  display:block;
+  white-space: nowrap;
 
-    height: $menu-height;
-    background: $menu-background;
-    border: $menu-border;
-    border-radius: $menu-border-radius;
-    box-shadow: $menu-shadow;
-  }
-  &--active {
-    display: inline-block;
-    visibility: visible;
-    -webkit-animation: pop-upwards 180ms forwards linear;
-    animation: pop-upwards 180ms forwards linear;
-  }
+  height: $menu-height;
+  background: $menu-background;
+  border: $menu-border;
+  border-radius: $menu-border-radius;
+  box-shadow: $menu-shadow;
 
-  &--linkmode {
-    .dante-menu-buttons {
-      visibility: hidden;
-    }
-    .dante-menu-linkinput {
-      display: block;
-    }
-    .dante-menu-input {
-      -webkit-animation: pop-upwards 180ms forwards linear;
-              animation: pop-upwards 180ms forwards linear;
-    }
-  }
 
   // CARET
   &:after,
@@ -60,90 +40,112 @@
     bottom: -($menu-caret-size*2);
   }
 
-  // BUTONS
-  &-buttons {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    line-height: 0;
+}
+
+.dante-menu--active {
+  display: inline-block;
+  visibility: visible;
+  -webkit-animation: pop-upwards 180ms forwards linear;
+  animation: pop-upwards 180ms forwards linear;
+}
+
+.dante-menu--linkmode {
+  .dante-menu-buttons {
+    visibility: hidden;
+  }
+  .dante-menu-linkinput {
+    display: block;
   }
-  &-button {
-    & {
-      min-width: 20px;
-      display: inline-block;
-      padding: 0 10px;
-      overflow: hidden;
-      text-align: center;
-      color: $menu-color;
-      cursor: pointer;
-      font-size: 16px;
-      line-height: $menu-height - 2;
-      -webkit-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-    }
-    &:hover{
-      // nada
-    }
-    &.active{
-      color: $menu-color-active;
-    }
+  .dante-menu-input {
+    -webkit-animation: pop-upwards 180ms forwards linear;
+            animation: pop-upwards 180ms forwards linear;
+  }
+}
 
-    &:first-of-type{
-      border-top-left-radius: $menu-border-radius;
-      border-bottom-left-radius: $menu-border-radius;
-      padding-left: 18px;
-    }
-    &:last-of-type{
-      border-top-right-radius: $menu-border-radius;
-      border-bottom-right-radius: $menu-border-radius;
-      padding-right: 18px;
-    }
+// BUTONS
+.dante-menu-buttons {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+.dante-menu-button {
+  & {
+    min-width: 20px;
+    display: inline-block;
+    padding: 0 10px;
+    overflow: hidden;
+    text-align: center;
+    color: $menu-color;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: $menu-height - 2;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+  &:hover{
+    // nada
+  }
+  &.active{
+    color: $menu-color-active;
   }
 
-  // LINK
-  &-linkinput {
-    & {
-      display: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-    .dante-menu-button {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
+  &:first-child {
+    border-top-left-radius: $menu-border-radius;
+    border-bottom-left-radius: $menu-border-radius;
+    padding-left: 18px;
+  }
+  &:last-child {
+    border-top-right-radius: $menu-border-radius;
+    border-bottom-right-radius: $menu-border-radius;
+    padding-right: 18px;
   }
+}
 
-  &-input {
-    //height: $menu-height - 2;
-    //line-height: 20px;
+// LINK
+.dante-menu-linkinput {
+  & {
+    display: none;
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0,0,0,0);
-    width: 100%;
-    padding: 13px 40px 13px 10px;
-    color: $menu-color;
-    border: none;
-    outline: none;
-    font-size: 16px;
-    box-sizing: border-box;
-    border-radius: $menu-border-radius;
-    appearance: none;
-    text-align: left;
-    font-family: $font-family-serif;
-    letter-spacing: 0.01rem;
-    font-weight: 400;
-    font-style: normal;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: "liga" on;
+    right: 0;
+    bottom: 0;
   }
+  .dante-menu-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
 
+.dante-menu-input {
+  //height: $menu-height - 2;
+  //line-height: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0);
+  width: 100%;
+  padding: 13px 40px 13px 10px;
+  color: $menu-color;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  box-sizing: border-box;
+  border-radius: $menu-border-radius;
+  appearance: none;
+  text-align: left;
+  font-family: $font-family-serif;
+  letter-spacing: 0.01rem;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
 }
+
+

data/app/assets/stylesheets/dante/_needsorder.scss

@@ -6,11 +6,17 @@
 
 .markup--anchor {
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
-    background-position: 0 24px;
+    //background-position: 0 24px;
+    background-position: 0 19px;
     background-repeat: repeat-x;
     background-size: 2px 2px;
     text-decoration: none;
     color: rgba(0, 0, 0, 1);
+    //border-bottom: 1px solid rgba(0,0,0,.4);
+}
+
+h4 .markup--anchor {
+    background-position: 0 34px;
 }
 
 

data/app/assets/stylesheets/dante/_post.scss

@@ -5,11 +5,9 @@
   font-style: normal;
   //font-size: 22px;
   font-size: 19px;
-  line-height: 1.4;
-}
-
-.notesSource {
-  position: relative;
+  //line-height: 1.4;
+  letter-spacing: 0.01rem;
+  line-height: 1.69;
 }
 
 .postField {
@@ -18,11 +16,11 @@
     word-break: break-word;
     word-wrap: break-word;
   }
+}
 
-  &--body {
-    @include clearfix;
-    margin-bottom: 30px;
-  }
+.postField--body {
+  @include clearfix;
+  margin-bottom: 30px;
 }
 
 .section-content {

data/app/assets/stylesheets/dante/_scaffold.scss

@@ -1,24 +1,19 @@
-// Set box-sizing globally to handle padding and border widths
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
+.notesSource {
 
-html,
-body {
-  font-size: 100%;
-  height: 100%; // Must be 100% for off canvas to work
-}
+  & {
+    padding: 0;
+    margin: 0;
+    position: relative;
+    color: rgba(0,0,0,0.8);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
 
-// Default body styles
-body {
-  padding: 0;
-  margin: 0;
-  position: relative;
-  font-family: $font-family-sans;
-  color: rgba(0,0,0,0.8);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }

data/app/assets/stylesheets/dante/_tooltip.scss

@@ -1,126 +1,125 @@
 .inlineTooltip {
 
   // BASE
-  & {
-    position: absolute;
-    z-index: 900;
-    overflow: hidden;
-    display: none;
-    width: 33px;
-    height: 33px;
-    -webkit-transition: opacity 100ms, width 0 linear 250ms;
-    transition: opacity 100ms, width 0 linear 250ms;
-    padding: 0;
-  }
+  position: absolute;
+  z-index: 900;
+  overflow: hidden;
+  display: none;
+  width: 33px;
+  height: 33px;
+  -webkit-transition: opacity 100ms, width 0 linear 250ms;
+  transition: opacity 100ms, width 0 linear 250ms;
+  padding: 0;
+
   &.is-active {
     display: block;
     width: 220px;
     -webkit-transition-delay: 0;
     transition-delay: 0;
   }
+}
 
-  // MENU
-  &-menu {
-    & {
-      display: inline-block;
-      padding-left: 22px;
-    }
-    button {
-      margin-right: 9px;
-    }
+// MENU
+.inlineTooltip-menu {
+  & {
+    display: inline-block;
+    padding-left: 22px;
   }
+  button {
+    margin-right: 9px;
+  }
+}
 
-  // BUTTON
-  &-button {
+// BUTTON
+.inlineTooltip-button {
 
-    // BASE
+  // BASE
+  & {
+    display: inline-block;
+    position: relative;
+    outline: 0;
+    padding: 0;
+    vertical-align: bottom;
+    box-sizing: border-box;
+    border-radius: 999em;
+    cursor: pointer;
+    font-size: 14px;
+    text-decoration: none;
+    font-family: $font-family-sans;
+    letter-spacing: -0.02em;
+    font-weight: 400;
+    font-style: normal;
+    white-space: nowrap;
+    text-rendering: auto;
+    text-align: center;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: "liga" on;
+    width: $tooltip-size;
+    height: $tooltip-size;
+    line-height: $tooltip-size - 2;
+    -webkit-transition: 100ms border-color, 100ms color;
+    transition: 100ms border-color, 100ms color;
+    background: rgba(0,0,0,0);
+    border: 1px solid rgba(0,0,0,0.15);
+    color: rgba(0,0,0,0.44);
+  }
+
+  &:hover {
+    border-color: rgba(0,0,0,0.9);
+    color: rgba(0,0,0,0.9);
+  }
+
+  // SCALE
+  &.scale {
     & {
-      display: inline-block;
-      position: relative;
-      outline: 0;
-      padding: 0;
-      vertical-align: bottom;
-      box-sizing: border-box;
-      border-radius: 999em;
-      cursor: pointer;
-      font-size: 14px;
-      text-decoration: none;
-      font-family: $font-family-sans;
-      letter-spacing: -0.02em;
-      font-weight: 400;
-      font-style: normal;
-      white-space: nowrap;
-      text-rendering: auto;
-      text-align: center;
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -moz-font-feature-settings: "liga" on;
-      width: $tooltip-size;
-      height: $tooltip-size;
-      line-height: $tooltip-size - 2;
-      -webkit-transition: 100ms border-color, 100ms color;
-      transition: 100ms border-color, 100ms color;
-      background: rgba(0,0,0,0);
-      border: 1px solid rgba(0,0,0,0.15);
-      color: rgba(0,0,0,0.44);
+      -webkit-transform: scale(0);
+      -ms-transform: scale(0);
+      transform: scale(0);
+      -webkit-transition-property: -webkit-transform;
+      transition-property: transform;
+      -webkit-transition-duration: 100ms;
+      transition-duration: 100ms;
     }
-
-    &:hover {
-      border-color: rgba(0,0,0,0.9);
-      color: rgba(0,0,0,0.9);
+    .is-scaled & {
+      -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+      transform: scale(1);
+      -webkit-transition-duration: 200ms;
+      transition-duration: 200ms;
     }
-
-    // SCALE
-    &.scale {
-      & {
-        -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-        transform: scale(0);
-        -webkit-transition-property: -webkit-transform;
-        transition-property: transform;
-        -webkit-transition-duration: 100ms;
-        transition-duration: 100ms;
-      }
-      .is-scaled & {
-        -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1);
-        -webkit-transition-duration: 200ms;
-        transition-duration: 200ms;
-      }
-      &:nth-child(2) {
-        -webkit-transition-delay: 30ms;
-        transition-delay: 30ms;
-      }
-      &:nth-child(3) {
-        -webkit-transition-delay: 60ms;
-        transition-delay: 60ms;
-      }
-      &:nth-child(4) {
-        -webkit-transition-delay: 90ms;
-        transition-delay: 90ms;
-      }
+    &:nth-child(2) {
+      -webkit-transition-delay: 30ms;
+      transition-delay: 30ms;
     }
-
-    // CONTROL
-    &.control {
-      & {
-        -webkit-transition: -webkit-transform 100ms;
-                transition: transform 100ms;
-         -webkit-transform: rotate(0);
-             -ms-transform: rotate(0);
-                 transform: rotate(0);
-      }
-      .is-active & {
-        -webkit-transition: -webkit-transform 250ms;
-                transition: transform 250ms;
-         -webkit-transform: rotate(45deg);
-             -ms-transform: rotate(45deg);
-                 transform: rotate(45deg);
-      }
+    &:nth-child(3) {
+      -webkit-transition-delay: 60ms;
+      transition-delay: 60ms;
     }
+    &:nth-child(4) {
+      -webkit-transition-delay: 90ms;
+      transition-delay: 90ms;
+    }
+  }
 
+  // CONTROL
+  &.control {
+    & {
+      -webkit-transition: -webkit-transform 100ms;
+              transition: transform 100ms;
+       -webkit-transform: rotate(0);
+           -ms-transform: rotate(0);
+               transform: rotate(0);
+    }
+    .is-active & {
+      -webkit-transition: -webkit-transform 250ms;
+              transition: transform 250ms;
+       -webkit-transform: rotate(45deg);
+           -ms-transform: rotate(45deg);
+               transform: rotate(45deg);
+    }
   }
 
 }
+