easylinux/BootstrapPageGenerator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading toolbox

Browse Source
This commit is contained in:
Jesus Herman
2015-12-04 14:57:08 +01:00
parent 2b18ace6d1
commit ce1b0fa8ac
2 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
css/layoutit.css
View File

@@ -21,11 +21,11 @@ body {
} }
.navbar-inverse .brand {width:180px; color:#fff; } .navbar-inverse .brand {width:180px; color:#fff; }
.brand img {float:left; margin:2px 10px 0 0; } .brand img {float:left; margin:2px 10px 0 0; }
.brand .label { .brand .label {
position:relative; position:relative;
left:10px; left:10px;
top:-3px; top:-3px;
font-weight:normal; font-weight:normal;
font-size:9px; font-size:9px;
background:#666; background:#666;
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7); -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
@@ -115,11 +115,11 @@ body {
-o-transition: all 500ms ease; -o-transition: all 500ms ease;
transition: all 500ms ease; transition: all 500ms ease;
} }
.demo .lyrow:hover > .drag, .demo .lyrow:hover > .drag,
.demo .lyrow:hover > .configuration, .demo .lyrow:hover > .configuration,
.demo .lyrow:hover > .remove, .demo .lyrow:hover > .remove,
.demo .box:hover .drag, .demo .box:hover .drag,
.demo .box:hover .configuration, .demo .box:hover .configuration,
.demo .box:hover .remove { filter: alpha(opacity=100); opacity: 1; } .demo .box:hover .remove { filter: alpha(opacity=100); opacity: 1; }
.edit .demo .row-fluid:before { .edit .demo .row-fluid:before {
background-color: #F5F5F5; background-color: #F5F5F5;
@@ -173,7 +173,7 @@ body {
/* preview */ /* preview */
body.devpreview { margin-left:0px;} body.devpreview { margin-left:0px;}
.devpreview .sidebar-nav { .devpreview .sidebar-nav {
left:-200px; left:-200px;
-webkit-transition: all 0ms ease; -webkit-transition: all 0ms ease;
-moz-transition: all 0ms ease; -moz-transition: all 0ms ease;
@@ -198,3 +198,16 @@ body.devpreview { margin-left:0px;}
#downloadModal textarea { width:100%;height:280px;resize: none;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; } #downloadModal textarea { width:100%;height:280px;resize: none;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; }
#editorModal {width:640px;} #editorModal {width:640px;}
a.language-selected { font-style: italic; font-weight: bold; } a.language-selected { font-style: italic; font-weight: bold; }
.toolbox-reset {
background: inherit;
color: inherit;
display: inherit;
/*font-family: inherit;*/
/*font-size: inherit;*/
line-height: inherit;
margin: inherit;
padding: inherit;
-webkit-text-size-adjust: inherit;
-ms-text-size-adjust: inherit;
}

73
index.html
View File

@@ -10,7 +10,8 @@
<title>Bootstrap Layout</title> <title>Bootstrap Layout</title>
<!-- Le styles --> <!-- Le styles -->
<link href="css/bootstrap-combined.min.css" rel="stylesheet"> <!-- <link href="css/bootstrap-combined.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://d23nuec95rapgw.cloudfront.net/apps/front_end/assets/ui_toolbox/main-67121e1c236c4e6e808a64009b92cc7851813910fee5e66185ebbf45d7ee9756.css">
<link href="css/layoutit.css" rel="stylesheet"> <link href="css/layoutit.css" rel="stylesheet">
<link href="css/docs.min.css" rel="stylesheet"> <link href="css/docs.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
@@ -42,7 +43,7 @@
</style> </style>
</head> </head>
<body style="min-height: 660px; cursor: auto;" class="edit"> <body style="min-height: 660px; cursor: auto;" class="edit toolbox-reset">
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
@@ -71,7 +72,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<!--/.nav-collapse --> <!--/.nav-collapse -->
</div> </div>
</div> </div>
</div> </div>
@@ -192,10 +193,10 @@
<div class="span12 column"> <div class="span12 column">
<div class="row-fluid clearfix"> <div class="row-fluid clearfix">
<div class="span6 column"> <div class="span6 column">
</div> </div>
<div class="span6 column"> <div class="span6 column">
</div> </div>
</div> </div>
</div> </div>
@@ -215,7 +216,7 @@
</div> </div>
</li> </li>
<li style="display: none;" class="boxes" id="elmBase"> <li style="display: none;" class="boxes" id="elmBase">
<div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span>
<span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Align <span class="caret"></span></a> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Align <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="active"><a href="#" rel="">Default</a></li> <li class="active"><a href="#" rel="">Default</a></li>
@@ -632,48 +633,48 @@
</div> </div>
<div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span><span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> </span> <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span><span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> </span>
<div class="preview">Color <span class="label label-important">NEW!</span></div> <div class="preview">Color <span class="label label-important">NEW!</span></div>
<div class="view"> <div class="view">
<style> <style>
.color-swatches .brand-primary .color-swatches .brand-primary
{ {
background-color: #428BCA; background-color: #428BCA;
} }
.color-swatches .brand-success .color-swatches .brand-success
{ {
background-color: #5CB85C; background-color: #5CB85C;
} }
.color-swatches .brand-info .color-swatches .brand-info
{ {
background-color: #5BC0DE; background-color: #5BC0DE;
} }
.color-swatches .brand-warning .color-swatches .brand-warning
{ {
background-color: #F0AD4E; background-color: #F0AD4E;
} }
.color-swatches .brand-danger .color-swatches .brand-danger
{ {
background-color: #D9534F; background-color: #D9534F;
} }
.color-swatches .gray-darker .color-swatches .gray-darker
{ {
background-color: #222222; background-color: #222222;
} }
.color-swatches .gray-dark .color-swatches .gray-dark
{ {
background-color: #333333; background-color: #333333;
} }
.color-swatches .gray .color-swatches .gray
{ {
background-color: #555555; background-color: #555555;
} }
.color-swatches .gray-light .color-swatches .gray-light
{ {
background-color: #999999; background-color: #999999;
} }
.color-swatches .gray-lighter .color-swatches .gray-lighter
{ {
background-color: #EEEEEE; background-color: #EEEEEE;
} }
</style> </style>
<div class="bs-example"> <div class="bs-example">
<div class="color-swatches"> <div class="color-swatches">
@@ -1015,7 +1016,7 @@
<li class="" ><a href="#" rel="panel-danger">Danger</a></li> <li class="" ><a href="#" rel="panel-danger">Danger</a></li>
</ul> </ul>
</span> </span>
</span>--> </span>-->
<div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a> <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -1860,15 +1861,15 @@
<div class="popover-content">DRAG & DROP THE ELEMENTS INSIDE THE COLUMNS WHERE YOU WANT TO INSERT IT. AND FROM THERE, YOU CAN CONFIGURE THE STYLE OF THAT JAVASCRIPT. IF YOU NEED MORE INFO PLEASE VISIT <a target="_blank" href="http://twitter.github.io/bootstrap/javascript.html">JAVASCRIPT.</a></div> <div class="popover-content">DRAG & DROP THE ELEMENTS INSIDE THE COLUMNS WHERE YOU WANT TO INSERT IT. AND FROM THERE, YOU CAN CONFIGURE THE STYLE OF THAT JAVASCRIPT. IF YOU NEED MORE INFO PLEASE VISIT <a target="_blank" href="http://twitter.github.io/bootstrap/javascript.html">JAVASCRIPT.</a></div>
</div> </div>
</div> </div>
</li> </li>
<li style="display: none;" class="boxes mute" id="elmJS"> <li style="display: none;" class="boxes mute" id="elmJS">
<div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span>
<div class="preview">Modal</div> <div class="preview">Modal</div>
<div class="view"> <div class="view">
<!-- Button to trigger modal --> <!-- Button to trigger modal -->
<a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal" contenteditable="true">Launch Demo Modal</a> <a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal" contenteditable="true">Launch Demo Modal</a>
<!-- Modal --> <!-- Modal -->
<div id="myModalContainer" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="myModalContainer" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
@@ -1929,10 +1930,10 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- /.nav-collapse --> <!-- /.nav-collapse -->
</div> </div>
</div> </div>
<!-- /navbar-inner --> <!-- /navbar-inner -->
</div> </div>
</div> </div>
</div> </div>
@@ -2037,7 +2038,7 @@
</div> </div>
<!--/span--> <!--/span-->
<div class="demo ui-sortable" style="min-height: 304px; "> <div class="demo ui-sortable" style="min-height: 304px; ">
<div class="lyrow"> <div class="lyrow">
<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>remove</a> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>remove</a>
<span class="drag label"><i class="icon-move"></i>drag</span> <span class="drag label"><i class="icon-move"></i>drag</span>
@@ -2045,7 +2046,7 @@
<div class="view"> <div class="view">
<div class="row-fluid clearfix"> <div class="row-fluid clearfix">
<div class="span12 column ui-sortable"> <div class="span12 column ui-sortable">
<div class="box box-element ui-draggable" style="display: block; "> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <a class="btn btn-mini" href="#" rel="well">Well</a> </span> <div class="box box-element ui-draggable" style="display: block; "> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>Remove</a> <span class="drag label"><i class="icon-move"></i>Drag</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">Editor</button> <a class="btn btn-mini" href="#" rel="well">Well</a> </span>
<div class="preview">Jumbotron</div> <div class="preview">Jumbotron</div>
<div class="view"> <div class="view">
@@ -2053,7 +2054,7 @@
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website.</p> <p>This is a template for a simple marketing or informational website.</p>
<p> It includes a large callout called the hero unit and three supporting pieces of content.</p> <p> It includes a large callout called the hero unit and three supporting pieces of content.</p>
Use it as a starting point to create something more unique.</p> Use it as a starting point to create something more unique.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -2062,19 +2063,19 @@
</div> </div>
</div> </div>
</div> </div>
<!-- end demo --> <!-- end demo -->
<!--/span--> <!--/span-->
<div id="download-layout"> <div id="download-layout">
<div class="container-fluid"></div> <div class="container-fluid"></div>
</div> </div>
</div> </div>
<!--/row--> <!--/row-->
</div> </div>
<!--/.fluid-container--> <!--/.fluid-container-->
<div class="modal hide fade" role="dialog" id="editorModal"> <div class="modal hide fade" role="dialog" id="editorModal">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>Save your Layout</h3> <h3>Save your Layout</h3>