spina 2.0.1 → 2.2.0

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

@@ -1,54 +0,0 @@
-// Metropolis
-
-@font-face
-  font-family: "Metropolis"
-  font-style: normal
-  font-weight: normal
-  src: url(asset-path("spina/Metropolis-Regular.woff2")) format('woff2')
-
-@font-face
-  font-family: "Metropolis"
-  font-style: normal
-  font-weight: 500
-  src: url(asset-path("spina/Metropolis-Medium.woff2")) format('woff2')
-
-@font-face
-  font-family: "Metropolis"
-  font-style: normal
-  font-weight: 600
-  src: url(asset-path("spina/Metropolis-SemiBold.woff2")) format('woff2')
-
-@font-face
-  font-family: "Metropolis"
-  font-style: normal
-  font-weight: 700
-  src: url(asset-path("spina/Metropolis-Bold.woff2")) format('woff2')
-
-@font-face
-  font-family: "Metropolis"
-  font-style: italic
-  font-weight: normal
-  src: url(asset-path("spina/Metropolis-RegularItalic.woff2")) format('woff2')
-
-// Icons
-
-@font-face
-  font-family: "ics_spina"
-  font-style: normal
-  font-weight: normal
-  src: url(asset-path('spina/ics_spina.woff')) format('woff')
-
-.icon
-  display: inline-block
-  vertical-align: middle
-  font-size: inherit
-  line-height: inherit // NOTE: should be 1
-  font-family: "ics_spina" !important
-  font-style: normal !important
-  font-variant: normal !important
-  font-weight: normal !important
-  text-transform: none !important
-  speak: none
-  text-rendering: auto
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale

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

@@ -1,893 +0,0 @@
-// Horizontal form
-.horizontal-form
-  .horizontal-form-group
-    border-bottom: 1px solid #e5e5e5
-    display: flex
-    margin: 0 -40px
-    padding: 20px 40px
-
-    &:first-child
-      margin-top: -20px
-
-    &:last-child
-      border-bottom: none
-      margin-bottom: -20px
-
-  .horizontal-form-label
-    color: #333
-    display: flex
-    flex-direction: column
-    font-size: 13px
-    font-weight: 600
-    justify-content: center
-    line-height: 18px
-    padding-right: 20px
-    width: 240px
-
-    small
-      color: #666
-      display: block
-      font-size: 13px
-      font-weight: normal
-
-  .horizontal-form-content
-    align-self: flex-start
-    flex: 1
-
-  .image
-    border-radius: 5px
-    display: inline-block
-    height: 120px
-    overflow: hidden
-    width: 120px
-
-    img
-      display: block
-      height: 100%
-      width: 100%
-
-// Sidebar form
-.sidebar-form
-  display: flex
-  margin: 0 auto
-  max-width: 960px
-
-.sidebar-form-content
-  flex: 1
-
-  .well
-    margin-right: 20px
-    padding-bottom: 0
-    padding-top: 0
-
-.sidebar-form-sidebar
-  width: 320px
-
-.sidebar-form-group
-  border-bottom: 1px solid #eee
-  display: flex
-  margin: 0 -20px
-  padding: 0 20px
-
-  &:last-child
-    border-bottom: none
-
-.sidebar-form-label
-  color: #333
-  font-size: 14px
-  font-weight: 600
-  line-height: 50px
-  width: 180px
-
-.sidebar-form-control
-  flex: 1
-  margin-right: -20px
-  position: relative
-
-  .switch
-    margin: 10px
-
-  #{$all-text-inputs}, textarea, .text-input
-    background: none
-    border: none
-    border-radius: 0
-    box-shadow: none
-
-    &:disabled
-      background: none
-
-  &[data-form-prepend]
-    padding-left: 14px
-
-  &[data-form-prepend]:before
-    content: attr(data-form-prepend)
-    font-size: 14px
-    font-weight: 600
-    left: 10px
-    line-height: 50px
-    position: absolute
-    top: 0
-
-  &[data-form-append]:after
-    content: attr(data-form-append)
-    font-size: 14px
-    font-weight: 600
-    line-height: 50px
-    padding: 0 20px
-    position: absolute
-    right: 0
-    top: 0
-
-  trix-toolbar
-    margin-top: 20px
-
-  trix-editor.text-input
-    padding-left: 0
-    white-space: initial
-
-  #{$all-text-inputs}
-    height: 50px
-
-  a.media_picker
-    background: none
-    border: none
-    box-shadow: none
-    outline: none
-    padding-left: 0
-
-    .image
-      border-radius: 3px
-      display: inline-block
-      overflow: hidden
-
-      img
-        display: block
-
-.sidebar-form-images
-  margin-top: 25px
-
-  &:after
-    clear: both
-    content: " "
-    display: block
-
-.sidebar-form-image
-  background: #ededf2
-  border: 1px solid #e5e5ea
-  border-radius: 2px
-  display: inline-block
-  height: 100px
-  margin-bottom: 10px
-  margin-right: 10px
-  overflow: hidden
-  position: relative
-  width: 100px
-
-  > img
-    border-radius: 2px
-    display: block
-    left: 50%
-    max-height: 100%
-    max-width: 100%
-    position: absolute
-    top: 50%
-    transform: translateY(-50%) translateX(-50%)
-
-  .sidebar-form-image-overlay
-    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
-    content: " "
-    display: block
-    height: 25%
-    left: 0
-    opacity: 0
-    position: absolute
-    top: 75%
-    transition: opacity .2s ease
-    width: 100%
-
-  &:hover .sidebar-form-image-overlay
-    opacity: 1
-
-  &:first-child
-    height: 240px
-    width: 320px
-
-  &:nth-child(3n + 1)
-    margin-right: 0
-
-  a
-    opacity: .5
-    padding: 6px
-    position: relative
-    z-index: 1
-    transition: opacity .2s ease
-
-  a img:first-child
-    display: block
-
-  a img:last-child
-    display: none
-
-  input[type="checkbox"]:checked + a img:first-child
-    display: none
-
-  input[type="checkbox"]:checked + a img:last-child
-    display: block
-
-  input[type="checkbox"]:checked + a
-    opacity: 1
-
-  &:first-child a
-    padding: 10px
-
-  &:hover a
-    opacity: 1
-
-  &:not(:first-child) a img
-    height: 75%
-    width: 75%
-
-.sidebar-form-image-dropzone
-  background: #ededf2
-  border: 1px solid #c3c3c3
-  border-radius: 3px
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15)
-  color: #666
-  cursor: pointer
-  font-size: 13px
-  margin-bottom: 25px
-  padding: 12px
-  width: 100%
-
-  &:hover
-    background: shade(#ededf2, 2.5%)
-
-  &::-webkit-file-upload-button
-    background: none
-    border: none
-    color: #666
-    cursor: pointer
-    font-size: 13px
-    font-weight: 500
-
-// Form groups
-.form-group
-  margin-bottom: 20px
-
-// Labels
-.form-label
-  color: #333
-  font-size: 14px
-  font-weight: 600
-  line-height: 28px
-
-.form-control
-  position: relative
-
-.form-control[data-form-prepend] input
-  padding-left: 28px
-
-.form-control[data-form-prepend]:before
-  color: #333
-  content: attr(data-form-prepend)
-  font-size: 14px
-  font-weight: 600
-  left: 0
-  line-height: 39px
-  padding: 0 12px
-  position: absolute
-  top: 0
-
-.form-control[data-form-append]:after
-  color: #333
-  content: attr(data-form-append)
-  font-size: 14px
-  font-weight: 600
-  line-height: 39px
-  padding: 0 12px
-  position: absolute
-  right: 0
-  top: 0
-
-// Form checkbox
-
-.form-checkbox
-  label
-    cursor: pointer
-    display: block
-    font-size: 13px
-    font-weight: 600
-    line-height: 20px
-    position: relative
-
-  input[type="checkbox"]
-    display: none
-
-  input[type="checkbox"] + label:before
-    background: transparent
-    border: 1px dashed shade(#e6e6ec, 20%)
-    border-radius: 3px
-    content: " "
-    display: inline-block
-    height: 20px
-    margin-right: 10px
-    transition: all .2s ease
-    vertical-align: middle
-    width: 20px
-
-  input[type="checkbox"]:checked + label:before
-    background: tint($primary-color, 10%)
-    border-color: transparent
-
-  input[type="checkbox"] + label:after
-    color: #fff
-    font-size: 10px
-    height: 20px
-    left: 0px
-    line-height: 20px
-    position: absolute
-    text-align: center
-    top: 0px
-    transform: scale(0)
-    transition: all .2s ease
-    vertical-align: middle
-    width: 20px
-    @extend .icon
-    content: "\f120"
-
-  input[type="checkbox"]:checked + label:after
-    transform: scale(1)
-
-// Input groups
-.input-group
-  display: flex
-
-  div
-    #{$all-text-inputs}, .text-input, .select-dropdown
-      height: 100%
-
-  & > div, #{$all-text-inputs}, .text-input, .select-dropdown
-    flex: 1
-
-    &:not(:first-child)
-      &, #{$all-text-inputs}, .text-input, .select-dropdown
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
-
-    &:not(:last-child)
-      &, #{$all-text-inputs}, .text-input, .select-dropdown
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
-        border-right: none
-
-// Inputs
-
-#{$all-text-inputs}, textarea, .text-input
-  border: 1px solid #c3c3c3
-  border-radius: 3px
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
-  color: #333
-  font-size: 14px
-  padding: 10px
-  transition: border .2s ease
-  width: 100%
-
-  &.input-mini
-    width: 75px
-
-  &.input-small
-    width: 100px
-
-  &.input-medium
-    width: 200px
-
-  &.input-large
-    width: 300px
-
-  &.input-rounded
-    border-radius: 20px
-
-  &:after
-    content: " "
-    display: block
-    height: 10px
-    position: absolute
-    top: 0px
-    right: 0px
-    width: 10px
-
-  &.input-search:after
-    content: " "
-    display: block
-    height: 10px
-    width: 10px
-
-  &:disabled
-    background: #ededf2
-
-#{$all-text-inputs-focus}, textarea:focus, .text-input:focus
-  border-color: $primary-color
-  outline: none
-
-textarea
-  min-height: 120px
-  resize: vertical
-
-fieldset
-  border: none
-  padding: 0
-
-// Errors
-
-.field_with_errors
-  #{$all-text-inputs}, textarea
-    border: 1px solid $error-color
-
-  #{$all-text-inputs-focus}, textarea:focus
-    border: 1px solid $danger-color
-
-// Search input
-
-.search-input
-  display: inline-block
-  position: relative
-
-  input
-    padding-left: 30px
-    padding-right: 28px
-
-.search-input:before, .clear-input
-  color: #999
-  @extend .icon, .icon-search
-  display: block
-  font-size: 13px
-  font-weight: 400
-  left: 11px
-  position: absolute
-  top: 13px
-
-.clear-input
-  color: #ccc
-  display: none
-  left: auto
-  padding: 10px 9px
-  right: 0
-  top: 0
-
-  &:before
-    display: none
-
-.clear-input:hover
-  color: #999
-
-input.datepicker
-  background: url(asset-path('spina/datepicker.svg')) no-repeat center right
-
-// Switch
-
-.switch
-  background: #d9d9ec
-  border-radius: 23px
-  display: block
-  height: 29px
-  margin-bottom: 0
-  padding: 3px
-  position: relative
-  transition: background .4s ease
-  width: 46px
-
-  .knob
-    background: #f5f5f5
-    border-radius: 23px
-    box-shadow: 0 3px 10px rgba(0, 0, 0, .1)
-    display: inline-block
-    height: 23px
-    position: absolute
-    transition: all .2s ease
-    width: 23px
-
-  &:hover .knob
-    background: #fff
-    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
-
-  &.activated, &.active
-    background: $success-color
-
-    .knob
-      background: #fff
-
-  &.active .knob
-    transform: translate3d(17px, 0, 0)
-
-// Checkboxes
-
-.checkbox, .radio
-  display: inline-block
-
-  input[type="checkbox"], input[type="radio"]
-    display: none
-
-  label
-    color: #333
-    cursor: pointer
-    display: inline-block
-    font-size: 14px
-    font-weight: 600
-    height: 16px
-    padding-left: 24px
-    position: relative
-    white-space: nowrap
-    width: 16px
-
-  label:before
-    background: #fff
-    border: 1px solid #c3c3c3
-    border-radius: 6px
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
-    content: ""
-    display: inline-block
-    height: 14px
-    left: 0
-    margin-right: 10px
-    position: absolute
-    top: 0
-    width: 14px
-
-  label:after
-    content: "j"
-    color: #666
-    font-family: $icon-font
-    font-size: 16px
-    font-weight: normal
-    left: 2px
-    line-height: 18px
-    text-align: center
-    top: -2px
-    transition: opacity .1s ease
-    opacity: 0
-    position: absolute
-
-  input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after
-    opacity: 1
-
-.radio
-  margin: 6px 0
-
-  label:before
-    border-radius: 8px
-
-// Select boxes
-
-.select-dropdown
-  background: #fff
-  border: 1px solid #e2e2e2
-  border-radius: 6px
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
-  display: inline-block
-  font-family: $font-family
-  line-height: 32px
-  margin: 0
-  overflow: hidden
-  padding: 0
-  position: relative
-  transition: all .2s ease
-  white-space: nowrap
-  @extend .icon, .icon-caret-down
-
-  .field_with_errors
-    display: inline-block
-
-  label
-    background: #f5f5f5
-    border-right: 1px solid #ddd
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
-    color: #999
-    display: inline-block
-    height: 38px
-    line-height: 38px
-    font-family: $font-family
-    font-size: 13px
-    font-weight: 600
-    margin-right: -4px
-    padding: 0 11px
-
-  &:hover
-    background: #f5f5f5
-    border: 1px solid #ccc
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
-
-  &:active
-    background: #eee
-    border: 1px solid #c9c9c9
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1)
-
-  &:before
-    color: #666
-    font-size: 14px
-    font-weight: normal
-    line-height: 32px
-    position: absolute
-    right: 8px
-    top: 5px
-    z-index: 1
-
-  select
-    background-color: transparent
-    background-image: none
-    border: none
-    box-shadow: none
-    color: #666
-    cursor: pointer
-    display: block
-    font-family: $font-family
-    font-size: 14px
-    font-weight: 500
-    height: 42px
-    margin: 0
-    outline: none
-    padding: 13px 36px 13px 15px
-    position: relative
-    width: 115%
-    z-index: 2
-    -webkit-appearance: none
-
-// Structure form
-
-.structure-form
-  display: flex
-  position: relative
-
-  .structure-form-menu
-    box-sizing: content-box
-    min-width: 260px
-    width: 260px
-
-    label
-      display: block
-      font-size: 13px
-      padding: 12px 20px
-      text-transform: none
-
-    ul
-      box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
-      position: relative
-
-    ul li
-      overflow: hidden
-
-    ul li .structure-item-remove
-      color: #999
-      float: right
-
-    ul li a
-      background: rgba(255, 255, 255, .4)
-      border: 1px solid #e6e6e6
-
-    ul li:not(:last-child) a
-      border-bottom: none
-
-    ul li:first-child a
-      border-top-left-radius: 4px
-      border-top-right-radius: 4px
-
-    ul li:last-child a
-      border-bottom-left-radius: 4px
-      border-bottom-right-radius: 4px
-
-    ul li a, ul li.sortable-placeholder
-      color: #444
-      cursor: pointer
-      display: flex
-      font-weight: 600
-      font-size: 13px
-      height: 44px
-      line-height: 44px
-      outline: none
-      padding-left: 20px
-      padding-right: 6px
-
-      &:hover
-        background: #f9f9f9
-
-      i
-        color: #ddd
-        font-size: 16px
-        margin-right: 8px
-        vertical-align: middle
-
-      span
-        white-space: nowrap
-        overflow: hidden
-        text-overflow: ellipsis
-
-    ul li.sortable-placeholder
-      background: #f9f9f9
-
-    ul li.active a
-      background: white
-      color: $primary-color
-
-  .structure-form-content
-    box-sizing: border-box
-    margin-top: -29px
-    padding-left: 15px
-    width: 100%
-
-    .structure-form-pane
-      display: none
-
-      &.active
-        display: block
-
-  .add_structure
-    float: right
-    margin-top: 12px
-    outline: none
-
-  .structure-form-part
-    padding: 5px 0
-
-    .select-dropdown
-      select
-        width: auto
-
-// Custom file input
-
-.new_document
-  line-height: 52px
-
-  .customfile
-    background: rgba(0, 0, 0, .015)
-    border: 1px dashed rgba(0, 0, 0, .1)
-    border-radius: 10px
-    cursor: pointer
-    height: 100%
-    margin: 20px 0
-    overflow: hidden
-    padding-left: 20px
-    position: relative
-    text-align: left
-    width: 100%
-    @extend .icon-upload-outline
-
-    &:before
-      color: #bbb
-      display: block
-      font-weight: 400
-      padding: 6px 0
-      @extend .icon
-      font-size: 28px
-      transition: color .2s ease
-      vertical-align: middle
-
-    &:after
-      animation: "rotate" 2s linear infinite
-      color: #bbb
-      content: "\f131"
-      @extend .icon
-      display: none
-      font-size: 36px
-      height: 50px
-      width: 36px
-
-  .customfile.loading
-    padding: 7px 20px
-
-    &:before
-      display: none
-
-    &:after
-      display: block
-
-  .customfile:hover:before
-    color: #333
-
-  .customfile-feedback
-    display: none
-
-  .customfile-input
-    background: transparent
-    border: 0
-    cursor: pointer !important
-    display: block
-    height: 100%
-    left: -100% !important
-    opacity: 0
-    position: absolute
-    top: 0 !important
-    width: 200%
-    z-index: 9
-
-  .customfile-button
-    display: none
-
-.document-select
-  ul
-    margin: -20px -20px 20px -20px
-
-  .item
-    border-top: 1px solid #efefef
-    cursor: pointer
-    line-height: 1
-    margin: 0
-    position: relative
-    width: 100%
-
-    label
-      display: block
-      font-size: 0.875rem
-      margin: 0
-      padding: 20px
-
-    input[type="checkbox"],
-    input[type="radio"]
-      left: 0
-      opacity: 0
-      position: absolute
-      top: 0
-
-      &:checked + label
-        background: #f5f5fa
-
-.media_picker
-  background: #f9f9f9
-  border: 1px solid #d5d5d5
-  border-radius: 3px
-  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1)
-  color: #333
-  display: block
-  margin-top: 2px
-  min-height: 70px
-  padding: 15px
-  position: relative
-
-  .image
-    transition: all .3s ease
-
-  &:hover .button
-    background: tint(#efefef, 20%)
-
-  .button:active 
-    background: shade(#efefef, 10%)
-
-  .placeholder
-    color: #666
-    font-size: 13px
-    font-weight: 600
-    line-height: 36px
-    margin-bottom: 2px
-    position: absolute
-    right: 15px
-
-    span
-      border: 1px solid #ddd
-      margin-top: -5px
-      margin-right: -5px
-
-    span:before
-      display: inline-block
-      margin-right: 6px
-      vertical-align: middle
-
-.media_picker:hover .image
-  box-shadow: 0 0 20px rgba(0, 0, 0, .2)
-
-ul.sortable-grid
-  margin: -8px
-
-  .image, .sortable-placeholder
-    border-radius: 5px
-    cursor: move
-    display: block
-    float: left
-    height: 120px
-    margin: 8px
-    overflow: hidden
-    transition: box-shadow .3s ease
-    width: 120px
-
-    &:hover
-      box-shadow: 0 0 20px rgba(0, 0, 0, .2)
-
-  .sortable-placeholder
-    background: #f5f5f5