curo-material-interface 0.0.4 → 0.0.5

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

@@ -2,9 +2,33 @@
 =cmi-border-radius($radius)
   +border-top-radius($radius)
   +border-bottom-radius($radius)
+=border-radius($radius)
+  +border-top-radius($radius)
+  +border-bottom-radius($radius)
 
 // bourbon removed support
 // see - http://generatedcontent.org/post/37949105556/updateyourcss3
 =cmi-box-shadow($values...)
   -webkit-box-shadow: $values
   box-shadow: $values
+=box-shadow($values...)
+  -webkit-box-shadow: $values
+  box-shadow: $values
+
+// bourbon removed support
+=box-sizing($radius)
+  -webkit-box-sizing: $radius
+  -moz-box-sizing: $radius
+  box-sizing: $radius
+
+// keyframes
+=keyframes($name)
+  @-webkit-keyframes #{$name}
+    @content
+  @-moz-keyframes #{$name}
+    @content
+  @-ms-keyframes #{$name}
+    @content
+  @keyframes #{$name}
+    @content
+

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

@@ -118,7 +118,7 @@
 
   hr
     height: 0
-    box-sizing: content-box
+    +box-sizing(content-box)
 
   pre
     overflow: auto
@@ -168,7 +168,7 @@
   input[type="checkbox"],
   input[type="radio"]
     padding: 0
-    box-sizing: border-box
+    +box-sizing(border-box)
 
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button
@@ -176,7 +176,7 @@
 
   input[type="search"]
     -webkit-appearance: textfield
-    box-sizing: content-box
+    +box-sizing(content-box)
 
   input[type="search"]::-webkit-search-cancel-button,
   input[type="search"]::-webkit-search-decoration

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

@@ -7,8 +7,6 @@ $color-primary: #afd23e !default
 $color-text-selection-bg: lighten($color-primary, 20%) !default
 $color-text-selection-text: #333 !default
 
-// tables
-$color-table-border: color("grey", "lighten-4") !default
 
 // blockquote
 $blockquote-color-border: color("grey", "lighten-3") !default
@@ -35,11 +33,12 @@ $button-height: 2.25rem !default
 
 // button - standard font-size
 $button-font-size: 0.875rem !default
+$button-line-height: 1.0625rem !default
 
 // button - standard margin / padding
 $button-margin-vertical: 0.375rem !default
 $button-margin-horizontal: 0.25rem !default
-$button-padding-vertical: ($button-height - $button-font-size) / 2 !default
+$button-padding-vertical: ($button-height - $button-line-height) / 2 !default
 $button-padding-horizontal: 0.5rem !default
 
 // button - standard border radius
@@ -59,21 +58,37 @@ $button-default-font-color: color("grey", "darken-3") !default
 $button-primary-bg-color: $color-primary !default
 $button-primary-font-color: color("grey", "darken-3") !default
 
+// button - danger
+$button-danger-bg-color: color('red', 'darken-1') !default
+$button-danger-font-color: color("grey", "lighten-4") !default
+
 // button - small
 $button-small-min-width: 4.375rem !default
 $button-small-height: 1.8125rem !default
 $button-small-font-size: 0.75rem !default
+$button-small-line-height: 0.9375rem !default
 $button-small-padding-horizontal: 0.4rem !default
-$button-small-padding-vertical: ($button-small-height - $button-small-font-size) / 2 !default
+$button-small-padding-vertical: ($button-small-height - $button-small-line-height) / 2 !default
 
 // button - large
 $button-large-min-width: 6.5rem !default
 $button-large-height: 2.6875rem !default
 $button-large-font-size: 1.0625rem !default
+$button-large-line-height: 1.25rem !default
 $button-large-padding-horizontal: 0.7rem !default
-$button-large-padding-vertical: ($button-large-height - $button-large-font-size) / 2 !default
+$button-large-padding-vertical: ($button-large-height - $button-large-line-height) / 2 !default
 
 
+// ------------------------------------
+// tables
+
+$color-table-border: color("grey", "lighten-4") !default
+
+$color-table-row-active: $color-primary
+
+// ------------------------------------
+// lists
+
 // ------------------------------------
 // modal
 
@@ -104,7 +119,7 @@ $loading-diameter: 100px !default
 // ripples
 
 $ripples-color-default: rgba(#fff, 0.4) !default
-$ripples-color-dark: rgba(#000, 0.1) !default
+$ripples-color-dark: rgba(#000, 0.05) !default
 $ripples-color-primary: rgba($color-primary, 0.4) !default
 
 

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

@@ -1,5 +1,7 @@
 // base declaration
 .cmi-btn, a.cmi-btn, button.cmi-btn
+  +cmi-border-radius($button-border-radius)
+  +box-sizing(border-box)
   position: relative
   display: inline-block
   overflow: hidden
@@ -11,13 +13,13 @@
   text-align: center
   text-transform: uppercase
   text-decoration: none
-  line-height: 1
+  line-height: $button-line-height
   letter-spacing: 0.05rem
   border: none
   outline: 0
   cursor: pointer
+  color: $button-default-font-color
   -webkit-tap-highlight-color: transparent
-  +cmi-border-radius($button-border-radius)
   &:hover
     outline: none
     text-decoration: none
@@ -68,12 +70,34 @@
     background-color: lighten($button-primary-bg-color, 10%)
     color: $button-primary-font-color
 
+// button danger
+.cmi-btn.cmi-btn-danger, a.cmi-btn.cmi-btn-danger, button.cmi-btn.cmi-btn-danger
+  background-color: $button-danger-bg-color
+  color: $button-danger-font-color
+  &:hover
+    background-color: darken($button-danger-bg-color, 5%)
+    color: lighten($button-danger-font-color, 5%)
+  &:active,
+  &:target
+    background-color: darken($button-danger-bg-color, 10%)
+    color: lighten($button-danger-font-color, 5%)
+
+// button danger flat
+.cmi-btn.cmi-btn-danger-flat, a.cmi-btn.cmi-btn-danger-flat, button.cmi-btn.cmi-btn-danger-flat
+  color: $button-danger-bg-color
+  &:hover
+    color: lighten($button-danger-bg-color, 5%)
+  &:active,
+  &:target
+    color: lighten($button-danger-bg-color, 5%)
+
 // button small
 .cmi-btn.cmi-btn-small, a.cmi-btn.cmi-btn-small, button.cmi-btn.cmi-btn-small
   min-width: $button-small-min-width
   height: $button-small-height
   padding: $button-small-padding-vertical $button-small-padding-horizontal
   font-size: $button-small-font-size
+  line-height: $button-small-line-height
 
 // button large
 .cmi-btn.cmi-btn-large, a.cmi-btn.cmi-btn-large, button.cmi-btn.cmi-btn-large
@@ -81,10 +105,97 @@
   height: $button-large-height
   padding: $button-large-padding-vertical $button-large-padding-horizontal
   font-size: $button-large-font-size
+  line-height: $button-large-line-height
 
 // button block
 .cmi-btn.cmi-btn-block, a.cmi-btn.cmi-btn-block, button.cmi-btn.cmi-btn-block
   display: block
+  margin-left: 0
+  margin-right: 0
+
+
+// ------------------------------------
+// circle buttons
+
+.cmi-btn.cmi-btn-circle
+  +cmi-border-radius(25px)
+  +clearfix
+  display: inline-block
+  min-width: 50px
+  height: 50px
+  padding: 0
+  text-align: left
+  i,
+  .cmi-btn-circle-slide-content
+    position: relative
+    display: block
+    white-space: nowrap
+  i
+    float: left
+    padding: 15px
+    font-size: 19px
+  .cmi-btn-circle-slide-content
+    overflow: hidden
+    max-width: 0px
+    margin-right: 0px
+    padding: 18px 0
+    float: right
+    font-size: 14px
+    line-height: 1
+    +transition-property(margin-right max-width)
+    +transition-duration(.25s)
+    +transition-timing-function(ease)
+    +transition-delay(.3s)
+  &:hover
+    .cmi-btn-circle-slide-content
+      max-width: 400px
+      margin-right: 20px
+      +transition-property(margin-right max-width)
+      +transition-duration(.25s)
+      +transition-timing-function(ease)
+      +transition-delay(0s)
+
+// button small
+.cmi-btn.cmi-btn-circle.cmi-btn-small
+  +cmi-border-radius(40px / 2)
+  min-width: 40px
+  height: 40px
+  padding: 0
+  i
+    padding: 11px
+    font-size: 17px
+  .cmi-btn-circle-slide-content
+    padding: 13px 0
+    font-size: 12px
+    line-height: 14px
+
+// button large
+.cmi-btn.cmi-btn-circle.cmi-btn-large
+  +cmi-border-radius(60px / 2)
+  min-width: 60px
+  height: 60px
+  padding: 0
+  i
+    padding: 19px
+    font-size: 22px
+  .cmi-btn-circle-slide-content
+    padding: 20px 0
+    font-size: 18px
+    line-height: 20px
+
+// button grow left
+.cmi-btn.cmi-btn-circle-left
+  text-align: right
+  i
+    float: right
+  .cmi-btn-circle-slide-content
+    margin-right: 0px !important
+    float: left
+    +transition-property(margin-left max-width)
+  &:hover
+    .cmi-btn-circle-slide-content
+      margin-left: 20px
+      +transition-property(margin-left max-width)
 
 
 // ------------------------------------
@@ -111,3 +222,33 @@
     background-color: lighten($button-primary-bg-color, 5%)
 
 
+// ------------------------------------
+// content dependend changes
+
+td.cmi-td
+  .cmi-btn
+    margin-top: 0
+    margin-bottom: 0
+
+tr.cmi-tr-active
+  .cmi-btn, a.cmi-btn, button.cmi-btn
+    background-color: #f4f4f4
+    &:hover
+      background-color: lighten(#f4f4f4, 5%)
+    &:active,
+    &:target
+      background-color: lighten(#f4f4f4, 5%)
+
+.cmi-flex-list-table
+  .cmi-btn
+    margin-top: 0
+    margin-bottom: 0
+  ul.cmi-flex-list-table-active
+    .cmi-btn, a.cmi-btn, button.cmi-btn
+      background-color: #f4f4f4
+      &:hover
+        background-color: lighten(#f4f4f4, 5%)
+      &:active,
+      &:target
+        background-color: lighten(#f4f4f4, 5%)
+

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

@@ -0,0 +1,105 @@
+.cmi-card,
+.cmi-card-header,
+.cmi-card-image,
+.cmi-card-content,
+.cmi-card-actions
+  +box-sizing(border-box)
+  position: relative
+  display: block
+
+.cmi-card
+  +cmi-border-radius(2px)
+  +cmi-box-shadow(0 2px 5px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12))
+  overflow: hidden
+  margin: 0.5rem 0 1rem 0
+  background-color: #fff
+
+.cmi-card-header,
+.cmi-card-content
+  padding: 16px
+
+.cmi-card-header
+  +clearfix
+  .cmi-card-header-image
+    +cmi-border-radius(20px)
+    position: relative
+    overflow: hidden
+    float: left
+    width: 40px
+    height: 40px
+    margin-right: 16px
+    img
+      width: 40px
+      height: auto
+  .cmi-card-header-headline
+    margin: 0 0 3px 0
+    font-size: 18px
+    line-height: 1.2
+  .cmi-card-header-sub-headline
+    margin: 0
+    font-size: 14px
+    line-height: 1.2
+    color: color('grey', 'base')
+
+.cmi-card-image
+  img.cmi-img
+    width: 100%
+    height: auto
+  span.cmi-span
+    +position(absolute, auto auto 0 0)
+    padding: 20px
+    font-size: 24px
+    font-weight: 300
+    text-shadow: 0 0 4px rgba(#000, 0.4)
+    color: #fff
+
+.cmi-card-content
+  *:first-child
+    margin-top: 0px
+    &.cmi-h1,
+    &.cmi-h2,
+    &.cmi-h3,
+    &.cmi-h4,
+    &.cmi-h5,
+    &.cmi-h6
+      margin-top: 8px
+  *:last-child
+    margin-bottom: 0px
+
+.cmi-card-actions
+  padding: 8px
+  a, .cmi-btn
+    min-width: 0
+    margin-top: 0
+    margin-bottom: 0
+    padding: $button-padding-vertical 8px
+    color: $color-primary
+    &:hover
+      color: lighten($color-primary, 15%)
+      background-color: transparent
+  *:first-child
+    margin-left: 0px
+  *:last-child
+    margin-right: 0px
+
+.cmi-card-separator
+  height: 0px
+  margin: 0
+  padding: 0
+  border-top: 1px solid rgba(#000, 0.05)
+  border-bottom: 1px solid rgba(#fff, 0.15)
+
+.cmi-card-primary
+  color: #fff
+  background-color: $color-primary
+  a, .cmi-btn
+    color: color('grey', 'darken-3')
+    &:hover
+      color: color('grey', 'darken-1')
+  .cmi-card-header,
+  .cmi-card-content
+    color: #fff
+
+
+
+

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

@@ -0,0 +1,21 @@
+.cmi-flex-modal-dialog
+  > main.cmi-main
+    display: block
+    height: auto
+    max-height: none
+    margin: 0
+    padding: 0
+    > aside.cmi-aside,
+    > section.cmi-section
+      display: block
+      overflow: auto
+      height: auto
+      -webkit-overflow-scrolling: touch
+      -ms-overflow-style: none
+    > aside.cmi-aside
+      position: absolute
+      width: $modal-sidebar-width
+    > section.cmi-section
+      position: relative
+      margin-left: $modal-sidebar-width
+

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

@@ -2,6 +2,17 @@ body.cmi-flex-modal-open
   overflow: hidden
 
 // base modal structure
+.cmi-flex-modal,
+.cmi-flex-modal-dialog,
+.cmi-flex-modal-dialog-inner,
+.cmi-flex-modal-dialog > header.cmi-header,
+.cmi-flex-modal-dialog > main.cmi-main,
+.cmi-flex-modal-dialog > footer.cmi-footer
+.cmi-flex-modal-dialog-inner > header.cmi-header,
+.cmi-flex-modal-dialog-inner > main.cmi-main,
+.cmi-flex-modal-dialog-inner > footer.cmi-footer
+  +box-sizing(border-box)
+
 .cmi-flex-modal
   +position(fixed, 0 0 0 0)
   +backface-visibility(hidden)
@@ -11,29 +22,24 @@ body.cmi-flex-modal-open
   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
+.cmi-flex-modal-dialog
   +display(flex)
   +flex-direction(column)
   +flex-wrap(nowrap)
   +align-items(stretch)
   +cmi-border-radius(3px)
+  overflow: hidden
+  z-index: 0
+  margin: 0
+  padding: 0
+  outline: 0
 
 .cmi-flex-modal-dialog
   +position(absolute, 5% 5% auto 5%)
   max-height: 90%
   @extend .cmi-z-depth-5
 
-.cmi-flex-modal-dialog-inner
-  position: relative
-
-.cmi-flex-modal-dialog,
-.cmi-flex-modal-dialog-inner
+.cmi-flex-modal-dialog
   > header.cmi-header,
   > main.cmi-main,
   > footer.cmi-footer
@@ -41,53 +47,63 @@ body.cmi-flex-modal-open
 
   > header.cmi-header,
   > footer.cmi-footer
-    overflow: hidden
-    z-index: 10
     +display(flex)
     +flex-shrink(0)
+    overflow: hidden
+    z-index: 10
 
   > header.cmi-header
+    +border-top-radius(3px)
     height: $modal-header-height
     background-color: $modal-header-bgcolor
-    +border-top-radius(3px)
 
   > main.cmi-main
+    +display(flex)
+    +flex-direction(row)
+    +flex-shrink(1)
+    +backface-visibility(hidden)
+    +flex-wrap(nowrap)
+    display: -ms-flexbox
+    display: ms-flexbox
+    -ms-flex-direction: row
+    -ms-flex-pack: justify
+    -ms-flex-align: stretch
+    -ms-flex-line-pack: stretch
     overflow: scroll
     overflow-x: hidden
     overflow-y: scroll
     z-index: 1
+    width: 100%
+    max-height: 100vh
+    margin-top: -$modal-header-height
+    padding-top: $modal-header-height
+    margin-bottom: -$modal-footer-height
+    padding-bottom: $modal-footer-height - 1px
     background-color: $modal-main-bgcolor
-    +display(flex)
-    +flex-direction(column)
-    +flex-shrink(1)
+    will-change: overflow
 
   > footer.cmi-footer
+    +border-bottom-radius(3px)
     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)
+  > main.cmi-main
+    > aside.cmi-aside,
+    > section.cmi-section
+      position: relative
+      overflow: auto
+      height: auto
+      -webkit-overflow-scrolling: touch
+      -ms-overflow-style: none
 
-  > aside.cmi-aside,
-  > section.cmi-section
-    position: relative
+    > aside.cmi-aside
+      +flex-grow(0)
+      width: $modal-sidebar-width
+      min-width: $modal-sidebar-width
+      background-color: $modal-sidebar-bgcolor
 
-  > aside.cmi-aside
-    width: $modal-sidebar-width
-    min-width: $modal-sidebar-width
-    background-color: $modal-sidebar-bgcolor
-    +flex-grow(0)
-  > .cmi-section
-    +flex-grow(1)
+    > .cmi-section
+      +flex-grow(1)
 
 // modal additional content styling
 .cmi-flex-modal-dialog,
@@ -153,6 +169,8 @@ body.cmi-flex-modal-open
       background-color: darken($modal-header-bgcolor, 5%)
       i.cmi-i
         color: #fff
+  .cmi-btn.cmi-flex-modal-back
+    margin-right: 8px
 
 .cmi-flex-modal-footer-inside
   position: relative
@@ -178,7 +196,8 @@ ul.cmi-flex-modal-aside-tab-list
   padding: 0
   list-style: none
   li.cmi-li
-    margin-bottom: 4px
+    position: relative
+    overflow: hidden
   a.cmi-a
     position: relative
     display: block

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

@@ -0,0 +1,61 @@
+
+// base
+.cmi-flex-list-table,
+.cmi-flex-list-table ul.cmi-ul,
+.cmi-flex-list-table li.cmi-li
+  +box-sizing(border-box)
+
+.cmi-flex-list-table
+  position: relative
+  display: block
+  width: auto
+  ul.cmi-ul,
+  li.cmi-li
+    position: relative
+  ul.cmi-ul
+    +clearfix
+    +display(flex)
+    +flex-direction(row)
+    +justify-content(space-between)
+    +align-items(center)
+    +align-content(stretch)
+    +flex-wrap(nowrap)
+    width: auto
+    margin: 0
+    padding: 0
+    list-style: none
+    background-color: transparent
+  li.cmi-li
+    +flex(1)
+    +flex-grow(1)
+    width: auto
+    float: left
+    padding: 5px 15px
+    text-align: left
+  ul.cmi-flex-list-table-headline
+    border-bottom: 1px solid rgb(245, 245, 245)
+    li.cmi-li
+      font-weight: bold
+
+// striped
+.cmi-flex-list-table-striped
+  ul.cmi-ul:nth-child(odd):not(.cmi-flex-list-table-headline)
+    background-color: rgba(#000, 0.03)
+
+// hoverable
+.cmi-flex-list-table-hoverable
+  ul.cmi-ul:not(.cmi-flex-list-table-headline):hover
+    background-color: rgba(#000, 0.02)
+
+// active rows
+.cmi-flex-list-table
+  ul.cmi-flex-list-table-active
+    background-color: $color-table-row-active
+  &.cmi-flex-list-table-striped
+    ul.cmi-flex-list-table-active:nth-child(odd)
+      background-color: darken($color-table-row-active, 5%)
+  &.cmi-flex-list-table-hoverable
+    ul.cmi-flex-list-table-active,
+    ul.cmi-flex-list-table-active:nth-child(odd)
+      &:hover
+        background-color: lighten($color-table-row-active, 5%)