mai 0.0.3 → 0.0.5

data/sass/mai/modules/_grid.sass

@@ -1,6 +1,15 @@
-
-/* Requires
-/* - Configs: global, grid
+/*
+ * Grid
+ *
+ * Requires
+ * - Modules: mai/base
+ * - Configs: global, modules/grid
+ *
+ * @package     Mai/UI
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
 
 @import grid/base
+@import grid/block
 @import grid/media

data/sass/mai/modules/_transitions.sass

@@ -0,0 +1,29 @@
+/*
+ * Tranisitions
+ *
+ * The Transitions module provides numerous CSS transitions which can be used via CSS alone or triggered using
+ * JavaScript.
+ *
+ * The 'transitions/base' module is not being imported here as each specific transition imports it already
+ * to make it easier to include just a subset of them and avoid bloating your stylesheets. Some of the JS-related
+ * modules of Mai (mai/ui/dropdown for instance) required specific transition definitions to be present in your
+ * stylesheet.
+ *
+ * Requires
+ * - Modules: mai/base
+ * - Configs: global
+ *
+ * @package     Mai/Transitions
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+@import transitions/bounce
+@import transitions/fade
+@import transitions/flash
+@import transitions/flip
+@import transitions/pulse
+@import transitions/scale
+@import transitions/shake
+@import transitions/slide
+@import transitions/tada

data/sass/mai/modules/_ui.sass

@@ -0,0 +1,21 @@
+/*
+ * UI
+ *
+ * Requires
+ * - Modules: mai/base
+ * - Configs: global
+ *
+ * @package     Mai/UI
+ * @copyright   2013-2014 Muyo
+ * @link        http://github.com/muyo/mai
+ * ------------------------------------------------------------------------------------------------------------------- /
+
+@import ui/buttons
+@import ui/dimmer
+@import ui/dropdown
+@import ui/forms
+@import ui/icons
+@import ui/labels
+@import ui/messages
+@import ui/modal
+@import ui/popup

data/sass/mai/modules/grid/_base.sass

@@ -1,153 +1,33 @@
 
-@import functions
+// Grid defaults to get images and embeds to work properly
+img, object, embed
+  max-width: 100%
+  height: auto
 
-*, *:before, *:after
-  +box-sizing
+object, embed
+  height: 100%
+
+img
+  -ms-interpolation-mode: bicubic
 
+// Actual grid
 .row
-  width: $m-grid-width
-  max-width: 100%
-  min-width: $m-grid-breakpoint
-  margin: 0 auto
+  +m-grid-row()
   &.collapse
-    .column, .columns
-      padding: 0
+    > .columns
+      +m-grid-column($collapse: true)
+    .row
+      margin-left: 0
+      margin-right: 0
   .row
-    width: auto
-    max-width: none
-    min-width: 0
-    margin: 0 (-$m-grid-gutter-single)
+    +m-grid-row($behavior: nest)
     &.collapse
-      margin: 0
-
-.row.as-column
-  padding: 0 $m-grid-gutter-single
-
-/* Columns
-
-.column, .columns
-  float: $m-global-float-base
-  min-height: 1px
-  padding: 0 $m-grid-gutter-single
-  position: relative
-  &.centered
-    float: none
-    margin: 0 auto
-
-[class*="column"] + [class*="column"]:last-child
-  float: right
-
-[class*="column"] + [class*="column"].end
-  float: left
-
-// Batch - .one, .two, .three (...)
-@for $i from 1 through $m-grid-columns
-  .#{gridVerbalize($i)}
-    width: gridColumnWidth($i, $m-grid-columns)
-
-// Batch - .row .one, .row .two, .row .three (...)
-@for $i from 1 through $m-grid-columns
-  $num: gridVerbalize($i)
-  .row
-    .#{$num}
-      @extend .#{$num}
-
-.row .offset-by-one
-  margin-left: 8.33333%
-
-.row .offset-by-two
-  margin-left: 16.66667%
-
-.row .offset-by-three
-  margin-left: 25%
-
-.row .offset-by-four
-  margin-left: 33.33333%
-
-.row .offset-by-five
-  margin-left: 41.66667%
-
-.row .offset-by-six
-  margin-left: 50%
-
-.row .offset-by-seven
-  margin-left: 58.33333%
-
-.row .offset-by-eight
-  margin-left: 66.66667%
-
-.row .offset-by-nine
-  margin-left: 75%
-
-.row .offset-by-ten
-  margin-left: 83.33333%
-
-.push-two
-  left: 16.66667%
+      +m-grid-row($behavior: nest-collapse)
+  &.single
+    padding-right: $m-grid-gutter-single
+    padding-left:  $m-grid-gutter-single
 
-.pull-two
-  right: 16.66667%
+.columns
+  +m-grid-column($columns: $m-grid-columns)
 
-.push-three
-  left: 25%
 
-.pull-three
-  right: 25%
-
-.push-four
-  left: 33.33333%
-
-.pull-four
-  right: 33.33333%
-
-.push-five
-  left: 41.66667%
-
-.pull-five
-  right: 41.66667%
-
-.push-six
-  left: 50%
-
-.pull-six
-  right: 50%
-
-.push-seven
-  left: 58.33333%
-
-.pull-seven
-  right: 58.33333%
-
-.push-eight
-  left: 66.66667%
-
-.pull-eight
-  right: 66.66667%
-
-.push-nine
-  left: 75%
-
-.pull-nine
-  right: 75%
-
-.push-ten
-  left: 83.33333%
-
-.pull-ten
-  right: 83.33333%
-
-// Micro-clearfix
-.row
-  +cf()
-
-
-// Grid Defaults to get images and embeds to work properly
-img, object, embed
-  max-width: 100%
-  height: auto
-
-object, embed
-  height: 100%
-
-img
-  -ms-interpolation-mode: bicubic

data/sass/mai/modules/grid/_block.sass

@@ -0,0 +1,3 @@
+
+[class*="block-grid-"]
+  +m-block-grid

data/sass/mai/modules/grid/_media.sass

@@ -1,2 +1,3 @@
 
-@import media/base
+@import media/base
+@import media/block

data/sass/mai/modules/grid/media/_base.sass

@@ -1,89 +1,15 @@
 
-@media #{$m-media-query-breakpoint}
-  .left, .right
-    float: none
-  body
-    -webkit-text-size-adjust: none
-    -ms-text-size-adjust: none
-    width: 100%
-    min-width: 0
-    margin-left: 0
-    margin-right: 0
-    padding-left: 0
-    padding-right: 0
-  .row
-    width: auto
-    min-width: 320px
-    margin-left: 0
-    margin-right: 0
-  .column, .columns
-    width: auto !important
-    float: none
-  .column:last-child, .columns:last-child
-    float: none
-  [class*="column"] + [class*="column"]:last-child
-    float: none
-  .column:before, .columns:before, .column:after, .columns:after
-    content: ""
-    display: table
-  .column:after, .columns:after
-    clear: both
-  .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten
-    margin-left: 0 !important
-  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten
-    left: auto
-  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten
-    right: auto
-  /* Mobile 4-column Grid
-  .row .mobile-one
-    width: 25% !important
-    float: left
-    padding: 0 15px
-  .row .mobile-one:last-child
-    float: right
-  .row .mobile-one.end
-    float: left
-  .row.collapse .mobile-one
-    padding: 0
-  .row .mobile-two
-    width: 50% !important
-    float: left
-    padding: 0 15px
-  .row .mobile-two:last-child
-    float: right
-  .row .mobile-two.end
-    float: left
-  .row.collapse .mobile-two
-    padding: 0
-  .row .mobile-three
-    width: 75% !important
-    float: left
-    padding: 0 15px
-  .row .mobile-three:last-child
-    float: right
-  .row .mobile-three.end
-    float: left
-  .row.collapse .mobile-three
-    padding: 0
-  .row .mobile-four
-    width: 100% !important
-    float: left
-    padding: 0 15px
-  .row .mobile-four:last-child
-    float: right
-  .row .mobile-four.end
-    float: left
-  .row.collapse .mobile-four
-    padding: 0
-  .push-one-mobile
-    left: 25%
-  .pull-one-mobile
-    right: 25%
-  .push-two-mobile
-    left: 50%
-  .pull-two-mobile
-    right: 50%
-  .push-three-mobile
-    left: 75%
-  .pull-three-mobile
-    right: 75%
+@media #{$m-media-query-s-up}
+  +m-grid-html-classes($size: small)
+
+@media #{$m-media-query-m-up}
+  +m-grid-html-classes($size: medium)
+
+@media #{$m-media-query-l-up}
+  +m-grid-html-classes($size: large)
+
+@media #{$m-media-query-xl-up}
+  +m-grid-html-classes($size: xlarge)
+
+@media #{$m-media-query-xxl-up}
+  +m-grid-html-classes($size: xxlarge)

data/sass/mai/modules/grid/media/_block.sass

@@ -0,0 +1,9 @@
+
+@media #{$m-media-query-s-up}
+  +m-block-grid-html-classes($size: small)
+
+@media #{$m-media-query-m-up}
+  +m-block-grid-html-classes($size: medium)
+
+@media #{$m-media-query-l-up}
+  +m-block-grid-html-classes($size: large)

data/sass/mai/modules/transitions/_base.sass

@@ -0,0 +1,38 @@
+
+/* Base transition definition
+  ----------------------------------------------------------------------------------------------------------------------
+
+.transition
+  -webkit-animation-iteration-count: 1
+  animation-iteration-count: 1
+  -webkit-animation-duration: 1s
+  animation-duration: 1s
+  -webkit-animation-timing-function: ease
+  animation-timing-function: ease
+  -webkit-animation-fill-mode: both
+  animation-fill-mode: both
+
+  &.animating
+    -webkit-backface-visibility: hidden
+    -ms-backface-visibility: hidden
+    backface-visibility: hidden
+    -webkit-transform: translateZ(0)
+    -ms-transform: translateZ(0)
+    transform: translateZ(0)
+
+  &.loading
+    position: absolute
+    top:  -99999px
+    left: -99999px
+
+  &.visible
+    display: block
+    visibility: visible
+
+  &.disabled
+    -webkit-animation-play-state: paused
+    animation-play-state: paused
+
+  &.looping
+    -webkit-animation-iteration-count: infinite
+    animation-iteration-count: infinite

data/sass/mai/modules/transitions/_bounce.sass

@@ -0,0 +1,38 @@
+
+@import base
+
+/* Definition
+  ----------------------------------------------------------------------------------------------------------------------
+
+.transition.bounce
+  -webkit-animation-name: bounce
+  animation-name: bounce
+
+
+/* Keyframes
+  ----------------------------------------------------------------------------------------------------------------------
+
+@-webkit-keyframes bounce
+  0%, 20%, 50%, 80%, 100%
+    -webkit-transform: translateY(0)
+    transform: translateY(0)
+  40%
+    -webkit-transform: translateY(-30px)
+    transform: translateY(-30px)
+  60%
+    -webkit-transform: translateY(-15px)
+    transform: translateY(-15px)
+
+@keyframes bounce
+  0%, 20%, 50%, 80%, 100%
+    -webkit-transform: translateY(0)
+    -ms-transform: translateY(0)
+    transform: translateY(0)
+  40%
+    -webkit-transform: translateY(-30px)
+    -ms-transform: translateY(-30px)
+    transform: translateY(-30px)
+  60%
+    -webkit-transform: translateY(-15px)
+    -ms-transform: translateY(-15px)
+    transform: translateY(-15px)