dante2-editor 0.2.0

data/app/styles/dante/_fonts.scss

@@ -0,0 +1,17 @@
+@mixin dante-font-face($font-family, $file-name, $font-weight: normal, $font-style: normal) {
+  @font-face {
+    font-family: '#{$font-family}';
+    src: url('./fonts/dante/#{$file-name}.eot');
+    src: url('./fonts/dante/#{$file-name}.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/dante/#{$file-name}.woff') format('woff'),
+    url('./fonts/dante/#{$file-name}.ttf') format('truetype'),
+    url('./fonts/dante/#{$file-name}.svg##{$file-name}') format('svg');
+    font-weight: $font-weight;
+    font-style: $font-style;
+  }
+}
+
+@include dante-font-face(dante, fontello);
+@include dante-font-face(dante-tooltip, dante);
+
+@import url('//fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,800');

data/app/styles/dante/_graf.scss

@@ -0,0 +1,242 @@
+.graf--h2,
+.graf--h3,
+.graf--h4,
+.graf--h5,
+.graf--h6,
+.graf--h7,
+.postList,
+.graf--figure,
+.graf--blockquote,
+.graf--pullquote,
+.graf--p,
+.graf--pre {
+  margin: 0;
+  //position:relative;
+}
+
+.postList {
+  margin-bottom: 30px;
+}
+
+.graf--p,
+.graf--blockquote,
+.graf--pullquote {
+  margin-bottom: 30px;
+}
+
+.graf--code {
+  line-height: 1em;
+}
+
+.graf--p.dante--spinner{
+  position:relative;
+}
+
+.graf--h2 {
+  font-family: $dante-font-family-sans;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin-bottom: 8px;
+  margin-left: -3px;
+  margin-top: 40px;
+  padding-top: 0;
+}
+.graf--h3 {
+  font-family: $dante-font-family-sans;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 36px;
+  margin-left: -1.8px;
+  line-height: 1.2;
+  margin-top: 40px;
+  margin-bottom: 4px;
+}
+.graf--h4 {
+  font-family: $dante-font-family-sans;
+  letter-spacing: -0.02em;
+  font-weight: 300;
+  font-style: normal;
+  font-size: 30px;
+  margin-left: -1.5px;
+  line-height: 1.2;
+  color: rgba(0,0,0,0.44);
+  margin-top: 40px;
+  margin-bottom: 2px;
+}
+
+.section--first .graf--h2.graf--first,
+.section--first .graf--h3.graf--first,
+.section--first .graf--h4.graf--first {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.graf--h2 + .graf--h2 {
+  margin-top: -8px;
+}
+
+.graf--h2 + .graf--h3,
+.graf--h2 + .graf--h4 {
+  margin-top: -6px;
+}
+
+.graf--h3 + .graf--h2,
+.graf--h4 + .graf--h2 {
+  margin-top: 2px;
+}
+
+.graf--h3 + .graf--h4,
+.graf--h4 + .graf--h3 {
+  margin-top: -2px;
+}
+
+.graf--h2 + .postList,
+.graf--h3 + .postList,
+.graf--h4 + .postList {
+  margin-top: 10px;
+}
+
+.graf--h2 + .graf--p.graf--empty,
+.graf--h3 + .graf--p.graf--empty,
+.graf--h4 + .graf--p.graf--empty {
+  margin-bottom: -7px;
+  margin-top: -7px;
+}
+
+.graf--h2 + .graf--p.graf--empty + .graf--h2,
+.graf--h3 + .graf--p.graf--empty + .graf--h2,
+.graf--h4 + .graf--p.graf--empty + .graf--h2 {
+  margin-top: -5px;
+}
+
+.graf--h2 + .graf--p.graf--empty + .graf--h3,
+.graf--h3 + .graf--p.graf--empty + .graf--h3,
+.graf--h4 + .graf--p.graf--empty + .graf--h3,
+.graf--h2 + .graf--p.graf--empty + .graf--h4,
+.graf--h3 + .graf--p.graf--empty + .graf--h4,
+.graf--h4 + .graf--p.graf--empty + .graf--h4 {
+  margin-top: -8px;
+}
+
+
+.graf--blockquote, blockquote {
+  font-family: $dante-font-family-serif;
+  border-left: 3px solid rgba(0, 0, 0, 0.8);
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: 0.01rem;
+  margin-left: -23px;
+  padding-bottom: 3px;
+  padding-left: 20px;
+}
+.graf--blockquote + .graf--blockquote, blockquote + blockquote {
+  margin-top: -30px;
+  padding-top: 30px;
+}
+
+.graf--pullquote {
+  line-height: 1.4;
+  text-align: center;
+  font-size: 32px;
+  margin: 48px -160px;
+  border: none;
+  padding: 0;
+  font-family: $dante-font-family-serif;
+  letter-spacing: 0.01rem;
+  font-weight: 400;
+  font-style: italic;
+  -webkit-transition: margin 100ms;
+  transition: margin 100ms;
+}
+
+.graf--pre, .public-DraftStyleDefault-pre {
+  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+  font-family: $dante-font-family-mono;
+  font-size: 16px;
+  margin-bottom: 20px;
+  padding: 20px;
+  white-space: pre-wrap;
+}
+.graf--pre + .graf--pre {
+  margin-top: -20px;
+}
+
+.graf--figure {
+  & {
+    box-sizing: border-box;
+    clear: both;
+    margin-bottom: 30px;
+    outline: medium none;
+    position: relative;
+  }
+  &.is-mediaFocused .graf-image,
+  &.is-mediaFocused iframe {
+    box-shadow: 0 0 0 3px #57ad68;
+  }
+}
+
+.graf--mixtapeEmbed {
+  a {
+    text-decoration: none;
+  }
+}
+
+.graf--h4 + .graf--figure,
+.graf--h3 + .graf--figure,
+.graf--h2 + .graf--figure {
+  margin-top: 15px;
+}
+
+.graf--first {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+/*.graf--empty {
+  margin-bottom: -7px;
+  margin-top: -7px;
+}*/
+
+p[data-align="center"],
+.graf--h2[data-align="center"],
+.graf--h3[data-align="center"],
+.graf--h4[data-align="center"],
+.graf--blockquote[data-align="center"] {
+  text-align: center;
+}
+
+.markup--anchor,
+.graf--sectionCaption {
+    cursor: text;
+}
+.markup--anchor {
+  text-decoration: underline;
+  color: inherit;
+}
+
+@media (max-width: 500px) {
+
+  .graf--h2 {
+    font-size: 36px;
+    line-height: 1.1;
+    padding-top: 12px;
+    margin-bottom: 6px;
+  }
+  .graf--h3 {
+    font-size: 26px;
+    line-height: 1.2;
+    margin-top: 18px;
+    margin-bottom: 4px;
+  }
+  .graf--h4 {
+    font-size: 24px;
+    line-height: 1.2;
+    margin-top: 18px;
+    margin-bottom: 2px;
+  }
+
+}

data/app/styles/dante/_icons.scss

@@ -0,0 +1,62 @@
+.dante-icon {
+  &:before {
+    display: inline-block;
+    font-family: "dante";
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1em;
+    text-align: center;
+    text-decoration: inherit;
+    text-transform: none;
+  }
+}
+
+.dante-icon-h2:before                   { content: "H1"; }
+.dante-icon-h3:before                   { content: "H2"; }
+.dante-icon-h4:before                   { content: "H3"; }
+.dante-icon-p:before                    { content:  "P"; }
+.dante-icon-code:before                 { content: ""; }
+.dante-icon-insertorderedlist:before    { content: ""; }
+.dante-icon-insertunorderedlist:before  { content: ""; }
+.dante-icon-inserthorizontalrule:before { content: ""; }
+.dante-icon-indent:before               { content: ""; }
+.dante-icon-outdent:before              { content: ""; }
+.dante-icon-bold:before                 { content: ""; }
+.dante-icon-italic:before               { content: ""; }
+.dante-icon-underline:before            { content: ""; }
+.dante-icon-createlink:before           { content: ""; }
+.dante-icon-blockquote:before           { content: ""; }
+
+.dante-icon-h2:before,
+.dante-icon-h3:before,
+.dante-icon-h4:before {
+  font-weight: bold;
+}
+
+.tooltip-icon {
+  &:before {
+    font-family: 'dante-tooltip';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    // Better Font Rendering
+     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.dante-icon-image-center:before { content: "\e900"; }
+.dante-icon-image-fill:before   { content: "\e901"; }
+.dante-icon-image-left:before   { content: "\e902"; }
+.dante-icon-image-wide:before   { content: "\e903"; }
+
+.dante-icon-video:before        { content: "\e600"; }
+.dante-icon-image:before        { content: "\e601"; }
+.dante-icon-plus:before         { content: "\e602"; }
+.dante-icon-embed:before        { content: "\e603"; }
+

data/app/styles/dante/_media.scss

@@ -0,0 +1,39 @@
+.aspectRatioPlaceholder {
+    margin: 0 auto;
+    position: relative;
+    width: 100%;
+}
+
+.graf-image:before,
+.iframeContainer:before {
+  .is-postEditMode & {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
+  }
+}
+
+.graf-image,
+.graf-imageAnchor {
+  .aspectRatioPlaceholder.is-locked & {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.graf-image,
+.graf-imageAnchor,
+.iframeContainer > iframe,
+.iframeContainer {
+  box-sizing: border-box;
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}

data/app/styles/dante/_menu.scss

@@ -0,0 +1,201 @@
+// Base styles
+
+.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;
+
+  height: $dante-menu-height;
+  background: $dante-menu-background;
+  color: $dante-menu-color;
+
+  @if $dante-menu-border-width {
+    border: $dante-menu-border-width;
+  }
+  @if $dante-menu-border-radius {
+    border-radius: $dante-menu-border-radius;
+  }
+  @if $dante-menu-box-shadow {
+    box-shadow: $dante-menu-box-shadow;
+  }
+
+
+  // CARET
+  // &:before -> Borde
+  // &:after  -> Triangulo
+  @if $dante-menu-caret-size {
+    //&:before,
+    &:after {
+      content: "";
+      height: 0;
+      width: 0;
+      position: absolute;
+      left: 50%;
+      pointer-events: none;
+      border: $dante-menu-caret-size solid transparent;
+      margin-left: -($dante-menu-caret-size/2);
+    }
+    //&:before {
+    //  border-top-color: $menu-border-color;
+    //  bottom: -($dante-menu-caret-size*2);
+    //}
+    &:after {
+      border-top-color: $dante-menu-background;
+      bottom: -(($dante-menu-caret-size*2)-1);
+    }
+  }
+
+}
+
+
+// Visible
+
+.dante-menu--active {
+  display: inline-block;
+  visibility: visible;
+  -webkit-animation: pop-upwards 180ms forwards linear;
+  animation: pop-upwards 180ms forwards linear;
+}
+
+
+// Link mode
+
+.dante-menu--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;
+  }
+}
+
+
+// BUTONS
+
+.dante-menu-buttons {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+.dante-menu-divider {
+  width: 1px;
+  height: $dante-menu-height - 18px;
+  margin: 9px 2px;
+  background: rgba($dante-menu-color,.2);
+  display: inline-block;
+  overflow: hidden;
+  cursor: default;
+  line-height: $dante-menu-height;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.dante-menu-button {
+  & {
+    min-width: 20px;
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    overflow: hidden;
+    text-align: center;
+    color: $dante-menu-icon-color;
+    cursor: pointer;
+    font-size: $dante-menu-icon-size;
+    line-height: $dante-menu-height;
+    //height: $menu-button-height;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+  &:hover{
+    // nada
+  }
+  &.active{
+    color: $dante-menu-icon-accent;
+  }
+
+  @if $dante-menu-border-radius {
+    &:first-child {
+      border-top-left-radius: $dante-menu-border-radius;
+      border-bottom-left-radius: $dante-menu-border-radius;
+      padding-left: 18px;
+    }
+    &:last-child {
+      border-top-right-radius: $dante-menu-border-radius;
+      border-bottom-right-radius: $dante-menu-border-radius;
+      padding-right: 18px;
+    }
+  }
+}
+
+.dante-menu-button--disabled {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+      -ms-user-select: none !important;
+          user-select: none !important;
+          opacity: .3;
+}
+
+
+// LINK
+
+.dante-menu-linkinput {
+  & {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    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: 14px;
+  box-sizing: border-box;
+  border-radius: $menu-border-radius;
+  appearance: none;
+  text-align: left;
+  font-family: $dante-font-family-sans;
+  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;
+}
+
+