spina-template 0.2.4

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

@@ -0,0 +1,521 @@
+// Frameworks
+@import bourbon
+@import neat
+
+// Configuration
+@import spina/configuration
+
+// Normalizing
+@import spina/normalize
+
+@import spina/mixins
+
+// Grid
+@import spina/grid
+
+// Fonts
+@import spina/fonts
+
+// Animations
+@import spina/animate
+@import spina/custom_animations
+
+// Elements
+@import spina/forms
+@import spina/tables
+@import spina/buttons
+@import spina/labels
+@import spina/modal
+@import spina/sortable_lists
+@import spina/gallery
+@import spina/login
+@import spina/cards
+
+// Plugins
+@import spina/morris
+@import spina/nprogress
+@import spina/wysihtml5
+@import spina/farbtastic
+
+html
+  min-height: 100%
+
+html, body
+  height: 100%
+  font-family: $font-family
+  font-weight: 600
+
+body
+  @include display(flex)
+
+// Primary navigation
+
+nav#primary
+  background: #111
+  height: 100%
+  padding-top: 10px
+  position: relative
+  text-align: center
+  width: 100px
+
+  @include media($tablet)
+    width: 80px
+
+  ul li a
+    color: #999
+    display: block
+    font-size: 10px
+    font-weight: 700
+    padding: 20px 0
+    position: relative
+    text-decoration: none
+    text-transform: uppercase
+    width: 100%
+    @include transition(color .15s ease)
+
+    @include media($tablet)
+      padding: 12px 0
+
+  ul li.active a, ul li a:hover
+    color: #fff
+
+  ul li.bottom a
+    bottom: 0
+    left: 0
+    position: absolute
+
+  ul li a:before
+    display: block
+    font-size: 26px
+    margin-bottom: 8px
+    text-transform: none
+
+    @include media($tablet)
+      font-size: 20px
+
+  ul li a[data-badge]:after
+    background: $danger-color
+    border-radius: 8px
+    color: #fff
+    content: attr(data-badge)
+    display: block
+    font-size: 12px
+    font-weight: bold
+    line-height: 16px
+    min-width: 10px
+    padding: 0 3px
+    position: absolute
+    right: 28px
+    top: 12px
+
+// Secondary navigation
+
+nav#secondary
+  background: #f5f5f5
+  border-right: 1px solid #ccc
+  height: 100%
+  padding: 30px 0
+  width: 300px
+
+  @include media($tablet)
+    left: 80px
+    padding-top: 12px
+    width: 200px
+
+  h1
+    color: #333
+    font-size: 24px
+    font-weight: 300
+    margin-bottom: 36px
+    padding: 0 30px
+
+    @include media($tablet)
+      display: none
+
+  ul li
+    position: relative
+
+  ul li a
+    color: #333
+    display: block
+    font-size: 15px
+    font-weight: 600
+    line-height: 15px
+    margin-left: 36px
+    padding: 16px 30px
+    text-decoration: none
+
+    @include media($tablet)
+      margin-left: 24px
+      padding-left: 0
+
+    small
+      color: #666
+      display: block
+      font-size: 14px
+      font-weight: normal
+      line-height: 18px
+      margin-top: 2px
+      @include transition(color .15s ease)
+
+      @include media($tablet)
+        display: none
+
+  ul li a:hover
+    color: #333
+
+    small, &:before
+      color: inherit
+
+  ul li.active a
+    color: $primary-color
+
+    small, &:before
+      color: inherit
+
+  ul li a:before
+    color: #666
+    display: block
+    float: left
+    font-size: 24px
+    margin-left: -36px
+    width: 24px
+    @include transition(color .15s ease)
+
+    @include media($tablet)
+      display: none
+
+  ul li.active
+    &:before
+      content: ""
+      display: block
+      position: absolute
+      right: -12px
+      top: 33%
+      @include triangle(23px, #ccc, right)
+
+    &:after
+      content: ""
+      display: block
+      position: absolute
+      right: -11px
+      top: 33%
+      @include triangle(22px, #f5f5f5, right)
+
+// Tabs
+
+nav.tabs
+  border-bottom: 1px solid #ddd
+  margin: 0 -40px 30px -40px
+  padding: 0 40px 0 24px
+
+  ul li
+    display: inline
+
+  ul li a
+    border: 1px solid transparent
+    color: #444
+    display: inline-block
+    font-size: 14px
+    font-weight: 600
+    margin-bottom: -1px
+    margin-top: 20px
+    padding: 12px 16px
+    text-decoration: none
+
+  ul li a:hover
+    color: #222
+
+  ul li.active a
+    border-color: #ddd
+    border-bottom: 1px solid #fff
+    border-radius: 3px 3px 0 0
+    color: $primary-color
+
+.tab-content
+  display: none
+
+  &.active
+    display: block
+
+// Notifications
+
+.notification
+  position: relative
+  color: $info-color
+  margin: 20px 0
+  overflow: hidden
+  font-size: 14px
+  padding-left: 32px
+
+  &:before
+    position: absolute
+    left: 0px
+    color: #77caf9
+    display: block
+    font-size: 18px
+    margin-top: 1em
+
+  p
+    color: $info-color
+    font-weight: 600
+    line-height: 18px
+    margin-bottom: 0
+
+  small
+    display: block
+    font-size: 14px
+    font-weight: normal
+
+  ul
+    margin: 0
+
+  li
+    font-weight: normal
+
+  &.notification-error
+    color: $error-color
+
+    p
+      color: $error-color
+
+    &:before
+      color: #e7baba
+
+  &.notification-danger
+    color: $danger-color
+
+    p
+      color: $danger-color
+
+    &:before
+      color: $danger-color
+
+// Permanent notice
+.permanent-notice
+  background: #eee
+  border-bottom: 1px solid #ddd
+  color: #333
+  margin: -30px -40px 30px -40px
+  padding: 0 40px
+  position: relative
+
+  &:before
+    font-size: 16px
+    left: 14px
+    opacity: .25
+    position: absolute
+    top: 12px
+
+  p
+    font-size: 13px
+    line-height: 18px
+    margin: 0
+    padding: 12px 0
+
+    small
+      display: block
+      font-size: 12px
+      font-weight: 400
+
+  &.permanent-notice-info
+    background: #eef6fe
+    border-color: #def
+    color: #12659b
+
+    p
+      color: inherit
+
+// Filters
+
+.filters
+  margin: 20px 0
+
+// Datepicker
+
+.ui-datepicker
+  background: #fff
+  border: none
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
+  width: 250px
+
+.ui-datepicker-header
+  border: none
+  font-weight: 300
+
+  a.ui-datepicker-prev, a.ui-datepicker-next
+    background: none
+    border: none
+    color: transparent
+    cursor: pointer
+    display: block
+    height: 36px
+    opacity: .6
+    padding: 8px 0
+    position: absolute
+    right: 0
+    top: 0
+    width: 36px
+
+  a.ui-datepicker-prev
+    left: 0
+
+  a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover
+    opacity: 1
+
+  a.ui-datepicker-prev span
+    background: url(asset_path("spina/arrow-left.png", "image")) no-repeat center
+    background-size: 10px 13px
+    display: block
+
+  a.ui-datepicker-next span
+    background: url(asset_path("spina/arrow-right.png", "image")) no-repeat center
+    background-size: 10px 13px
+    display: block
+
+  .ui-datepicker-title
+    line-height: 42px
+    text-align: center
+
+.ui-datepicker-calendar
+  width: 100%
+
+  tr td:first-child, tr th:first-child
+    padding-left: 0px
+
+  tr td:last-child, tr th:last-child
+    padding-right: 0px
+
+  thead th
+    color: #444
+    font-weight: 600
+
+  tbody tr, thead tr
+    border: none
+
+  tbody tr td
+    background: none
+
+  tbody tr td a
+    display: block
+    line-height: 28px
+    text-align: center
+    padding: 2px 4px
+    width: 32px
+
+  tbody tr td a.ui-state-default
+    background: none
+    border: none
+    color: #777
+    font-weight: 600
+
+  tr:hover
+    background: none
+
+  tbody tr td a:hover
+    color: #000
+
+  tbody tr td a.ui-state-highlight
+    background: #eee
+    border-radius: 2px
+
+  tbody tr td a.ui-state-active
+    background: #444
+    border-radius: 2px
+    color: #fff
+
+// Main content
+
+section#main
+  padding: 30px 40px
+  height: 100%
+  overflow: scroll
+  @include flex(1)
+
+// Danger zone
+.danger-zone
+  background: url(asset_path('spina/danger-zone-ribbon.png', 'image')) repeat-x #fcfcfc
+  margin: 60px -40px 0 -40px
+  padding: 26px 40px
+
+  h2
+    color: #777
+    font-size: 16px
+    font-weight: 600
+
+    &:before
+      margin-right: 6px
+      vertical-align: middle
+
+// Breadcrumbs
+
+#main_content_header
+  min-height: 50px
+
+  @include media($tablet)
+    .button
+      overflow: hidden
+      height: 32px
+      width: 35px
+
+      &:before
+        margin-right: 200px
+
+.breadcrumbs
+  color: #333
+  font-size: 24px
+  font-weight: 300
+
+  a
+    color: #999
+
+    @include media($tablet)
+      display: none
+
+  .divider
+    background: url(asset_path('spina/divider.png', 'image'))
+    color: #999
+    display: inline-block
+    height: 17px
+    margin: 0 20px
+    width: 6px
+
+    @include media($tablet)
+      display: none
+
+// General styles
+
+h1, h2, h3, h4, h5, h6
+  font-weight: 300
+  margin: 0
+
+h1, h2
+  color: #333
+  font-size: 24px
+
+ul
+  list-style: none
+  margin: 0
+  padding: 0
+
+p
+  color: #333
+  font-size: 14px
+  line-height: 18px
+
+a
+  color: $primary-color
+  text-decoration: none
+
+label
+  color: #333
+  font-size: 11px
+  font-weight: 600
+  margin-right: 14px
+  text-transform: uppercase
+
+.pull-left
+  float: left
+
+.pull-right
+  float: right

data/lib/spina/template/version.rb

@@ -0,0 +1,5 @@
+module Spina
+  module Template
+    VERSION = "0.2.4"
+  end
+end

data/lib/spina/template.rb

@@ -0,0 +1,12 @@
+require "spina/template/version"
+require 'bourbon'
+require 'neat'
+require 'jquery-fileupload-rails'
+
+module Spina
+  module Template
+    class Engine < ::Rails::Engine
+      config.assets.precompile += %w(spina/wysihtml5_textarea.css)
+    end
+  end
+end

data/spina-template.gemspec

@@ -0,0 +1,26 @@
+# coding: utf-8
+$:.push File.expand_path("../lib", __FILE__)
+
+require 'spina/template/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "spina-template"
+  spec.version       = Spina::Template::VERSION
+  spec.authors       = ["Bram Jetten"]
+  spec.email         = ["bram@denkgroot.com"]
+  spec.description   = "Template"
+  spec.summary       = "Spina"
+  spec.homepage      = "http://www.denkgroot.com"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+
+  spec.add_dependency "bourbon", "~> 3.2.1"
+  spec.add_dependency "neat", "~> 1.5.0"
+  spec.add_dependency "coffee-rails"
+  spec.add_dependency 'jquery-fileupload-rails'
+end

data/vendor/assets/javascripts/spina/jquery.customfileinput.js

@@ -0,0 +1,85 @@
+/**
+ * --------------------------------------------------------------------
+ * jQuery customfileinput plugin
+ * Author: Scott Jehl, scott@filamentgroup.com
+ * Copyright (c) 2009 Filament Group 
+ * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
+ * --------------------------------------------------------------------
+ */
+$.fn.customFileInput = function(){
+  //apply events and styles for file input element
+  var fileInput = $(this)
+    .addClass('customfile-input') //add class for CSS
+    .mouseover(function(){ upload.addClass('customfile-hover'); })
+    .mouseout(function(){ upload.removeClass('customfile-hover'); })
+    .focus(function(){
+      upload.addClass('customfile-focus'); 
+      fileInput.data('val', fileInput.val());
+    })
+    .blur(function(){ 
+      upload.removeClass('customfile-focus');
+      $(this).trigger('checkChange');
+     })
+     .bind('disable',function(){
+      fileInput.attr('disabled',true);
+      upload.addClass('customfile-disabled');
+    })
+    .bind('enable',function(){
+      fileInput.removeAttr('disabled');
+      upload.removeClass('customfile-disabled');
+    })
+    .bind('checkChange', function(){
+      if(fileInput.val() && fileInput.val() != fileInput.data('val')){
+        fileInput.trigger('change');
+      }
+    })
+    .bind('change',function(){
+      //get file name
+      var fileName = $(this).val().split(/\\/).pop();
+      //get file extension
+      var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
+      //update the feedback
+      uploadFeedback
+        .text(fileName) //set feedback text to filename
+        .removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
+        .addClass(fileExt) //add file extension class
+        .data('fileExt', fileExt) //store file extension for class removal on next change
+        .addClass('customfile-feedback-populated'); //add class to show populated state
+      //change text of button 
+      uploadButton.text('Kies een bestand');  
+    })
+    .click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
+      fileInput.data('val', fileInput.val());
+      setTimeout(function(){
+        fileInput.trigger('checkChange');
+      },100);
+    });
+    
+  //create custom control container
+  var upload = $('<div class="customfile"></div>');
+  //create custom control button
+  var uploadButton = $('<span class="customfile-button" aria-hidden="true">voeg foto toe</span>').appendTo(upload);
+  //create custom control feedback
+  var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">Geen bestand geselecteerd...</span>').appendTo(upload);
+  
+  //match disabled state
+  if(fileInput.is('[disabled]')){
+    fileInput.trigger('disable');
+  }
+    
+  
+  //on mousemove, keep file input under the cursor to steal click
+  upload
+    .mousemove(function(e){
+      fileInput.css({
+        'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
+        'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
+      }); 
+    })
+    .insertAfter(fileInput); //insert after the input
+  
+  fileInput.appendTo(upload);
+    
+  //return jQuery
+  return $(this);
+};