iugu-ux 0.9.5 → 0.9.8

data/lib/iugu-ux/version.rb

@@ -1,3 +1,3 @@
 module IuguUX
-  VERSION = "0.9.5"
+  VERSION = "0.9.8"
 end

data/sandbox/app/views/ui_library/components.html.haml

@@ -1,347 +1,148 @@
 .element-spacing
   .assets-logo-iugu-ux
 
-.container.small-padding
-  .button-group.no-bottom-margin.nav
-    = link_to "Typography", "/", :class => 'button'
-    = link_to "Components", "/components", :class => 'button selected default'
-
-.element-spacing
-  .grid.component-grid
-    .grid-item.component-item
-      %h2
-        Buttons
-
-      %p
-        Lorem Ipsum
-
-      %h3
-        Markup
-
-      %a.button{ :href => "#" } Link Tag
-      %button.button Button Tag 
-
-    .grid-item.component-description
-      .container
-        %h5.no-bottom-margin Example using HREF
-        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
-          = preserve do
-            :escaped
-              <a class="button">Link Tag</a>
-              <button class="button">Button Tag</button>
-
-.element-spacing
-  .grid.component-grid
-    .grid-item.component-item
-      %h4
-        Button (Default Action)
-      %a.button.default{ :href => "#" } Default Button
-
-    .grid-item.component-description
-      .container
-        %h5.no-bottom-margin Example using HREF
-        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
-          = preserve do
-            :escaped
-              <a class="button default">Default Button</a>
-
-
-.element-spacing
-  .grid.component-grid
-    .grid-item.component-item
-      %h4
-        Button with Image
-
-      %a.button.default{ :href => "#" }
-        %div.assets-star-icon.no-space
-          &nbsp;
-
-    .grid-item.component-description
-      .container
-        %h5.no-bottom-margin Example using HREF
-        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
-          = preserve do
-            :escaped
-              <a class="button default">Default Button</a>
-
-.element-spacing
-  .grid.component-grid
-    .grid-item.component-item
-      %h4
-        Button Grouping
-
-      .button-group
-        %a.button{ :href => "#" } 1
-
-      .button-group
-        %a.button{ :href => "#" } 1
-        %a.button{ :href => "#" } 2
-        %a.button{ :href => "#" } 3
-        %a.button.default.selected{ :href => "#" } 4
-        %a.button{ :href => "#" } 5
-        %a.button{ :href => "#" } 6
-        %a.button{ :href => "#" } 7
-
-    .grid-item.component-description
-      .container
-        %h5.no-bottom-margin Example using HREF
-        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
-          = preserve do
-            :escaped
-              <div class="button-group">
-                <a href="button">1</a>
-                <a href="button">2</a>
-                <a href="button">3</a>
-                <a href="button default selected">4</a>
-                <a href="button">5</a>
-                <a href="button">6</a>
-                <a href="button">7</a>
-                <a href="button">8</a>
-              </div>
-
-
-.element-spacing
-  .grid.component-grid
-    .grid-item.component-item
-      %h2
-        Inputs
-
-      %p
-        Lorem Ipsum
-
-      %h3
-        Markup
-
-      %form
-
-        %input{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
-        %a.button.default
-          Salvar
-
-        .grouping
-          %input.failure{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
-          %a.button.default
-            Salvar
-
-        .grouping
-          %input.success{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
-          %a.button.default
-            Salvar
-
-
-    .grid-item.component-description
-      .container
-        %h5.no-bottom-margin Example using HREF
-        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
-          = preserve do
-            :escaped
-              <form>
-                <input type="text" placeholder="Nome Completo" />
-              </form>
-
-%h3
-  Slider
-
-.element-spacing
-  .element-spacing
-    #slider{ :style => "height: 250px" }
-      .ui-slider-handle
-        .ui-slider-handle-visual
-      .ui-slider-handle
-        .ui-slider-handle-visual
-
-%h3
-  Tags
+%h1
+  Containers
 
-.element-spacing
-  %p.no-bottom-margin
-    %span.tag new
-    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-  %p.no-bottom-margin
-    %span.tag.red error
-    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-  %p.no-bottom-margin
-    %span.tag.yellow warning
-    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-  %p.no-bottom-margin
-    %span.tag.green done
-    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+.container
   %p.no-bottom-margin
-    %span.tag.blue shipping
-    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-
-%dl.dl-horizontal
-  %dt
-    %span.tag new
-  %dd A description list is perfect for defining terms.
-  %dt
-    %span.tag.red error
-  %dd Vestibulum id ligula porta felis euismod semper.
-  %dt
-    %span.tag.green done
-  %dd Vestibulum id ligula porta felis euismod semper.
-  %dt
-    %span.tag.green done
-  %dd Vestibulum id ligula porta felis euismod semper.
-  %dt
-    %span.tag.green done
-  %dd Vestibulum id ligula porta felis euismod semper.
-  %dt
-    %span.tag.green done
-  %dd Vestibulum id ligula porta felis euismod semper.
-  %dt
-    %span.tag.green done
-  %dd Vestibulum id ligula porta felis euismod semper.
-
-%h3
-  Badges
-
-.element-spacing
-  %span.badge
-    1
-  %span.badge.red
-    45
-  %span.badge.red
-    1025
-  %span.badge.green
-    3
-
-%h3
-  Notices
+    A container
 
-.notice
-  %button.close{ :'data-dismiss' => "notice" }
-    &times;
-  %strong
-    Warning!
-  Best check yo self, you're not looking too good.
+.container.small-padding
+  %p.no-bottom-margin
+    A container with small padding
 
-.notice
-  %button.close{ :'data-dismiss' => "notice" }
-    &times;
-  %h4.notice-heading
-    Warning!
-  Best check yo self, you're not looking too good.
+.container.no-padding
+  %p.no-bottom-margin
+    A container without padding
 
-.notice.notice-red
-  %button.close{ :'data-dismiss' => "notice" }
-    &times;
-  %h4.notice-heading
-    Error!
-  Best check yo self, you're not looking too good.
+.container
+  .container.no-bottom-margin
+    %p.no-bottom-margin
+      A container inside a container
 
-.notice.notice-green
-  %button.close{ :'data-dismiss' => "notice" }
-    &times;
-  %h4.notice-heading
-    Success!
-  Best check yo self, you're not looking too good.
+.container.no-padding
+  .header
+    %p.no-bottom-margin
+      With header
+  .padding
+    %p.no-bottom-margin
+      A container inside a container
+  .footer
+    %p.no-bottom-margin
+      With Footer
 
-.notice.notice-blue
-  %button.close{ :'data-dismiss' => "notice" }
-    &times;
-  %h4.notice-heading
-    Info!
-  Best check yo self, you're not looking too good.
-  %ul
-    %li
-      Checking item #5
-    %li
-      Analysing lorem ipsum
+.container
+  .container.covered.no-bottom-margin
+    Text inside a covered container
 
-%h3
-  Progress Bar
+%h1
+  Buttons
 
-.progress
-  .bar{ :style => "width: 20%" }
-    20%
+.container
+  %a.button.small{ :href => "#" }
+    Small Button
 
-.progress
-  .bar{ :style => "width: 20%" }
+  %a.button{ :href => "#" }
+    Normal Button
 
-%h3
-  Containers
+  %a.no-bottom-margin.button.large{ :href => "#" }
+    Large Button
 
 .container
-  .notice.notice-blue
-    %button.close{ :'data-dismiss' => "notice" }
-      &times;
-    %h4.notice-heading
-      Info!
-    Best check yo self, you're not looking too good.
-    %ul
-      %li
-        Checking item #5
-      %li
-        Analysing lorem ipsum
-  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-
-.container.no-padding
-  .header
-    Header
-  .padding
-    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-  .footer
-    Footer
+  .container.covered.no-bottom-margin.small-padding
+    %a.button.dark.small.full-width.no-bottom-margin{ :href => "#" }
+      Small Button
 
 .container
-  %p Cras mattis consectetur purus sit amet fermentum.
-  .container.no-bottom-margin
-    Container inside container. Cras mattis consectetur purus sit amet fermentum.
+  .group
+    %a.button.small.full-width{ :href => "#" }
+      Small Button
+    %a.button.small.full-width{ :href => "#" }
+      Small Button
+    %a.button.small.disabled.full-width{ :href => "#" }
+      Small Button
+    %a.button.small.full-width{ :href => "#" }
+      Small Button
 
-%h3
-  Tabbed Container
-
-.tabbed
-  %ul.nav
-    %li.active{ :style => "width:50%" }
-      %a Profile
-    %li{ :style => "width:50%" }
-      %a Account
-  .container
-    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+.container
+  .group.horizontal_stacking
+    %a.button{ :href => "#" }
+      A
+    %a.button.disabled{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button.active{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      %div.assets-star-icon.no-space
+        &nbsp;
+    %a.button{ :href => "#" }
+      A
+
+  .group.horizontal_stacking
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
 
-.tabbed
-  %ul.nav
-    %li.active{ :style => "width:50%" }
-      %a Profile
-    %li{ :style => "width:50%" }
-      %a{ :href => "http://google.com.br", :target => "_blank" }
-        Account
-  .container
-    .tabbed
-      %ul.nav
-        %li.active{ :style => "width:33.33%" }
-          %a First
-        %li{ :style => "width:33.33%" }
-          %a Middle
-        %li{ :style => "width:33.33%" }
-          %a Last
-      .container.no-bottom-margin
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+.container
+  .group.horizontal_stacking{ :style => "width: 100%" }
+    %a.button.large.active{ :href => "#", :style => "width: 50%" }
+      A
+    %a.button.large{ :href => "#", :style => "width: 50%" }
+      A
 
-.tabbed
-  %ul.nav
-    %li{ :style => "width:33.33%" }
-      %a Profile
-    %li.active{ :style => "width:33.33%" }
-      %a Account
-    %li{ :style => "width:33.33%" }
-      %a.no-padding
-        %span
-          %i.icon-test{ :style => "background-image: url('http://www.condorapartments.com.au/img/icon-bank.png')" }
-          Payment History
-      
-  .container
-    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+.container
+  .group.vertical_stacking
+    %a.button{ :href => "#" }
+      A
+    %a.button.disabled{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button.active{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
+    %a.button{ :href => "#" }
+      A
 
-.tabbed
-  
-  %ul.nav
-    %li{ :style => "width: 50%" }
-      %a Profile
-    %li.active{ :style => "width: 50%" }
-      %a Account
-  .container
-    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+.container
+  .group.vertical_stacking
+    %a.button.large.tal{ :href => "#" }
+      .assets-star-icon
+      ABC
+      .right.badge
+        135
+    %a.button.large.tal.disabled{ :href => "#" }
+      A
+    %a.button.large.tal{ :href => "#" }
+      A
 
+.container
+  .badge
+    patrick
+  .badge
+    joao da silva