dante2-editor 0.2.0

data/app/styles/dante/_needsorder.scss

@@ -0,0 +1,209 @@
+
+.editable .markup--anchor,
+.editable .graf--sectionCaption {
+    cursor: text;
+}
+
+/*
+.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 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;
+}
+*/
+
+
+// .aspectRatioPlaceholder {
+//     margin: 0 auto;
+//     position: relative;
+//     width: 100%;
+// }
+
+// .is-postEditMode .graf-image:before,
+// .is-postEditMode .iframeContainer:before {
+//     bottom: 0;
+//     content: "";
+//     left: 0;
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     z-index: 500;
+// }
+
+// .graf--figure.is-mediaFocused .graf-image,
+// .graf--figure.is-mediaFocused iframe {
+//     box-shadow: 0 0 0 3px #57ad68;
+// }
+
+// .aspectRatioPlaceholder.is-locked .graf-image,
+// .aspectRatioPlaceholder.is-locked .graf-imageAnchor {
+//     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%;
+// }
+
+.is-postEditMode iframe {
+    border: 3px solid rgba(255, 255, 255, 0);
+}
+
+.graf--mixtapeEmbed {
+    border-color: rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $dante-font-family-sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    margin-bottom: 40px;
+    margin-top: 40px;
+    max-height: 310px;
+    max-width: 700px;
+    overflow: hidden;
+    padding: 30px;
+    position: relative;
+}
+
+.mixtapeImage {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    float: right;
+    height: 310px;
+    margin: -30px -30px 0 25px;
+    width: 310px;
+}
+
+.mixtapeImage--empty {
+    height: 0;
+    width: 0;
+}
+
+.graf--mixtapeEmbed {
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $dante-font-family-sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+}
+
+.markup--mixtapeEmbed-strong {
+    color: #000;
+    display: block;
+    font-family: $dante-font-family-sans;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 0px;
+}
+
+.markup--mixtapeEmbed-em {
+    display: block;
+    font-size: 16px;
+    font-style: normal;
+    margin-bottom: 10px;
+    max-height: 120px;
+    overflow: hidden;
+}
+
+/*CAPTION*/
+
+
+// .imageCaption:before {
+//     border-top: 1px solid rgba(0, 0, 0, 0.15);
+//     content: "";
+//     display: block;
+//     margin-bottom: 10px;
+//     margin-left: 75%;
+//     width: 25%;
+// }
+
+// .imageCaption {
+//     color: rgba(0, 0, 0, 0.6);
+//     font-family: $dante-font-family-serif;
+//     font-size: 14px;
+//     font-style: italic;
+//     font-weight: 400;
+//     left: -172px;
+//     letter-spacing: 0.01rem;
+//     line-height: 1.4;
+//     margin-top: 0;
+//     outline: 0 none;
+//     position: absolute;
+//     text-align: right;
+//     top: 0;
+//     width: 150px;
+//     z-index: 300;
+// }
+
+// .graf--figure.is-mediaFocused .imageCaption,
+// .graf--figure.is-defaultValue.is-selected .imageCaption,
+// section.is-mediaFocused .graf--sectionCaption,
+// .graf--sectionCaption.is-defaultValue.is-selected {
+//     display: block;
+// }
+
+// figure.is-defaultValue .imageCaption,
+// .graf--sectionCaption.is-defaultValue {
+//     display: none;
+// }
+
+.editor a {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.defaultValue {
+  color: rgba(0,0,0,0.3);
+}
+
+section:first-child > .section-divider,
+section.is-backgrounded + section > .section-divider {
+    display: none;
+}
+// .postArticle .layoutSingleColumn,
+// .postFooter--loggedOut .layoutSingleColumn {
+//     width: 700px;
+// }
+
+// .layoutSingleColumn {
+//     margin: 0 auto;
+//     width: 640px;
+// }
+
+.defaultValue--prompt {
+    font-family: $dante-font-family-sans;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+}

data/app/styles/dante/_popover.scss

@@ -0,0 +1,212 @@
+// Base popover styles
+
+.dante-popover {
+  & {
+    overflow: hidden;
+    position: absolute;
+    z-index: 900;
+    visibility: visible;
+    font-size: 12px;
+    text-align: center;
+    pointer-events: auto;
+    padding: 15px;
+    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
+    letter-spacing: -0.02em;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1.4;
+
+    opacity: 0;
+  }
+  &.is-active {
+    opacity: 1;
+  }
+  .popover-inner {
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
+  }
+}
+
+.popover.is-active {
+  visibility: visible;
+}
+
+.popover-inner {
+  & {
+    position: relative;
+    max-width: 300px;
+    border-radius: $menu-border-radius;
+    padding: 8px;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+
+
+// Defatul tooltip
+
+.popover--tooltip {
+  & {
+    pointer-events: none;
+  }
+
+  .popover-inner {
+    // background-color: $menu-tone;
+    background: $menu-tone;
+    border-radius: 4px;
+    color: #fff;
+  }
+}
+
+
+
+// LINK tooltip
+
+.popover--Linktooltip {
+  & {
+    pointer-events: auto;
+    z-index: 300;
+    word-break: break-word;
+    word-wrap: break-word;
+  }
+  .popover-inner {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+}
+
+
+
+// Align tooltip
+
+.popover--Aligntooltip {
+  .popover-inner {
+    padding: 0;
+    background: $menu-tone;
+    color: #fff;
+  }
+}
+
+
+// Align tooltip
+.popover--typeahead {
+  .popover-inner {
+    & {
+      position: relative;
+      padding: 14px;
+      border-radius: 4px;
+    }
+
+    ul{
+      padding-left: 0px;
+    }
+  }
+}
+
+
+// popover--typeahead
+// typeahead
+// typeahead--mention
+// popover--maxWidth360
+// popover--bottom
+
+.popover.popover--maxWidth360 .popover-inner {
+  max-width: 360px;
+}
+
+.popover:not(.popover--flexible) .popover-inner {
+  max-width: 280px;
+}
+
+
+
+
+/*
+.popover.is-withTransition {
+  -webkit-transition:opacity 100ms ease;
+  transition:opacity 100ms ease;
+}
+
+.is-resizing .popover {
+  opacity:0;
+  -webkit-transition:opacity 0 ease;
+  transition:opacity 0 ease;
+}
+*/
+
+.popover-arrow {
+  position: absolute;
+}
+.popover-arrow:after {
+  background-color: $menu-tone;
+}
+
+.popover--top .popover-arrow,
+.popover--bottom .popover-arrow {
+  left: 50%;
+  margin-left: -$tooltip-caret-size/2;
+}
+
+.popover--left .popover-arrow,
+.popover--right .popover-arrow {
+  top: 50%;
+  margin-top: -$tooltip-caret-size/2;
+}
+
+.popover--top .popover-arrow {
+  // bottom: 1px;
+  // clip: rect(0 18px 18px 4px);
+}
+
+.popover--right .popover-arrow {
+  left: 1px;
+  // clip: rect(-4px 14px 18px 0);
+}
+
+.popover--bottom .popover-arrow {
+  top: 1px;
+  // clip: rect(0 18px 14px -1px);
+}
+
+.popover--left .popover-arrow {
+  right: 1px;
+  // clip: rect(-4px 14px 18px 0);
+}
+
+.popover-arrow:after {
+  content: '';
+  display: block;
+  width: $tooltip-caret-size;
+  height: $tooltip-caret-size;
+}
+
+.popover--top .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(-5px,-5px);
+  -ms-transform: rotate(45deg) translate(-5px,-5px);
+  transform: rotate(45deg) translate(-5px,-5px);
+  box-shadow: 1px 1px 1px -1px $menu-tone;
+}
+
+.popover--right .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(6px,-6px);
+  -ms-transform: rotate(45deg) translate(6px,-6px);
+  transform: rotate(45deg) translate(6px,-6px);
+  box-shadow: -1px 1px 1px -1px $menu-tone;
+}
+
+.popover--bottom .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(6px,6px);
+  -ms-transform: rotate(45deg) translate(6px,6px);
+  transform: rotate(45deg) translate(6px,6px);
+  box-shadow: -1px -1px 1px -1px $menu-tone;
+}
+
+.popover--left .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(-6px,6px);
+  -ms-transform: rotate(45deg) translate(-6px,6px);
+  transform: rotate(45deg) translate(-6px,6px);
+  box-shadow: 1px -1px 1px -1px $menu-tone;
+}

data/app/styles/dante/_post.scss

@@ -0,0 +1,67 @@
+.postArticle {
+  position: relative;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  .layoutSingleColumn {
+    & {
+      width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    @media (max-width: 800px) {
+      width: 640px;
+    }
+    @media (max-width: 680px) {
+      width: auto;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  }
+}
+
+.postWrapper,
+.postWrapper-inner {
+  position: relative;
+  @include clearfix;
+}
+
+.postWrapper {
+  overflow: hidden;
+
+  .is-postEditMode &            { display: none; }
+  .is-postEditModeInitialized & { display: block; }
+}
+
+.postContent {
+  font-family: $dante-font-family-serif;
+  letter-spacing: 0.01rem;
+  font-weight: 400;
+  font-style: normal;
+  font-size: $dante-editor-font-size;
+  line-height: $dante-editor-line-height;
+}
+
+.postField {
+  &, &:focus {
+    outline: 0;
+    word-break: break-word;
+    word-wrap: break-word;
+  }
+}
+
+.postField--body {
+  @include clearfix;
+  margin-bottom: 30px;
+}
+
+.section--last {
+  padding-bottom: 5px;
+}
+
+.section-content {
+  @include clearfix;
+}
+
+.section-inner {
+  position: relative;
+}