binda 0.0.2

data/app/assets/javascripts/binda/index.js

@@ -0,0 +1,16 @@
+///- - - - - - - - - - - - - - - - - - - -
+/// INDEX OF BINDA'S SCRIPTS
+///- - - - - - - - - - - - - - - - - - - -
+
+import { _FormItem }         from './components/form_item'
+import { _FormItemRepeater } from './components/form_item_repeater'
+import { _FormItemAsset }    from './components/form_item_asset'
+import setupSortable         from './components/sortable'
+
+$(document).ready( function()
+{
+	if ( _FormItem.isSet() )         { _FormItem.setEvents() }
+	if ( _FormItemRepeater.isSet() ) { _FormItemRepeater.setEvents() }
+	if ( _FormItemAsset.isSet() )    { _FormItemAsset.setEvents() }
+	setupSortable()
+})

data/app/assets/stylesheets/binda/application.css

@@ -0,0 +1,6 @@
+/*
+ *= require bootstrap/bootstrap
+ *= require bootstrap-select
+ *= require binda/index
+ *= require_self
+ */

data/app/assets/stylesheets/binda/components/assets_manager.scss

@@ -0,0 +1,46 @@
+#assets-manager-index {
+	display: none;
+}
+
+.assets-manager--list {
+	list-style: none;
+	width: 100%;
+}
+
+.assets-manager--item {
+	position: relative;
+	display: inline-block;
+	padding: $font-size-base / 2;
+	margin-bottom: $font-size-base * 2;
+	@extend .box-shadowed;
+	transition: all 0.3s ease-in-out;
+
+	&:hover {
+		@extend .box-shadowed-up;
+	}
+}
+
+.assets-manager--image-buttons {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+
+	a {
+		display: block;
+		padding: 3px;
+		margin: 3px;
+		background-color: #FFF;
+		opacity: 0.7;
+		transition: opacity 0.3s ease-in;
+	}
+	a:hover {
+		opacity: 1;
+	}
+}
+
+.assets-manager--selected {
+	background-color: #AAA;
+	img {
+		opacity: 0.7;
+	}
+}

data/app/assets/stylesheets/binda/components/button.scss

@@ -0,0 +1,7 @@
+.update-form--button {
+	margin-bottom: 20px;
+}
+
+.custom-button--button {
+	color: #337ab7;
+}

data/app/assets/stylesheets/binda/components/form_body.scss

@@ -0,0 +1,2 @@
+.form-body--delete {
+}

data/app/assets/stylesheets/binda/components/form_item.scss

@@ -0,0 +1,169 @@
+.form-item { 
+	@extend .clearfix;
+	display: block;
+	margin-bottom: $font-size-base*1.5;	
+	border-bottom: 1px solid $gray-lighter;
+	transition: all 0.3s linear;
+	transform: scaleY(1);
+
+	.form-group {
+		margin-bottom: $font-size-base;	
+	}
+}
+
+
+.form-section--wide-container {
+
+	.form-item {
+		max-height: 2000px;
+		overflow-y: hidden;
+		transition: max-height 1s ease-out;
+
+		h5 {
+			width: 15%;
+			float: left;
+		}
+
+		a {
+			float: right;
+			margin-top: $font-size-base/2;
+			margin-left: $font-size-base/2;
+		}
+	}
+
+	.form-item--new {
+		position: absolute;
+		top: 101%;
+		max-height: 0;
+	}
+
+	.form-group {
+		margin-bottom: $font-size-base;	
+	}
+}
+
+.form-item--select-input {
+	display: inline-block;
+	width: 240px;
+	margin-left: 5%;
+}
+
+.form-item--textarea {
+	display: inline-block;
+	width: 70%;
+	margin-left: 5%;
+}
+
+.form-item--category {
+	padding-bottom: $font-size-base*1.5;	
+	margin-bottom: $font-size-base*1.5;	
+
+	input[type=submit] {
+		width: 20%;
+		float: left;
+	}
+
+	.form-group {
+		width: 70%;
+		margin: 0;
+		margin-right: 10%;
+		float: left;
+	}
+}
+
+.form-item--open-button,
+.form-item--close-button {
+	cursor: pointer;
+}
+
+.form-item--open-button {
+	display: none;
+}
+
+.form-item--editor {
+	max-height: 1000px;
+	overflow-y: hidden;
+	transition: max-height 0.6s ease-out;
+}
+
+.form-item--editor-close {
+	max-height: 0;
+}
+
+.form-item--label-on-top .form-group {
+}
+
+.form-item--label-on-left .form-group {
+	display: inline-block;
+	width: 70%;
+	margin-left: 5%;
+}
+
+.form-item--repeater-fields {
+  padding-left: $font-size-base/2;
+	margin-bottom: $font-size-base;
+	border-bottom: 1px solid $gray-lighter;
+  border-left: 2px solid $gray-lighter;
+}
+
+.form-item--repeater-section {
+	border: none;
+	margin-bottom: 0;
+
+	> *,
+	ul.sortable li > * {
+		display: block;
+		background-color: $body-bg;
+	}
+
+  ul.sortable--disabled li {
+  	cursor: default;
+  }
+
+  ul.sortable {
+  	margin-bottom: $font-size-base/2;
+
+  	li {
+  		border-bottom: none;
+  		padding-bottom: 0;
+  	}
+  }
+	
+	.sortable--toggle {
+    margin-top: 0;
+  }
+
+  .sortable--toggle-text:first-child {
+		display: none;
+  }
+
+	h5 {
+		width: 15%;
+		float: left;
+	}
+
+	h5.form-item--repeater-title {
+		width: 100%;
+		padding: $font-size-base / 2;
+		margin-bottom: $font-size-base / 2;
+		background-color: $gray-lighter;
+		font-weight: normal;
+		float: none;
+	}
+
+	a {
+		float: right;
+		margin-top: $font-size-base/2;
+		margin-left: $font-size-base/2;
+	}
+
+	.form-item--new {
+		position: absolute;
+		top: 101%;
+		max-height: 0;
+	}
+
+	.form-group {
+		margin-bottom: $font-size-base;	
+	}
+}

data/app/assets/stylesheets/binda/components/form_item_asset.scss

@@ -0,0 +1,20 @@
+.form-item--asset--clearfix {
+	margin-bottom: $font-size-base;
+	border-bottom: 1px solid $gray-lighter;
+	@extend .clearfix;
+}
+
+.form-item--asset--image {
+	max-width: 20%;
+	height: auto;
+	margin-left: 20%;
+	margin-bottom: $font-size-base;
+}
+
+.form-item--asset--uploader {
+	display: inline-block;
+	margin: 0;
+	margin-top: 9px;
+	float: left;
+	clear: both;
+}

data/app/assets/stylesheets/binda/components/form_section.scss

@@ -0,0 +1,40 @@
+.form-section {
+	overflow-y: hidden;
+}
+
+.form-section--transparent-container {
+	margin: 0;
+
+	> div {
+		padding-right: $font-size-base;
+		padding-bottom: $font-size-base;
+		padding-left: $font-size-base;
+		margin-bottom: $font-size-base * 2;
+		@extend .box-shadowed;
+	}
+}
+
+.form-section--container {
+	@extend .form-section--transparent-container;
+
+	> div {		
+		background-color: #FFF;
+	}
+
+	small {
+		display: inline-block;
+		margin-bottom: $font-size-base;
+	}
+	
+	h4 {
+		padding-bottom: $font-size-base;
+		margin-bottom: $font-size-base;
+		border-bottom: 1px solid $gray-lighter;
+		font-weight: bold;
+	}	
+}
+
+.form-section--wide-container,
+.form-section--narrow-container {
+	@extend .form-section--container;
+}

data/app/assets/stylesheets/binda/components/login.scss

@@ -0,0 +1,6 @@
+.login {	
+	h2 {
+		margin-top: 0;
+		margin-bottom: $font-size-base * 2;
+	}
+}

data/app/assets/stylesheets/binda/components/main_content.scss

@@ -0,0 +1,5 @@
+#main-content {
+	position: relative;
+	background-color: $gray-lighter;
+	padding: 0 $font-size-base * 2;
+}

data/app/assets/stylesheets/binda/components/main_header.scss

@@ -0,0 +1,25 @@
+#main-header {
+	width: 100%;
+	margin-bottom: $font-size-base * 3;
+	background-color: $gray-lighter;
+
+	h3 {
+		display: inline-block;
+		padding: 0 $font-size-base;
+	}
+}
+
+.main-header--buttons {
+	float: right;
+	margin-top: $font-size-base * 1.5;
+	margin-right: $font-size-base;
+}
+
+a.main-header--back {
+	color: $gray-light;
+	font-weight: normal;
+
+	&:hover {
+		color: $gray;
+	}
+}

data/app/assets/stylesheets/binda/components/main_table.scss

@@ -0,0 +1,28 @@
+.main-table--row {
+	margin: 0;
+
+	> div {
+		width: 100%;
+		padding-bottom: $font-size-base;
+		margin-bottom: $font-size-base * 2;
+		background-color: #FFF;
+		@extend .box-shadowed;
+	}
+
+	table {
+		border-bottom: 1px solid #CCC;
+
+		td:last-child {
+			text-align: right;
+
+			span {
+				margin-left: $font-size-base;
+
+				&:not(:first-child) {
+					border-left: 1px solid #CCC;
+					padding-left: $font-size-base;
+				}
+			}
+		}
+	}
+}

data/app/assets/stylesheets/binda/components/sidebar.scss

@@ -0,0 +1,131 @@
+#main-container {
+	padding-left: 0;
+	transition: all 0.5 ease;
+
+	@media ( min-width: $tablet ) {
+		padding-left: 240px;
+	}
+
+	#main-sidebar {
+		z-index: 1000;
+		position: fixed;
+		left: 240px;
+		width: 0;
+		height: 100%;
+		margin-left: -240px;
+		overflow-y: auto;
+		@extend .box-shadowed;
+		background-color: #FFF;
+		transition: all 0.5s ease;
+
+		@media ( min-width: $tablet ) {
+			width: 240px;
+		}
+	}
+
+	#main-content {
+		width: 100%;
+		position: absolute;
+
+		@media ( min-width: $tablet ) {
+			position: relative;
+		}
+	}
+
+	&.toggled {
+		padding-left: 240px;
+
+		@media ( min-width: $tablet ) {
+			padding-left: 0;
+		}
+
+		#main-sidebar {
+			width: 240px;
+			
+			@media ( min-width: $tablet ) {
+					width: 0;
+			}
+		}
+
+		#main-content {
+			position: absolute;
+			margin-right: -240px;
+
+			@media ( min-width: $tablet ) {
+				position: relative;
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.main-sidebar--nav {
+	position: absolute;
+	top: 0;
+	width: 240px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	li {
+		// text-indent: 20px;
+		// line-height: 40px;
+		
+		h3 {
+			padding-left: $font-size-base;
+		}
+
+		> a {
+			display: block;
+			padding: $font-size-base;
+			text-decoration: none;
+			color: $text-color;
+			font-weight: normal;
+			transition: all 0.3s ease;
+
+			&:hover {
+				padding-left: $font-size-base * 2;
+				text-decoration: none;
+				color: $gray-darker;
+				background-color: $gray-lighter;
+				border-bottom: none;
+			}
+
+			&:active,
+			&:focus {
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+li.main-sidebar--brand {
+	padding-bottom: $font-size-base;
+	margin-bottom: $font-size-base * 2;
+	// border-bottom: 1px solid $gray-lighter;
+	background: #FFF;
+	// background: -moz-linear-gradient(top, #FFF 0%, $gray-lighter 100%);
+	// background: -webkit-linear-gradient(top, #FFF 0%,$gray-lighter 100%);
+	// background: linear-gradient(to bottom, #FFF 0%,$gray-lighter 100%);
+	// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='$gray-lighter',GradientType=0 );
+}
+.main-sidebar--nav .glyphicon {
+	text-indent: 0;
+	padding-right: $font-size-base/2;
+}
+
+.main-sidebar--nav li a.main-sidebar--logout {
+	color: $color-danger;
+}
+
+.main-sidebar--structure {
+	border-bottom: 1px solid $gray-lighter;
+}
+
+.main-sidebar--first-structure {
+	border-top: 1px solid $gray-lighter;
+}
+
+.main-sidebar--nav li:last-child {
+	border-bottom: 1px solid $gray-lighter;
+}