Sha256: f9b6145deec80fbfc7421a65fe9461bf1e74935341b2b196d83cc54237f23018
Contents?: true
Size: 1.86 KB
Versions: 10
Compression:
Stored size: 1.86 KB
Contents
%section
%a.scroll-target{name: 'buttons'}
%a.scroll-target{name: 'button__styles'}
%h3.color-black Button Styles
%p
Use these classes on any HTML element that you would like to look and
act like a button. Can be used with any button color class below.
.panel.panel--padded
%h4 Standard Button
%p
%button{ type: 'button', class: 'btn' }
Button
%p
%a{ href: '#', class: 'btn' }
Link
%code
%p= "<button type='button' class='btn'>Button</button>"
%p= "<a href='#' class='btn'>Link</a>"
%h4 Flat Button
%p Same as the standard button, but without depth.
%p
%button{ type: 'button', class: 'btn btn-flat' }
Button
%p
%a{ href: '#', class: 'btn btn-flat' }
Link
%code
%p= "<button type='button' class='btn btn-flat'>Button</button>"
%p= "<a href='#' class='btn btn-flat'>Link</a>"
%h4 Block Button
%p Same as the standard button, but with display:block;
%p
%button{ type: 'button', class: 'btn btn-block' }
Button
%p
%a{ href: '#', class: 'btn btn-block' }
Link
%code
%p= "<button type='button' class='btn btn-block'>Button</button>"
%p= "<a href='#' class='btn btn-block'>Link</a>"
%h4 Floating Action Button
%p
A Material design pattern, the
= link_to "floating action button", 'https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens', target: '_'
triggers the primary action of the page it lives on.
%p
%a{ href: '#', class: 'btn-fab' }
= i('add')
%p
%a{ href: '#', class: 'btn-fab-reverse' }
= i('edit')
%code
%p= "<a href='#' class='btn-fab'><i class='material-icon'>add</i></a>"
%p= "<a href='#' class='btn-fab-reverse'><i class='material-icon'>edit</i></a>"
Version data entries
10 entries across 10 versions & 1 rubygems