sass-site/source/styleguide/components.html.haml

104 lines
1.6 KiB
Plaintext
Raw Normal View History

2018-12-29 02:59:53 +01:00
---
2019-12-18 05:38:17 +01:00
dh.title: Components
2018-12-29 02:59:53 +01:00
---
2019-03-05 04:11:26 +01:00
%h2 Closed
%dl.sl-c-description-list.sl-c-description-list--horizontal
2019-12-18 05:38:17 +01:00
%div
2019-03-05 04:11:26 +01:00
%dt Dart Sass
%dd ✓
2019-03-05 03:36:34 +01:00
2019-12-18 05:38:17 +01:00
%div
2019-03-05 04:11:26 +01:00
%dt Ruby Sass
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
%dd since 3.5.0
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
%div= link_to '▶︎', '#'
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
%h2 Open
%dl.sl-c-description-list.sl-c-description-list--horizontal
2019-12-18 05:38:17 +01:00
%div
2019-03-05 04:11:26 +01:00
%dt Dart Sass
%dd ✓
2019-03-05 03:36:34 +01:00
2019-12-18 05:38:17 +01:00
%div
2019-03-05 04:11:26 +01:00
%dt Ruby Sass
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
%dd since 3.5.0
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
%div= link_to '▼', '#'
2019-03-05 03:36:34 +01:00
2019-03-05 04:11:26 +01:00
.sl-c-callout
%p= lorem.paragraph
2019-03-05 03:29:20 +01:00
2019-03-05 04:11:26 +01:00
%h2 Alerts
2018-12-29 02:59:53 +01:00
.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
2019-03-05 04:11:26 +01:00
%h2 Buttons
2018-12-29 02:59:53 +01:00
= 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
2019-03-05 04:11:26 +01:00
%h2 Callouts
2018-12-29 02:59:53 +01:00
.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
2019-03-05 04:11:26 +01:00
%h2 Introduction
2018-12-29 02:59:53 +01:00
%p.sl-c-introduction= lorem.paragraph
.sl-c-introduction
%p= lorem.paragraph
2019-03-05 04:11:26 +01:00
%h2 Link Headers
%h2#link-header-2
Link Header 2
2018-12-29 02:59:53 +01:00
%h3#link-header-3
Link Header 3
2018-12-29 02:59:53 +01:00
%h4#link-header-4
Link Header 4
2018-12-29 02:59:53 +01:00
2019-03-05 04:11:26 +01:00
%h2 Lists
2018-12-29 02:59:53 +01:00
.sl-c-list-navigation-wrapper
:markdown
- [Vertical](#)
- [Navigation](#)
- [List](#)
.sl-c-list-horizontal-wrapper
:markdown
- [Horizontal](#)
- [Navigation](#)
- [List](#)
2019-03-05 04:11:26 +01:00
%h2 Pop Stripe
2018-12-29 02:59:53 +01:00
.sl-c-pop-stripe
2019-03-05 04:11:26 +01:00
%h2 Tables
2018-12-29 02:59:53 +01:00
%table.sl-c-table
%tr
%td Table
%td Table