1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-19 12:31:21 +02:00

feat(badges): second draft of the badges component. added more classes

This commit is contained in:
Igor Guastalla de Lima
2018-12-18 22:16:59 -02:00
parent cc5e6d07d8
commit c4075b0e94
2 changed files with 39 additions and 30 deletions

View File

@@ -7,7 +7,16 @@ const stories = storiesOf('Badges', module);
stories.addDecorator(withKnobs);
stories.add('badges', () => {
const options = radios('class', {
const optionsLeft = radios('class-left', {
'is-dark': 'is-dark',
'is-success': 'is-success',
'is-primary': 'is-primary',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, '');
const optionsRight = radios('class-right', {
'is-dark': 'is-dark',
'is-success': 'is-success',
'is-primary': 'is-primary',
'is-warning': 'is-warning',
@@ -20,10 +29,8 @@ stories.add('badges', () => {
'is-large': 'is-large',
}, '');
const selectedClasses = [options, sizes].join(' ');
return `<span class="nes-badge ${selectedClasses}">
<span>npm</span>
<span>1.0.0</span>
return `<span class="nes-badge ${sizes}">
<span class="${optionsLeft}">npm</span>
<span class="${optionsRight}">1.0.0</span>
</span>`;
});

View File

@@ -1,26 +1,30 @@
@mixin badge-style($color, $background) {
& span:first-child {
position: absolute;
top: 0;
@mixin span-style($color, $background, $left) {
position: absolute;
color: $color;
background-color: $background;
top: 0;
width: 50%;
@if $left == 0 {
left: 0;
width: 50%;
color: map-get($default-colors, "normal");
background-color: $base-color;
} @else {
right: 0;
}
}
@mixin badge-style($color, $background) {
&:first-child {
@include span-style($color, $background, 0);
// prettier-ignore
box-shadow:
0 4px $base-color,
0 -4px $base-color,
0 0 $base-color,
-4px 0 $base-color;
0 4px $background,
0 -4px $background,
0 0 $background,
-4px 0 $background;
}
& span:last-child {
position: absolute;
top: 0;
right: 0;
width: 50%;
color: $color;
background-color: $background;
&:last-child {
@include span-style($color, $background, 1);
// prettier-ignore
box-shadow:
0 4px $background,
@@ -34,7 +38,6 @@
width: $px * 14;
height: $px;
font-size: $px * 1.2;
// 0.75rem;
line-height: 1.5;
}
@@ -43,7 +46,6 @@
$border-size: 4px;
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -53,26 +55,26 @@
white-space: nowrap;
vertical-align: middle;
cursor: $cursor-click-url;
box-sizing: border-box;
user-select: none;
border: none;
@include badge-style($base-color, map-get($default-colors, "normal"));
// Other styles
// prettier-ignore
$types:
"dark" $background-color $base-color,
"primary" $background-color map-get($primary-colors, "normal"),
"success" $background-color map-get($success-colors, "normal"),
"warning" $base-color map-get($warning-colors, "normal"),
"error" $background-color map-get($error-colors, "normal");
@each $type in $types {
&.is-#{nth($type, 1)} {
& span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3));
}
}
@include setup(5px);
@include setup(9px);
&.is-small {
@include setup(5px);