sandbox/app/views/ui_library/components.html.haml in iugu-ux-0.9.5 vs sandbox/app/views/ui_library/components.html.haml in iugu-ux-0.9.8

- old
+ new

@@ -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' +%h1 + Containers -.element-spacing - .grid.component-grid - .grid-item.component-item - %h2 - Buttons +.container + %p.no-bottom-margin + A container - %p - Lorem Ipsum +.container.small-padding + %p.no-bottom-margin + A container with small padding - %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 - -.element-spacing +.container.no-padding %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. - %p.no-bottom-margin - %span.tag.blue shipping - Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + A container without padding -%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. +.container + .container.no-bottom-margin + %p.no-bottom-margin + A container inside a container -%h3 - Badges +.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 -.element-spacing - %span.badge - 1 - %span.badge.red - 45 - %span.badge.red - 1025 - %span.badge.green - 3 +.container + .container.covered.no-bottom-margin + Text inside a covered container -%h3 - Notices +%h1 + Buttons -.notice - %button.close{ :'data-dismiss' => "notice" } - &times; - %strong - Warning! - Best check yo self, you're not looking too good. +.container + %a.button.small{ :href => "#" } + Small Button -.notice - %button.close{ :'data-dismiss' => "notice" } - &times; - %h4.notice-heading - Warning! - Best check yo self, you're not looking too good. + %a.button{ :href => "#" } + Normal Button -.notice.notice-red - %button.close{ :'data-dismiss' => "notice" } - &times; - %h4.notice-heading - Error! - Best check yo self, you're not looking too good. + %a.no-bottom-margin.button.large{ :href => "#" } + Large Button -.notice.notice-green - %button.close{ :'data-dismiss' => "notice" } - &times; - %h4.notice-heading - Success! - Best check yo self, you're not looking too good. +.container + .container.covered.no-bottom-margin.small-padding + %a.button.dark.small.full-width.no-bottom-margin{ :href => "#" } + Small Button -.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 + .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 - Progress Bar +.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 -.progress - .bar{ :style => "width: 20%" } - 20% + .group.horizontal_stacking + %a.button{ :href => "#" } + A + %a.button{ :href => "#" } + A -.progress - .bar{ :style => "width: 20%" } +.container + .group.horizontal_stacking{ :style => "width: 100%" } + %a.button.large.active{ :href => "#", :style => "width: 50%" } + A + %a.button.large{ :href => "#", :style => "width: 50%" } + A -%h3 - Containers - .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. + .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 -.container.no-padding - .header - Header - .padding - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. - .footer - Footer - .container - %p Cras mattis consectetur purus sit amet fermentum. - .container.no-bottom-margin - Container inside container. Cras mattis consectetur purus sit amet fermentum. + .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 -%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. - -.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. - -.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. - -.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 + .badge + patrick + .badge + joao da silva