binda 0.0.2

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

@@ -0,0 +1,98 @@
+ul#sortable,
+ul.sortable {
+  list-style-type: none;
+  padding-left: 0;
+  margin-bottom: 64px;
+
+  li {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
+    cursor: move;
+
+    &:first-child {
+      padding-top: 8px;
+      border-top: 1px solid rgba( 0, 0, 0, 0.1 );
+    }
+
+    img {
+      max-height: 64px;
+      width: auto;
+      margin-right: 32px;
+    }
+  }
+}
+
+ul#sortable > li > *,
+ul.sortable > li > * {
+  display: inline-block;
+}
+
+.sortable-handle {
+  width: 12px;
+  height: 12px;
+  margin-left: 8px;
+  margin-right: 16px;
+  border-radius: 6px;
+  background-color: #CCC;
+}
+
+.ui-state-highlight {
+  background-color: #E2E2E2;
+}
+
+tbody#sortable,
+tbody.sortable {
+  list-style-type: none;
+  padding-left: 0;
+  margin-bottom: 64px;
+
+  tr {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
+
+    &:first-child {
+      padding-top: 8px;
+      border-top: 1px solid rgba( 0, 0, 0, 0.1 );
+    }
+
+    img {
+      max-height: 64px;
+      width: auto;
+      margin-right: 32px;
+    }
+  }
+
+  &.sortable--no-handle { 
+    tr {
+      cursor: move;
+    }
+  }
+}
+
+tbody#sortable > tr > *,
+tbody.sortable > tr > * {
+  // display: inline-block;
+}
+
+
+
+.sortable-placeholder {
+  height: 48px;
+}
+
+.sortable--handle {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 8px;
+  margin-right: 16px;
+  border-radius: 6px;
+  background-color: #CCC;
+  cursor: move;
+}
+
+.ui-state-highlight {
+  background-color: #E2E2E2;
+}

data/app/assets/stylesheets/binda/index.scss

@@ -0,0 +1,24 @@
+// Settings
+@import "settings/variables";
+@import "settings/common";
+@import "settings/fonts";
+
+// Components
+@import "components/sidebar";
+@import "components/main_container";
+@import "components/main_content";
+@import "components/main_header";
+@import "components/main_table";
+@import "components/button";
+@import "components/login";
+@import "components/form_section";
+@import "components/form_body";
+@import "components/form_item";
+@import "components/form_item_asset";
+@import "components/sortable";
+@import "components/assets_manager";
+
+// Layout
+@import "layout/components_index";
+@import "layout/dashboard";
+@import "layout/users_sign_in";

data/app/assets/stylesheets/binda/layout/components_index.scss

@@ -0,0 +1,9 @@
+.components-index--new-component {
+	margin-top: 25px;
+}
+
+.components-index--table {
+	.glyphicon {
+		padding-right: 5px;
+	}
+}

data/app/assets/stylesheets/binda/layout/dashboard.scss

@@ -0,0 +1,7 @@
+.dashboard--title {
+	margin-bottom: 30px;
+}
+
+.dashboard--maintenance-mode {
+	margin-bottom: 20px;
+}

data/app/assets/stylesheets/binda/layout/users_sign_in.scss

@@ -0,0 +1,29 @@
+.devise-view {
+	// 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 );
+	background: $gray-lighter;
+	height: 100vh;
+
+	#main-container {
+		padding-left: 0;
+		position: relative;
+		height: 100vh;
+	}
+	#main-content {
+		position: absolute !important;
+		top: 50%;
+		left: 50%;
+		width: 100%;
+		transform: translate(-50%, -50%);
+
+		width: 33% !important;
+		padding: $font-size-base * 2;
+		// margin: $font-size-base auto;
+		background-color: #FFF;
+		border-radius: $font-size-base / 2;
+		border: 1px solid $gray-lighter;
+	}
+}

data/app/assets/stylesheets/binda/settings/common.scss

@@ -0,0 +1,93 @@
+body {
+  padding: 0;
+	background-color: $gray-lighter;
+}
+
+// this could be avoided using more recent version of bootstrap or with bourbon
+.clearfix {
+	&::after {
+	  clear: both;
+	  content: "";
+	  display: table;
+	}
+}
+
+// useful to debug
+.bordered {
+	border: 2px solid red;
+}
+
+.vertical-center {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.absolute-center {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.box-shadowed {
+	box-shadow: 0px 3px 6px 0px rgba( 200, 200, 200, 0.7 );
+}
+
+.box-shadowed-up {
+	box-shadow: 0px 3px 10px 2px rgba( 150, 150, 150, 0.7 );
+}
+
+// TINYMCE FIXES
+// -------------
+body#tinymce {
+	padding: 12px;
+	background-color: #FFF;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
+}
+
+.mce-tinymce, .mce-toolbar-grp {
+	margin-bottom: $font-size-base * 0.5 !important;
+	background-color: #FFF !important;
+	border: none !important;
+}
+
+.mce-btn-group:not(:first-child) {
+	border: none !important;
+}
+
+.mce-btn {
+  border-radius: 2px !important;
+}
+
+.mce-edit-area {
+	border: 1px solid #CCC !important;
+  border-radius: 1px !important;
+}
+
+.mce-path {
+	padding-top: 2px !important;
+	padding-bottom: 2px !important;
+}
+
+.mce-statusbar {
+	background-color: #FFF !important;
+	border: 1px solid #CCC !important;
+	border-top: none !important;
+}
+
+.mce-menubar {
+	margin-top: $font-size-base !important;
+	padding-top: 2px !important; 
+	padding-bottom: 2px !important; 
+	border-top: 1px solid rgba(0, 0, 0, 0.075) !important;
+
+	.mce-btn {
+		margin-right: 4px !important;
+		background-color: rgba(0, 0, 0, 0.075) !important;
+	}
+
+	&:first-child {
+		margin-top: 0 !important;
+	}
+}

data/app/assets/stylesheets/binda/settings/fonts.scss

@@ -0,0 +1,90 @@
+.default-font {
+	font-family: "semplicitapro", arial, sans-serif;
+}
+
+// - - - - - - - - - - - - - - - - - - 
+// LAYOUT
+// - - - - - - - - - - - - - - - - - - 
+
+body {
+  font-size: 100%;
+  font-size: $font-size-base;
+  line-height: 1.25em;
+  @extend .default-font;
+  color: $text-color;
+}
+::selection {
+  background: $text-color !important; /* WebKit/Blink Browsers */
+  color: $body-bg !important;
+}
+::-moz-selection {
+  background: $text-color !important; /* Gecko Browsers */
+  color: $body-bg !important;
+}
+
+
+// - - - - - - - - - - - - - - - - - - 
+// TYPO
+// - - - - - - - - - - - - - - - - - - 
+
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+  // color: $link-color;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a:hover {
+  // border-bottom: 2px solid $link-color;
+}
+
+button a {
+  border-bottom: none;
+}
+
+.p {
+  @include font-size( $font-size-base, $font-size-base * 1.25 );   
+
+  @media ( min-width: $tablet ) {
+    @include font-size( $font-size-large, $font-size-large * 1.25 );
+  }
+}
+
+.small {
+  display: inline-block;
+  @include font-size( $font-size-base );
+}
+
+em {
+  font-style: italic;
+  display: inline-block;
+}
+
+strong {
+  font-weight: bold;
+  display: inline-block;
+}
+.h1 {
+  @include font-size( $font-size-h2, $font-size-h2 * 1.25 );
+
+  @media ( min-width: $tablet ) {
+    @include font-size( $font-size-h1, $font-size-h1 * 1.25 );     
+  }
+}
+.h2 {
+  @include font-size( $font-size-h3, $font-size-h3 * 1.25 );
+
+  @media ( min-width: $tablet ) {
+    @include font-size( $font-size-h2, $font-size-h2 * 1.25 );     
+  }
+}
+.h3 {
+  @include font-size( $font-size-h4, $font-size-h4 * 1.25 );
+
+  @media ( min-width: $tablet ) {
+    @include font-size( $font-size-h3, $font-size-h3 * 1.25 );     
+  }
+}

data/app/assets/stylesheets/binda/settings/variables.scss

@@ -0,0 +1,83 @@
+// - - - - - - - - - - - - - - - - - - 
+// GLOBAL PARAMETERS
+// - - - - - - - - - - - - - - - - - - 
+
+
+// MEDIA QUERIES
+// -------------
+$tablet: 480px;
+$desktop: 960px;
+
+
+// FROM BOOTSTRAP
+// --------------
+
+//== Colors
+//
+//## Gray and colors for use across Bootstrap.
+
+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   lighten($gray-base, 33.5%) !default; // #555
+$gray-light:             lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
+
+$color-primary:         darken(#428bca, 6.5%) !default; // #337ab7
+$color-success:         #5cb85c !default;
+$color-info:            #5bc0de !default;
+$color-warning:         #f0ad4e !default;
+$color-danger:          #d9534f !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #FFF !default;
+//** Global text color on `<body>`.
+$text-color:            $gray-dark !default;
+
+//** Global textual link color.
+$link-color:            $color-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5:            $font-size-base !default;
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+
+
+// MIXINS
+// ------
+@mixin font-size( $pixels, $lineheight: $pixels, $default: $font-size-base ) {
+	// NOTE this function works only if you put 
+	// 'font-size: $font-size-base' in 'body' styles
+  font-size: #{$pixels/$default}em;
+	line-height: #{$lineheight/$pixels}em;
+}
+
+@function kerning( $kerning ) {
+	@return #{ $kerning / 1000 }em;
+}

data/app/assets/stylesheets/scaffolds.scss

@@ -0,0 +1,89 @@
+body {
+  background-color: #fff;
+  color: #333;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+  margin: 33px;
+}
+
+p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+  margin: 33px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a {
+  color: #000;
+
+  &:visited {
+    color: #666;
+  }
+
+  &:hover {
+    color: #fff;
+    background-color: #000;
+  }
+}
+
+th {
+  padding-bottom: 5px;
+}
+
+td {
+  padding-bottom: 7px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+div {
+  &.field, &.actions {
+    margin-bottom: 10px;
+  }
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0;
+    background-color: #c00;
+    color: #fff;
+  }
+
+  ul li {
+    font-size: 12px;
+    list-style: square;
+  }
+}
+
+label {
+  display: block;
+}