spina 1.1.2 → 2.0.0.beta

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

@@ -8,15 +8,42 @@
   width: 100%
   z-index: 999
 
+.modal-container
+  align-items: center
+  background: rgba(0, 0, 0, .6)
+  display: flex
+  height: 100%
+  justify-content: center
+  left: 0px
+  position: fixed
+  top: 0px
+  width: 100%
+  z-index: 999
+
+  .modal
+    display: block
+
+  .modal-close-cross
+    color: #999
+    font-size: 11px
+    padding: 15px
+    position: absolute
+    top: 0px
+    right: 0px
+
+    &:hover
+      color: #333
+
 .modal
   animation-duration: .4s
   background: #fff
-  border-radius: 3px
+  border-radius: 10px
   display: none
   margin: 0 auto
   max-width: 480px
+  max-height: 90%
   min-height: 100px
-  overflow: hidden
+  overflow: scroll
   position: relative
 
   @media screen and (max-width: 480px)
@@ -35,6 +62,12 @@
     footer a
       padding: 18px 0
 
+  header
+    background: white
+    position: sticky
+    top: 0px
+    z-index: 10
+
   header h3
     border-radius: 2px 2px 0 0
     color: #232323

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

@@ -1,25 +1,29 @@
 // Notifications
 
 aside#notifications
-  bottom: 0
+  bottom: 50px
   padding: 16px
   position: fixed
-  right: 0
+  left: 0
   z-index: 100
 
 .notification
   animation-duration: .4s
   align-items: center
-  background: $primary-color
-  border-radius: 3px
+  background: rgba(0, 0, 0, .3)
+  backdrop-filter: blur(3px)
+  -webkit-backdrop-filter: blur(3px)
+  border-radius: 7px
+  box-shadow: 3px 6px 3px rgba(0, 0, 0, .075)
   color: #fff
   display: flex
-  font-size: 16px
-  line-height: 24px
+  font-size: 14px
+  font-weight: 600
+  line-height: 18px
   margin-top: 16px
   padding: 16px 0
   position: relative
-  width: 400px
+  width: 290px
 
   .notification-message
     flex: 1
@@ -27,19 +31,21 @@ aside#notifications
 
   .icon
     text-align: center
-    min-width: 50px
-    width: 50px
+    margin-left: 4px
+    min-width: 40px
+    width: 40px
 
   a
-    color: #000
+    color: white
     display: block
     font-size: 11px
     opacity: .2
     text-align: center
+    transition: opacity .2s ease
     width: 50px
 
     &:hover
-      color: #000
+      color: white
       opacity: .4
 
   strong
@@ -53,10 +59,10 @@ aside#notifications
     opacity: .6
 
   &.notification-error
-    background: $error-color
+    // background: $error-color
 
   &.notification-danger
-    background: $danger-color
+    // background: $danger-color
 
   &.notification-success
-    background: $success-color
+    // background: $success-color

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

@@ -0,0 +1,131 @@
+.page-form
+  margin: 20px 0
+
+.page-form-group
+  margin: 0 -15px 20px -15px
+
+.page-form-label
+  color: #888
+  font-size: 12px
+  font-weight: 500
+  line-height: 24px
+  padding: 0 3px
+
+.page-form-content
+  .select-dropdown
+    border-color: #e2e2e2
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+    font-size: 16px
+    font-weight: 500
+
+    select
+      color: #333
+      font-size: 15px
+      font-weight: 500
+      padding-left: 15px
+
+    label
+      background: none
+      box-shadow: none
+      padding-left: 15px
+
+.page-form-control
+  input[type="text"]
+    border: 1px solid #e2e2e2
+    border-radius: 6px
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+    height: 42px
+    padding: 0 15px
+    width: 100%
+
+    &.input-large
+      font-size: 18px
+      font-weight: 500
+      height: 50px
+
+    &:disabled
+      box-shadow: none !important
+
+.page-form-rich-text
+  background: white
+  border: 1px solid #e2e2e2
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+  padding: 15px
+
+  trix-editor
+    border: none
+    box-shadow: none
+    font-size: 14px
+    line-height: 22px
+    padding: 0
+
+.page-form-media-picker
+  align-items: flex-start
+  background: white
+  border: 1px solid #e2e2e2
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+  display: flex
+  justify-content: space-between
+  padding: 15px
+  width: 100%
+
+  .button
+    margin: 0
+
+  .image
+    background: #ddd
+    border-radius: 6px
+    height: 150px
+    display: block
+    position: relative
+    width: 200px
+
+  .image img
+    border-radius: 6px
+    position: relative
+
+  .images
+    min-height: 80px
+    margin: -4px
+
+    img
+      border-radius: 6px
+      display: block
+      float: left
+      height: 72px
+      margin: 4px
+      position: relative
+      width: 96px
+
+    .page-form-media-picker-placeholder
+      background: #ddd
+      border-radius: 6px
+      height: 72px
+      margin: 4px
+      width: 96px
+
+  input.page-form-media-picker-alt-text
+    border: none
+    box-shadow: none
+    color: #777
+    font-style: italic
+    margin: 0 0 -15px -12px
+    max-width: 400px
+
+    &:focus, &:hover
+      color: #333
+
+  .page-form-media-picker-placeholder
+    align-items: center
+    color: #999
+    display: flex
+    font-size: 13px
+    font-style: italic
+    height: 100%
+    justify-content: center
+    margin-right: 10px
+    position: absolute
+    text-align: center
+    width: 100%

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

@@ -1,6 +1,9 @@
 // Sortable lists
 
 .dd
+  border: 1px solid #e2e2e2
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
   margin: -20px
   overflow: hidden
   position: relative
@@ -39,6 +42,9 @@
   padding: 0
   position: relative
 
+  .dd-item:last-child
+    border-bottom: none
+
   .dd-placeholder
     position: relative
 
@@ -54,16 +60,13 @@
 
   .dd-list
     background: tint(#f5f5fa, 50%)
-    border-top: 1px solid #ddd
+    border-top: 1px solid #eee
 
     .dd-placeholder
       background: tint(#f5f5fa, 50%)
 
       &:after
         margin-left: 40px
-
-    .dd-item:last-child
-      border-bottom: none
     
     .dd-item
       padding-left: 20px
@@ -84,9 +87,6 @@
 .dd-collapsed .dd-list
   display: none
 
-.dd-item
-  border-bottom: 1px solid #ddd
-
 .dd-item, .dd-empty, .dd-placeholder
   margin: 0
   padding: 0
@@ -103,16 +103,21 @@
   min-height: 100px
 
 .dd-item-inner
+  align-items: center
+  display: flex
   padding: 10px 20px
   text-decoration: none
 
   a
     margin: 0
 
+  a.sortable-link
+    flex: 1
+
   a.sortable-link, a.sortable-link:hover
     color: $primary-color
     font-size: 13px
-    font-weight: 600
+    font-weight: 500
     padding-left: 0
 
     small
@@ -121,6 +126,7 @@
       margin-left: 13px
 
   .pull-right a
+    margin: 0
     opacity: 0
     transform: translateX(50px)
     transition: all .4s ease

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

@@ -98,10 +98,11 @@ table.table
       font-size: 16px
       position: absolute
       right: 10px
-      @extend .icon, .icon-caret-up:before
+      @extend .icon
+      content: "\f108"
 
     &.table-column-sorted-desc:after
-      @extend .icon-caret-down:before
+      content: "\f105"
 
   th.text-right .table-column-sorted
     text-align: left
@@ -261,12 +262,14 @@ tr:hover .progress
 .dataTable
   th.sorting_desc
     &:after
-      @extend .icon, .icon-caret-down:before
+      @extend .icon
+      content: "\f105"
       float: right
 
   th.sorting_asc
     &:after
-      @extend .icon, .icon-caret-up:before
+      @extend .icon
+      content: "\f108"
       float: right
 
 .dataTables_paginate

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

@@ -1,6 +1,10 @@
 trix-toolbar
+  position: sticky
+  z-index: 2
+
   .trix-button-group
     border: 0
+    margin-bottom: 0
 
     &:not(:first-child)
       margin-left: 10px
@@ -38,7 +42,7 @@ trix-toolbar
 
     &::before
       background: none
-      font-family: 'Font Awesome 5 Free'
+      font-family: $icon-font
       display: inline-block
       font-weight: 900
       line-height: 36px
@@ -46,56 +50,43 @@ trix-toolbar
       text-indent: 0
 
     &.trix-button--icon-bold
-      &::before
-        content: "\f032"
+      @extend .icon-bold
 
     &.trix-button--icon-italic
-      &::before
-        content: "\f033"
+      @extend .icon-italic
 
     &.trix-button--icon-strike
-      &::before
-        content: "\f0cc"
+      @extend .icon-strikethrough
 
     &.trix-button--icon-link
-      &::before
-        content: "\f0c1"
+      @extend .icon-link
 
     &.trix-button--icon-image
-      &::before
-        content: "\f03e"
+      @extend .icon-image
 
     &.trix-button--icon-quote
-      &::before
-        content: "\f10e"
+      @extend .icon-quote-right
 
     &.trix-button--icon-code
-      &::before
-        content: "\f121"
+      @extend .icon-code
 
     &.trix-button--icon-bullet-list
-      &::before
-        content: "\f0ca"
+      @extend .icon-list
 
     &.trix-button--icon-number-list
-      &::before
-        content: "\f0cb"
+      @extend .icon-list-ol
 
     &.trix-button--icon-decrease-nesting-level
-      &::before
-        content: "\f03b"
+      @extend .icon-outdent
 
     &.trix-button--icon-increase-nesting-level
-      &::before
-        content: "\f03c"
+      @extend .icon-indent
 
     &.trix-button--icon-undo
-      &::before
-        content: "\f2ea"
+      @extend .icon-undo
 
     &.trix-button--icon-redo
-      &::before
-        content: "\f2f9"
+      @extend .icon-redo
 
   .trix-dialog
     border-top-color: $primary-color
@@ -104,10 +95,12 @@ trix-toolbar
 trix-editor
   line-height: 18px
   min-height: 100px
+  margin-top: 15px
 
   h1, h2, h3, h4, h5, h6
     padding-left: 24px
     position: relative
+    z-index: 1
 
     &:after
       color: #ccc
@@ -180,10 +173,14 @@ trix-editor
     font-size: 16px
 
   .trix-attachment-spina-image
+    background: #f5f5f5
+    border-radius: 6px
     cursor: default
     display: block
+    height: 150px
     margin-bottom: 40px
     position: relative
+    width: 200px
 
     &[data-label=""]
       margin-bottom: 0px
@@ -192,10 +189,10 @@ trix-editor
         display: none
 
     img
-      border-radius: 4px
+      border-radius: 6px
       display: block
-      max-height: 150px
-      max-width: 200px
+      height: 150px
+      width: 200px
 
     &:before
       background: #eee
@@ -214,7 +211,7 @@ trix-editor
       white-space: nowrap
       width: auto
 
-  figure[data-trix-mutable] 
+  figure[data-trix-mutable]
     .trix-attachment-spina-image:before
       background: $primary-color
       color: white
@@ -224,4 +221,4 @@ trix-editor
 
   .trix-button--remove
     border: none
-    box-shadow: 0 0 5px rgba(0, 0, 0, .15) 
+    box-shadow: 0 0 5px rgba(0, 0, 0, .15)