binda 0.1.0 → 0.1.1

data/app/assets/stylesheets/binda/components/b-alert.scss

@@ -0,0 +1,24 @@
+.b-alert
+{
+	width: 100%;
+	margin: 20px auto; 
+  color: $color-white;
+  padding: 6px 12px;
+ 
+  p
+  {
+    color: $color-white; // override default p color
+    margin-bottom: 0; 
+  }
+}
+
+.b-alert--success
+{
+  background-image: linear-gradient(to right, $color-success, lighten($color-success, 6%));
+}
+
+.b-alert--danger,
+.b-alert--error
+{
+  background-image: linear-gradient(to right, $color-danger, lighten($color-danger, 6%));
+}

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

@@ -1,20 +1,15 @@
 .form-item
 {
   display: block;
-  transition: all .3s linear;
-  transform: scaleY(1);
+  overflow-y: hidden;
+  transition: max-height .6s ease-out;
 
   @extend .clearfix;
-  // .form-group
-  // {
-  //   margin-bottom: 20px;
-  // }
 }
 
-.form-item
+.form-item > p
 {
-  overflow-y: hidden;
-  transition: max-height .6s ease-out;
+  padding: 12px;
 }
 
 .form-item--half-size
@@ -27,7 +22,6 @@
   {
     border-top: none !important;
   }
-
 }
 
 .form-item--full-size
@@ -139,7 +133,7 @@
   ul.sortable > li
   {
     margin-top: -1px; // this solve the issue of a 2px border between 2 repeaters
-    border: 1px solid $color-gray-darker;
+    border: 1px solid $color-gray-lighter;
   }
 
   ul.sortable > li > *
@@ -149,7 +143,12 @@
 
   ul.sortable
   {
-    margin-bottom: 0px;
+    margin-bottom: 0;
+  }
+
+  .ui-sortable-handle:hover
+  {
+    background-color: transparent;
   }
 
   .sortable--toggle-text:first-child
@@ -192,10 +191,10 @@
   margin-bottom: 20px;
 }
 
-.form-item--repeater-header
+.form-item--header
 {
-  padding: 4px 0;
-  background-color: $color-white !important;
+  padding: 4px;
+  background-color: $color-gray-lightest !important;
 
   p
   {
@@ -203,8 +202,10 @@
     margin-left: 8px;
   }
 }
+
 .form-item--collapse-btn,
-.form-item--delete-repeater-item
+.form-item--delete-repeater-item,
+.form-item--edit-item
 {
   float: right;
   margin-top: 8px;
@@ -213,8 +214,10 @@
 
 a.form-item--delete-repeater-item
 {
+  cursor: pointer;
   transition: color .2s ease;
   color: $color-danger;
+
   &:hover
   {
     color: $color-danger-hover;
@@ -293,4 +296,4 @@ a.form-item--delete-repeater-item
 .form-item--new-choice .form-item--delete-choice
 {
   display: none;
-}
+}

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

@@ -0,0 +1,20 @@
+.form-item--full-size {
+
+  input[type="checkbox"] {
+
+    margin-left: 0px;
+  }
+}
+
+.form-group.allow-null {
+
+  padding-left: 12px;
+  padding-bottom: 0px;
+}
+
+.field_group_field_settings_allow_null {
+
+  border-top: none !important;
+  padding-bottom: 10px !important;
+  padding-top: 10px !important;
+}

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

@@ -6,7 +6,7 @@
 .main-header--title
 {
   @extend .b-h3;
-  display: inline-block;
+  display: block;
 }
 
 .main-header--buttons

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

@@ -7,8 +7,7 @@
   overflow-y: auto;
   width: 200px;
   height: 100%;
-  border-right: 1px solid $color-gray-lighter;
-  background-color: $color-white;
+  background-image: linear-gradient( to bottom, $color-gray-darkest, $color-gray-darker);
 }
 
 .main-sidebar--brand
@@ -18,14 +17,14 @@
   height: 124px;
   transition: background-color .3s ease;
 
-  a {
-    height: 100%;
+  a
+  {
     width: 100%;
+    height: 100%;
   }
 
   &:hover
   {
-
     .main-sidebar--view-website
     {
       transform: translateX( 0px );
@@ -57,17 +56,22 @@
   transition: transform .3s ease;
   transform: translateX(200px);
 
-  i {
+  i
+  {
     padding-right: 6px;
   }
 }
 
 .main-sidebar--nav
 {
-  width: 100%;
+  position: fixed;
+  width: 200px;
   margin: 0;
   padding: 0;
   list-style: none;
+  top: 0;
+  left: 0;
+  margin-bottom: 48px; // create space for sideba-footer
 
   li
   {
@@ -78,15 +82,15 @@
       padding: 12px;
       transition: all .3s ease;
       text-decoration: none;
-      color: $text-color;
+      color: $color-gray;
 
       &:hover
       {
         padding-left: 16px;
         text-decoration: none;
-        color: $text-color;
+        color: $color-white;
         border-bottom: none;
-        background-color: $color-gray-lightest;
+        background-image: linear-gradient( to right, lighten( $color-gray-darker, 2% ), $color-gray-darker );
       }
 
       &:active,
@@ -104,7 +108,7 @@
   text-indent: 0;
 }
 
-.main-sidebar--nav li a.main-sidebar--logout
+.main-sidebar--nav li a.main-sidebar--logout p
 {
   color: $color-danger;
 }
@@ -112,10 +116,26 @@
 .main-sidebar--structure,
 .main-sidebar--nav li:last-child
 {
-  border-bottom: 1px solid $color-gray-lightest;
+  border-bottom: 1px solid $color-gray-darker;
 }
 
 .main-sidebar--first-structure
 {
-  border-top: 1px solid $color-gray-lightest;
+  border-top: 1px solid $color-gray-darker;
 }
+
+.main-sidebar--footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 16px;
+  background-color: $color-gray-darker;
+
+  a {
+    color: $color-gray;
+    transition: color .3s;
+  }
+  a:hover {
+    color: $color-gray-lighter;
+  }
+}

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

@@ -3,6 +3,12 @@
   table
   {
     width: 100%;
+    background-color: $color-gray-lightest;
+
+    th
+    {
+      padding: 6px 12px;
+    }
 
     td
     {
@@ -43,7 +49,8 @@
       border-bottom: 1px solid $color-gray-darker;
     }
 
-    tr.ui-sortable-handle:hover {
+    tr.ui-sortable-handle:hover
+    {
       border: 1px solid transparent;
     }
   }
@@ -65,9 +72,10 @@
   }
 }
 
-.main-table--hover {
-  background: $color-gray-lightest;
+.main-table--hover
+{
   transition: background .3s ease;
+  background: $color-gray-lightest;
 
   &:hover
   {

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

@@ -1,22 +1,30 @@
 .select2-container,
+.select2-selection
+{
+  // https://stackoverflow.com/a/24222873/1498118
+  &:focus,
+  &:focus:active
+  {
+    border: 1px solid $color-gray-dark;
+    outline: none;
+    background-image: none;
+    box-shadow: none;
+  }
+}
+
 .select2-selection {
-	// https://stackoverflow.com/a/24222873/1498118
-	&:focus,
-	&:focus:active {
-		box-shadow: none;
-	  border: 1px solid $color-gray-dark;
-	  background-image: none;
-	  outline: none;
-	}
+  height: auto !important;
+  padding: 3px;
+  padding-top: 2px;
 }
 
 .select2-container--default .select2-selection--multiple,
 .select2-container--default .select2-selection--single
 {
-  border-radius: 0;
-  background-color: $color-white;
   transition: border .3s ease;
   border: 1px solid transparent;
+  border-radius: 0;
+  background-color: $color-gray-lightest;
 
   &:hover
   {
@@ -52,7 +60,8 @@
   border-color: $text-color transparent transparent transparent;
 }
 
-.select2-container--default.select2-container--open .select2-selection--single {
+.select2-container--default.select2-container--open .select2-selection--single
+{
   border: 1px solid $color-gray-lighter;
 }
 
@@ -88,7 +97,7 @@
 
 .select2-container--default.select2-container--disabled .select2-selection--multiple
 {
-  background-color: $color-gray-lightest;
+  background-color: $color-gray-light;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field
@@ -100,11 +109,12 @@
 {
   border: 1px solid $color-gray-lighter;
 
-  &:focus {
-	  border: 1px solid $color-gray-dark;
-	  box-shadow: none;
-	  background-image: none;
-	  outline: none;
+  &:focus
+  {
+    border: 1px solid $color-gray-dark;
+    outline: none;
+    background-image: none;
+    box-shadow: none;
   }
 }
 
@@ -123,4 +133,3 @@
   color: $color-white;
   background-color: $color-gray-darker;
 }
-

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

@@ -34,7 +34,7 @@ ul#sortable
 {
   height: 48px;
   z-index: 0;
-  background-color: $color-gray-dark;
+  background-color: $color-gray-lighter;
 }
 
 ul#sortable > li > *,

data/app/assets/stylesheets/binda/components/standard-form.scss

@@ -29,14 +29,15 @@
 .standard-form--container
 {
   overflow-y: hidden;
-  margin-bottom: 20px;
-  border: 1px solid $color-gray-darker;
-
-  &.field-settings-container {
+  margin-bottom: 48px;
+  border-bottom: 1px solid $color-gray-lighter;
+  background-color: $color-white;
 
+  &.field-settings-container
+  {
     margin-bottom: 0 !important;
-    border-left: none !important;
     border-right: none !important;
+    border-left: none !important;
   }
 
   &.table-sort
@@ -58,11 +59,21 @@
     @extend .text-muted;
   }
 
+  .has-error
+  {
+    .control-label-required,
+    .control-label,
+    span.help-block
+    {
+      color: $color-danger;
+    }
+  }
+
   .form-group
   {
     margin-bottom: 0;
     padding: 20px 12px 28px;
-    border-top: 1px solid $color-gray-darker;
+    border-top: 1px solid $color-gray-lightest;
   }
 
   .form-control
@@ -70,12 +81,13 @@
     transition: border .3s ease-in-out;
     border: none;
     border: 1px solid transparent;
+    background-color: $color-gray-lightest;
     box-shadow: none;
 
     &:hover,
     &:focus
     {
-      border: 1px solid $color-gray;
+      border: 1px solid $color-gray-lighter;
       outline: none;
       background-image: none;
       box-shadow: none;
@@ -84,7 +96,7 @@
     &.disabled
     {
       color: $color-gray-lighter;
-      background-color: $color-white;
+      background-color: $color-gray-lightest;
 
       &:hover
       {
@@ -103,53 +115,17 @@
 
 .standard-form--header
 {
-  padding: 12px 12px;
+  padding: 6px 12px;
   color: $color-white;
-  background-color: $color-gray-darker;
+  background-image: linear-gradient(to right, $color-gray-darker, lighten( $color-gray-darker, 6%));
 
-  p
+  a,
+  small
   {
     // font-weight: bold;
     margin-bottom: 0;
     color: $color-white;
   }
-
-  a
-  {
-    margin-bottom: 0;
-    color: white;
-  }
-}
-
-.standard-form--secondary-header
-{
-  padding: 4px 0;
-  background-color: $color-white !important;
-  p
-  {
-    display: inline-block;
-    width: 92%;
-    margin-top: 8px;
-    margin-left: 8px;
-
-
-  }
-
-  a {
-    margin-right: 10px;
-  }
-
-  &.main-actions-header
-  {
-    padding: 6px 12px;
-    background-color: $color-gray-light !important;
-
-    a
-    {
-      margin-left: 8px;
-    }
-  }
-
 }
 
 .standard-form--boolean,
@@ -198,24 +174,28 @@
 {
   display: inline-block;
   width: 100%;
-  padding: 0px 12px 28px;
+  padding: 0 12px 28px;
 
-  .b-btn-settings:last-child {
+  .b-btn-settings:last-child
+  {
     margin-bottom: 0;
   }
 }
 
-.standard-form--main-actions {
+.standard-form--main-actions
+{
   display: block;
+  float: left;
   width: 100%;
   padding: 20px 12px; // Padding bottom is 20px instead of 28px because there shouldn't be any heading (or label) preceding the main-actions buttons 
-  border-top: 1px solid $text-color;
-  float: left;
+  border-top: 1px solid $color-gray-lightest;
 }
 
 .standard-form--secondary-actions,
-.standard-form--main-actions {
-  .b-btn-settings:last-child {
+.standard-form--main-actions
+{
+  .b-btn-settings:last-child
+  {
     margin-bottom: 0;
   }
 }
@@ -224,5 +204,10 @@
 {
   width: 100%;
   padding: 20px 12px;
-  border-top: 1px solid $text-color;
+  border-top: 1px solid $color-gray-lightest;
 }
+
+.standard-form--hint-on-new-record
+{
+  padding: 12px;
+}