sass-site/source/styleguide/components.html.haml
Jina Anne e541d4a6ef impl
2019-03-04 18:36:34 -08:00

101 lines
1.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Components
---
%h2 With details:
%table.sl-c-table.impl-status
%tbody
%tr
%th(scope='row') Dart Sass
%td ✓
%tr
%th(scope='row') Ruby Sass
%td since 3.5.0
%details
%summary Learn more
%p
LibSass and older versions of Ruby Sass default to 5 digits of numeric
precision, but can be configured to use a different number. Its
recommended that users configure them for 10 digits for greater
accuracy and forwards-compatibility.
%h2 Without details:
%table.sl-c-table.impl-status
%tbody
%tr
%th(scope='row') Dart Sass
%td ✓
%tr
%th(scope='row') Ruby Sass
%td since 3.5.0
.sl-c-alert
.sl-l-container
%p
%strong Alert
= lorem.sentence
.sl-c-alert.sl-c-alert--info
.sl-l-container
%p
%strong Info Alert
= lorem.sentence
= link_to 'Link', '#', class: 'sl-c-button'
%button.sl-c-button(type='button') Button
= link_to 'Link', '#', class: 'sl-c-button sl-c-button--primary'
%button.sl-c-button.sl-c-button--primary(type='button') Button
.sl-c-callout
%h3 Callout
%p= lorem.paragraph
.sl-c-callout.sl-c-callout--warning
%h3 Warning
%p= lorem.paragraph
.sl-c-callout.sl-c-callout--fun-fact
%h3 Fun Fact
%p= lorem.paragraph
%p.sl-c-introduction= lorem.paragraph
.sl-c-introduction
%p= lorem.paragraph
%h2#link-header-2
Link Header 2
%h3#link-header-3
Link Header 3
%h4#link-header-4
Link Header 4
.sl-c-list-navigation-wrapper
:markdown
- [Vertical](#)
- [Navigation](#)
- [List](#)
.sl-c-list-horizontal-wrapper
:markdown
- [Horizontal](#)
- [Navigation](#)
- [List](#)
.sl-c-pop-stripe
%table.sl-c-table
%tr
%td Table
%td Table