mirror of
https://github.com/wassname/HackFlowy.git
synced 2026-07-21 12:20:42 +08:00
Markdown Editor button works
This commit is contained in:
Curtis SerVaas
+3
-1
@@ -3,7 +3,8 @@ var db = require('../lib/db');
|
||||
var NodeSchema = new db.Schema({
|
||||
text: {type: String},
|
||||
children: {type: Array},
|
||||
parents: {type: Array}
|
||||
parents: {type: Array},
|
||||
markdown: {type: Boolean}
|
||||
})
|
||||
|
||||
var SnapSchema = new db.Schema({
|
||||
@@ -181,6 +182,7 @@ function addNode(text, children, parents, callback){
|
||||
instance.text = text;
|
||||
instance.children = children;
|
||||
instance.parents = parents;
|
||||
instance.markdown = 0;
|
||||
addSnap(instance, now);
|
||||
|
||||
instance.save(function (err) {
|
||||
|
||||
@@ -5,6 +5,20 @@ $(function(){
|
||||
vo.thisView.createMarkDownBullet();
|
||||
});
|
||||
|
||||
//grab the rendered div.
|
||||
//(remove the content of everything else)
|
||||
//remove the classes.
|
||||
$("body").on("blur", "#marked-mathjax-input", function(){
|
||||
debugger;
|
||||
var editor = $("#marked-mathjax-input"); //(this is the text-area)
|
||||
var wrapper = editor.closest(".hoverWrap");
|
||||
var text = editor.siblings(".Current").html();
|
||||
var html = "<div>" + text + "</div>";
|
||||
|
||||
wrapper.html(html).addClass('markdown');
|
||||
//editor.remove() is redundant.
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("body").on("mouseover", "a.expandCollapse", function(event){
|
||||
|
||||
@@ -24,8 +24,13 @@ var Preview = {
|
||||
// Get the preview and buffer DIV's
|
||||
//
|
||||
Init: function () {
|
||||
this.timeout = null;
|
||||
this.mjRunning = false;
|
||||
this.oldText = null;
|
||||
|
||||
this.preview = document.getElementById("marked-mathjax-preview");
|
||||
this.buffer = document.getElementById("marked-mathjax-preview-buffer");
|
||||
this.preview.classList.add('Current'); //bad bugs happen if this isn't here.
|
||||
},
|
||||
|
||||
//
|
||||
@@ -47,6 +52,9 @@ var Preview = {
|
||||
preview.style.width = "90%";
|
||||
preview.style.height = "auto";
|
||||
preview.style.overflow = "auto";
|
||||
|
||||
buffer.classList.remove('Current');
|
||||
preview.classList.add('Current');
|
||||
|
||||
|
||||
// preview.style.display = "";
|
||||
|
||||
+35
-12
@@ -12,6 +12,7 @@ var showView = Backbone.View.extend({
|
||||
|
||||
tagName: 'li',
|
||||
className: "herez node",
|
||||
events: {"click .markdown" : "showMarkDownEditor"},
|
||||
|
||||
|
||||
//todo = refactor this function.
|
||||
@@ -30,7 +31,7 @@ var showView = Backbone.View.extend({
|
||||
that.$el.html(html);
|
||||
console.log("about to render textarea")
|
||||
|
||||
that.renderChildren();
|
||||
that.renderChildren();
|
||||
|
||||
return that;
|
||||
},
|
||||
@@ -74,18 +75,40 @@ var showView = Backbone.View.extend({
|
||||
var subList = "<ul class ='subList dd-list' data-id="+ id + "></ul>"
|
||||
var bullet = expandCollapse + zoomButton + "<span class='hoverWrap content'>" + textArea + "</span>" + subList;
|
||||
return bullet;
|
||||
},
|
||||
},
|
||||
|
||||
createMarkDownBullet: function(){
|
||||
var preview = "<div class='preview content' id='marked-mathjax-preview'>"+ this.model.get("text") + " </div>";
|
||||
var buffer = '<div class="preview content" id="marked-mathjax-preview-buffer" style="display:none; position:absolute; top:0; left: 0"></div>';
|
||||
var textareaInput = '<textarea id="marked-mathjax-input" onkeyup="Preview.Update()" name="comment" "autofocus"></textarea>';
|
||||
this.$el.find("textarea").remove();
|
||||
this.$el.children(".content").html(preview+buffer+textareaInput);
|
||||
Preview.Init();
|
||||
Preview.Update();
|
||||
return;
|
||||
},
|
||||
//text-area => MarkDownEditor.
|
||||
createMarkDownBullet: function(){
|
||||
var that = this;
|
||||
var textarea = that.$el.find("textarea");
|
||||
|
||||
var newDiv = "<div><p>" + textarea.val() + "</p></div>";
|
||||
textarea.remove();
|
||||
|
||||
that.$el.children(".hoverWrap").html(newDiv);
|
||||
|
||||
that.showMarkDownEditor();
|
||||
return;
|
||||
},
|
||||
|
||||
showMarkDownEditor: function(){
|
||||
var that = this;
|
||||
var hoverWrap = that.$el.children(".hoverWrap").removeClass("markdown");
|
||||
|
||||
|
||||
hoverWrap.children("div").attr("id", "marked-mathjax-preview");
|
||||
|
||||
var buffer = '<div class="preview content" id="marked-mathjax-preview-buffer" style="display:none; position:absolute; top:0; left: 0"> </div>';
|
||||
var textareaInput = '<textarea id="marked-mathjax-input" onkeyup="Preview.Update()" name="comment" "autofocus"></textarea>';
|
||||
hoverWrap.append(buffer+textareaInput);
|
||||
|
||||
setTimeout(function(){
|
||||
Preview.Init();
|
||||
Preview.Update();
|
||||
hoverWrap.children("textarea").val(that.model.get("text")).focus();
|
||||
}, 200);
|
||||
// setTimeout(function(){ MathJax.Callback(["CreatePreview",Preview]); }, 300);
|
||||
},
|
||||
|
||||
addNode: function(newNode, index, cur){
|
||||
var that = this;
|
||||
|
||||
+7118
File diff suppressed because it is too large
Load Diff
+487
@@ -0,0 +1,487 @@
|
||||
/*!
|
||||
* Bootstrap v2.2.2
|
||||
*
|
||||
* Copyright 2012 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
*/
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
*margin-right: .3em;
|
||||
line-height: 14px;
|
||||
vertical-align: text-top;
|
||||
background-image: url("../img/glyphicons-halflings.png");
|
||||
background-position: 14px 14px;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 9px;
|
||||
}
|
||||
/* White icons with optional class, or on hover/active states of certain elements */
|
||||
.icon-white,
|
||||
.nav-pills > .active > a > [class^="icon-"],
|
||||
.nav-pills > .active > a > [class*=" icon-"],
|
||||
.nav-list > .active > a > [class^="icon-"],
|
||||
.nav-list > .active > a > [class*=" icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
||||
.dropdown-menu > li > a:hover > [class^="icon-"],
|
||||
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
||||
.dropdown-menu > .active > a > [class^="icon-"],
|
||||
.dropdown-menu > .active > a > [class*=" icon-"],
|
||||
.dropdown-submenu:hover > a > [class^="icon-"],
|
||||
.dropdown-submenu:hover > a > [class*=" icon-"] {
|
||||
background-image: url("../img/glyphicons-halflings-white.png");
|
||||
}
|
||||
.icon-glass {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icon-music {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
.icon-search {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
.icon-envelope {
|
||||
background-position: -72px 0;
|
||||
}
|
||||
.icon-heart {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
.icon-star {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
.icon-star-empty {
|
||||
background-position: -144px 0;
|
||||
}
|
||||
.icon-user {
|
||||
background-position: -168px 0;
|
||||
}
|
||||
.icon-film {
|
||||
background-position: -192px 0;
|
||||
}
|
||||
.icon-th-large {
|
||||
background-position: -216px 0;
|
||||
}
|
||||
.icon-th {
|
||||
background-position: -240px 0;
|
||||
}
|
||||
.icon-th-list {
|
||||
background-position: -264px 0;
|
||||
}
|
||||
.icon-ok {
|
||||
background-position: -288px 0;
|
||||
}
|
||||
.icon-remove {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
.icon-zoom-in {
|
||||
background-position: -336px 0;
|
||||
}
|
||||
.icon-zoom-out {
|
||||
background-position: -360px 0;
|
||||
}
|
||||
.icon-off {
|
||||
background-position: -384px 0;
|
||||
}
|
||||
.icon-signal {
|
||||
background-position: -408px 0;
|
||||
}
|
||||
.icon-cog {
|
||||
background-position: -432px 0;
|
||||
}
|
||||
.icon-trash {
|
||||
background-position: -456px 0;
|
||||
}
|
||||
.icon-home {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
.icon-file {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
.icon-time {
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
.icon-road {
|
||||
background-position: -72px -24px;
|
||||
}
|
||||
.icon-download-alt {
|
||||
background-position: -96px -24px;
|
||||
}
|
||||
.icon-download {
|
||||
background-position: -120px -24px;
|
||||
}
|
||||
.icon-upload {
|
||||
background-position: -144px -24px;
|
||||
}
|
||||
.icon-inbox {
|
||||
background-position: -168px -24px;
|
||||
}
|
||||
.icon-play-circle {
|
||||
background-position: -192px -24px;
|
||||
}
|
||||
.icon-repeat {
|
||||
background-position: -216px -24px;
|
||||
}
|
||||
.icon-refresh {
|
||||
background-position: -240px -24px;
|
||||
}
|
||||
.icon-list-alt {
|
||||
background-position: -264px -24px;
|
||||
}
|
||||
.icon-lock {
|
||||
background-position: -287px -24px;
|
||||
}
|
||||
.icon-flag {
|
||||
background-position: -312px -24px;
|
||||
}
|
||||
.icon-headphones {
|
||||
background-position: -336px -24px;
|
||||
}
|
||||
.icon-volume-off {
|
||||
background-position: -360px -24px;
|
||||
}
|
||||
.icon-volume-down {
|
||||
background-position: -384px -24px;
|
||||
}
|
||||
.icon-volume-up {
|
||||
background-position: -408px -24px;
|
||||
}
|
||||
.icon-qrcode {
|
||||
background-position: -432px -24px;
|
||||
}
|
||||
.icon-barcode {
|
||||
background-position: -456px -24px;
|
||||
}
|
||||
.icon-tag {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
.icon-tags {
|
||||
background-position: -25px -48px;
|
||||
}
|
||||
.icon-book {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
.icon-bookmark {
|
||||
background-position: -72px -48px;
|
||||
}
|
||||
.icon-print {
|
||||
background-position: -96px -48px;
|
||||
}
|
||||
.icon-camera {
|
||||
background-position: -120px -48px;
|
||||
}
|
||||
.icon-font {
|
||||
background-position: -144px -48px;
|
||||
}
|
||||
.icon-bold {
|
||||
background-position: -167px -48px;
|
||||
}
|
||||
.icon-italic {
|
||||
background-position: -192px -48px;
|
||||
}
|
||||
.icon-text-height {
|
||||
background-position: -216px -48px;
|
||||
}
|
||||
.icon-text-width {
|
||||
background-position: -240px -48px;
|
||||
}
|
||||
.icon-align-left {
|
||||
background-position: -264px -48px;
|
||||
}
|
||||
.icon-align-center {
|
||||
background-position: -288px -48px;
|
||||
}
|
||||
.icon-align-right {
|
||||
background-position: -312px -48px;
|
||||
}
|
||||
.icon-align-justify {
|
||||
background-position: -336px -48px;
|
||||
}
|
||||
.icon-list {
|
||||
background-position: -360px -48px;
|
||||
}
|
||||
.icon-indent-left {
|
||||
background-position: -384px -48px;
|
||||
}
|
||||
.icon-indent-right {
|
||||
background-position: -408px -48px;
|
||||
}
|
||||
.icon-facetime-video {
|
||||
background-position: -432px -48px;
|
||||
}
|
||||
.icon-picture {
|
||||
background-position: -456px -48px;
|
||||
}
|
||||
.icon-pencil {
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
.icon-map-marker {
|
||||
background-position: -24px -72px;
|
||||
}
|
||||
.icon-adjust {
|
||||
background-position: -48px -72px;
|
||||
}
|
||||
.icon-tint {
|
||||
background-position: -72px -72px;
|
||||
}
|
||||
.icon-edit {
|
||||
background-position: -96px -72px;
|
||||
}
|
||||
.icon-share {
|
||||
background-position: -120px -72px;
|
||||
}
|
||||
.icon-check {
|
||||
background-position: -144px -72px;
|
||||
}
|
||||
.icon-move {
|
||||
background-position: -168px -72px;
|
||||
}
|
||||
.icon-step-backward {
|
||||
background-position: -192px -72px;
|
||||
}
|
||||
.icon-fast-backward {
|
||||
background-position: -216px -72px;
|
||||
}
|
||||
.icon-backward {
|
||||
background-position: -240px -72px;
|
||||
}
|
||||
.icon-play {
|
||||
background-position: -264px -72px;
|
||||
}
|
||||
.icon-pause {
|
||||
background-position: -288px -72px;
|
||||
}
|
||||
.icon-stop {
|
||||
background-position: -312px -72px;
|
||||
}
|
||||
.icon-forward {
|
||||
background-position: -336px -72px;
|
||||
}
|
||||
.icon-fast-forward {
|
||||
background-position: -360px -72px;
|
||||
}
|
||||
.icon-step-forward {
|
||||
background-position: -384px -72px;
|
||||
}
|
||||
.icon-eject {
|
||||
background-position: -408px -72px;
|
||||
}
|
||||
.icon-chevron-left {
|
||||
background-position: -432px -72px;
|
||||
}
|
||||
.icon-chevron-right {
|
||||
background-position: -456px -72px;
|
||||
}
|
||||
.icon-plus-sign {
|
||||
background-position: 0 -96px;
|
||||
}
|
||||
.icon-minus-sign {
|
||||
background-position: -24px -96px;
|
||||
}
|
||||
.icon-remove-sign {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.icon-ok-sign {
|
||||
background-position: -72px -96px;
|
||||
}
|
||||
.icon-question-sign {
|
||||
background-position: -96px -96px;
|
||||
}
|
||||
.icon-info-sign {
|
||||
background-position: -120px -96px;
|
||||
}
|
||||
.icon-screenshot {
|
||||
background-position: -144px -96px;
|
||||
}
|
||||
.icon-remove-circle {
|
||||
background-position: -168px -96px;
|
||||
}
|
||||
.icon-ok-circle {
|
||||
background-position: -192px -96px;
|
||||
}
|
||||
.icon-ban-circle {
|
||||
background-position: -216px -96px;
|
||||
}
|
||||
.icon-arrow-left {
|
||||
background-position: -240px -96px;
|
||||
}
|
||||
.icon-arrow-right {
|
||||
background-position: -264px -96px;
|
||||
}
|
||||
.icon-arrow-up {
|
||||
background-position: -289px -96px;
|
||||
}
|
||||
.icon-arrow-down {
|
||||
background-position: -312px -96px;
|
||||
}
|
||||
.icon-share-alt {
|
||||
background-position: -336px -96px;
|
||||
}
|
||||
.icon-resize-full {
|
||||
background-position: -360px -96px;
|
||||
}
|
||||
.icon-resize-small {
|
||||
background-position: -384px -96px;
|
||||
}
|
||||
.icon-plus {
|
||||
background-position: -408px -96px;
|
||||
}
|
||||
.icon-minus {
|
||||
background-position: -433px -96px;
|
||||
}
|
||||
.icon-asterisk {
|
||||
background-position: -456px -96px;
|
||||
}
|
||||
.icon-exclamation-sign {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
.icon-gift {
|
||||
background-position: -24px -120px;
|
||||
}
|
||||
.icon-leaf {
|
||||
background-position: -48px -120px;
|
||||
}
|
||||
.icon-fire {
|
||||
background-position: -72px -120px;
|
||||
}
|
||||
.icon-eye-open {
|
||||
background-position: -96px -120px;
|
||||
}
|
||||
.icon-eye-close {
|
||||
background-position: -120px -120px;
|
||||
}
|
||||
.icon-warning-sign {
|
||||
background-position: -144px -120px;
|
||||
}
|
||||
.icon-plane {
|
||||
background-position: -168px -120px;
|
||||
}
|
||||
.icon-calendar {
|
||||
background-position: -192px -120px;
|
||||
}
|
||||
.icon-random {
|
||||
background-position: -216px -120px;
|
||||
width: 16px;
|
||||
}
|
||||
.icon-comment {
|
||||
background-position: -240px -120px;
|
||||
}
|
||||
.icon-magnet {
|
||||
background-position: -264px -120px;
|
||||
}
|
||||
.icon-chevron-up {
|
||||
background-position: -288px -120px;
|
||||
}
|
||||
.icon-chevron-down {
|
||||
background-position: -313px -119px;
|
||||
}
|
||||
.icon-retweet {
|
||||
background-position: -336px -120px;
|
||||
}
|
||||
.icon-shopping-cart {
|
||||
background-position: -360px -120px;
|
||||
}
|
||||
.icon-folder-close {
|
||||
background-position: -384px -120px;
|
||||
}
|
||||
.icon-folder-open {
|
||||
background-position: -408px -120px;
|
||||
width: 16px;
|
||||
}
|
||||
.icon-resize-vertical {
|
||||
background-position: -432px -119px;
|
||||
}
|
||||
.icon-resize-horizontal {
|
||||
background-position: -456px -118px;
|
||||
}
|
||||
.icon-hdd {
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
.icon-bullhorn {
|
||||
background-position: -24px -144px;
|
||||
}
|
||||
.icon-bell {
|
||||
background-position: -48px -144px;
|
||||
}
|
||||
.icon-certificate {
|
||||
background-position: -72px -144px;
|
||||
}
|
||||
.icon-thumbs-up {
|
||||
background-position: -96px -144px;
|
||||
}
|
||||
.icon-thumbs-down {
|
||||
background-position: -120px -144px;
|
||||
}
|
||||
.icon-hand-right {
|
||||
background-position: -144px -144px;
|
||||
}
|
||||
.icon-hand-left {
|
||||
background-position: -168px -144px;
|
||||
}
|
||||
.icon-hand-up {
|
||||
background-position: -192px -144px;
|
||||
}
|
||||
.icon-hand-down {
|
||||
background-position: -216px -144px;
|
||||
}
|
||||
.icon-circle-arrow-right {
|
||||
background-position: -240px -144px;
|
||||
}
|
||||
.icon-circle-arrow-left {
|
||||
background-position: -264px -144px;
|
||||
}
|
||||
.icon-circle-arrow-up {
|
||||
background-position: -288px -144px;
|
||||
}
|
||||
.icon-circle-arrow-down {
|
||||
background-position: -312px -144px;
|
||||
}
|
||||
.icon-globe {
|
||||
background-position: -336px -144px;
|
||||
}
|
||||
.icon-wrench {
|
||||
background-position: -360px -144px;
|
||||
}
|
||||
.icon-tasks {
|
||||
background-position: -384px -144px;
|
||||
}
|
||||
.icon-filter {
|
||||
background-position: -408px -144px;
|
||||
}
|
||||
.icon-briefcase {
|
||||
background-position: -432px -144px;
|
||||
}
|
||||
.icon-fullscreen {
|
||||
background-position: -456px -144px;
|
||||
}
|
||||
+406
@@ -0,0 +1,406 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
|
||||
* Richard Clark (http://richclarkdesign.com)
|
||||
* http://cssreset.com
|
||||
*/
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var,
|
||||
b, i,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
outline:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
body {
|
||||
line-height:1;
|
||||
}
|
||||
article,aside,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section {
|
||||
display:block;
|
||||
}
|
||||
nav ul {
|
||||
list-style:none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes:none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content:'';
|
||||
content:none;
|
||||
}
|
||||
a {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
/* change colours to suit your needs */
|
||||
ins {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
}
|
||||
/* change colours to suit your needs */
|
||||
mark {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
font-style:italic;
|
||||
font-weight:bold;
|
||||
}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
abbr[title], dfn[title] {
|
||||
border-bottom:1px dotted;
|
||||
cursor:help;
|
||||
}
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
/* change border colour to suit your needs */
|
||||
hr {
|
||||
display:block;
|
||||
height:1px;
|
||||
border:0;
|
||||
border-top:1px solid #cccccc;
|
||||
margin:1em 0;
|
||||
padding:0;
|
||||
}
|
||||
input, select {
|
||||
vertical-align:middle;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
.ui-tabs {
|
||||
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
padding: .2em;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
margin: 0;
|
||||
padding: .2em .2em 0;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 1px .2em 0 0;
|
||||
border-bottom-width: 0;
|
||||
margin-left: -3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li a {
|
||||
float: left;
|
||||
padding: .5em 1em;
|
||||
color: rgb(51, 51, 51);
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
|
||||
padding-bottom: 1px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
background: rgb(217,217,217);
|
||||
}
|
||||
/*.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
|
||||
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
|
||||
cursor: text;
|
||||
}*/
|
||||
/* first selector in group seems obsolete, but required
|
||||
* to overcome bug in Opera applying cursor: text overall if defined elsewhere...
|
||||
*/
|
||||
.ui-tabs .ui-tabs-nav li a,
|
||||
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
padding: 1em 1.4em;
|
||||
border-radius: 0px 5px 5px 5px;
|
||||
background: rgb(217,217,217);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
.tool-container {
|
||||
background-color: #d0cbcb;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%, #d0cbcb), color-stop(100%, #e9e5e5));
|
||||
background: -moz-linear-gradient(top, #d0cbcb 14%, #e9e5e5 100%);
|
||||
background: -ms-linear-gradient(top, #d0cbcb 14%,#e9e5e5 100%);
|
||||
background: linear-gradient(to bottom, #d0cbcb 14%,#e9e5e5 100%);
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNCUiIHN0b3AtY29sb3I9IiNkMGNiY2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTllNWU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cbcb', endColorstr='#e9e5e5',GradientType=0 );
|
||||
background-size: 100% 100%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 15px #000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tool-container.tool-top, .tool-container.tool-bottom {
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #beb8b8 ; /* #B1A9A9 */
|
||||
}
|
||||
|
||||
.tool-items {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tool-top .tool-item, .tool-bottom .tool-item {
|
||||
float: left;
|
||||
border-right: 1px solid #e2dfdf;
|
||||
border-left: 1px solid #9f9898;
|
||||
}
|
||||
|
||||
.tool-left .tool-item, .tool-right .tool-item {
|
||||
height: 34px;
|
||||
border-top: 1px solid #e2dfdf;
|
||||
border-bottom: 1px solid #9f9898;
|
||||
}
|
||||
|
||||
|
||||
.tool-item {
|
||||
height: 100%;
|
||||
display: block;
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-item:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tool-left .tool-item:first-child, .tool-right .tool-item:first-child {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.tool-item:last-child {
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tool-item.selected, .tool-item:hover {
|
||||
background: #a79f9f;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a79f9f), color-stop(93%, #e2dfdf));
|
||||
background: -moz-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
|
||||
background: -ms-linear-gradient(top, #a79f9f 0%, #e2dfdf 93%);
|
||||
background: linear-gradient(to bottom, #a79f9f 0%, #e2dfdf 93%);
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3OWY5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iI2UyZGZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a79f9f', endColorstr='#e2dfdf',GradientType=0 );
|
||||
}
|
||||
|
||||
.tool-top .tool-item:last-child:hover, .tool-bottom .tool-item:last-child:hover {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.tool-top .tool-item:first-child:hover, .tool-bottom .tool-item:first-child:hover {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.tool-left .tool-item:last-child:hover, .tool-right .tool-item:last-child:hover {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.tool-left .tool-item:first-child:hover, .tool-right .tool-item:first-child:hover {
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.tool-container .arrow {
|
||||
width:0;
|
||||
height:0;
|
||||
position: absolute;
|
||||
border-width:7px;
|
||||
border-style:solid;
|
||||
}
|
||||
|
||||
.tool-container.tool-top .arrow {
|
||||
border-color: #e9e5e5 transparent transparent;
|
||||
left: 50%;
|
||||
bottom: -14px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.tool-container.tool-bottom .arrow {
|
||||
border-color: transparent transparent #e9e5e5;
|
||||
left: 50%;
|
||||
top: -14px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.tool-container.tool-left .arrow {
|
||||
border-color: transparent transparent transparent #E9E5E5;
|
||||
top: 50%;
|
||||
right: -14px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.tool-container.tool-right .arrow {
|
||||
border-color: transparent #E9E5E5 transparent transparent;
|
||||
top: 50%;
|
||||
left: -14px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
color: #89CDE4;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.demo-link:hover {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
+5
-5
@@ -2,11 +2,11 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/normalize.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/toolbar.css" rel="stylesheet" />
|
||||
<link href="stylesheets/bootstrap.icons.css" rel="stylesheet" />
|
||||
<link href="stylesheets/externalCSS/reset.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/externalCSS/normalize.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/externalCSS/bootstrap.css" rel="stylesheet" type="text/css">
|
||||
<link href="stylesheets/externalCSS/toolbar.css" rel="stylesheet" />
|
||||
<link href="stylesheets/externalCSS/bootstrap.icons.css" rel="stylesheet" />
|
||||
<link href="stylesheets/style.css" rel="stylesheet" type="text/css">
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user