curo-material-interface 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e007150e2826e86bbe0dc6e4b7b369598e6bc236
-  data.tar.gz: 3c3d7db47aa54c482c7fceed924c5f95ca8d3857
+  metadata.gz: a810bf238f07ceea1a5eb08b9ef9192c7f0b864b
+  data.tar.gz: 2a65db94f291305c41bff35bc5bcb6ba753c20f9
 SHA512:
-  metadata.gz: d6a59cdb1b433c91b4a3cee64f45841599fa7e16f0c5bd71e0ca1f26ee70dab89a687f44efd90562b745c4fd7f8116d27be71c27b0f7c5d13b97facd23d75e23
-  data.tar.gz: d94d6b3c128f773ef2e02e5eef29b2a5766d0700b25eb1261100716fc159cbe4121e0e647e1c5d959b7a2d1b4375dbf9c9b7b0c460b557f9e888e9b83c4f0c60
+  metadata.gz: 035442edb414506b34b1d5b3c5dfeae575352717334634494de4714657bbc3f09a47b7d114159aea035e6a297127f47ce479b47b7d1a4ba73dbbb1bcc300ee43
+  data.tar.gz: 13eef9a77082220d67761ca19bbc689b334f8e209549e58896ac4097fc65df2c7f2ded128207417f147c04ecde0a2b92b7c90222518c557bb17628c5a7239f15

data/README.md

@@ -64,11 +64,11 @@ At "@import ./font_mixin" you need to implement the right font font-face call fo
  font-weight: normal
  font-style: normal
 
-=font-face-helper($family, $fileBaseName, $weight, $style)
+=font-face-helper($family, $fileBaseName, $weight, $style, $svgAppendix: '')
   @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')
+    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#' + $svgAppendix) format('svg')
     font-weight: $weight
     font-style: $style
 ```
@@ -84,11 +84,11 @@ At "@import ./font_mixin" you need to implement the right font font-face call fo
  font-weight: normal
  font-style: normal
 
-=font-face-helper($family, $fileBaseName, $weight, $style)
+=font-face-helper($family, $fileBaseName, $weight, $style, $svgAppendix: '')
   @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')
+    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#' + $svgAppendix) format('svg')
     font-weight: $weight
     font-style: $style
 ```

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

@@ -4,7 +4,7 @@ window.CMI.FormComponents or= {}
 class CMI.FormComponents.TextField
 
   @reset: (domElement) ->
-    if domElement.val().length > 0
+    if domElement.val().length > 0 || domElement.is(':focus')
       domElement.parents(@_getInputBoxSelector()).addClass('cmi-active')
     else
       domElement.parents(@_getInputBoxSelector()).removeClass('cmi-active')
@@ -38,7 +38,7 @@ class CMI.FormComponents.TextField
         parentDomElement.removeClass('cmi-invalid')
     else if parentDomElement.hasClass('cmi-validate')
       if domElement.is(':valid')
-        parentDomElement.removeClass('invalid')
+        parentDomElement.removeClass('cmi-invalid')
         parentDomElement.addClass('cmi-valid')
       else
         parentDomElement.removeClass('cmi-valid')

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

@@ -40,8 +40,8 @@ class CMI.LoadingIndicator extends Backbone.View
 
   _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 class="cmi-circular">
+          <circle class="cmi-path" cx="50" cy="50" fill="none" r="20" stroke-miterlimit="10" stroke-width="3"></circle>
         </svg>
       </div>')
 

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

@@ -43,4 +43,4 @@ class CMI.Tabs
 
   @_ensureActiveIndicator: (tabsElement) ->
     return if tabsElement.find('.cmi-tabs-active-indicator').length > 0
-    tabsElement.append('<li class="cmi-tabs-active-indicator"></li>')
+    tabsElement.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')

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

@@ -1,12 +1,12 @@
-.z-depth-1
-  +box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12))
-.z-depth-1-hover
-  +box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19))
-.z-depth-2
-  +box-shadow(0 6px 15px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19))
-.z-depth-3
-  +box-shadow(0 10px 13px 0 rgba(0, 0, 0, 0.24), 0 15px 44px 0 rgba(0, 0, 0, 0.19))
-.z-depth-4
-  +box-shadow(0 14px 26px 0 rgba(0, 0, 0, 0.22), 0 23px 50px 0 rgba(0, 0, 0, 0.21))
-.z-depth-5
-  +box-shadow(0 23px 20px 0 rgba(0, 0, 0, 0.2), 0 36px 70px 0 rgba(0, 0, 0, 0.22))
+.cmi-z-depth-1
+  +cmi-box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12))
+.cmi-z-depth-1-hover
+  +cmi-box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19))
+.cmi-z-depth-2
+  +cmi-box-shadow(0 6px 15px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19))
+.cmi-z-depth-3
+  +cmi-box-shadow(0 10px 13px 0 rgba(0, 0, 0, 0.24), 0 15px 44px 0 rgba(0, 0, 0, 0.19))
+.cmi-z-depth-4
+  +cmi-box-shadow(0 14px 26px 0 rgba(0, 0, 0, 0.22), 0 23px 50px 0 rgba(0, 0, 0, 0.21))
+.cmi-z-depth-5
+  +cmi-box-shadow(0 23px 20px 0 rgba(0, 0, 0, 0.2), 0 36px 70px 0 rgba(0, 0, 0, 0.22))

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

@@ -5,77 +5,77 @@
   line-height: 1.4
   box-sizing: border-box
 
-  *
-    +selection
-      background: $color-text-selection-bg
-      color: $color-text-selection-text
-      text-shadow: none
+*[class^="cmi-"]
+  +selection
+    background: $color-text-selection-bg
+    color: $color-text-selection-text
+    text-shadow: none
 
-  div,
-  header,
-  footer,
-  main,
-  aside,
-  ul,
-  ol,
-  form,
-  input,
-  label,
-  textarea,
-  select
-    box-sizing: border-box
+div.cmi-div,
+header.cmi-header,
+footer.cmi-footer,
+main.cmi-main,
+aside.cmi-aside,
+ul.cmi-ul,
+ol.cmi-ol,
+form.cmi-form,
+input.cmi-input,
+label.cmi-label,
+textarea.cmi-textarea,
+select.cmi-select
+  box-sizing: border-box
 
-  hr
-    display: block
-    margin: 1em 0
-    padding: 0
-    height: 1px
-    border: 0
-    border-top: 1px solid #ccc
+hr.cmi-hr
+  display: block
+  margin: 1em 0
+  padding: 0
+  height: 1px
+  border: 0
+  border-top: 1px solid #ccc
 
-  i
-    line-height: inherit
-    &.left
-      float: left
-      margin-right: 15px
-    &.right
-      float: right
-      margin-left: 15px
-    &.tiny
-      font-size: 1rem
-    &.small
-      font-size: 2rem
-    &.medium
-      font-size: 4rem
-    &.large
-      font-size: 6rem
+i.cmi-i
+  line-height: inherit
+  &.cmi-left
+    float: left
+    margin-right: 15px
+  &.cmi-right
+    float: right
+    margin-left: 15px
+  &.cmi-tiny
+    font-size: 1rem
+  &.cmi-small
+    font-size: 2rem
+  &.cmi-medium
+    font-size: 4rem
+  &.cmi-large
+    font-size: 6rem
 
-  table, th, td
-    border: none
-  table
-    width: 100%
-    display: table
-  thead
-    border-bottom: 1px solid $color-table-border
-  td, th
-    padding: 15px 5px
-    display: table-cell
-    text-align: left
-    vertical-align: middle
-    background-color: #fff
-    +border-radius(2px)
-  tr:nth-child(even)
-    td
-      background-color: #f9f9f9
+table.cmi-table, th.cmi-th, td.cmi-td
+  border: none
+table.cmi-table
+  width: 100%
+  display: table
+thead.cmi-thead
+  border-bottom: 1px solid $color-table-border
+td.cmi-td, th.cmi-th
+  padding: 15px 5px
+  display: table-cell
+  text-align: left
+  vertical-align: middle
+  background-color: #fff
+  +cmi-border-radius(2px)
+tr.cmi-tr:nth-child(even)
+  td.cmi-td
+    background-color: #f9f9f9
 
-  .cmi-pull-right
-    position: relative
-    float: right
-    top: 0
-    +clearfix
+.cmi-pull-right
+  position: relative
+  float: right
+  top: 0
+  +clearfix
 
-  .cmi-pull-left
-    position: relative
-    float: left
-    top: 0
-    +clearfix
+.cmi-pull-left
+  position: relative
+  float: left
+  top: 0
+  +clearfix

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

@@ -1,10 +1,10 @@
 // for all corners since bourbon.io does not support this
-=border-radius($radius)
+=cmi-border-radius($radius)
   +border-top-radius($radius)
   +border-bottom-radius($radius)
 
 // bourbon removed support
 // see - http://generatedcontent.org/post/37949105556/updateyourcss3
-=box-shadow($values...)
+=cmi-box-shadow($values...)
   -webkit-box-shadow: $values
   box-shadow: $values

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

@@ -5,121 +5,121 @@
   line-height: 1.5
   color: #333
 
-  textarea
-    font-family: "Roboto", sans-serif
-    font-size: 0.875rem
-    font-weight: 400
-    line-height: 1.3
-    color: #333
-
-  // Text Styles
-
-  p
-    font-size: 0.875rem
-    font-weight: 400
-    color: $paragraph-color
-
-  em
-    font-weight: 400
-    font-style: italic
-    color: #000
-
-  strong
-    font-weight: 600
-    color: #000
-
-  small
-    font-size: 0.8125rem
-
-
-  a
-    font-weight: 400
-    text-decoration: none
-    color: $color-link
-    &:hover
-      color: $color-link-hover
-      text-decoration: underline
-
-  blockquote
-    margin: 20px 0
-    padding-left: 1.5rem
-    border-left: 5px solid $blockquote-color-border
-    font-style: italic
-    color: $blockquote-color-font
-
-  pre
-    margin: 10px 0
-    padding: 0.5em 0.5em 0.5em 1.5rem
-    font-size: 0.75rem
-    line-height: 1.3
-    border-left: 5px solid $pre-color-border
-    color: $blockquote-color-font
-    background-color: $pre-color-background
-    white-space: pre-wrap
-    word-wrap: break-word
-
-  .text-light
-    font-weight: 300
-
-  .text-primary
-    color: $color-primary - 20
-
-
-  // headlines
-
-  h1
-    margin: 1.25rem 0 0.625rem 0
-    font-size: 2rem
-    font-weight: 400
-    line-height: 1.1
-    color: #333
-  h2
-    margin: 1rem 0 0.625rem 0
-    font-size: 1.625rem
-    font-weight: 400
-    line-height: 1.1
-    color: #333
-  h3
-    margin: 1rem 0 0.625rem 0
-    font-size: 1.25rem
-    font-weight: 400
-    line-height: 1.1
-    color: #333
-  h4
-    margin: 0.625rem 0 0.625rem 0
-    font-size: 1.25rem
-    font-weight: 200
-    line-height: 1.1
-    color: #333
-  h5
-    margin: 0.625rem 0 0.625rem 0
-    font-size: 1rem
-    font-weight: 400
-    line-height: 1.1
-    color: #333
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5
-    &.cmi-lined
-      width: 100%
-      text-align: left
-      border-bottom: 1px solid #aaa
-      line-height: 0.1em
-      span
-        background: #fff
-        padding: 0 15px 0 0
-  h1.cmi-lined
-    margin: 2.21rem 0 1.625rem 0
-  h2.cmi-lined
-    margin: 1.8125rem 0 1.4rem 0
-  h3.cmi-lined
-    margin: 1.625rem 0 1.21rem 0
-  h4.cmi-lined
-    margin: 1.25rem 0 1.21rem 0
-  h5.cmi-lined
-    margin: 1.125rem 0 1.05rem 0
+textarea.cmi-textarea
+  font-family: "Roboto", sans-serif
+  font-size: 0.875rem
+  font-weight: 400
+  line-height: 1.3
+  color: #333
+
+// Text Styles
+
+p.cmi-p
+  font-size: 0.875rem
+  font-weight: 400
+  color: $paragraph-color
+
+em.cmi-em
+  font-weight: 400
+  font-style: italic
+  color: #000
+
+strong.cmi-strong
+  font-weight: 600
+  color: #000
+
+small.cmi-small, small.cmi-small
+  font-size: 0.8125rem
+
+
+a.cmi-a
+  font-weight: 400
+  text-decoration: none
+  color: $color-link
+  &:hover
+    color: $color-link-hover
+    text-decoration: underline
+
+blockquote.cmi-blockquote
+  margin: 20px 0
+  padding-left: 1.5rem
+  border-left: 5px solid $blockquote-color-border
+  font-style: italic
+  color: $blockquote-color-font
+
+pre.cmi-pre
+  margin: 10px 0
+  padding: 0.5em 0.5em 0.5em 1.5rem
+  font-size: 0.75rem
+  line-height: 1.3
+  border-left: 5px solid $pre-color-border
+  color: $blockquote-color-font
+  background-color: $pre-color-background
+  white-space: pre-wrap
+  word-wrap: break-word
+
+.cmi-text-light
+  font-weight: 300
+
+.cmi-text-primary
+  color: $color-primary - 20
+
+
+// headlines
+
+h1.cmi-h1
+  margin: 1.25rem 0 0.625rem 0
+  font-size: 2rem
+  font-weight: 400
+  line-height: 1.1
+  color: #333
+h2.cmi-h2
+  margin: 1rem 0 0.625rem 0
+  font-size: 1.625rem
+  font-weight: 400
+  line-height: 1.1
+  color: #333
+h3.cmi-h3
+  margin: 1rem 0 0.625rem 0
+  font-size: 1.25rem
+  font-weight: 400
+  line-height: 1.1
+  color: #333
+h4.cmi-h4
+  margin: 0.625rem 0 0.625rem 0
+  font-size: 1.25rem
+  font-weight: 200
+  line-height: 1.1
+  color: #333
+h5.cmi-h5
+  margin: 0.625rem 0 0.625rem 0
+  font-size: 1rem
+  font-weight: 400
+  line-height: 1.1
+  color: #333
+
+h1.cmi-h1,
+h2.cmi-h2,
+h3.cmi-h3,
+h4.cmi-h4,
+h5.cmi-h5
+  &.cmi-lined
+    width: 100%
+    text-align: left
+    border-bottom: 1px solid #aaa
+    line-height: 0.1em
+    .cmi-span
+      background: #fff
+      padding: 0 15px 0 0
+h1.cmi-h1.cmi-lined
+  margin: 2.21rem 0 1.625rem 0
+h2.cmi-h2.cmi-lined
+  margin: 1.8125rem 0 1.4rem 0
+h3.cmi-h3.cmi-lined
+  margin: 1.625rem 0 1.21rem 0
+h4.cmi-h4.cmi-lined
+  margin: 1.25rem 0 1.21rem 0
+h5.cmi-h5.cmi-lined
+  margin: 1.125rem 0 1.05rem 0