para 0.11.4 → 0.12.0

data/app/assets/stylesheets/para/admin/src/_form.scss

@@ -0,0 +1,359 @@
+//
+// Form
+// --------------------------------------------------
+
+//== Form mixins
+//
+//## Form mixins is there because is doesnt have to be share
+
+@mixin outline-input-form {
+  padding: 6px 0px;
+  -webkit-appearance: none;
+  box-shadow: none;
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid $input-border;
+  @include default-transition;
+  &:focus,
+  &.focus {
+    box-shadow: 0px 1px 0px $input-border-focus;
+    border-color: $input-border-focus;
+    @include default-transition;
+  }
+//== Legends
+//
+//##
+}
+legend {
+  font-weight: 600;
+  padding: 0;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  border: none;
+}
+//** Remove margin top form first legend because of page-content-wrap padding-top
+.page-content-wrap .form-inputs {
+  @include first-child {
+    legend {
+      margin-top: 0;
+    }
+//== Labels
+//
+//##
+  }
+}
+.control-label {
+  color: $gray;
+  font-weight: 700;
+  font-size: 0.85em;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  transition: color ease-in-out 0.15s;
+}
+.form-group.focused {
+  .control-label {
+    color: $brand-primary;
+    transition: color ease-in-out 0.15s;
+  }
+//== Inputs
+//
+//##
+}
+.form-control {
+  font-size: 14px;
+}
+.form-inputs,
+.nested-one-field,
+.tab-pane {
+  @include clearfix;
+  .form-group:last-of-type,
+  .form-group:only-child,
+  .nested-one-field:last-of-type {
+    margin-bottom: 0;
+  }
+}
+.nested-one-field {
+  margin-bottom: $form-group-margin-bottom;
+}
+.nested-input-title {
+  display: block;
+  width: 100%;
+  
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &.has-error {
+    color: $brand-danger;
+  }
+//== Inputs outline
+//
+//## Styled inputs with juste a border bottom
+}
+.forms-outline {
+  .form-control {
+    @include outline-input-form;
+    &[disabled],
+    &[readonly] {
+      color: $gray;
+      padding-right: 6px;
+      padding-left: 6px;
+    }
+    &[disabled]:focus,
+    &[readonly]:focus {
+      background: $input-bg-disabled;
+      color: $gray;
+      border-color: $gray-lighter;
+    }
+  }
+  .input-group-addon {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  //** Remove margin because input have just bottom border
+  .control-label {
+    &.country,
+    &.date,
+    &.datetime,
+    &.email,
+    &.integer,
+    &.select,
+    &.selectize,
+    &.string,
+    &.tel,
+    &.text,
+    &.time,
+    &.url {
+      margin-bottom: 0;
+    }
+  //** Textarea
+  }
+  .form-control.text {
+    resize: vertical;
+  }
+  //** Selectize
+  .selectize-input,
+  .selectize-input.full {
+    @include outline-input-form;
+  }
+  .selectize-control.multi .selectize-input.has-items {
+    @include outline-input-form;
+    padding: 3px 0px;
+  }
+  //** Spinner
+  .spinbox {
+    .btn.btn-default {
+      color: $gray;
+      background-color: transparent;
+      border-color: transparent;
+      &.spinbox-up {
+        padding: 0px 9px 4px 9px;
+      }
+      &.spinbox-down {
+        padding: 6px 9px 0px 9px;
+        margin-top: 0;
+      }
+      &:hover,
+      &:focus {
+        color: $gray-darker;
+      }
+      &:active,
+      &.active,
+      &:active:focus {
+        box-shadow: none;
+      }
+  // Datepicker
+    }
+  }
+  .datetimepicker-trigger.btn-default {
+    color: $gray;
+    background-color: transparent;
+    border-color: transparent;
+    &:hover,
+    &:focus {
+      color: $gray-darker;
+    }
+    &:active,
+    &.active,
+    &:active:focus {
+      box-shadow: none;
+    }
+//== Color picker
+//
+//##
+  }
+}
+.input-group {
+  &.color {
+    max-width: 300px;
+    .input-group-addon {
+      padding: 0;
+      padding-left: 5px;
+      i {
+        border: 1px solid #ccc;
+        width: 25px;
+        height: 25px;
+      }
+//== Search form filter
+//
+//##
+    }
+  }
+}
+.filter-form {
+  @include filter-style;
+  .form-control {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  .form-control,
+  .input-group-btn {
+    background-color: transparent;
+    border: none;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+  }
+  .input-group-btn {
+    overflow: hidden;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
+  .btn {
+    background-color: transparent;
+    color: $gray;
+    &:hover {
+      color: $gray-dark;
+    }
+//== Fixed actions
+//
+//##
+  }
+}
+.form-fixed-actions {
+  margin-bottom: 100px;
+  .form-actions {
+    border-radius: 2px;
+    position: fixed;
+    bottom: 0px;
+    right: 50px;
+    left: auto;
+    padding: 8px;
+    z-index: $zindex-navbar-fixed - 10;
+    background-color: $gray-lighter;
+    @include material-box-shadow-soft(3);
+    margin-bottom: 25px;
+    text-align: center;
+    .btn {
+      margin-bottom: 10px;
+      margin-right: 0px;
+      &:last-child {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+//== Input group addons
+//
+//##
+    }
+  }
+}
+.input-group-btn:first-child > {
+  .btn,
+  .btn-group {
+    margin-right: -2px;
+  }
+}
+.input-group-lg > {
+  .form-control,
+  .input-group-addon,
+  .input-group-btn > .btn {
+    font-size: 16px;
+  }
+}
+.input-group-sm > {
+  .form-control,
+  .input-group-addon,
+  .input-group-btn > .btn {
+    font-size: 11px;
+  }
+}
+.input-group-btn > .btn {
+  &:active,
+  &:focus,
+  &:hover {
+    z-index: 0;
+  }
+//== Tabs error
+//
+//##
+}
+.nav-tabs {
+  a {
+    &.has-error {
+      color: $brand-danger;
+    }
+  }
+  > li.active {
+    > a,
+    > a:hover,
+    > a:focus {
+      &.has-error {
+        color: $brand-danger;
+        border-bottom-color: $brand-danger;
+      }
+//== Input with error
+//
+//##
+    }
+  }
+}
+.has-success {
+  .checkbox,
+  .checkbox-inline,
+  .control-label,
+  .form-control-feedback,
+  .help-block,
+  .radio,
+  .radio-inline {
+    color: $brand-success;
+  }
+  .form-control {
+    border-color: $brand-success;
+  }
+}
+.has-warning {
+  .checkbox,
+  .checkbox-inline,
+  .control-label,
+  .form-control-feedback,
+  .help-block,
+  .radio,
+  .radio-inline {
+    color: $brand-warning;
+  }
+  .form-control {
+    border-color: $brand-warning;
+  }
+}
+.has-error {
+  .checkbox,
+  .checkbox-inline,
+  .control-label,
+  .form-control-feedback,
+  .help-block,
+  .radio,
+  .radio-inline {
+    color: $brand-danger;
+  }
+}
+.bootstrap-select.error > button,
+.form-control.error,
+.has-error .form-control {
+  border-color: $brand-danger;
+}
+.bootstrap-select.valid > button,
+.form-control.valid {
+  border-color: $brand-success;
+}

data/app/assets/stylesheets/para/admin/src/_list.scss

@@ -0,0 +1,96 @@
+.actions-control {
+  list-style: none;
+  padding: 0;
+  margin: 0 15px 0 0;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  li {
+    display: inline-block;
+    padding: 0 5px;
+  }
+}
+.flextable {
+  display: table;
+  width: 100%;
+  .flextable-item {
+    display: table-cell;
+    white-space: nowrap;
+    vertical-align: middle;
+    width: 1%;
+    padding-right: 25px;
+    &:last-child {
+      padding-right: 0;
+    }
+    &.flextable-primary {
+      width: 99%;
+    }
+  }
+}
+.page-list {
+  .page-list-heading,
+  .page-list-body {
+    padding: 15px 0;
+    @include clearfix;
+  }
+  .page-entries-info {
+    padding: 15px 0 5px 0;
+  }
+  .page-list-heading:first-child,
+  .page-list-body:first-child {
+    padding-top: 0;
+  }
+  .page-list-heading {
+    border-bottom: 1px solid $gray-light;
+  }
+  .page-list-body:last-child {
+    padding-bottom: 0;
+  }
+  .page-list-footer {
+    border-top: 1px solid $gray-light;
+  }
+//** Design selectize inside list heading because selectize is always a filter
+}
+.page-list-heading {
+  .selectize-control .selectize-input {
+    @include filter-style;
+    line-height: 22px;
+    &.full {
+      font-size: 0.9em;
+    }
+  }
+  .input-group {
+    @include filter-style;
+    .form-control {
+      &:focus {
+        box-shadow: none;
+      }
+    }
+    .form-control,
+    .input-group-btn {
+      background-color: transparent;
+      border: none;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+    }
+    .input-group-btn {
+      overflow: hidden;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+    }
+    .btn {
+      background-color: transparent;
+      color: $gray;
+      border-color: transparent;
+      &:hover {
+        color: $gray-dark;
+      }
+    }
+  }
+}
+.page-entries-info {
+  font-weight: 300;
+}

data/app/assets/stylesheets/para/admin/src/_mixins.scss

@@ -0,0 +1,109 @@
+//
+// Mixins
+// --------------------------------------------------
+
+//== Colors
+//
+//## Most of the mixins is here some other are in buttons.sass & form.sass
+
+//** Merge clearfix mixin
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+//** Display flex for vertical & horizontal alignement
+}
+@mixin display_flex {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+@mixin vCenter {
+  @include display_flex;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+@mixin hCenter {
+  @include display_flex;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+//** Used for form input search, selectize and other
+@mixin filter-style {
+  border: none;
+  width: 100%;
+  background-color: $gray-lighter;
+  box-shadow: 0px 1px 3px 0px rgba(32,36,45, .12) inset, 0px 1px 2px 0px rgba(32,36,45, .24) inset;
+  border-radius: 20px;
+}
+//** Sass Mixin to target child of elements
+@mixin first-child() {
+  &:first-of-type {
+    @content;
+
+//** Default theme transition & shadow
+  }
+}
+@mixin default-transition($time: 0.3s) {
+  transition: all $time cubic-bezier(.25,.8,.25,1);
+}
+@mixin material-box-shadow($depth: 1) {
+  @if $depth == 1 {
+    box-shadow: 0 1px 3px rgba(32,36,45,0.12), 0 1px 2px rgba(32,36,45,0.24);
+  }
+  @if $depth == 2 {
+    box-shadow: 0 3px 6px rgba(32,36,45,0.16), 0 3px 6px rgba(32,36,45,0.23);
+  }
+  @if $depth == 3 {
+    box-shadow: 0 10px 20px rgba(32,36,45,0.19), 0 6px 6px rgba(32,36,45,0.23);
+  }
+  @if $depth == 4 {
+    box-shadow: 0 14px 28px rgba(32,36,45,0.25), 0 10px 10px rgba(32,36,45,0.22);
+  }
+  @if $depth == 5 {
+    box-shadow: 0 19px 38px rgba(32,36,45,0.30), 0 15px 12px rgba(32,36,45,0.22);
+  }
+}
+@mixin material-box-shadow-soft($depth: 1) {
+  @if $depth == 1 {
+    box-shadow: 0 1px 3px rgba(32,36,45,0.03), 0 1px 2px rgba(32,36,45,0.06);
+  }
+  @if $depth == 2 {
+    box-shadow: 0 3px 6px rgba(32,36,45,0.04), 0 3px 6px rgba(32,36,45,0.06);
+  }
+  @if $depth == 3 {
+    box-shadow: 0 10px 20px rgba(32,36,45,0.05), 0 6px 6px rgba(32,36,45,0.06);
+  }
+  @if $depth == 4 {
+    box-shadow: 0 14px 28px rgba(32,36,45,0.06), 0 10px 10px rgba(32,36,45,0.06);
+  }
+  @if $depth == 5 {
+    box-shadow: 0 19px 38px rgba(32,36,45,0.08), 0 15px 12px rgba(32,36,45,0.06);
+  };
+//** Grab cursor Mixin;
+}
+@mixin grab-cursor {
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+@mixin grabbing-cursor {
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}

data/app/assets/stylesheets/para/admin/src/_multi-select.scss

@@ -0,0 +1,110 @@
+//
+// Multi select
+// --------------------------------------------------
+
+//== Main style
+//
+//##
+.multi-select-field {
+  .reorder-anchor-cell {
+    display: none;
+  }
+  &.loading {    // Display FontAwesome spinner when loading results
+    .fa-search::before {
+      content: "\f110";
+    }
+  }
+  &.orderable {
+    .reorder-anchor-cell {
+      display: table-cell;
+      padding: 0 0 0 15px;
+      vertical-align: middle;
+      width: 10%;
+    }
+  }
+  .input-group.filter-form {
+    margin-bottom: 15px;
+    input {
+      padding-left: 12px;
+    }
+    .btn {
+      cursor: default;
+      &:hover {
+        color: $gray;
+      }
+      &:active {
+        box-shadow: none;
+      }
+    }
+  }
+  .panel-heading {
+    padding: 5px 8px 5px 15px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    .panel-title {
+      color: $gray;
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+  }
+  .panel {
+    box-shadow: none;
+    .panel-body {
+      max-height: 318px;
+      overflow: auto;
+      padding: 0;
+    }
+    &.available-items {
+      .available-item {
+        height: 53px;
+        &:hover {
+          background-color: $gray-lighter;
+          color: $brand-primary;
+        }
+        .badge {
+          background-color: transparent;
+          color: $gray;
+          display: none;
+          float: right;
+          padding-right: 0;
+          text-transform: uppercase;
+        }
+      }
+      .selected {
+        td {
+          background-color: $gray-lighter;
+          color: $gray;
+        }
+        .btn {
+          display: none;
+        }
+        .badge {
+          display: inline;
+        }
+      }
+    }
+    &.selected-items {
+      .selected-item {
+        height: 53px;
+        &:hover {
+          background-color: $gray-lighter;
+          color: $brand-primary;
+        }
+      }
+    }
+    .no-items {
+      height: 75px;
+      background-color: $gray-lighter;
+      color: $gray;
+      padding: 15px;
+    }
+  }
+  .remove-button-cell,
+  .add-button-cell {
+    .btn {
+      float: right;
+      width: 22px;
+    }
+  }
+}