para 0.6.9 → 0.7.0

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

@@ -0,0 +1,271 @@
+//
+// Form
+// --------------------------------------------------
+
+//== Form mixins
+//
+//## Form mixins is there because is doesnt have to be share
+
+=outline-input-form
+  padding: 6px 0px
+  -webkit-appearance: none
+  +box-shadow(none)
+  +border-radius(0)
+  border: none
+  border-bottom: 1px solid $input-border
+  +default-transition
+  &:focus, &.focus
+    +box-shadow(0px 1px 0px $input-border-focus)
+    border-color: $input-border-focus
+    +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
+  +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-inputs,
+.nested-one-field,
+.tab-pane
+  +clearfix
+  .form-group:last-of-type,
+  .form-group:only-child
+    margin-bottom: 0
+
+.form-control
+  font-size: 14px
+
+
+//== Inputs outline
+//
+//## Styled inputs with juste a border bottom
+
+.forms-outline
+  .form-control
+    +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
+
+  //** Redactor
+  .redactor-editor
+    +outline-input-form
+
+  .redactor-toolbar
+    border: none
+    background-color: $gray-lighter
+    +border-radius(0)
+
+  //** Selectize
+  .selectize-input,
+  .selectize-input.full
+    +outline-input-form
+
+  .selectize-control.multi .selectize-input.has-items
+    +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)
+
+//== Search form filter
+//
+//##
+
+.filter-form
+  +filter-style
+  .form-control
+    &:focus
+      +box-shadow(none)
+  .form-control,
+  .input-group-btn
+    background-color: transparent
+    border: none
+    +border-left-radius(20px)
+  .input-group-btn
+    overflow: hidden
+    +border-left-radius(0)
+    +border-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
+    padding: 8px
+    z-index: $zindex-navbar-fixed - 10
+    background-color: $gray-lighter
+    +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.sass

@@ -0,0 +1,61 @@
+//
+// List
+// --------------------------------------------------
+
+//== Page liste
+//
+//##
+
+.actions-control
+  list-style: none
+  padding: 0
+  margin: 0
+  li
+    +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
+    +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
+    +filter-style
+    line-height: 22px
+    &.full
+      font-size: 0.9em
+
+.page-entries-info
+  font-weight: 300

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

@@ -0,0 +1,113 @@
+//
+// Mixins
+// --------------------------------------------------
+
+//== Colors
+//
+//## Most of the mixins is here some other are in buttons.sass & form.sass
+
+//** Dont need to use .fa class etc juste add &:before content: '\???' where you want
+=fontAwesome
+  font-family: FontAwesome
+  font-weight: normal
+  font-style: normal
+  text-decoration: inherit
+  -webkit-font-smoothing: antialiased
+  /* sprites.less reset */
+  display: inline-block
+  width: auto
+  height: auto
+  line-height: normal
+  vertical-align: baseline
+  background-image: none
+  background-position: 0% 0%
+  background-repeat: repeat
+  margin-top: 0
+
+//** Merge clearfix mixin
+=clearfix()
+  &:before,
+  &:after
+    content: " "
+    display: table
+  &:after
+    clear: both
+
+//** Display flex for vertical & horizontal alignement
+
+=display_flex
+  display: -webkit-box
+  display: -moz-box
+  display: -ms-flexbox
+  display: -webkit-flex
+  display: flex
+
+=vCenter
+  +display_flex
+  -webkit-box-align: center
+  -moz-box-align: center
+  -ms-flex-align: center
+  -webkit-align-items: center
+  align-items: center
+
+=hCenter
+  +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
+=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
+=first-child()
+  &:first-of-type
+    @content
+
+//** Default theme transition & shadow
+=default-transition($time: 0.3s)
+  +transition(all $time cubic-bezier(.25,.8,.25,1))
+
+=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))
+
+=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
+
+=grab-cursor
+  cursor: -moz-grab
+  cursor: -o-grab
+  cursor: -ms-grab
+  cursor: grab
+
+=grabbing-cursor
+  cursor: -moz-grabbing
+  cursor: -o-grabbing
+  cursor: -ms-grabbing
+  cursor: grabbing

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

@@ -0,0 +1,91 @@
+//
+// 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