primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-22 06:07:31 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'release-10.10.0' into progress-bar

Browse Source
This commit is contained in:
Emily Brick 2018-11-15 14:56:32 -08:00 committed by GitHub
commit 33c9665bde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
modules/primer-buttons/lib/button-group.scss
View File

@ -5,39 +5,38 @@
@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
.BtnGroup {
display: inline-block;
vertical-align: middle;
@include clearfix();
display: inline-flex;
align-items: middle;
// Proper spacing for multiple button groups (a la, gollum editor)
+ .BtnGroup,
+ .btn {
margin-left: 5px;
margin-left: $spacer-2;
}
}
.BtnGroup-item {
position: relative;
float: left;
border-right-width: 0;
border-radius: 0;
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:last-child {
border-right-width: 1px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right-width: $border-width;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
&.selected,
&:focus,
&:active,
&:hover {
border-right-width: 1px;
z-index: 1;
border-right-width: $border-width;
+ .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
@ -49,17 +48,15 @@
.BtnGroup-parent,
.BtnGroup-form {
float: left;
&:first-child .BtnGroup-item {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:last-child .BtnGroup-item {
border-right-width: 1px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right-width: $border-width;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
.BtnGroup-item {
@ -72,7 +69,7 @@
&:active,
&:hover {
.BtnGroup-item {
border-right-width: 1px;
border-right-width: $border-width;
}
+ .BtnGroup-item,

66
modules/primer-buttons/stories.js
View File

@ -1,63 +1,9 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
storiesOf('Button', module)
.add('btn', () => (
<button className='btn'>Button</button>
))
.add('btn-primary', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn btn-primary'>Button</button>
<button className='btn btn-primary hover'>hover</button>
<button className='btn btn-primary focus'>focus</button>
<button className='btn btn-primary selected'>selected</button>
<button className='btn btn-primary disabled'>disabled</button>
</div>
))
.add('btn-danger', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn btn-danger'>Button</button>
<button className='btn btn-danger hover'>hover</button>
<button className='btn btn-danger focus'>focus</button>
<button className='btn btn-danger selected'>selected</button>
<button className='btn btn-danger disabled'>disabled</button>
</div>
))
.add('btn-outline', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn btn-outline'>Button</button>
<button className='btn btn-outline hover'>hover</button>
<button className='btn btn-outline focus'>focus</button>
<button className='btn btn-outline selected'>selected</button>
<button className='btn btn-outline disabled'>disabled</button>
</div>
))
.add('btn-blue', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn btn-blue'>Button</button>
<button className='btn btn-blue hover'>hover</button>
<button className='btn btn-blue focus'>focus</button>
<button className='btn btn-blue selected'>selected</button>
<button className='btn btn-blue disabled'>disabled</button>
</div>
))
.add('btn-purple', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn btn-purple'>Button</button>
<button className='btn btn-purple hover'>hover</button>
<button className='btn btn-purple focus'>focus</button>
<button className='btn btn-purple selected'>selected</button>
<button className='btn btn-purple disabled'>disabled</button>
</div>
))
.add('btn-large', () => (
<div className='f3 p-4'>
<a className="btn btn-large btn-purple mr-6" href="#url" role="button">Large link button</a>
<button className="btn btn-large" type="button">Large button button</button>
</div>
))
.add('btn-link', () => (
<div className='p-4 d-flex flex-justify-between'>
<button className='btn-link'>Button</button>
</div>
))
const stories = storiesOf('Button', module)
for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) {
stories.add(title, story)
}