mirror of
https://github.com/primer/css.git
synced 2024-12-11 11:16:04 +03:00
74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import { storiesOf } from '@storybook/react'
|
|
|
|
storiesOf('Marketing utilities', module)
|
|
.add('Responsive borders', () => (
|
|
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
|
|
))
|
|
.add('border-white-fade', () => (
|
|
<div className='bg-blue text-white p-3'>
|
|
<span className='border border-white-fade p-2'>
|
|
.border-white-fade
|
|
</span>
|
|
</div>
|
|
))
|
|
.add('Responsive position', () => (
|
|
<div className='position-relative p-6 bg-gray'>
|
|
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
|
|
.position-md-absolute
|
|
</div>
|
|
</div>
|
|
))
|
|
.add('Y directional margin', () => (
|
|
<div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block mt-7 bg-blue-light">.mt-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block mb-7 bg-blue-light">.mb-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block my-7 bg-blue-light">.my-7</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
.add('Y directional responsive margin', () => (
|
|
<div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block mt-sm-7 bg-blue-light">.mt-sm-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block mb-md-7 bg-blue-light">.mb-md-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block my-lg-7 bg-blue-light">.my-lg-7</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
.add('Y directional padding', () => (
|
|
<div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block pt-7 bg-blue-light">.pt-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block pb-7 bg-blue-light">.pb-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block py-7 bg-blue-light">.py-7</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
.add('Y directional responsive padding', () => (
|
|
<div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block pt-sm-7 bg-blue-light">.pt-sm-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block pb-md-7 bg-blue-light">.pb-md-7</div>
|
|
</div>
|
|
<div className="d-inline-block mr-6">
|
|
<div className="d-inline-block py-lg-7 bg-blue-light">.py-lg-7</div>
|
|
</div>
|
|
</div>
|
|
))
|