spina 0.10.0 → 0.11.0

data/app/assets/stylesheets/spina/_sortable_lists.sass

@@ -0,0 +1,177 @@
+// Sortable lists
+
+.dd
+  margin: -20px
+  overflow: hidden
+  position: relative
+
+  & > .dd-list > .dd-item:first-child
+    border-top: none
+
+.dd-item-inner.dd-handle
+  cursor: move
+
+.dd-item-inner .sortable-link
+  @include transform(translateX(-26px))
+  @include transition(all .2s ease)
+
+.dd-item-inner.dd-handle .sortable-link
+  @include transform(translateX(0))
+
+.dd-item-inner:before
+  @extend .icon, .icon-bars
+  color: #ccc
+  display: inline-block
+  height: 18px
+  opacity: 0
+  vertical-align: middle
+  width: 26px
+  @include transform(translateX(-26px))
+  @include transition(all .2s ease)
+
+.dd-item-inner.dd-handle:before
+  opacity: 1
+  @include transform(translateX(0))
+
+.dd-list
+  list-style: none
+  margin: 0
+  padding: 0
+  position: relative
+
+  .dd-placeholder
+    position: relative
+
+    &:after
+      border: 1px dashed #ddd
+      box-sizing: border-box
+      content: " "
+      display: block
+      height: 100%
+      margin-left: 0px
+      top: 0px
+      width: 100%
+
+  .dd-list
+    background: tint(#f5f5fa, 50%)
+    border-top: 1px solid #ddd
+
+    .dd-placeholder
+      background: tint(#f5f5fa, 50%)
+
+      &:after
+        margin-left: 40px
+
+    .dd-item:last-child
+      border-bottom: none
+    
+    .dd-item
+      padding-left: 20px
+
+    .dd-list
+      background: tint(#f5f5fa, 0%)
+      margin-left: -20px
+
+      .dd-item
+        padding-left: 60px
+
+      .dd-placeholder
+        background: tint(#f5f5fa, 0%)
+
+        &:after
+          margin-left: 90px
+
+.dd-collapsed .dd-list
+  display: none
+
+.dd-item
+  border-bottom: 1px solid #ddd
+
+.dd-item, .dd-empty, .dd-placeholder
+  margin: 0
+  padding: 0
+  position: relative
+
+.dd-placeholder, .dd-empty
+  background: #fcfcfc
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+
+.dd-empty
+  background: blue
+  min-height: 100px
+
+.dd-item-inner
+  padding: 10px 20px
+  text-decoration: none
+
+  a
+    margin: 0
+
+  a.sortable-link, a.sortable-link:hover
+    color: $primary-color
+    font-size: 13px
+    font-weight: 600
+    padding-left: 0
+
+    small
+      font-size: 13px
+      font-weight: 400
+      margin-left: 13px
+
+  .pull-right a
+    opacity: 0
+    @include transform(translateX(50px))
+    @include transition(all .4s ease)
+
+  &:hover .pull-right a
+    opacity: 1
+    @include transform(translateX(10px))
+
+.dd-dragel
+  pointer-events: none
+  position: absolute
+  z-index: 9999
+
+  & > .dd-item .dd-handle
+    margin-top: 0
+
+.dd-item > button
+  background: transparent
+  border: 0
+  cursor: pointer
+  display: none
+  float: left
+  font-size: 9px
+  height: 52px
+  line-height: 52px
+  overflow: hidden
+  margin-left: 10px
+  padding: 0
+  position: relative
+  text-align: center
+  text-indent: 100%
+  white-space: nowrap
+  width: 30px
+  z-index: 1
+
+  &:before
+    @extend .icon, .icon-plus
+    color: $primary-color
+    display: block
+    line-height: 52px !important
+    position: absolute
+    text-align: center
+    text-indent: 0
+    width: 100%
+
+  &[data-action="collapse"]:before
+    @extend .icon, .icon-min
+    color: $primary-color
+    display: block
+    line-height: 52px !important
+    position: absolute
+    text-align: center
+    text-indent: 0
+    width: 100%

data/app/assets/stylesheets/spina/_tables.sass

@@ -0,0 +1,301 @@
+// Tables
+
+.table-container
+  margin: 0 -40px
+
+  tbody
+    tr
+      background: #fff
+
+  table.table tr td:first-child, table.table tr th:first-child
+    padding-left: 40px
+
+  table.table tr td:last-child, table.table tr th:last-child
+    padding-right: 40px
+
+.modal .table-container
+  margin: 0 -20px
+
+  table.table tr td:first-child, table.table tr th:first-child
+    padding-left: 20px
+
+  table.table tr td:last-child, table.table tr th:last-child
+    padding-right: 20px
+
+table.table
+  color: #333
+  font-size: 14px
+  line-height: 18px
+  margin: 20px 0
+  width: 100%
+
+  thead tr, tbody tr
+    border-bottom: 1px solid #eee
+
+  tbody tr:last-child
+    border: none
+
+  thead th
+    color: #333
+    font-weight: 600
+    outline: none
+    padding: 12px 12px
+    text-align: left
+
+  tbody td, tbody th
+    padding: 14px 12px
+    text-align: left
+
+  thead th, tbody td, tbody th
+    &.text-right
+      text-align: right
+
+  th.nowrap, td.nowrap
+    white-space: nowrap
+
+  small
+    color: #666
+    display: block
+    font-size: 13px
+    font-weight: normal
+
+  td .button
+    margin-bottom: 0
+
+  td.align-center
+    text-align: center
+
+  td.align-left
+    text-align: left
+
+  td.align-right, th.align-right
+    text-align: right
+
+  a.table-link
+    display: block
+    margin: -10px 0
+    padding: 10px 0
+
+  th .table-sort
+    border-radius: 3px 3px 0 0
+    color: #333
+    display: block
+    margin: -12px -16px -13px -16px
+    padding: 13px 16px 12px 16px
+
+  th .table-column-sorted
+    background: #fff
+    border: 1px solid #eee
+    border-bottom: 1px solid #fff
+    padding: 13px 15px 12px 15px
+    position: relative
+
+    &:after
+      font-size: 16px
+      position: absolute
+      right: 10px
+      @extend .icon, .icon-caret-up:before
+
+    &.table-column-sorted-desc:after
+      @extend .icon-caret-down:before
+
+  th.text-right .table-column-sorted
+    text-align: left
+
+// Table form
+
+table.table.table-form
+  tr td:first-child
+    font-weight: 600
+    width: 240px
+
+  thead tr, tbody tr
+    border-bottom: none !important
+
+  td .image
+    border-radius: 3px
+    display: inline-block
+    height: 120px
+    overflow: hidden
+    width: 120px
+
+    img
+      display: block
+      height: 100%
+      width: 100%
+
+  td .attachment
+    display: inline-block
+    margin: 10px 25px 10px 0
+
+    &:before
+      content: "S"
+      font-family: $icon-font
+      font-size: 28px
+      margin-right: 10px
+      vertical-align: middle
+
+// Progress bars
+.progress
+  position: relative
+
+.progress-bar
+  border: 1px solid #9f9f9f
+  border-radius: 6px
+  height: 12px
+  overflow: hidden
+  position: relative
+  @include display(flex)
+  @include transition(all .2s ease)
+
+.progress-bar-divider
+  border-left: 1px solid #9f9f9f
+  height: 10px
+  opacity: .5
+  position: relative
+  @include flex(1)
+
+  &:first-child  
+    border: none
+
+.progress-bar-inner
+  background: #cdcdcd
+  height: 10px
+  left: 0
+  position: absolute
+  top: 0
+
+.progress-label
+  color: #838383
+  display: block
+  font-weight: 700
+  font-size: 10px
+  left: 0
+  letter-spacing: 1px
+  line-height: 10px
+  opacity: 0
+  position: absolute
+  text-align: center
+  text-transform: uppercase
+  top: 2px
+  width: 100%
+  @include transition(all .2s ease)
+
+tr:hover .progress
+  .progress-bar
+    @include transform(translateY(-6px))
+
+  .progress-label
+    opacity: 1
+    @include transform(translateY(9px))
+
+.progress-bar-primary
+  & .progress-bar
+    border-color: tint($primary-color, 20%)
+
+  & .progress-bar-divider
+    border-color: tint($primary-color, 20%)
+
+  & .progress-bar-inner
+    background: tint($primary-color, 60%)
+
+  & .progress-label
+    color: tint($primary-color, 20%)
+
+.progress-bar-success
+  & .progress-bar
+    border-color: $success-color
+
+  & .progress-bar-divider
+    border-color: $success-color
+
+  & .progress-bar-inner
+    background: tint($success-color, 60%)
+
+  & .progress-label
+    color: $success-color
+
+.progress-bar-danger
+  & .progress-bar
+    border-color: $danger-color
+
+  & .progress-bar-divider
+    border-color: $danger-color
+
+  & .progress-bar-inner
+    background: tint($danger-color, 60%)
+
+  & .progress-label
+    color: $danger-color
+
+// Clickable tables
+
+.table-clickable
+  tbody tr
+    @include transition(background .1s ease)
+
+  tbody tr:hover
+    background: #f5f5fa
+
+  tbody tr, tbody tr input[type="checkbox"], tbody tr input[type="radio"]
+    cursor: pointer
+
+// Datatables
+
+.dataTables_filter
+  display: none
+
+.table-container > .search-input
+  margin-right: 40px
+
+.dataTables_info
+  color: #666
+  display: inline-block
+  font-size: 12px
+  margin-left: 40px
+
+.dataTable
+  th.sorting_desc
+    &:after
+      @extend .icon, .icon-caret-down:before
+      float: right
+
+  th.sorting_asc
+    &:after
+      @extend .icon, .icon-caret-up:before
+      float: right
+
+.dataTables_paginate
+  float: right
+  margin-right: 40px
+
+  a
+    color: #333
+    cursor: pointer
+    display: inline-block
+    font-size: 13px
+    font-weight: bold
+    line-height: 24px
+    padding: 0 13px
+
+  a.paginate_disabled_previous, a.paginate_disabled_next
+    display: none
+
+// Information tables
+.information-tables
+  @include display(flex)
+
+  .information-table
+    @include flex(1)
+
+    th, td
+      color: #333
+      font-size: 14px
+      font-weight: 500
+      line-height: 30px
+      text-align: left
+      vertical-align: top
+
+    th
+      color: #999
+      padding-right: 10px

data/app/assets/stylesheets/spina/_trix.sass

@@ -0,0 +1,99 @@
+trix-toolbar
+  margin-bottom: 6px
+
+  .button-group
+    margin-right: 10px
+
+  .button.active
+    background: $primary-color
+    color: #fff
+
+  .link_url_fields input
+    margin-top: 6px
+
+  .link_url_fields .button-group input
+    margin-top: 10px
+
+trix-editor
+  font-size: 16px
+  line-height: 18px
+  font-weight: normal
+  min-height: 100px
+
+  h1, h2, h3, h4, h5, h6
+    padding-left: 24px
+    position: relative
+
+    &:after
+      color: #ccc
+      content: "H1"
+      font-size: 12px
+      font-weight: bold
+      left: 0px
+      line-height: inherit
+      position: absolute
+      top: 0px
+
+  h1, h2, h3, h4, h5, h6
+    font-size: 24px
+    font-weight: 600
+    line-height: 38px
+
+  h2
+    font-size: 22px
+    line-height: 34px
+
+  h3
+    font-size: 20px
+    line-height: 30px
+
+  h4
+    font-size: 18px
+    line-height: 26px
+
+  h5
+    font-size: 16px
+    line-height: 22px
+
+  h6
+    font-size: 14px
+    line-height: 18px
+
+  h2:after
+    content: "H2"
+
+  h3:after
+    content: "H3"
+
+  h4:after
+    content: "H4"
+
+  h5:after
+    content: "H5"
+
+  h6:after
+    content: "H6"
+
+  a
+    text-decoration: underline
+
+  p
+    margin: 0
+
+  ul
+    list-style: disc
+    padding-left: 20px
+
+  figure.attachment
+    margin-bottom: 12px
+    margin-top: 12px
+    max-width: 200px
+    overflow: hidden
+
+    figcaption, .remove
+      display: none
+
+    img
+      border-radius: 3px
+      display: block
+      width: 100%

data/app/assets/stylesheets/spina/_wizard.sass

@@ -0,0 +1,122 @@
+.wizard-steps
+  margin: 30px 0 54px 0
+  @include display(flex)
+
+  .wizard-step
+    @include display(flex)
+
+    &:not(:last-child)
+      @include flex(1)
+
+  .wizard-step-circle
+    background: #e7e7ee
+    border: 1px solid #d6d6db
+    border-radius: 24px
+    height: 48px
+    position: relative
+    width: 48px
+
+    &:after
+      background: #fff
+      border: 1px solid #d6d6db
+      border-radius: 20px
+      content: " "
+      display: block
+      height: 40px
+      left: 3px
+      position: absolute
+      top: 3px
+      width: 40px
+
+    .wizard-step-label
+      color: #999
+      font-size: 14px
+      font-weight: 600
+      margin-left: 50%
+      left: 0
+      position: absolute
+      top: 56px
+      @include transform(translateX(-50%))
+
+    i.icon
+      color: #dddde5
+      font-size: 22px
+      height: 46px
+      line-height: 46px
+      position: absolute
+      text-align: center
+      width: 46px
+      z-index: 1
+
+  .wizard-step-connector
+    background: #e7e7ee
+    border-bottom: 1px solid #d6d6db
+    border-top: 1px solid #d6d6db
+    height: 12px
+    margin: 0 -1px
+    margin-top: 18px
+    position: relative
+    z-index: 3
+    @include flex(1)
+
+  .wizard-step.done
+    .wizard-step-circle:before
+      color: #fff
+      font-size: 12px
+      height: 46px
+      line-height: 46px
+      text-align: center
+      position: absolute
+      width: 46px
+      z-index: 4
+      @extend .icon-large-check, .icon
+
+    .wizard-step-circle:after
+      background: $primary-color
+      z-index: 3
+
+    &:not(:first-child) .wizard-step-connector:before
+      background: $primary-color
+      border-color: transparent
+      content: " "
+      height: 4px
+      left: -48px
+      margin-right: 4px
+      position: absolute
+      right: 100%
+      top: 3px
+      z-index: 5
+
+    &:not(:last-child) .wizard-step-connector:after
+      background: $primary-color
+      border-radius: 0 2px 2px 0
+      content: " "
+      height: 4px
+      left: -4px
+      position: absolute
+      right: 0px
+      top: 3px
+      z-index: 5
+
+  .wizard-step.error
+    .wizard-step-circle:before
+      color: #fff
+      font-size: 12px
+      height: 46px
+      line-height: 46px
+      text-align: center
+      position: absolute
+      width: 46px
+      z-index: 4
+      @extend .icon-cross, .icon
+
+    .wizard-step-circle:after
+      background: $danger-color
+      z-index: 3
+
+    .wizard-step-label
+      color: $danger-color
+
+  .wizard-step.current
+    .wizard-step-label
+      color: $primary-color