kickstart_rails 3.0.39 → 3.0.40

data/app/assets/javascripts/kickstart_rails/status.coffee

@@ -0,0 +1,30 @@
+status = (opts) ->
+
+  defaults =
+    type: 'status-yellow'
+    delay: 2000
+
+  status = k$.extend defaults, opts
+
+  if not k$.$$('#status_bar').length
+    $statusBar = document.createElement('div')
+    $statusBar.id = 'status_bar'
+    $statusBar.className = 'status_bar'
+    $statusBar.innerHTML = "<div class='status_bar-status' id='status_bar-status'></div>"
+    document.body.appendChild($statusBar)
+
+  $statusBar = k$.$('#status_bar')
+
+  hideStatusBar = ->
+    $statusBar.parentNode.removeChild $statusBar
+
+  if status.delay > 0
+    k$.debounce hideStatusBar, 'hideStatusBar', status.delay
+
+  $status = k$.$("#status_bar-status")
+  $status.innerHTML = status.text
+  $status.dataset.type = status.type
+
+k$.status = status
+
+module.exports = status

data/app/assets/javascripts/kickstart_rails/tabs.coffee

@@ -0,0 +1,32 @@
+tabs = (el) ->
+  $tabSet = k$.$(el).querySelectorAll('li')
+  $tab.classList.add('tab-item') for $tab in $tabSet
+
+  $paneSet = new Array()
+  for $_tab in $tabSet
+    $id = $_tab.querySelector('a').getAttribute('href')
+    $pane = k$.$("article#{$id}")
+    $pane.classList.add 'open' if $_tab.classList.contains 'open'
+    $paneSet.push($pane)
+    $pane.dataset.panel = 'true'
+
+  for $tab in $tabSet
+    # Create an array of panels by reading the links from each tab.
+    $tabLink = $tab.querySelector('a')
+    $tabLink.dataset.link = $tabLink.getAttribute 'href'
+    $tabLink.href = 'javascript:void(0);'
+
+    do ($tab, $tabLink, $paneSet) ->
+      $tab.addEventListener 'click', ->
+
+        # Reset tabs and panes only in this tabset
+        $pane.classList.remove 'open' for $pane in $paneSet
+        _$tab.classList.remove 'open' for _$tab in $tabSet
+
+        # Add an open class uniquely to this tab and pane.
+        k$.$("article#{$tabLink.dataset.link}").classList.add 'open'
+        $tab.classList.add 'open'
+
+k$.tabs = tabs
+
+module.exports = tabs

data/app/assets/javascripts/kickstart_rails/tests.coffee

@@ -0,0 +1,10 @@
+App                 = require './app'
+testDef             = require '../tests/default'
+testModal           = require '../tests/modal'
+testNavbar          = require '../tests/navbar'
+testGrowl           = require '../tests/growl'
+testDropdownButtons = require '../tests/dropdown-buttons'
+testTabs            = require '../tests/tabs'
+testStatus          = require '../tests/status'
+testDebouncer       = require '../tests/debouncer'
+testBuffer          = require '../tests/buffer'

data/app/assets/javascripts/kickstart_rails/throttler.coffee

@@ -0,0 +1,7 @@
+throttle = (fn, id, delay) ->
+
+  
+
+k$.throttle = throttle
+
+module.exports = throttle

data/app/assets/stylesheets/core/_animations.sass

@@ -0,0 +1,8 @@
+@keyframes fadeInDown 
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)

data/app/assets/stylesheets/core/_base.sass

@@ -0,0 +1,16 @@
+*
+  box-sizing: border-box
+
+iframe
+  width: 100%
+  border: 0
+  padding: 15px
+  margin-bottom: 25px
+
+=above-footer
+  flex: 1
+
+=screen
+  display: flex
+  min-height: 100vh
+  flex-direction: column

data/app/assets/stylesheets/core/_base_components.sass

@@ -0,0 +1,15 @@
+// Base Components
+// ===============
+// These are the base components from which dependent components can extend.
+
+// Components
+@import components/_alerts
+@import components/_buttons
+@import components/_hr
+@import components/_images
+@import components/_labels
+@import components/_modals
+@import components/_progress
+@import components/_tables
+@import components/_dropdown_menu
+@import components/_navbar

data/app/assets/stylesheets/core/_dependent_components.sass

@@ -0,0 +1,12 @@
+// Dependent Components
+// ====================
+// These components extend the core and base components.
+
+// Components
+@import components/_growls
+@import components/_modals
+@import components/_notifications
+@import components/_tabs
+@import components/_tooltips
+@import components/_forms
+@import components/_pagination

data/app/assets/stylesheets/core/_direct-apply.sass

@@ -0,0 +1,337 @@
+// Direct applications
+// ===================
+// Regardless of semantic or non-semantic usage, some styles
+// Should be applied directly to classes or elements no matter
+// what. This include should be included near the end of the
+// import chain but before kickstart.sass to accomplish this.
+
+body
+  &.dismiss-modal
+    cursor: pointer
+
+// Buttons
+// -------
+
+button,
+input[type="submit"],
+input[type="button"],
+  +button
+
+input[type="file"]::-webkit-file-upload-button
+  +button
+
++dropdown_menu
+
+// Forms
+// -----
+
+%error_message
+  font-style: italic
+  margin:
+    top: 7px
+    bottom: 14px
+
+form
+  .errors, .warnings, .successes
+    p
+      @extend %error_message
+
+  .errors
+    +field-colors(map-get($colors, red))
+
+  .warnings
+    +field-colors(map-get($colors, yellow))
+
+  .successes
+    +field-colors(map-get($colors, green))
+
+  p
+    &.error, &.warning, &.success
+      @extend %error_message
+
+  label, span, p
+    &.error
+      color: map-get($colors, red)
+
+    &.warning
+      color: map-get($colors, yellow)
+
+    &.success
+      color: map-get($colors, green)
+
+  input, select
+    &.error
+      border-color: map-get($colors, red)
+
+    &.warning
+      border-color: map-get($colors, yellow)
+
+    &.success
+      border-color: map-get($colors, green)
+
+
+// Growls
+// ------
+
+.growl_container
+  position: fixed
+  top: 0
+  right: 0
+  padding: $space/2
+  z-index: 2000
+  width: 300px
+  overflow: auto
+  max-height: 100vh
+
+  .growl
+    box-shadow: 0px 0px $space/2 rgba(0, 0, 0, 0.5)
+    transition: all 0.5s
+
+    &.show, &.hide
+      +fadeInDown
+
+    &.hide
+      animation-direction: reverse
+
+    +growl
+
+// Status
+// ------
+
+.status_bar
+  +status_bar
+    .status_bar-status
+      &[data-type="status-red"]
+        +label(map-get($colors, red))
+
+      &[data-type="status-orange"]
+        +label(map-get($colors, orange))
+
+      &[data-type="status-yellow"]
+        +label(map-get($colors, yellow))
+
+      &[data-type="status-green"]
+        +label(map-get($colors, green))
+
+      &[data-type="status-blue"]
+        +label(map-get($colors, blue))
+
+      &[data-type="status-violet"]
+        +label(map-get($colors, violet))
+
+// Tabs
+// ----
+
+[data-panel]
+  display: none
+
+  &.open
+    display: block
+
+// Tooltips
+// --------
+
+=tooltip_base
+  margin-bottom: 0
+  position: absolute
+  display: block
+  opacity: 0
+  bottom: 100%
+  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
+  pointer-events: none
+  max-width: 350px
+  min-width: 100px
+  text-align: center
+  transition: all 0.25s
+
+=tooltip_arrow
+  border-top-style: solid
+  border-top-width: 10px
+  border-left: 10px solid transparent
+  border-right: 10px solid transparent
+  width: 0px
+  height: 0px
+  content: ' '
+  display: block
+  background: transparent
+  position: absolute
+  left: 50%
+  margin-left: -8px
+  opacity: 0
+
+=pseudo-tooltip-color($color: $primary-color)
+  &:after
+    +label($color)
+    margin-bottom: 0
+
+  &:before
+    border-top-color: $color
+
+[data-ks-tooltip]
+  position: relative
+
+  +pseudo-tooltip-color
+
+  &:after
+    content: attr(data-ks-tooltip)
+    +tooltip_base
+    transform: translateY(0px)
+    z-index: 10
+
+  &:before
+    +tooltip_arrow
+    bottom: 100%
+    z-index: 100
+
+  &:hover
+    &:after, &:before
+      opacity: 1
+
+    &:after
+      transform: translateY(-8px)
+      transition: transform 0.25s
+
+  // Positioning
+
+  &[data-ks-tooltip-position="bottom"]
+    &:after
+      top: 100%
+      bottom: auto
+      margin-top: 15px
+      transform: translateY(-6px)
+
+    &:before
+      transform: rotate(180deg)
+      top: 100%
+      bottom: auto
+
+  &[data-ks-tooltip-position="left"]
+    &:after
+      transform: translateY(6px)
+      top: 50%
+      bottom: auto
+      margin:
+        top: -19px
+        right: 12px
+      left: auto
+      right: 100%
+
+    &:before
+      transform: rotate(-90deg)
+      top: 50%
+      margin-top: -4px
+      bottom: auto
+      left: auto
+      right: 100%
+
+  &[data-ks-tooltip-position="right"]
+    &:after
+      transform: translateY(6px)
+      top: 50%
+      bottom: auto
+      margin:
+        top: -19px
+        left: 16px
+      left: 100%
+      right: auto
+
+    &:before
+      transform: rotate(90deg)
+      top: 50%
+      margin-top: -4px
+      margin-left: 4px
+      bottom: auto
+      left: 100%
+      right: auto
+
+  &[data-ks-tooltip-color="red"]
+    +pseudo-tooltip-color(map-get($colors, red))
+
+  &[data-ks-tooltip-color="orange"]
+    +pseudo-tooltip-color(map-get($colors, orange))
+
+  &[data-ks-tooltip-color="yellow"]
+    +pseudo-tooltip-color(map-get($colors, yellow))
+
+  &[data-ks-tooltip-color="green"]
+    +pseudo-tooltip-color(map-get($colors, green))
+
+  &[data-ks-tooltip-color="blue"]
+    +pseudo-tooltip-color(map-get($colors, blue))
+
+  &[data-ks-tooltip-color="violet"]
+    +pseudo-tooltip-color(map-get($colors, violet))
+
+.tooltip
+  +tooltip_base
+  left: -30px
+  right: -30px
+  transform: translateY(8px)
+  z-index: 10
+  +label(map-get($colors, blue))
+  margin: 10px auto
+
+  &:after
+    +tooltip_arrow
+    top: 100%
+
+  &.tooltip-bottom
+    top: 100%
+    bottom: auto
+
+    &:after
+      bottom: 100%
+      top: auto
+      transform: rotate(180deg)
+
+  &.tooltip-left
+    right: 100%
+    left: auto
+
+    &:after
+      transform: rotate(-90deg)
+      left: 100%
+
+  &.tooltip-right
+    left: 100%
+    right: auto
+
+    &:after
+      transform: rotate(90deg)
+      left: auto
+      right: 100%
+      margin:
+        left: 0
+        right: -8px
+
+  &.tooltip-right, &.tooltip-left
+    top: 0
+    bottom: auto
+    margin: 0
+
+    &:after
+      top: 8px
+
+  &.tooltip-red
+    +label(map-get($colors, red))
+
+  &.tooltip-orange
+    +label(map-get($colors, orange))
+
+  &.tooltip-yellow
+    +label(map-get($colors, yellow))
+
+  &.tooltip-green
+    +label(map-get($colors, green))
+
+  &.tooltip-blue
+    +label(map-get($colors, blue))
+
+  &.tooltip-violet
+    +label(map-get($colors, violet))
+
+  &.tooltip-primary
+    +label(map-get($colors, primary))
+
+  &.tooltip-secondary
+    +label(map-get($colors, secondary))