curo-material-interface 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9b794f9b95baa005bc18e6ab27e57663955d9e74
-  data.tar.gz: 55f703a12dffe299d571ac75dd2501cd5fbb720b
+  metadata.gz: e007150e2826e86bbe0dc6e4b7b369598e6bc236
+  data.tar.gz: 3c3d7db47aa54c482c7fceed924c5f95ca8d3857
 SHA512:
-  metadata.gz: 2e1b622dad79390f61bb9310c9b703f7dc17ee7194fc4896263942b872daaa62682629156375c7c1a5387f574e109a99e644de2ae3a4cd7cca553e5f71f3231b
-  data.tar.gz: 6a1afd21c5b559707967f0e93d46278526e0a31f7ab13e2ec06cc6b1a3a0bd7120dfa883e14478f8ad9f23e78dd17ba36303c88e70fa77f08278abd1008abd79
+  metadata.gz: d6a59cdb1b433c91b4a3cee64f45841599fa7e16f0c5bd71e0ca1f26ee70dab89a687f44efd90562b745c4fd7f8116d27be71c27b0f7c5d13b97facd23d75e23
+  data.tar.gz: d94d6b3c128f773ef2e02e5eef29b2a5766d0700b25eb1261100716fc159cbe4121e0e647e1c5d959b7a2d1b4375dbf9c9b7b0c460b557f9e888e9b83c4f0c60

data/README.md

@@ -1,5 +1,118 @@
+http://wonderweblabs.github.io/curo-material-interface/
 
+Curo Material Interface is an extraction of the wonderweblabs Curo CMS which is used in the client projects (https://curocms.com - soon available). Since we want to reuse the design patterns in other projects, we'll continuously move those implementation in this repo.
 
-# Middleman
+Most parts of the implementation are loosely based on the Google Material Design concept (http://www.google.com/design/spec/material-design/introduction.html). Feel free to fork this repo and continue your own interpretation of the google material design concept.
 
-ln -s [path/to/cmi]/lib/assets [path/to/cmi]/gh-pages-middleman/source/
+As icon set we use google material design icons (https://github.com/google/material-design-icons).
+
+## Installation
+
+### Middleman & Rails
+
+```ruby
+gem 'curo-material-interface'
+```
+
+### Include styles
+
+We decided to keep things as open as possible - not like other libraries that include many files by default. Instead, you need to care about the inclusion on your own:
+
+```sass
+@import cmi/libs
+
+// !!! Important
+// To use curo material interface fonts and icons,
+// you need to provide the font-face loading mixin.
+@import ./font_mixin
+
+// config
+@import cmi/colors
+@import cmi/variables
+@import cmi/mixins
+@import cmi/extensions
+
+// basic curo material interface files
+@import cmi/reset
+@import cmi/global
+
+// fonts / typo
+@import cmi/roboto
+@import cmi/icons
+@import cmi/typography
+
+// components
+@import cmi/components/navbar
+@import cmi/components/buttons
+@import cmi/components/flex-modal
+@import cmi/components/loading-indicator
+@import cmi/components/ripples
+@import cmi/components/tabs
+@import cmi/form_components/text_field
+@import cmi/form_components/checkbox
+```
+
+At "@import ./font_mixin" you need to implement the right font font-face call for middleman or rails for your application:
+
+**Rails**
+
+```sass
+@font-face
+ font-family: "Material-Design-Icons"
+ src: asset-url("mdi/Material-Design-Icons.eot?-g7cqhn")
+ src: asset-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), asset-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), asset-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), asset-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
+ font-weight: normal
+ font-style: normal
+
+=font-face-helper($family, $fileBaseName, $weight, $style)
+  @font-face
+    font-family: $family
+    src: asset-url($fileBaseName + '.eot')
+    src: asset-url($fileBaseName + '.eot?#iefix') format('embedded-opentype'), asset-url($fileBaseName + '.woff') format('woff'), asset-url($fileBaseName + '.ttf') format('truetype'), asset-url($fileBaseName + '.svg#robotothin') format('svg')
+    font-weight: $weight
+    font-style: $style
+```
+
+
+**Middleman**
+
+```sass
+@font-face
+ font-family: "Material-Design-Icons"
+ src: font-url("mdi/Material-Design-Icons.eot?-g7cqhn")
+ src: font-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), font-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), font-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), font-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
+ font-weight: normal
+ font-style: normal
+
+=font-face-helper($family, $fileBaseName, $weight, $style)
+  @font-face
+    font-family: $family
+    src: font-path($fileBaseName + '.eot')
+    src: font-path($fileBaseName + '.eot?#iefix') format('embedded-opentype'), font-path($fileBaseName + '.woff') format('woff'), font-path($fileBaseName + '.ttf') format('truetype'), font-path($fileBaseName + '.svg#robotothin') format('svg')
+    font-weight: $weight
+    font-style: $style
+```
+
+### Usage
+
+CMI is completely scoped - meaning that the classes won't work unless you add a container with ```class="cmi"``` somewhere around your implementation. We need that behavior for our cms.
+
+```haml
+%body
+  // won't work:
+  %a.cmi-btn
+    My Button
+
+  // works:
+  .cmi
+    %a.cmi-btn
+      My Button
+```
+
+The easiest way is to assign cmi class to the body tag, if scoping of the implementation is not important for you:
+
+```haml
+%body.cmi
+  %a.cmi-btn
+    My Button
+```

data/lib/assets/javascripts/cmi/behaviors/form_checkbox_behavior.coffee

@@ -0,0 +1,24 @@
+window.CMI or= {}
+
+#
+# Will triggers method "onCumaCheckboxClick: (targetLabel)" on
+# the view if method is defined.
+#
+class CMI.FormCheckboxBehavior extends Marionette.Behavior
+
+  ui:
+    checkboxLabels: '.cmi-checkbox-container label'
+
+  events:
+    'click @ui.checkboxLabels': 'onLabelClick'
+
+  onRender: ->
+    @ui.checkboxLabels.each ->
+      CMI.FormComponents.Checkbox.reset($(this))
+
+  onLabelClick: (event) ->
+    event.preventDefault()
+    target = $(event.currentTarget)
+    CMI.FormComponents.Checkbox.click(target)
+
+    @view.triggerMethod('cmi:checkbox:click', target)

data/lib/assets/javascripts/cmi/behaviors/form_text_field_behavior.coffee

@@ -0,0 +1,30 @@
+window.CMI or= {}
+
+class CMI.FormTextFieldBehavior extends Marionette.Behavior
+
+  @inputSelectors: ->
+    '.cmi-text-input input,
+    .cmi-text-input textarea'
+
+  ui:
+    inputs: "#{@inputSelectors()}"
+
+  events:
+    'change @ui.inputs': 'onInputChange'
+    'focus @ui.inputs': 'onInputFocus'
+    'blur @ui.inputs': 'onInputBlur'
+
+  onRender: ->
+    if @ui.inputs? == true && @ui.inputs.length > 0
+      @ui.inputs.each ->
+        CMI.FormComponents.TextField.reset($(this))
+
+  onInputChange: (event) ->
+    CMI.FormComponents.TextField.animateChange($(event.currentTarget))
+
+  onInputFocus: (event) ->
+    CMI.FormComponents.TextField.animateFocus($(event.currentTarget))
+
+  onInputBlur: (event) ->
+    CMI.FormComponents.TextField.animateBlur($(event.currentTarget))
+

data/lib/assets/javascripts/cmi/behaviors/form_textarea_behavior.coffee

@@ -0,0 +1,40 @@
+window.CMI or= {}
+
+class CMI.FormTextareaBehavior extends Marionette.Behavior
+
+  behaviors:
+    CMITextFields:
+      behaviorClass: CMI.FormTextFieldBehavior
+
+  ui:
+    textareas: '.cmi-text-input textarea'
+
+  events:
+    'keyup @ui.textareas': 'onKeyUp'
+    'keydown @ui.textareas': 'onKeyDown'
+
+  onRender: ->
+    reference = @.$el
+
+    @ui.textareas.each ->
+      CMI.FormComponents.Textarea.animateHeight reference, $(this)
+
+  onKeyUp: (event) ->
+    target = $(event.currentTarget)
+    CMI.FormComponents.Textarea.animateHeight @.$el, target
+
+  onKeyDown: (event) ->
+    target = $(event.currentTarget)
+    CMI.FormComponents.Textarea.animateHeight @.$el, target
+
+
+  #
+  # If you outside implementation works with hiding elements that
+  # contain textareas, the textareas won't be resized after showing
+  # those elements since the calculation fails.
+  #
+  # To fix this, call triggerMethod('cmi:textarea:refresh') on
+  # the view implementing the textarea behavior to resize correctly.
+  #
+  onCmiTextareaRefresh: ->
+    @onRender()

data/lib/assets/javascripts/cmi/behaviors/ripples_behavior.coffee

@@ -0,0 +1,12 @@
+window.CMI or= {}
+
+class CMI.RipplesBehavior extends Marionette.Behavior
+
+  ui:
+    rippleButton: '.cmi-ripples'
+
+  events:
+    'click @ui.rippleButton': 'onRipplesClick'
+
+  onRipplesClick: (event) ->
+    CMI.Ripples.animate($(event.currentTarget), event.pageX, event.pageY)

data/lib/assets/javascripts/cmi/behaviors/tabs_behavior.coffee

@@ -0,0 +1,34 @@
+window.CMI or= {}
+
+#
+# Will triggers method "onCmiTabsClick: (target)" on
+# the view if method is defined.
+#
+# Attention: It does not automatically mean, there is a
+#            new tab visible. It just triggers on navbar
+#            tab click.
+#
+class CMI.TabsBehavior extends Marionette.Behavior
+
+  ui:
+    tabs: '.cmi-tabs > li > a'
+    tabActive: '.cmi-tabs > li.cmi-active > a'
+
+  events:
+    'click @ui.tabs': 'onTabClick'
+
+  onRender: ->
+    @activate(@ui.tabActive)
+
+  onShow: ->
+    @activate(@ui.tabActive)
+
+  onTabClick: (event, b) ->
+    event.preventDefault()
+    target = $(event.currentTarget)
+
+    @activate(target)
+    @view.triggerMethod 'cmi:tabs:click', target
+
+  activate: (domElement) ->
+    CMI.Tabs.activate(domElement)

data/lib/assets/javascripts/cmi/form_components/checkbox.coffee

@@ -0,0 +1,36 @@
+window.CMI or= {}
+window.CMI.FormComponents or= {}
+
+class CMI.FormComponents.Checkbox
+
+  @reset: (domElement) ->
+    checkbox = $('input[type="checkbox"]', domElement)
+    @_animate(domElement, checkbox.prop('checked'))
+
+  @click: (domElement) ->
+    checkbox = $('input[type="checkbox"]', domElement)
+    checkbox.prop('checked', !checkbox.prop('checked'))
+    @_ripples(domElement)
+    @_animate(domElement, checkbox.prop('checked'))
+
+
+  # ---------------------------------------------
+  # private
+
+  @_animate: (domElement, checked) ->
+    parent = domElement if domElement.hasClass('.cmi-checkbox')
+    parent or= domElement.parents('.cmi-checkbox-container')
+
+    if checked == true
+      parent.addClass('cmi-active')
+    else
+      parent.removeClass('cmi-active')
+
+  @_ripples: (domElement) ->
+    parent = domElement if domElement.hasClass('.cmi-checkbox')
+    parent or= domElement.parents('.cmi-checkbox-container')
+
+    animation = parent.find('.cmi-animation')
+    x = animation.offset().left + animation.outerWidth() / 2
+    y = animation.offset().top + animation.outerHeight() / 2
+    CMI.Ripples.animate(animation, x, y)

data/lib/assets/javascripts/cmi/form_components/text_field.coffee

@@ -0,0 +1,49 @@
+window.CMI or= {}
+window.CMI.FormComponents or= {}
+
+class CMI.FormComponents.TextField
+
+  @reset: (domElement) ->
+    if domElement.val().length > 0
+      domElement.parents(@_getInputBoxSelector()).addClass('cmi-active')
+    else
+      domElement.parents(@_getInputBoxSelector()).removeClass('cmi-active')
+
+  @animateChange: (domElement) ->
+    domElement.parents(@_getInputBoxSelector()).addClass('cmi-active') if domElement.val().length != 0
+    @validate_field(domElement, domElement.parents(@_getInputBoxSelector()))
+
+  @animateFocus: (domElement) ->
+    domElement.parents(@_getInputBoxSelector()).addClass('cmi-active')
+
+  @animateBlur: (domElement) ->
+    domElement.parents(@_getInputBoxSelector()).removeClass('cmi-active') if domElement.val().length == 0
+    @validate_field(domElement, domElement.parents(@_getInputBoxSelector()))
+
+  @formReset: (domFormElement) ->
+    domElement.parents(@_getInputBoxSelector()).removeClass('cmi-valid').removeClass('cmi-invalid')
+
+    domFormElement.find('select.cmi-initialized').each ->
+      reset_text = domFormElement.find('option[selected]').text()
+      domFormElement.siblings('input.cmi-select-dropdown').val(reset_text)
+
+
+  # ---------------------------------------------
+  # helper
+
+  @validate_field: (domElement, parentDomElement) ->
+    if domElement.val().length == 0
+      if parentDomElement.hasClass('cmi-validate')
+        parentDomElement.removeClass('cmi-valid')
+        parentDomElement.removeClass('cmi-invalid')
+    else if parentDomElement.hasClass('cmi-validate')
+      if domElement.is(':valid')
+        parentDomElement.removeClass('invalid')
+        parentDomElement.addClass('cmi-valid')
+      else
+        parentDomElement.removeClass('cmi-valid')
+        parentDomElement.addClass('cmi-invalid')
+
+  @_getInputBoxSelector: ->
+    '.cmi-text-input'
+

data/lib/assets/javascripts/cmi/form_components/textarea.coffee

@@ -0,0 +1,21 @@
+window.CMI or= {}
+window.CMI.FormComponents or= {}
+
+class CMI.FormComponents.Textarea
+
+  @animateHeight: (entryPoint, domElement) ->
+    # add reference
+    entryPoint.append('<div class="cmi-hidden-textarea-reference"></div>')
+
+    # set reference values
+    reference = $('.cmi-hidden-textarea-reference', entryPoint)
+    reference.css('width', domElement.width())
+    reference.html(domElement.val().replace(/\n/g, '<br/>'))
+
+    # set new height
+    domElement.css('height', reference.height())
+
+    # clear hidden
+    reference.remove()
+
+

data/lib/assets/javascripts/cmi/loading_indicator.coffee

@@ -0,0 +1,67 @@
+window.CMI or= {}
+
+class CMI.LoadingIndicator extends Backbone.View
+
+  className: 'cmi-loading-indicator'
+
+  initialize: (options = {}) ->
+    @_options = _.extend(@_defaultOptions(), options)
+    @render()
+
+  render: ->
+    @.$el.html(@_getInnerHtml())
+
+    if @_options.background == 'dark'
+      @.$el.addClass('cmi-loading-indicator-background-dark')
+    else if @_options.background == 'light'
+      @.$el.addClass('cmi-loading-indicator-background-light')
+    else if @_options.background? == true && @_options.background.length > 0
+      @.$el.addClass(@_options.background)
+
+    @
+
+  domElement: ->
+    @.$el
+
+  fadeIn: ->
+    @_attach() if @_isAttached() == false
+    @.$el.addClass('cmi-loading-fade')
+    @
+
+  fadeOut: ->
+    @.$el.removeClass('cmi-loading-fade')
+    _.delay($.proxy(@, '_detach'), 300) if @_options.detachAfterFadeOut
+    @
+
+
+
+  # ---------------------------------------------
+  # private methods
+
+  _getInnerHtml: ->
+    $('<div class="cmi-loading-indicator-inside">
+        <svg class="circular">
+          <circle class="path" cx="50" cy="50" fill="none" r="20" stroke-miterlimit="10" stroke-width="3"></circle>
+        </svg>
+      </div>')
+
+  _detach: ->
+    @.$el.detach()
+    @_attached = false
+
+  _attach: ->
+    return if @_options.parent? == false
+    @_options.parent.append(@.$el)
+    @_attached = true
+
+  _isAttached: ->
+    @_attached or= false
+
+  _defaultOptions: ->
+    {
+      background: null
+      parent: null
+      detachAfterFadeOut: true
+    }
+
+

data/lib/assets/javascripts/cmi/ripples.coffee

@@ -0,0 +1,25 @@
+window.CMI or= {}
+
+class CMI.Ripples
+
+  @animateClick: (domElement, event) ->
+    @animate(domElement, event.pageX, event.pageY)
+
+  @animate: (domElement, x, y) ->
+    # create ink element if doesn't exist
+    domElement.prepend('<span class="cmi-ink"></span>') if domElement.find('.cmi-ink').length == 0
+    ink = domElement.find('.cmi-ink')
+
+    # stop previous animation
+    ink.removeClass('cmi-animate')
+
+    # set size of .ink
+    if !ink.height() && !ink.width()
+      d = Math.max(domElement.outerWidth(), domElement.outerHeight())
+      ink.css({ width: d, height: d })
+
+    # position .ink
+    x = x - domElement.offset().left - ink.width()/2
+    y = y - domElement.offset().top - ink.height()/2
+    ink.css({ top: "#{y}px", left: "#{x}px" })
+    ink.addClass('cmi-animate')

data/lib/assets/javascripts/cmi/tabs.coffee

@@ -0,0 +1,46 @@
+window.CMI or= {}
+
+class CMI.Tabs
+
+  @activate: (domElement) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+    return if domElement? == false || domElement.length <= 0
+
+    # load tabs
+    tabs = domElement.parents('.cmi-tabs')
+    @_ensureActiveIndicator(tabs)
+    indicator = tabs.find('.cmi-tabs-active-indicator')
+
+    # new position
+    position = domElement.offsetParent().position()
+    left = position.left
+    right = tabs.innerWidth() - left - domElement.outerWidth()
+
+    # moving direction
+    indicator.removeClass('cmi-tabs-animate-right').removeClass('cmi-tabs-animate-left')
+    if left < indicator.position().left
+      indicator.addClass('cmi-tabs-animate-left')
+    else
+      indicator.addClass('cmi-tabs-animate-right')
+
+    # animate indicator
+    indicator.css({ left: "#{left}px", right: "#{right}px" })
+
+    # set link active
+    tabs.find('li').removeClass('cmi-tabs-active')
+    domElement.parents('li').addClass('cmi-tabs-active')
+
+    # switch tab
+    tabsContainer = $(tabs.data('cmi-tabs-container'))
+    element = document.getElementById(domElement.attr('href').replace('#', ''))
+    if element? == true && element.className.indexOf('cmi-tabs-active') < 0
+      tabsContainer.find('.cmi-tabs-tab').removeClass('cmi-tabs-active')
+      element.className += ' cmi-tabs-active'
+
+
+  # ---------------------------------------------
+  # private
+
+  @_ensureActiveIndicator: (tabsElement) ->
+    return if tabsElement.find('.cmi-tabs-active-indicator').length > 0
+    tabsElement.append('<li class="cmi-tabs-active-indicator"></li>')

data/lib/assets/stylesheets/cmi/_icons.sass

@@ -1,9 +1,10 @@
-@font-face
-  font-family: "Material-Design-Icons"
-  src: asset-url("mdi/Material-Design-Icons.eot?-g7cqhn")
-  src: asset-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), asset-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), asset-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), asset-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
-  font-weight: normal
-  font-style: normal
+
+// @font-face
+//   font-family: "Material-Design-Icons"
+//   src: font-url("mdi/Material-Design-Icons.eot?-g7cqhn")
+//   src: font-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), font-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), font-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), font-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
+//   font-weight: normal
+//   font-style: normal
 
 [class^="mdi-"], [class*=" mdi-"]
   font-family: "Material-Design-Icons"

data/lib/assets/stylesheets/cmi/_roboto.sass

@@ -1,21 +1,21 @@
 // roboto
-+font-face-helper('Roboto', 'roboto/Roboto-Thin-webfont', 100, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-ThinItalic-webfont', 100, italic)
-+font-face-helper('Roboto', 'roboto/Roboto-Light-webfont', 200, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-LightItalic-webfont', 200, italic)
-+font-face-helper('Roboto', 'roboto/Roboto-Regular-webfont', 400, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-Italic-webfont', 400, italic)
-+font-face-helper('Roboto', 'roboto/Roboto-Medium-webfont', 500, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-MediumItalic-webfont', 500, italic)
-+font-face-helper('Roboto', 'roboto/Roboto-Bold-webfont', 600, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-BoldItalic-webfont', 600, italic)
-+font-face-helper('Roboto', 'roboto/Roboto-Black-webfont', 700, normal)
-+font-face-helper('Roboto', 'roboto/Roboto-BlackItalic-webfont', 700, italic)
++font-face-helper('Roboto', 'roboto/Roboto-Thin-webfont', 100, normal, 'robotothin')
++font-face-helper('Roboto', 'roboto/Roboto-ThinItalic-webfont', 100, italic, 'robotothin_italic')
++font-face-helper('Roboto', 'roboto/Roboto-Light-webfont', 200, normal, 'robotolight')
++font-face-helper('Roboto', 'roboto/Roboto-LightItalic-webfont', 200, italic, 'robotolight_italic')
++font-face-helper('Roboto', 'roboto/Roboto-Regular-webfont', 400, normal, 'robotoregular')
++font-face-helper('Roboto', 'roboto/Roboto-Italic-webfont', 400, italic, 'robotoitalic')
++font-face-helper('Roboto', 'roboto/Roboto-Medium-webfont', 500, normal, 'robotomedium')
++font-face-helper('Roboto', 'roboto/Roboto-MediumItalic-webfont', 500, italic, 'robotomedium_italic')
++font-face-helper('Roboto', 'roboto/Roboto-Bold-webfont', 600, normal, 'robotobold')
++font-face-helper('Roboto', 'roboto/Roboto-BoldItalic-webfont', 600, italic, 'robotobold_italic')
++font-face-helper('Roboto', 'roboto/Roboto-Black-webfont', 700, normal, 'robotoblack')
++font-face-helper('Roboto', 'roboto/Roboto-BlackItalic-webfont', 700, italic, 'robotoblack_italic')
 
 // roboto condensed
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Light-webfont', 200, normal)
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-LightItalic-webfont', 200, italic)
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Regular-webfont', 400, normal)
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Italic-webfont', 400, italic)
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Bold-webfont', 600, normal)
-+font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-BoldItalic-webfont', 600, italic)
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Light-webfont', 200, normal, 'roboto_condensedlight')
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-LightItalic-webfont', 200, italic, 'roboto_condensedlight_italic')
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Regular-webfont', 400, normal, 'roboto_condensedregular')
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Italic-webfont', 400, italic, 'roboto_condenseditalic')
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-Bold-webfont', 600, normal, 'roboto_condensedbold')
++font-face-helper('Roboto Condensed', 'roboto/RobotoCondensed-BoldItalic-webfont', 600, italic, 'roboto_condensedbold_italic')

data/lib/assets/stylesheets/cmi/components/_flex-modal.sass

@@ -0,0 +1,200 @@
+body.cmi-flex-modal-open
+  overflow: hidden
+
+// base modal structure
+.cmi
+  &.cmi-flex-modal
+    +position(fixed, 0 0 0 0)
+    +backface-visibility(hidden)
+    display: block
+    overflow: hidden
+    outline: 0
+    z-index: $modal-z-index
+    background-color: $modal-backdrop-color
+
+  .cmi-flex-modal-dialog,
+  .cmi-flex-modal-dialog-inner
+    overflow: hidden
+    z-index: 0
+    margin: 0
+    padding: 0
+    outline: 0
+    +display(flex)
+    +flex-direction(column)
+    +flex-wrap(nowrap)
+    +align-items(stretch)
+    +border-radius(3px)
+
+  .cmi-flex-modal-dialog
+    +position(absolute, 5% 5% auto 5%)
+    max-height: 90%
+    @extend .z-depth-5
+
+  .cmi-flex-modal-dialog-inner
+    position: relative
+
+  .cmi-flex-modal-dialog,
+  .cmi-flex-modal-dialog-inner
+    > header,
+    > main,
+    > footer
+      position: relative
+
+    > header,
+    > footer
+      overflow: hidden
+      z-index: 10
+      +display(flex)
+      +flex-shrink(0)
+
+    > header
+      height: $modal-header-height
+      background-color: $modal-header-bgcolor
+      +border-top-radius(3px)
+
+    > main
+      overflow: scroll
+      overflow-x: hidden
+      overflow-y: scroll
+      z-index: 1
+      background-color: $modal-main-bgcolor
+      +display(flex)
+      +flex-direction(column)
+      +flex-shrink(1)
+
+    > footer
+      height: $modal-footer-height
+      background-color: $modal-footer-bgcolor
+      +border-bottom-radius(3px)
+
+  .cmi-flex-modal-main-inside
+    position: relative
+    height: auto
+    display: -webkit-box
+    +display(flex)
+    +flex-direction(row)
+    +flex-wrap(nowrap)
+    +flex-grow(1)
+    +flex-shrink(0)
+    +align-items(stretch)
+
+    > aside,
+    > section
+      position: relative
+
+    > aside
+      width: $modal-sidebar-width
+      min-width: $modal-sidebar-width
+      background-color: $modal-sidebar-bgcolor
+      +flex-grow(0)
+    > section
+      +flex-grow(1)
+
+// modal additional content styling
+.cmi
+  .cmi-flex-modal-dialog,
+  .cmi-flex-modal-dialog-inner
+    > header,
+    > footer
+      .cmi-pull-left
+        a.btn
+          margin-right: 8px
+      .cmi-pull-right
+        a.btn
+          margin-left: 8px
+      .cmi-flex-modal-back
+        position: relative
+        overflow: visible
+        min-width: 0
+        height: auto
+        padding: 4px 6px 2px 6px
+        line-height: 1.3
+        letter-spacing: 0
+        i
+          font-size: 15px
+      .btn
+        height: auto
+
+  .cmi-flex-modal-header-inside
+    position: relative
+    display: block
+    width: 100%
+    padding: 8px
+    +clearfix
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5
+      margin: 5px
+      font-weight: 200
+      font-size: 16px
+      line-height: 1.2
+      color: #e5e5e5
+
+    .cmi-flex-modal-close
+      position: relative
+      overflow: visible
+      min-width: 0
+      height: auto
+      margin: 0
+      padding: 4px 6px 2px 6px
+      line-height: 1.3
+      letter-spacing: 0
+
+    .cmi-flex-modal-back,
+    .cmi-flex-modal-close
+      margin: 0
+      color: #e5e5e5
+      border: 1px solid #606060
+      background-color: $modal-header-bgcolor
+      i
+        color: #ccc
+      &:hover
+        background-color: darken($modal-header-bgcolor, 5%)
+        i
+          color: #fff
+
+  .cmi-flex-modal-footer-inside
+    position: relative
+    display: block
+    width: 100%
+    padding: 0px 8px
+    +clearfix
+
+    .cmi-flex-modal-back
+      margin: 13px 0
+      color: #e5e5e5
+      border: 1px solid #cccccc
+      background-color: $modal-footer-bgcolor
+      i
+        color: #999999
+      &:hover
+        background-color: darken($modal-footer-bgcolor, 5%)
+        i
+          color: #333
+
+  ul.cmi-flex-modal-aside-tab-list
+    margin: 8px 0 8px 8px
+    padding: 0
+    list-style: none
+    li
+      margin-bottom: 4px
+    a
+      position: relative
+      display: block
+      padding: 8px 20px
+      font-size: 13px
+      text-align: right
+      color: $modal-sidebar-tab-link-color
+      +border-left-radius(3px)
+      &:hover
+        color: #000
+        cursor: pointer
+        text-decoration: none
+        background-color: darken($modal-sidebar-bgcolor, 5%)
+    li.active > a,
+    a.active
+      color: $color-primary
+      background-color: #fff

data/lib/assets/stylesheets/cmi/components/_loading-indicator.sass

@@ -0,0 +1,47 @@
+.cmi-loading-indicator
+  +position(absolute, 0 0 0 0)
+  z-index: 100
+  margin: 0
+  padding: 0
+  opacity: 0
+  +transition(opacity .4s linear)
+  &.cmi-loading-indicator-background-dark
+    background-color: rgba(#000, 0.7)
+  &.cmi-loading-indicator-background-light
+    background-color: rgba(#fff, 0.8)
+  &.cmi-loading-fade
+    opacity: 1
+    +transition(opacity .4s linear)
+  .cmi-loading-indicator-inside
+    position: absolute
+    width: $loading-diameter
+    height: $loading-diameter
+    left: 50%
+    top: 50%
+    margin: ($loading-diameter * -0.5) 0 0 ($loading-diameter * -0.5)
+  .circular
+    position: relative
+    height: $loading-diameter
+    width: $loading-diameter
+    +animation(cumaLoadingRotate 2s linear infinite)
+  .path
+    stroke-dasharray: 1, 200
+    stroke-dashoffset: 0
+    stroke-linecap: round
+    stroke: $loading-color
+    +animation(cumaLoadingDash 1.5s ease-in-out infinite)
+
++keyframes(cumaLoadingRotate)
+  100%
+    +transform(rotate(360deg))
+
++keyframes(cumaLoadingDash)
+  0%
+    stroke-dasharray: 1, 200
+    stroke-dashoffset: 0
+  50%
+    stroke-dasharray: 89, 200
+    stroke-dashoffset: -35
+  100%
+    stroke-dasharray: 89, 200
+    stroke-dashoffset: -124

data/lib/assets/stylesheets/cmi/components/_ripples.sass

@@ -0,0 +1,26 @@
+.cmi
+  .cmi-ripples,
+  .cmi-ripples-standalone
+    .cmi-ink
+      position: absolute
+      display: block
+      transform: scale(0)
+      background: $ripples-color-default
+      opacity: 1
+      +border-radius(100%)
+      &.cmi-animate
+        +animation(cmiRipple 0.4s linear)
+
+    &.cmi-ripples-dark
+      .cmi-ink
+        background: $ripples-color-dark
+
+    &.cmi-ripples-primary
+      .cmi-ink
+        background: $ripples-color-primary
+
+
++keyframes(cmiRipple)
+  100%
+    opacity: 0
+    +transform(scale(2.5))

data/lib/assets/stylesheets/cmi/components/_tabs.sass

@@ -0,0 +1,41 @@
+.cmi-tabs
+  position: relative
+  margin: 0
+  padding: 0
+  list-style: none
+  font-size: 16px
+  font-size: 1rem
+  +clearfix
+  a
+    display: block
+    padding: 0.8rem 1em 0.7rem 1em
+    font-size: 0.875em
+    text-transform: uppercase
+    text-decoration: none
+    line-height: 1.2
+    color: $tabs-color-font
+    &:hover
+      text-decoration: none
+      background-color: $tabs-color-hover-bg
+  li
+    position: relative
+    overflow: hidden
+    float: left
+  li.cmi-tabs-active
+    a
+      color: $tabs-color-link-active
+  li.cmi-tabs-active-indicator
+    position: absolute
+    float: none
+    height: 3px
+    bottom: 0
+    background-color: $tabs-color-link-active
+    &.cmi-tabs-animate-right
+      +transition(right 0.15s ease, left 0.25s ease 0.05s)
+    &.cmi-tabs-animate-left
+      +transition(left 0.15s ease, right 0.25s ease 0.05s)
+
+.cmi-tabs-tab
+  display: none
+  &.cmi-tabs-active
+    display: block

data/lib/assets/stylesheets/cmi/form_components/_checkbox.sass

@@ -0,0 +1,87 @@
+.cmi-checkbox-container
+  position: relative
+  z-index: 0
+  display: block
+  margin: 0.875rem 0
+  font-size: 14px
+  font-size: 0.875rem
+  +backface-visibility(hidden)
+  label
+    position: relative
+    display: inline-block
+    max-width: 100%
+    min-height: 20px
+    margin-bottom: 0
+    padding-left: 10px
+    font-size: 1em
+    color: $checkbox-color-label
+    cursor: pointer
+    vertical-align: top
+    +user-select(none)
+  input[type="checkbox"]
+    position: absolute
+    opacity: 0
+    visibility: hidden
+    margin-left: -9999px
+  span
+    left: 0px
+    +transition-duration(0.2s)
+  span.cmi-animation
+    position: absolute
+    display: block
+    overflow: hidden
+    z-index: 0
+    height: 36px
+    width: 36px
+    top: -7px
+    margin: 0
+    content: ""
+    visibility: hidden
+    opacity: 0
+    background-color: rgba(#000, 0.07)
+    +border-radius(100%)
+  span.cmi-checkbox
+    position: relative
+    display: inline-block
+    overflow: hidden
+    z-index: 1
+    width: 16px
+    height: 16px
+    top: 3px
+    margin-right: 11px
+    border: 2px solid rgba(#000, 0.5)
+    +border-radius(2px)
+    &:before
+      position: relative
+      content: "\e899"
+      top: -2px
+      left: -2px
+      font-size: 0px
+      font-family: "Material-Design-Icons"
+      line-height: 15px
+      color: #fff
+  &.cmi-valid
+    label
+      color: $checkbox-color-valid
+  &.cmi-invalid
+    label
+      color: $checkbox-color-invalid
+  p.cmi-hint
+    margin: 0 0 0 40px
+    font-size: 0.86em
+    color: $checkbox-color-hint
+    &.cmi-valid
+      color: $checkbox-color-valid
+    &.cmi-invalid
+      color: $checkbox-color-invalid
+  label:hover
+    .cmi-animation
+      visibility: visible
+      opacity: 1
+      +transition(all 0.1s linear)
+  &.cmi-active
+    span.cmi-checkbox
+      border-color: $checkbox-color-check
+      background-color: $checkbox-color-check
+    span.cmi-checkbox:before
+      font-size: 15px

data/lib/assets/stylesheets/cmi/form_components/_text_field.sass

@@ -0,0 +1,100 @@
+.cmi-text-input
+  position: relative
+  margin: 1.25rem 0 1.5rem 0
+  font-size: 14px
+  font-size: 0.875rem
+  label
+    position: absolute
+    left: 0
+    font-size: 1em
+    color: color("grey", "lighten-1")
+    pointer-events: none
+    cursor: text
+    +transition(.2s ease-out all)
+  input
+    font-size: 1em
+    height: 2em
+    padding: 0
+    + label
+      top: 0.3em
+  textarea
+    width: 100%
+    min-height: 2rem
+    padding: 0.6em 0 0.7em 0
+    font-size: 1em
+    background-color: transparent
+    overflow: hidden
+    + label
+      top: 0.5em
+  &.cmi-growing-textarea
+    textarea
+      resize: none
+      +transition(height 0.05s ease)
+  .cmi-hidden-textarea-reference
+    position: absolute
+    opacity: 0
+    top: 9999px
+    left: 9999px
+
+  input,
+  textarea
+    background-color: transparent
+    border: none
+    border-bottom: 1px solid $input-color-border
+    outline: none
+    width: 100%
+    margin: 0
+    +box-shadow(none)
+    +box-sizing(content-box)
+    +transition(border-bottom .3s ease)
+    &:focus
+      border-bottom: 1px solid $input-color-focus
+      +box-shadow(0 1px 0 0 $input-color-focus)
+
+  &.cmi-active,
+  input:focus,
+  textarea:focus
+    label
+      top: 0
+      font-size: 0.8125em
+      font-weight: 300
+      +transform(translateY(-80%))
+
+  &.cmi-active
+    label
+      color: color("grey", "base")
+
+  input:focus,
+  textarea:focus
+    + label
+      color: $input-color-focus
+
+  &.cmi-valid
+    label
+      color: $input-color-valid
+    input,
+    textarea
+      border-bottom: 1px solid $input-color-valid
+      +box-shadow(0 1px 0 0 $input-color-valid)
+
+  &.cmi-invalid
+    label
+      color: $input-color-invalid
+    input,
+    textarea
+      border-bottom: 1px solid $input-color-invalid
+      +box-shadow(0 1px 0 0 $input-color-invalid)
+
+  // hints
+  p.cmi-hint
+    margin: 3px 0 0 0
+    font-size: 0.85em
+    font-weight: 300
+    text-align: right
+    color: color("grey", "lighten-1")
+  p.cmi-hint.cmi-valid
+    color: $input-color-valid
+  p.cmi-hint.cmi-invalid
+    color: $input-color-invalid
+
+

data/lib/curo_material_interface/version.rb

@@ -1,3 +1,3 @@
 module CuroMaterialInterface
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: curo-material-interface
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Sascha Hillig
@@ -130,6 +130,17 @@ files:
 - lib/assets/fonts/roboto/RobotoCondensed-Regular-webfont.svg
 - lib/assets/fonts/roboto/RobotoCondensed-Regular-webfont.ttf
 - lib/assets/fonts/roboto/RobotoCondensed-Regular-webfont.woff
+- lib/assets/javascripts/cmi/behaviors/form_checkbox_behavior.coffee
+- lib/assets/javascripts/cmi/behaviors/form_text_field_behavior.coffee
+- lib/assets/javascripts/cmi/behaviors/form_textarea_behavior.coffee
+- lib/assets/javascripts/cmi/behaviors/ripples_behavior.coffee
+- lib/assets/javascripts/cmi/behaviors/tabs_behavior.coffee
+- lib/assets/javascripts/cmi/form_components/checkbox.coffee
+- lib/assets/javascripts/cmi/form_components/text_field.coffee
+- lib/assets/javascripts/cmi/form_components/textarea.coffee
+- lib/assets/javascripts/cmi/loading_indicator.coffee
+- lib/assets/javascripts/cmi/ripples.coffee
+- lib/assets/javascripts/cmi/tabs.coffee
 - lib/assets/stylesheets/cmi/_colors.scss
 - lib/assets/stylesheets/cmi/_extensions.sass
 - lib/assets/stylesheets/cmi/_global.sass
@@ -141,7 +152,13 @@ files:
 - lib/assets/stylesheets/cmi/_typography.sass
 - lib/assets/stylesheets/cmi/_variables.sass
 - lib/assets/stylesheets/cmi/components/_buttons.sass
+- lib/assets/stylesheets/cmi/components/_flex-modal.sass
+- lib/assets/stylesheets/cmi/components/_loading-indicator.sass
 - lib/assets/stylesheets/cmi/components/_navbar.sass
+- lib/assets/stylesheets/cmi/components/_ripples.sass
+- lib/assets/stylesheets/cmi/components/_tabs.sass
+- lib/assets/stylesheets/cmi/form_components/_checkbox.sass
+- lib/assets/stylesheets/cmi/form_components/_text_field.sass
 - lib/curo-material-interface.rb
 - lib/curo_material_interface/engine.rb
 - lib/curo_material_interface/roboto_files.rb