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

feat(badges): storybook corrections and order of properties

Browse Source
This commit is contained in:
Igor Guastalla de Lima
2018-12-18 22:20:42 -02:00
parent c4075b0e94
commit b6d10442f3
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/badge.stories.js
View File

@@ -8,26 +8,29 @@ stories.addDecorator(withKnobs);
stories.add('badges', () => { stories.add('badges', () => {
const optionsLeft = radios('class-left', { const optionsLeft = radios('class-left', {
default: 'is-dark',
'is-dark': 'is-dark', 'is-dark': 'is-dark',
'is-success': 'is-success', 'is-success': 'is-success',
'is-primary': 'is-primary', 'is-primary': 'is-primary',
'is-warning': 'is-warning', 'is-warning': 'is-warning',
'is-error': 'is-error', 'is-error': 'is-error',
}, ''); }, 'is-dark');
const optionsRight = radios('class-right', { const optionsRight = radios('class-right', {
default: 'is-success',
'is-dark': 'is-dark', 'is-dark': 'is-dark',
'is-success': 'is-success', 'is-success': 'is-success',
'is-primary': 'is-primary', 'is-primary': 'is-primary',
'is-warning': 'is-warning', 'is-warning': 'is-warning',
'is-error': 'is-error', 'is-error': 'is-error',
}, ''); }, 'is-success');
const sizes = radios('size', { const sizes = radios('size', {
default: 'is-medium',
'is-small': 'is-small', 'is-small': 'is-small',
'is-medium': 'is-medium', 'is-medium': 'is-medium',
'is-large': 'is-large', 'is-large': 'is-large',
}, ''); }, 'is-medium');
return `<span class="nes-badge ${sizes}"> return `<span class="nes-badge ${sizes}">
<span class="${optionsLeft}">npm</span> <span class="${optionsLeft}">npm</span>

6
scss/elements/badges.scss
View File

@@ -1,9 +1,9 @@
@mixin span-style($color, $background, $left) { @mixin span-style($color, $background, $left) {
position: absolute; position: absolute;
color: $color;
background-color: $background;
top: 0; top: 0;
width: 50%; width: 50%;
color: $color;
background-color: $background;
@if $left == 0 { @if $left == 0 {
left: 0; left: 0;
@@ -46,6 +46,7 @@
$border-size: 4px; $border-size: 4px;
position: relative; position: relative;
box-sizing: border-box;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -55,7 +56,6 @@
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: $cursor-click-url; cursor: $cursor-click-url;
box-sizing: border-box;
user-select: none; user-select: none;
border: none; border: none;