spina 1.1.1 → 2.0.0.alpha

data/app/assets/stylesheets/spina/_configuration.sass.erb

@@ -11,8 +11,8 @@ $alert-color: orange
 $warning-color: orange
 
 $asset-pipeline: true
-$font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", sans-serif
-$icon-font: $font-family
+$font-family: "Metropolis", sans-serif
+$icon-font: "ics_spina"
 $gutter: 5em
 
 $desktop: min-width 768px 8

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

@@ -1,3 +1,35 @@
+// 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

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

@@ -1,10 +1,10 @@
 // Horizontal form
 .horizontal-form
   .horizontal-form-group
-    border-bottom: 1px solid #eee
+    border-bottom: 1px solid #e5e5e5
     display: flex
-    margin: 0 -20px
-    padding: 20px 20px
+    margin: 0 -40px
+    padding: 20px 40px
 
     &:first-child
       margin-top: -20px
@@ -332,7 +332,8 @@
     transition: all .2s ease
     vertical-align: middle
     width: 20px
-    @extend .icon, .icon-large-check:before
+    @extend .icon
+    content: "\f120"
 
   input[type="checkbox"]:checked + label:after
     transform: scale(1)
@@ -465,7 +466,7 @@ input.datepicker
 // Switch
 
 .switch
-  background: #e9e9e9
+  background: #d9d9ec
   border-radius: 23px
   display: block
   height: 29px
@@ -476,17 +477,25 @@ input.datepicker
   width: 46px
 
   .knob
-    background: #fff
+    background: #f5f5f5
     border-radius: 23px
-    box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
+    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)
 
@@ -513,7 +522,7 @@ input.datepicker
   label:before
     background: #fff
     border: 1px solid #c3c3c3
-    border-radius: 4px
+    border-radius: 6px
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
     content: ""
     display: inline-block
@@ -551,17 +560,17 @@ input.datepicker
 
 .select-dropdown
   background: #fff
-  border: 1px solid #c3c3c3
-  border-radius: 3px
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+  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: 28px
+  line-height: 32px
   margin: 0
   overflow: hidden
   padding: 0
   position: relative
-  transition: border .2s ease
+  transition: all .2s ease
   white-space: nowrap
   @extend .icon, .icon-caret-down
 
@@ -582,17 +591,21 @@ input.datepicker
     margin-right: -4px
     padding: 0 11px
 
-    &:after
-      content: ":"
-
   &:hover
-    border: 1px solid $primary-color
+    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: 28px
+    line-height: 32px
     position: absolute
     right: 8px
     top: 5px
@@ -605,14 +618,14 @@ input.datepicker
     box-shadow: none
     color: #666
     cursor: pointer
-    display: inline-block
+    display: block
     font-family: $font-family
-    font-size: 13px
-    font-weight: 600
-    line-height: 16px
+    font-size: 14px
+    font-weight: 500
+    height: 42px
     margin: 0
     outline: none
-    padding: 11px 36px 11px 10px
+    padding: 13px 36px 13px 15px
     position: relative
     width: 115%
     z-index: 2
@@ -622,12 +635,12 @@ input.datepicker
 
 .structure-form
   display: flex
-  margin-left: -20px
   position: relative
 
   .structure-form-menu
     box-sizing: content-box
     min-width: 260px
+    width: 260px
 
     label
       display: block
@@ -636,23 +649,9 @@ input.datepicker
       text-transform: none
 
     ul
-      border-right: 1px solid #ddd
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
       position: relative
 
-    ul:before, ul:after
-      background: linear-gradient(rgba(255, 255, 255, 0), #ddd)
-      content: " "
-      height: 40px
-      position: absolute
-      right: -1px
-      top: -40px
-      width: 1px
-
-    ul:after
-      background: linear-gradient(#ddd, rgba(255, 255, 255, 0))
-      bottom: -40px
-      top: auto
-
     ul li
       overflow: hidden
 
@@ -660,14 +659,29 @@ input.datepicker
       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: #333
+      color: #444
       cursor: pointer
       display: block
       font-weight: 600
       font-size: 13px
-      height: 50px
-      line-height: 50px
+      height: 44px
+      line-height: 44px
       outline: none
       padding-left: 20px
 
@@ -684,40 +698,13 @@ input.datepicker
       background: #f9f9f9
 
     ul li.active a
+      background: white
       color: $primary-color
 
-    ul li.active
-      margin-right: -1px
-      position: relative
-
-      a
-        background: #fff
-
-      &:before
-        border-bottom: 1px solid #ddd
-        border-bottom-right-radius: 3px
-        border-right: 1px solid #ddd
-        content: " "
-        height: 10px
-        position: absolute
-        right: 0px
-        top: -10px
-        width: 100%
-
-      &:after
-        bottom: -10px
-        border-right: 1px solid #ddd
-        border-top: 1px solid #d5d5d5
-        border-top-right-radius: 3px
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075)
-        content: " "
-        height: 10px
-        right: 0px
-        position: absolute
-        width: 100%
-
   .structure-form-content
-    padding-left: 12px
+    box-sizing: border-box
+    margin-top: -29px
+    padding-left: 15px
     width: 100%
 
     .structure-form-pane
@@ -755,13 +742,14 @@ input.datepicker
     position: relative
     text-align: left
     width: 100%
+    @extend .icon-upload-outline
 
     &:before
       color: #bbb
       display: block
       font-weight: 400
       padding: 6px 0
-      @extend .icon, .icon-upload-outline:before
+      @extend .icon
       font-size: 28px
       transition: color .2s ease
       vertical-align: middle
@@ -769,7 +757,8 @@ input.datepicker
     &:after
       animation: "rotate" 2s linear infinite
       color: #bbb
-      @extend .icon, .icon-refresh:before
+      content: "\f131"
+      @extend .icon
       display: none
       font-size: 36px
       height: 50px
@@ -838,7 +827,7 @@ input.datepicker
   background: #f9f9f9
   border: 1px solid #d5d5d5
   border-radius: 3px
-  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1)
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1)
   color: #333
   display: block
   margin-top: 2px

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

@@ -197,7 +197,8 @@
     top: 0
     width: 100%
     z-index: 3
-    @extend .icon, .icon-large-check:before
+    @extend .icon
+    content: "\f120"
 
   .item.attachment
     height: 60px
@@ -234,8 +235,9 @@
 
 .gallery .item
   .customfile
+    background: white
     border: 1px solid #e5e5e5
-    border-radius: 5px
+    border-radius: 6px
     cursor: pointer
     height: 100%
     overflow: hidden
@@ -260,9 +262,10 @@
       font-weight: normal
       line-height: 130px
       vertical-align: middle
-      @extend .icon, .icon-refresh:before
+      @extend .icon
       display: none
       font-size: 42px
+      content: "\f131"
 
   .customfile.loading
     &:before
@@ -307,10 +310,11 @@
     text-transform: lowercase
     transition: color .2s ease
     width: 100%
+    z-index: 1
 
 // Media folders
 
-.item.media-folder
+.media-folder
   align-items: center
   background: #e5e5f0
   border: 1px solid #d5d4e6
@@ -336,6 +340,19 @@
   transition: transform .4s ease
   width: 70px
 
+  .media-folder-placeholder
+    align-items: center
+    background: $primary-color-light
+    border-radius: 5px
+    color: rgba(255, 255, 255, .5)
+    display: flex
+    font-size: 28px
+    height: 100%
+    justify-content: center
+    position: relative
+    width: 100%
+    z-index: 1
+
   &[data-badge]:after
     background: #6b699f
     border: 3px solid #e5e5f0
@@ -376,6 +393,7 @@
     border-radius: 5px
     position: relative
     width: 100%
+    z-index: 1
 
 .media-folder-name
   color: #4d4f81

data/app/assets/stylesheets/spina/_ics_spina.scss

@@ -33,10 +33,13 @@
 .icon-home:before { content: "\f11b"; }
 .icon-image:before { content: "\f11c"; }
 .icon-inbox-outline:before { content: "\f11d"; }
+.icon-indent:before { content: "\f13a"; }
 .icon-info:before { content: "\f11e"; }
 .icon-italic:before { content: "\f11f"; }
 .icon-large-check:before { content: "\f120"; }
 .icon-link:before { content: "\f121"; }
+.icon-list:before { content: "\f13b"; }
+.icon-list-ol:before { content: "\f13c"; }
 .icon-list-ul:before { content: "\f122"; }
 .icon-lock:before { content: "\f138"; }
 .icon-mail:before { content: "\f123"; }
@@ -44,6 +47,7 @@
 .icon-media-library:before { content: "\f125"; }
 .icon-megaphone:before { content: "\f126"; }
 .icon-min:before { content: "\f127"; }
+.icon-outdent:before { content: "\f141"; }
 .icon-pages:before { content: "\f128"; }
 .icon-pencil:before { content: "\f129"; }
 .icon-pencil-outline:before { content: "\f12a"; }
@@ -52,11 +56,15 @@
 .icon-power-off:before { content: "\f12d"; }
 .icon-preview:before { content: "\f12e"; }
 .icon-product-outline:before { content: "\f12f"; }
+.icon-quote-right:before { content: "\f13d"; }
 .icon-random:before { content: "\f130"; }
+.icon-redo:before { content: "\f13e"; }
 .icon-refresh:before { content: "\f131"; }
 .icon-search:before { content: "\f132"; }
 .icon-shop:before { content: "\f133"; }
 .icon-social-outline:before { content: "\f134"; }
+.icon-strikethrough:before { content: "\f13f"; }
 .icon-trash:before { content: "\f135"; }
+.icon-undo:before { content: "\f140"; }
 .icon-upload-outline:before { content: "\f136"; }
 .icon-users-outline:before { content: "\f137"; }

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

@@ -0,0 +1,133 @@
+.modal section.media-picker
+  padding-top: 0
+
+.media-picker-grid
+  display: grid
+  grid-auto-columns: minmax(200px, auto)
+  grid-template-columns: repeat(5, 1fr)
+  grid-row-gap: 15px
+  grid-column-gap: 15px
+
+  @media (min-width: 1680px)
+    grid-template-columns: repeat(6, 1fr)
+
+  .media-folder
+    border-radius: 6px
+
+.media-picker-uploader
+  background: #eee
+  border-radius: 5px
+  height: 100%
+  position: relative
+
+  &:before
+    color: #999
+    font-size: 48px
+    left: 50%
+    position: absolute
+    top: 50%
+    transform: translateX(-50%) translateY(-50%)
+    @extend .icon, .icon-upload-outline
+
+  &:hover:before
+    color: #333
+
+  &.uploading:before
+    font-size: 24px
+    @extend .icon-dots
+
+  input[type="file"]
+    cursor: pointer
+    height: 100%
+    opacity: 0
+    width: 100%
+
+  input[type="submit"]
+    display: none
+
+.media-picker-image
+  cursor: pointer
+  display: block
+  margin: 0
+  position: relative
+
+  span
+    background: #eee
+    border-radius: 6px
+    display: block
+    height: 0
+    overflow: hidden
+    padding-top: calc(150 / 200 * 100%)
+    position: relative
+
+  img
+    border-radius: 6px
+    display: block
+    height: auto
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+
+  input[type="radio"], input[type="checkbox"]
+    display: none
+
+  input[type="radio"]:checked + span:before, input[type="checkbox"]:checked + span:before
+    background: $primary-color-light
+    border-radius: 6px
+    content: " "
+    height: 100%
+    left: 0px
+    opacity: .5
+    position: absolute
+    top: 0px
+    width: 100%
+    z-index: 1
+
+  input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after
+    align-items: center
+    background: rgba(0, 0, 0, .2)
+    border: 1px solid rgba(255, 255, 255, .25)
+    border-radius: 15px
+    content: "\f120"
+    color: white
+    display: flex
+    font-size: 13px
+    height: 30px
+    justify-content: center
+    left: 50%
+    position: absolute
+    transform: translateX(-50%) translateY(-50%)
+    top: 50%
+    width: 30px
+    z-index: 2
+    @extend .icon
+
+.media-picker-footer
+  align-items: center
+  border-top: 1px solid #e9e9e9
+  bottom: 0px
+  display: flex
+  position: sticky
+  z-index: 10
+
+  .button
+    margin: 0
+    white-space: nowrap
+
+  input[type="text"]
+    height: 36px
+    line-height: 24px
+    margin-right: 10px
+    padding: 0 10px
+
+.media-picker-selected-images
+  flex: 1
+
+  img
+    border-radius: 6px
+    display: block
+    float: left
+    height: 37px
+    margin-right: 5px
+    width: 50px