spina-template 0.3.3 → 0.4.0

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

@@ -18,7 +18,8 @@ button, input[type="submit"], input[type="button"]
   @include transition(all .3s ease)
 
   &:hover
-    background: tint(#efefef, 20%)
+    background: shade(#efefef, 5%)
+    color: inherit
 
   &.button-shaded:hover
     background: #efefef
@@ -34,13 +35,13 @@ button, input[type="submit"], input[type="button"]
     color: #fff
 
     &:hover
-      background: tint($primary-color, 20%)
+      background: shade($primary-color, 10%)
 
     &.button-shaded:hover
       background: $primary-color
 
     &:active, &.button-active, &.button-shaded, &.button-shaded:active
-      background: shade($primary-color, 10%)
+      background: shade($primary-color, 20%)
 
   &.button-success
     background: $success-color
@@ -58,6 +59,10 @@ button, input[type="submit"], input[type="button"]
   &.button-danger
     color: $danger-color
 
+  &.button-block
+    display: block
+    text-align: center
+
   &.button-link
     background: none
     font-weight: 600
@@ -70,6 +75,7 @@ button, input[type="submit"], input[type="button"]
 
   i.icon
     margin-right: 8px
+    margin-top: -2px
 
   &.icon-only:before
     margin-right: 0
@@ -150,10 +156,10 @@ button, input[type="submit"], input[type="button"]
   .button
     float: left
     margin-left: 0
+    border-right: none
 
   .button:first-child
     border-radius: 21px 0 0 21px
-    border-right: none
 
   .button:last-child
     border-radius: 0 21px 21px 0
@@ -208,6 +214,9 @@ button, input[type="submit"], input[type="button"]
       display: block
       @include animation-duration(.3s)
 
+    &.no-animation
+      @include animation(none)
+
   ul:before, .sliding-dropdown:before
     content: ""
     display: block
@@ -232,14 +241,14 @@ button, input[type="submit"], input[type="button"]
     border-left: 7px solid transparent
     border-right: 7px solid transparent
 
-  ul.align-right
+  ul.align-right, .sliding-dropdown.align-right
     right: 0px
 
-  ul.align-right:before
+  ul.align-right:before, .sliding-dropdown.align-right:before
     left: auto
     right: 11px
 
-  ul.align-right:after
+  ul.align-right:after, .sliding-dropdown.align-right:after
     left: auto
     right: 12px
 
@@ -247,18 +256,21 @@ button, input[type="submit"], input[type="button"]
     border-top: 1px solid #e9e9e9
     margin: 8px 0
 
-  ul li a
+  ul li a, ul li button
+    background: none
     color: #333
     display: block
     font-size: 14px
     padding: 8px 16px
+    text-align: left
     text-decoration: none
+    width: 100%
 
-  ul li a:hover
+  ul li a:hover, ul li button:hover
     background-color: $primary-color
     color: #fff
 
-  ul li a:before
+  ul li a:before, ul li button:before
     margin-right: 8px
 
 [data-dropdown] .sliding-dropdown

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

@@ -1,14 +1,24 @@
 // Horizontal form
 .horizontal-form
   .horizontal-form-group
-    margin-bottom: 30px
+    border-bottom: 1px solid #eee
+    margin: 0 -20px
+    padding: 20px 20px
     @include display(flex)
 
+    &:first-child
+      margin-top: -20px
+
+    &:last-child
+      border-bottom: none
+      margin-bottom: -20px
+
   .horizontal-form-label
     color: #333
     font-size: 13px
     font-weight: 600
     line-height: 18px
+    padding-right: 20px
     width: 240px
     @include justify-content(center)
     @include display(flex)
@@ -36,6 +46,153 @@
       height: 100%
       width: 100%
 
+// Sidebar form
+.sidebar-form
+  margin: 0 auto
+  max-width: 960px
+  @include display(flex)
+  
+.sidebar-form-content
+  @include 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
+  margin: 0 -20px
+  padding: 0 20px
+  @include display(flex)
+
+  &:last-child
+    border-bottom: none
+
+.sidebar-form-label
+  color: #333
+  font-size: 14px
+  font-weight: 600
+  line-height: 50px
+  width: 180px
+
+.sidebar-form-control
+  margin-right: -20px
+  position: relative
+  @include flex(1)
+
+  #{$all-text-inputs}, textarea, .text-input
+    background: none
+    border: none
+    border-radius: 0
+    box-shadow: none
+
+    &:disabled
+      background: none
+
+  &[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
+
+  #{$all-text-inputs}
+    height: 50px
+
+.sidebar-form-images
+  margin: 25px 0
+
+  &:after
+    clear: both
+    content: " "
+    display: block
+
+.sidebar-form-image
+  background: #ededf2
+  border: 1px solid #e5e5ea
+  border-radius: 2px
+  display: inline-block
+  margin-bottom: 10px
+  margin-right: 10px
+  width: 100px
+
+  img
+    border-radius: 2px
+    display: block
+    width: 100%
+
+  &:first-child
+    width: 320px
+
+  &:nth-child(3n + 1)
+    margin-right: 0
+
+// 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: 36px
+  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: 36px
+  padding: 0 12px
+  position: absolute
+  right: 0
+  top: 0
+
+// Input groups
+.input-group
+  @include display(flex)
+
+  #{$all-text-inputs}, .text-input, .select-dropdown
+    &:not(:first-child)
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+
+    &:not(:last-child)
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+      border-right: none
+
 // Inputs
 
 #{$all-text-inputs}, textarea, .text-input
@@ -78,6 +235,9 @@
     height: 10px
     width: 10px
 
+  &:disabled
+    background: #ededf2
+
 #{$all-text-inputs-focus}, textarea:focus, .text-input:focus
   border-color: $primary-color
   outline: none
@@ -353,18 +513,18 @@ input.datepicker
 // Structure form
 
 .structure-form
-  margin-left: -40px
+  margin-left: -20px
   position: relative
   @include display(flex)
 
   .structure-form-menu
     box-sizing: content-box
-    min-width: 280px
+    min-width: 260px
 
     label
       display: block
       font-size: 13px
-      padding: 12px 40px
+      padding: 12px 20px
       text-transform: none
 
     ul
@@ -385,6 +545,9 @@ input.datepicker
       top: auto
       @include linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
 
+    ul li
+      overflow: hidden
+
     ul li .structure-item-remove
       color: #999
       float: right
@@ -398,7 +561,7 @@ input.datepicker
       height: 50px
       line-height: 50px
       outline: none
-      padding-left: 40px
+      padding-left: 20px
 
       &:hover
         background: #f9f9f9
@@ -574,7 +737,7 @@ input.datepicker
 
 ul.sortable-grid
   margin: -8px
-  
+
   .image, .sortable-placeholder
     border-radius: 5px
     cursor: move

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

@@ -5,6 +5,12 @@
 .column-half
   @include span-columns(6)
 
+.column-four
+  @include span-columns(4)
+
+.column-eight
+  @include span-columns(8)
+
 .column-nine
   @include span-columns(9)
 

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

@@ -2,6 +2,7 @@
 // Icon Font: icons_spina
 // 
 
+.icon-barchart:before { content: "\f133"; }
 .icon-bars:before { content: "\f10e"; }
 .icon-bold:before { content: "\f120"; }
 .icon-brush:before { content: "\f115"; }
@@ -10,6 +11,7 @@
 .icon-caret-left:before { content: "\f119"; }
 .icon-caret-right:before { content: "\f11a"; }
 .icon-caret-up:before { content: "\f11b"; }
+.icon-cart:before { content: "\f131"; }
 .icon-chart-outline:before { content: "\f109"; }
 .icon-check:before { content: "\f10a"; }
 .icon-chevron-down:before { content: "\f11c"; }
@@ -21,12 +23,16 @@
 .icon-cog-outline:before { content: "\f106"; }
 .icon-comment:before { content: "\f103"; }
 .icon-cross:before { content: "\f116"; }
+.icon-customer-outline:before { content: "\f134"; }
 .icon-document:before { content: "\f100"; }
 .icon-dots:before { content: "\f12e"; }
+.icon-exclamation:before { content: "\f138"; }
 .icon-eye:before { content: "\f12c"; }
+.icon-filter:before { content: "\f136"; }
 .icon-home:before { content: "\f102"; }
 .icon-image:before { content: "\f128"; }
 .icon-inbox-outline:before { content: "\f112"; }
+.icon-info:before { content: "\f139"; }
 .icon-italic:before { content: "\f121"; }
 .icon-large-check:before { content: "\f12f"; }
 .icon-link:before { content: "\f124"; }
@@ -34,16 +40,20 @@
 .icon-mail:before { content: "\f12b"; }
 .icon-mail-outline:before { content: "\f111"; }
 .icon-media-library:before { content: "\f101"; }
+.icon-megaphone:before { content: "\f132"; }
 .icon-min:before { content: "\f127"; }
 .icon-pages:before { content: "\f129"; }
+.icon-pencil:before { content: "\f137"; }
 .icon-pencil-outline:before { content: "\f10d"; }
 .icon-picture-o:before { content: "\f126"; }
 .icon-plus:before { content: "\f10b"; }
 .icon-power-off:before { content: "\f104"; }
 .icon-preview:before { content: "\f10c"; }
+.icon-product-outline:before { content: "\f135"; }
 .icon-random:before { content: "\f10f"; }
 .icon-refresh:before { content: "\f114"; }
 .icon-search:before { content: "\f110"; }
+.icon-shop:before { content: "\f130"; }
 .icon-social-outline:before { content: "\f108"; }
 .icon-trash:before { content: "\f117"; }
 .icon-upload-outline:before { content: "\f113"; }

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

@@ -5,9 +5,11 @@
   border-radius: 3px
   color: #fff
   display: inline-block
-  font-size: 11px
+  font-size: 10px
   font-weight: bold
-  padding: 4px 8px
+  letter-spacing: 1px
+  line-height: 10px
+  padding: 8px 12px
 
   &.label-primary
     background: $primary-color

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

@@ -0,0 +1,60 @@
+// Notifications
+
+aside#notifications
+  bottom: 0
+  padding: 16px
+  position: fixed
+  right: 0
+  z-index: 100
+
+.notification
+  background: $primary-color
+  border-radius: 3px
+  color: #fff
+  font-size: 16px
+  line-height: 24px
+  margin-top: 16px
+  padding: 16px 0
+  position: relative
+  width: 400px
+  @include animation-duration(.4s)
+  @include align-items(center)
+  @include display(flex)
+
+  .notification-message
+    @include flex(1)
+
+  .icon
+    text-align: center
+    width: 50px
+
+  a
+    color: #000
+    display: block
+    font-size: 11px
+    opacity: .2
+    text-align: center
+    width: 50px
+
+    &:hover
+      color: #000
+      opacity: .4
+
+  strong
+    font-weight: 600
+
+  small
+    display: block
+    font-size: 13px
+    font-weight: normal
+    margin-top: -4px
+    opacity: .6
+
+  &.notification-error
+    background: $error-color
+
+  &.notification-danger
+    background: $danger-color
+
+  &.notification-success
+    background: $success-color