mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-22 13:52:48 +02:00
Code Issues Releases Wiki Activity

feat(avatars): add avatar component (#156)

Browse Source
This commit is contained in:
Igor Guastalla
2018-12-10 08:53:26 -02:00
committed by Abdullah Samman
parent 73b3616472
commit 3d41fb82c2
4 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/avatars.stories.js Normal file
View File

@@ -0,0 +1,20 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Avatars', module);
stories.addDecorator(withKnobs);
stories.add('avatars', () => {
const options = radios('class', {
'is-small': 'is-small',
default: '',
'is-medium': 'is-medium',
'is-large': 'is-large',
}, '');
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const selectedClasses = [isRounded, options].join(' ');
return `<img src="http://www.gravatar.com/avatar" class="nes-avatar ${selectedClasses}">`;
});

14
index.html
View File

@@ -94,6 +94,20 @@
</label> </label>
</section> </section>
<section class="nes-container with-title">
<h2 class="title">Avatars</h2>
<div>
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-small">
<img src="http://www.gravatar.com/avatar" class="nes-avatar">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-medium">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-large">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-rounded">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
<img src="http://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
</div>
</section>
<section class="form nes-container with-title"> <section class="form nes-container with-title">
<h2 class="title">Form</h2> <h2 class="title">Form</h2>
<div class="nes-field"> <div class="nes-field">

1
scss/elements/_index.scss
View File

@@ -7,3 +7,4 @@
@import "balloons.scss"; @import "balloons.scss";
@import "tables.scss"; @import "tables.scss";
@import "progress.scss"; @import "progress.scss";
@import "avatar.scss";

23
scss/elements/avatar.scss Normal file
View File

@@ -0,0 +1,23 @@
@mixin img-style($param) {
$size: $param * 16;
width: $size;
height: $size;
&.is-rounded {
border-radius: 50px;
}
}
.nes-avatar {
@include img-style(2px);
&.is-small {
@include img-style(1px);
}
&.is-medium {
@include img-style(3px);
}
&.is-large {
@include img-style(4px);
}
}