binda 0.0.7 → 0.1.0

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

@@ -1,98 +1,125 @@
-ul#sortable,
-ul.sortable {
-  list-style-type: none;
-  padding-left: 0;
+ul.sortable,
+ul#sortable
+{
+  position: relative;
   margin-bottom: 64px;
-
-  li {
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-    border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
+  padding-left: 0;
+  list-style-type: none;
+  
+  > li
+  {
+    position: relative;
+    z-index: 0;
+    margin-top: 0;
+    margin-bottom: 0;
     cursor: move;
+    transition: box-shadow .3s ease, transform .3s ease;
+    box-shadow: 0 0 0 0 rgba(0,0,0,.25);
 
-    &:first-child {
-      padding-top: 8px;
-      border-top: 1px solid rgba( 0, 0, 0, 0.1 );
-    }
-
-    img {
-      max-height: 64px;
+    img
+    {
       width: auto;
+      max-height: 64px;
       margin-right: 32px;
     }
   }
 }
 
+.sortable-placeholder
+{
+  height: 48px;
+}
+
+.ui-state-highlight
+{
+  height: 48px;
+  z-index: 0;
+  background-color: $color-gray-dark;
+}
+
 ul#sortable > li > *,
-ul.sortable > li > * {
+ul.sortable > li > *
+{
   display: inline-block;
 }
 
-.sortable-handle {
+.sortable-handle
+{
+  // display: block;
   width: 12px;
   height: 12px;
-  margin-left: 8px;
   margin-right: 16px;
+  margin-left: 8px;
   border-radius: 6px;
-  background-color: #CCC;
 }
 
-.ui-state-highlight {
-  background-color: #E2E2E2;
+.ui-sortable-handle
+{
+  &:hover
+  {
+    z-index: 10 !important;
+    transform: scale(1.01);
+    background-color: $color-gray-lightest;
+    box-shadow: 0 10px 26px 0 rgba(0,0,0,.25);
+  }
 }
 
 tbody#sortable,
-tbody.sortable {
-  list-style-type: none;
-  padding-left: 0;
+tbody.sortable
+{
+  position: relative;
   margin-bottom: 64px;
-
-  tr {
-    padding-bottom: 8px;
+  padding-left: 0;
+  list-style-type: none;
+  tr
+  {
+    transition: box-shadow .3s ease, transform .3s ease;
     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 );
-    }
+    padding-bottom: 8px;
 
-    img {
-      max-height: 64px;
+    img
+    {
       width: auto;
+      max-height: 64px;
       margin-right: 32px;
     }
   }
-
-  &.sortable--no-handle { 
-    tr {
+  &.sortable--no-handle
+  {
+    tr
+    {
       cursor: move;
     }
   }
 }
 
-tbody#sortable > tr > *,
-tbody.sortable > tr > * {
-  // display: inline-block;
-}
-
-
-
-.sortable-placeholder {
-  height: 48px;
-}
-
-.sortable--handle {
+.sortable--handle
+{
   display: inline-block;
   width: 12px;
   height: 12px;
-  margin-left: 8px;
   margin-right: 16px;
-  border-radius: 6px;
-  background-color: #CCC;
+  margin-left: 8px;
   cursor: move;
+  border-radius: 6px;
+  background-color: #ccc;
 }
 
-.ui-state-highlight {
-  background-color: #E2E2E2;
+.sortable--disabled
+{
+  .sortable--handle,
+  .ui-sortable-handle
+  {
+    cursor: default;
+  }
+}
+
+ul.sortable--disabled
+{
+   > li:hover
+  {
+    cursor: default;
+    transform: scale(1);
+    box-shadow: none;
+  }
 }

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

@@ -0,0 +1,228 @@
+
+// STANDARD FORM -- GENERAL STYLES
+
+.standard-form
+{
+  width: 100%;
+}
+
+.standard-form--body
+{
+  float: left;
+  width: 75%;
+  padding-right: 24px;
+  vertical-align: top;
+}
+
+
+// STANDARD FORM -- SIDEBAR
+
+.standard-form--sidebar
+{
+  float: left;
+  width: 25%;
+}
+
+
+// STANDARD FORM -- SECTION
+
+.standard-form--container
+{
+  overflow-y: hidden;
+  margin-bottom: 20px;
+  border: 1px solid $color-gray-darker;
+
+  &.field-settings-container {
+
+    margin-bottom: 0 !important;
+    border-left: none !important;
+    border-right: none !important;
+  }
+
+  &.table-sort
+  {
+    border: none !important;
+  }
+
+  .control-label
+  {
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 8px;
+
+    @extend .b-h4;
+  }
+
+  .control-label-required
+  {
+    @extend .text-muted;
+  }
+
+  .form-group
+  {
+    margin-bottom: 0;
+    padding: 20px 12px 28px;
+    border-top: 1px solid $color-gray-darker;
+  }
+
+  .form-control
+  {
+    transition: border .3s ease-in-out;
+    border: none;
+    border: 1px solid transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus
+    {
+      border: 1px solid $color-gray;
+      outline: none;
+      background-image: none;
+      box-shadow: none;
+    }
+
+    &.disabled
+    {
+      color: $color-gray-lighter;
+      background-color: $color-white;
+
+      &:hover
+      {
+        border: 1px solid transparent;
+      }
+    }
+  }
+  .help-block
+  {
+    color: $color-gray;
+  }
+}
+
+
+// STANDARD FORM -- HEADER
+
+.standard-form--header
+{
+  padding: 12px 12px;
+  color: $color-white;
+  background-color: $color-gray-darker;
+
+  p
+  {
+    // 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,
+.standard-form--radio,
+.standard-form--checkbox
+{
+  .standard-form--input-box
+  {
+    position: relative;
+    top: 2px;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-right: 5px;
+    transition: background-color .2s ease-in-out;
+    border: 1px solid $text-color;
+  }
+
+  input[type='radio'],
+  input[type='checkbox']
+  {
+    position: relative;
+    display: inline-block;
+    width: 1px;
+    height: 1px;
+    transition: background-color .3s ease-in-out;
+    opacity: 0;
+    &:hover + span
+    {
+      background-color: $color-gray-lighter;
+    }
+    &:checked + span
+    {
+      background-color: $color-gray-dark;
+    }
+  }
+}
+
+.standard-form--boolean label span,
+.standard-form--radio label span
+{
+  border-radius: 1em;
+}
+
+.standard-form--secondary-actions
+{
+  display: inline-block;
+  width: 100%;
+  padding: 0px 12px 28px;
+
+  .b-btn-settings:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.standard-form--main-actions {
+  display: block;
+  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;
+}
+
+.standard-form--secondary-actions,
+.standard-form--main-actions {
+  .b-btn-settings:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.standard-form--suggestion
+{
+  width: 100%;
+  padding: 20px 12px;
+  border-top: 1px solid $text-color;
+}

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

@@ -0,0 +1,6 @@
+.text-destroy {
+  color: $color-danger;
+}
+a.text-destroy:hover {
+  color: $color-danger;
+}

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

@@ -0,0 +1,3 @@
+.components-index--new-component {
+	margin-top: 25px;
+}

data/app/assets/stylesheets/binda/controllers/users_sessions_new.scss

@@ -0,0 +1,309 @@
+body.sessions-new.devise-view
+{
+
+  #main-container
+  {
+    position: relative;
+    height: 100vh;
+    margin-left: 0;
+  }
+  #main-content
+  {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    max-width: 860px;
+    padding: 11px;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+  }
+
+  canvas
+  {
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vw;
+  }
+
+  .login--header
+  {
+    position: fixed;
+    top: 3em;
+    right: 0;
+    left: 0;
+    text-align: center;
+    p
+    {
+      @extend .b-h4;
+      color: $color-white;
+    }
+  }
+
+  .login--footer
+  {
+    position: fixed;
+    bottom: 1em;
+    right: 0;
+    left: 0;
+    text-align: center;
+    a, a:hover, a:visited
+    {
+      color: $color-white;
+      opacity: 0.6;
+    }
+  }
+
+  .login .form-group
+  {
+    // override Binda standard form style
+    margin-bottom: 0;
+  }
+
+  .login--form
+  {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    padding: 2em 0;
+
+    ol.login--questions
+    {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      transition: height .4s;
+    }
+
+    ol.login--questions::before
+    {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      content: '';
+      background-color: $color-white;
+    }
+
+    .login--questions li
+    {
+      position: relative;
+      z-index: 100;
+      visibility: hidden;
+      height: 0;
+      transition: visibility 0s .4s, height 0s .4s;
+    }
+
+    .login--questions li.login--current
+    {
+      visibility: visible;
+      height: auto;
+      transition: none;
+    }
+
+    .login--questions li > span
+    {
+      display: block;
+      overflow: hidden;
+    }
+
+    .login--questions li > span label
+    {
+      @extend .b-h4;
+      display: block;
+      transition: transform .4s;
+      transform: translateY(-100%);
+      color: $color-white;
+    }
+
+    .login--questions li.login--current > span label
+    {
+      transition: none;
+      transform: translateY(0);
+    }
+
+    .login--questions li.login--current > span label i {
+      padding-right: 8px;
+    }
+
+    .login--questions input
+    {
+      font-size: 3em;
+      line-height: 1;
+      display: block;
+      width: calc(100% - 2em);
+      height: 2em;
+      margin: .3em 0 0 0;
+      padding: 0 1em 0 0;
+      transition: opacity .3s;
+      opacity: 0;
+      color: $color-white;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .login--questions .login--current input
+    {
+      opacity: 1;
+    }
+
+    .login--questions input:focus
+    {
+      outline: none;
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+
+  .login--show-next li.login--current > span label
+  {
+    animation: loginFromMoveUp .4s both;
+  }
+
+  .login--next
+  {
+    font-size: 2.5em;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    bottom: 2.6em; /* padding-bottom of form plus progress bar height */
+    display: block;
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    cursor: pointer;
+    transition: transform .3s, opacity .3s;
+    transform: translateX(-20%);
+    text-align: center;
+    pointer-events: none;
+    opacity: 0;
+    color: $color-white;
+    border: none;
+    background: none;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .login--next:hover
+  {
+    transform: translateX(-20%) scale(1.1);
+  }
+
+  .login--next:focus
+  {
+    outline: none;
+    background-image: none;
+    box-shadow: none;
+  }
+
+  .login--next::after
+  {
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-style: normal;
+    font-variant: normal;
+    line-height: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '\f061';
+    text-transform: none;
+
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .login--next.login--show
+  {
+    transform: translateX(0);
+    pointer-events: auto;
+    opacity: 1;
+  }
+
+  .login--submit-button
+  {
+    display: none;
+    margin-top: 20px;
+
+    input[type='submit']
+    {
+      font-size: 14px;
+      position: relative;
+      left: 50%;
+      padding: 4px 6px;
+      padding: 4px 12px;
+      cursor: pointer;
+      transform: translate(-50%);
+      border: none;
+
+      @extend .default-font;
+      @extend .p;
+      -webkit-appearance: none;
+         -moz-appearance: none;
+    }
+  }
+
+  .login--radio-button
+  {
+    margin-top: 2em;
+
+    input[type='radio']
+    {
+      display: inline-block;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      &:hover + label span
+      {
+        background-color: $color-gray-lightest;
+      }
+      &:checked + label span
+      {
+        background-color: $color-gray-lighter;
+      }
+    }
+
+    label
+    {
+      position: relative;
+      color: $color-white;
+
+      span
+      {
+        position: relative;
+        margin-top: 2px;
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        margin-right: 5px;
+        transition: background-color .2s ease-in-out;
+        border: 1px solid $color-white;
+        border-radius: 1em;
+      }
+    }
+  }
+  /* Remove IE clear cross */
+  input[type=text]::-ms-clear
+  {
+    display: none;
+  }
+}
+
+@keyframes loginFromMoveUp
+{
+  from
+  {
+    transform: translateY(100%);
+  }
+  to
+  {
+    transform: translateY(0);
+  }
+}