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

feat(badges): changes made that was asked by the reviewer

Browse Source 
Removed box-sizing and border none, and classes that changed the size. Added cursor fallback and
size change by the font-size. Changed from span to a; display type; margin.

#211
This commit is contained in:
Igor Guastalla de Lima
2018-12-20 20:21:51 -02:00
parent f8a8e3184a
commit 911f281b47
2 changed files with 16 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/badge.stories.js
View File

@@ -1,6 +1,6 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios, boolean, withKnobs, radios, boolean, number
} from '@storybook/addon-knobs'; } from '@storybook/addon-knobs';
const stories = storiesOf('Badges', module); const stories = storiesOf('Badges', module);
@@ -23,17 +23,17 @@ stories.add('badges', () => {
'is-error': 'is-error', 'is-error': 'is-error',
}, 'is-success'); }, 'is-success');
const sizes = radios('size', { const fontSize = number('font-size', 1, {
'is-small': 'is-small', range: true,
'is-medium': 'is-medium', min: 0,
'is-large': 'is-large', max: 100,
}, 'is-medium'); step: 0.01,
});
const isSplited = boolean('is-splited', true) ? 'is-splited' : ''; const isSplited = boolean('is-splited', true) ? 'is-splited' : '';
const selectedClasses = [sizes, isSplited].join(' ');
return `<span class="nes-badge ${selectedClasses}"> return `<a href="#" class="nes-badge ${isSplited}" style="font-size:${fontSize}em">
<span class="${optionsLeft}">npm</span> <span class="${optionsLeft}">npm</span>
<span class="${optionsRight}">1.0.0</span> <span class="${optionsRight}">1.0.0</span>
</span>`; </a>`;
}); });

31
scss/elements/badges.scss
View File

@@ -36,27 +36,23 @@
} }
@mixin setup($px) { @mixin setup($px) {
width: $px * 14;
height: $px;
font-size: $px * 1.2;
line-height: 1.5;
} }
// Default style // Default style
.nes-badge { .nes-badge {
$em: 0.75em;
width: $em * 14;
height: $em;
font-size: $em * 1.2;
position: relative; position: relative;
box-sizing: border-box; display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75em; padding: 0.75em;
margin: 4px; margin: 0.5em;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: $cursor-click-url; cursor: $cursor-click-url, pointer;
user-select: none; user-select: none;
border: none;
@include setup(7px); @include setup(7px);
// Other styles // Other styles
@@ -79,17 +75,4 @@
@include badge-style(nth($type, 2), nth($type, 3), false); @include badge-style(nth($type, 2), nth($type, 3), false);
} }
} }
// Other sizes
// prettier-ignore
$sizes:
"small" 5px,
"medium" 7px,
"large" 9px;
@each $size in $sizes {
&.is-#{nth($size, 1)} {
@include setup(nth($size, 2));
}
}
} }