activeadmin_medium_editor 0.1.3 → 0.2.9

data/app/assets/stylesheets/activeadmin/medium_editor/components/_toolbar.scss

@@ -0,0 +1,98 @@
+%medium-toolbar-arrow {
+    border-style: solid;
+    content: '';
+    display: block;
+    height: 0;
+    left: 50%;
+    margin-left: -8px;
+    position: absolute;
+    width: 0;
+}
+
+.medium-toolbar-arrow-under:after {
+    @extend %medium-toolbar-arrow;
+    border-width: 8px 8px 0 8px;
+}
+
+.medium-toolbar-arrow-over:before {
+    @extend %medium-toolbar-arrow;
+    border-width: 0 8px 8px 8px;
+    top: -8px;
+}
+
+.medium-editor-toolbar {
+    font-family: $font-sans-serif;
+    font-size: 16px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    z-index: $z-toolbar;
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        float: left;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        button {
+            box-sizing: border-box;
+            cursor: pointer;
+            display: block;
+            font-size: 14px;
+            line-height: 1.33;
+            margin: 0;
+            padding: 15px;
+            text-decoration: none;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        .medium-editor-action-underline {
+            text-decoration: underline;
+        }
+
+        .medium-editor-action-pre {
+            font-family: $font-fixed;
+            font-size: 12px;
+            font-weight: 100;
+            padding: 15px 0;
+        }
+    }
+}
+
+.medium-editor-toolbar-active {
+    visibility: visible;
+}
+
+.medium-editor-sticky-toolbar {
+    position: fixed;
+    top: 1px;
+}
+
+.medium-editor-relative-toolbar {
+  position: relative;
+}
+
+.medium-editor-toolbar-active.medium-editor-stalker-toolbar {
+    animation: medium-editor-pop-upwards 160ms forwards linear;
+}
+
+.medium-editor-toolbar-actions {
+    @extend %clearfix;
+}
+
+.medium-editor-action-bold {
+    font-weight: bolder;
+}
+
+.medium-editor-action-italic {
+    font-style: italic;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/medium_editor.scss

@@ -0,0 +1,31 @@
+@import "settings";
+@import "animations/image-loading";
+@import "animations/pop-upwards";
+@import "components/anchor-preview";
+@import "components/file-dragging";
+@import "components/placeholder";
+@import "components/toolbar";
+@import "components/toolbar-form";
+@import "util/clearfix";
+
+// contenteditable rules
+.medium-editor-element {
+    word-wrap: break-word;
+    min-height: 30px;
+
+    img {
+        max-width: 100%;
+    }
+
+    sub {
+        vertical-align: sub;
+    }
+
+    sup {
+        vertical-align: super;
+    }
+}
+
+.medium-editor-hidden {
+    display: none;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/themes/beagle.scss

@@ -0,0 +1,120 @@
+// theme settings
+$medium-editor-bgcolor: #000;
+$medium-editor-button-size: 40px;
+$medium-editor-button-active-text-color: #a2d7c7;
+$medium-editor-hover-color: $medium-editor-bgcolor;
+$medium-editor-link-color: #ccc;
+$medium-editor-border-radius: 50px;
+$medium-editor-placeholder-color: #f8f5f3;
+
+// theme rules
+.medium-toolbar-arrow-under:after {
+    border-color: $medium-editor-bgcolor transparent transparent transparent;
+    top: $medium-editor-button-size;
+}
+
+.medium-toolbar-arrow-over:before {
+    border-color: transparent transparent $medium-editor-bgcolor transparent;
+}
+
+.medium-editor-toolbar {
+    background-color: $medium-editor-bgcolor;
+    border: none;
+    border-radius: $medium-editor-border-radius;
+
+    li {
+        button {
+            background-color: transparent;
+            border: none;
+            box-sizing: border-box;
+            color: $medium-editor-link-color;
+            height: $medium-editor-button-size;
+            min-width: $medium-editor-button-size;
+            padding: 5px 12px;
+            transition: background-color .2s ease-in, color .2s ease-in;
+            &:hover {
+                background-color: $medium-editor-hover-color;
+                color: $medium-editor-button-active-text-color;
+            }
+        }
+
+        .medium-editor-button-first {
+            border-bottom-left-radius: $medium-editor-border-radius;
+            border-top-left-radius: $medium-editor-border-radius;
+            padding-left: 24px;
+        }
+
+        .medium-editor-button-last {
+            border-bottom-right-radius: $medium-editor-border-radius;
+            border-right: none;
+            border-top-right-radius: $medium-editor-border-radius;
+            padding-right: 24px
+        }
+
+        .medium-editor-button-active {
+            background-color: $medium-editor-hover-color;
+            color: $medium-editor-button-active-text-color;
+        }
+    }
+}
+
+.medium-editor-toolbar-form {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: $medium-editor-link-color;
+    overflow: hidden;
+
+    .medium-editor-toolbar-input {
+        background: $medium-editor-bgcolor;
+        box-sizing: border-box;
+        color: $medium-editor-link-color;
+        height: $medium-editor-button-size;
+        padding-left: 16px;
+        width: 220px;
+
+        &::-webkit-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-moz-placeholder { /* Firefox 18- */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &::-moz-placeholder {  /* Firefox 19+ */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-ms-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+    }
+
+    a {
+        color: $medium-editor-link-color;
+        transform: translateY(2px);
+    }
+
+    .medium-editor-toolbar-close {
+      margin-right: 16px;
+    }
+}
+
+.medium-editor-toolbar-anchor-preview {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    padding: 5px 12px;
+}
+
+.medium-editor-anchor-preview {
+  a {
+    color: $medium-editor-link-color;
+    text-decoration: none;
+  }
+}
+
+.medium-editor-toolbar-actions {
+  li, button {
+    border-radius: $medium-editor-border-radius;
+  }
+}

data/app/assets/stylesheets/activeadmin/medium_editor/themes/bootstrap.scss

@@ -0,0 +1,101 @@
+// theme settings
+$medium-editor-bgcolor: #428bca;
+$medium-editor-border-color: #357ebd;
+$medium-editor-button-size: 60px;
+$medium-editor-button-active-text-color: #fff;
+$medium-editor-hover-color: #3276b1;
+$medium-editor-link-color: #fff;
+$medium-editor-border-radius: 4px;
+$medium-editor-placeholder-color: #fff;
+
+// theme rules
+.medium-toolbar-arrow-under:after {
+    border-color: $medium-editor-bgcolor transparent transparent transparent;
+    top: $medium-editor-button-size;
+}
+
+.medium-toolbar-arrow-over:before {
+    border-color: transparent transparent $medium-editor-bgcolor transparent;
+}
+
+.medium-editor-toolbar {
+    background-color: $medium-editor-bgcolor;
+    border: 1px solid $medium-editor-border-color;
+    border-radius: $medium-editor-border-radius;
+
+    li {
+        button {
+            background-color: transparent;
+            border: none;
+            border-right: 1px solid $medium-editor-border-color;
+            box-sizing: border-box;
+            color: $medium-editor-link-color;
+            height: $medium-editor-button-size;
+            min-width: $medium-editor-button-size;
+            transition: background-color .2s ease-in, color .2s ease-in;
+            &:hover {
+                background-color: $medium-editor-hover-color;
+                color: $medium-editor-button-active-text-color;
+            }
+        }
+
+        .medium-editor-button-first {
+            border-bottom-left-radius: $medium-editor-border-radius;
+            border-top-left-radius: $medium-editor-border-radius;
+        }
+
+        .medium-editor-button-last {
+            border-bottom-right-radius: $medium-editor-border-radius;
+            border-right: none;
+            border-top-right-radius: $medium-editor-border-radius;
+        }
+
+        .medium-editor-button-active {
+            background-color: $medium-editor-hover-color;
+            color: $medium-editor-button-active-text-color;
+        }
+    }
+}
+
+.medium-editor-toolbar-form {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: #fff;
+
+    .medium-editor-toolbar-input {
+        background: $medium-editor-bgcolor;
+        color: $medium-editor-link-color;
+        height: $medium-editor-button-size;
+
+        &::-webkit-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-moz-placeholder { /* Firefox 18- */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &::-moz-placeholder {  /* Firefox 19+ */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-ms-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+    }
+
+    a {
+        color: $medium-editor-link-color;
+    }
+}
+
+.medium-editor-toolbar-anchor-preview {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: $medium-editor-link-color;
+}
+
+.medium-editor-placeholder:after {
+    color: $medium-editor-border-color;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/themes/default.scss

@@ -0,0 +1,87 @@
+// theme settings
+$medium-editor-bgcolor: #242424;
+$medium-editor-button-size: 50px;
+$medium-editor-border-radius: 5px;
+
+// theme rules
+.medium-toolbar-arrow-under:after {
+    border-color: $medium-editor-bgcolor transparent transparent transparent;
+    top: $medium-editor-button-size;
+}
+
+.medium-toolbar-arrow-over:before {
+    border-color: transparent transparent $medium-editor-bgcolor transparent;
+    top: -8px;
+}
+
+.medium-editor-toolbar {
+    background-color: $medium-editor-bgcolor;
+    background: linear-gradient(to bottom, $medium-editor-bgcolor, rgba($medium-editor-bgcolor, 0.75));
+    border: 1px solid #000;
+    border-radius: $medium-editor-border-radius;
+    box-shadow: 0 0 3px #000;
+
+    li {
+        button {
+            background-color: $medium-editor-bgcolor;
+            background: linear-gradient(to bottom, $medium-editor-bgcolor, rgba($medium-editor-bgcolor, 0.89));
+            border: 0;
+            border-right: 1px solid #000;
+            border-left: 1px solid #333;
+            border-left: 1px solid rgba(#fff, .1);
+            box-shadow: 0 2px 2px rgba(0,0,0,0.3);
+            color: #fff;
+            height: $medium-editor-button-size;
+            min-width: $medium-editor-button-size;
+            transition: background-color .2s ease-in;
+
+            &:hover {
+                background-color: #000;
+                color: yellow;
+            }
+        }
+
+        .medium-editor-button-first {
+            border-bottom-left-radius: $medium-editor-border-radius;
+            border-top-left-radius: $medium-editor-border-radius;
+        }
+
+        .medium-editor-button-last {
+            border-bottom-right-radius: $medium-editor-border-radius;
+            border-top-right-radius: $medium-editor-border-radius;
+        }
+
+        .medium-editor-button-active {
+            background-color: #000;
+            background: linear-gradient(to bottom, $medium-editor-bgcolor, rgba(#000, 0.89));
+            color: #fff;
+        }
+    }
+}
+
+.medium-editor-toolbar-form {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: #999;
+
+    .medium-editor-toolbar-input {
+        background: $medium-editor-bgcolor;
+        box-sizing: border-box;
+        color: #ccc;
+        height: $medium-editor-button-size;
+    }
+
+    a {
+        color: #fff;
+    }
+}
+
+.medium-editor-toolbar-anchor-preview {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: #fff;
+}
+
+.medium-editor-placeholder:after {
+    color: #b3b3b1;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/themes/flat.scss

@@ -0,0 +1,90 @@
+// theme settings
+$medium-editor-bgcolor: #57ad68;
+$medium-editor-border-color: #fff;
+$medium-editor-button-size: 60px;
+$medium-editor-button-active-text-color: #fff;
+$medium-editor-link-color: #fff;
+$medium-editor-placeholder-color: #fff;
+
+// theme rules
+.medium-toolbar-arrow-under:after {
+    top: $medium-editor-button-size;
+    border-color: $medium-editor-bgcolor transparent transparent transparent;
+}
+
+.medium-toolbar-arrow-over:before {
+    top: -8px;
+    border-color: transparent transparent $medium-editor-bgcolor transparent;
+}
+
+.medium-editor-toolbar {
+    background-color: $medium-editor-bgcolor;
+
+    li {
+        padding: 0;
+
+        button {
+            min-width: $medium-editor-button-size;
+            height: $medium-editor-button-size;
+            border: none;
+            border-right: 1px solid lighten($medium-editor-bgcolor, 20);
+            background-color: transparent;
+            color: $medium-editor-link-color;
+            transition: background-color .2s ease-in, color .2s ease-in;
+            &:hover {
+                background-color: darken($medium-editor-bgcolor, 20);
+                color: $medium-editor-button-active-text-color;
+            }
+        }
+
+        .medium-editor-button-active {
+            background-color: darken($medium-editor-bgcolor, 30);
+            color: $medium-editor-button-active-text-color;
+        }
+
+        .medium-editor-button-last {
+            border-right: none;
+        }
+    }
+}
+
+.medium-editor-toolbar-form {
+    .medium-editor-toolbar-input {
+        height: $medium-editor-button-size;
+        background: $medium-editor-bgcolor;
+        color: $medium-editor-link-color;
+
+        &::-webkit-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+
+        &:-moz-placeholder { /* Firefox 18- */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+
+        &::-moz-placeholder {  /* Firefox 19+ */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+
+        &:-ms-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+    }
+
+    a {
+        color: $medium-editor-link-color;
+    }
+}
+
+.medium-editor-toolbar-anchor-preview {
+    background: $medium-editor-bgcolor;
+    color: $medium-editor-link-color;
+}
+
+.medium-editor-placeholder:after {
+    color: lighten($medium-editor-bgcolor, 20);
+}