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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/badge.stories.js
View File

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

50
scss/elements/badges.scss
View File

@@ -1,26 +1,30 @@
@mixin badge-style($color, $background) { @mixin span-style($color, $background, $left) {
& span:first-child { position: absolute;
position: absolute; color: $color;
top: 0; background-color: $background;
top: 0;
width: 50%;
@if $left == 0 {
left: 0; left: 0;
width: 50%; } @else {
color: map-get($default-colors, "normal"); right: 0;
background-color: $base-color; }
}
@mixin badge-style($color, $background) {
&:first-child {
@include span-style($color, $background, 0);
// prettier-ignore // prettier-ignore
box-shadow: box-shadow:
0 4px $base-color, 0 4px $background,
0 -4px $base-color, 0 -4px $background,
0 0 $base-color, 0 0 $background,
-4px 0 $base-color; -4px 0 $background;
} }
& span:last-child { &:last-child {
position: absolute; @include span-style($color, $background, 1);
top: 0;
right: 0;
width: 50%;
color: $color;
background-color: $background;
// prettier-ignore // prettier-ignore
box-shadow: box-shadow:
0 4px $background, 0 4px $background,
@@ -34,7 +38,6 @@
width: $px * 14; width: $px * 14;
height: $px; height: $px;
font-size: $px * 1.2; font-size: $px * 1.2;
// 0.75rem;
line-height: 1.5; line-height: 1.5;
} }
@@ -43,7 +46,6 @@
$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;
@@ -53,26 +55,26 @@
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;
@include badge-style($base-color, map-get($default-colors, "normal"));
// Other styles // Other styles
// prettier-ignore // prettier-ignore
$types: $types:
"dark" $background-color $base-color,
"primary" $background-color map-get($primary-colors, "normal"), "primary" $background-color map-get($primary-colors, "normal"),
"success" $background-color map-get($success-colors, "normal"), "success" $background-color map-get($success-colors, "normal"),
"warning" $base-color map-get($warning-colors, "normal"), "warning" $base-color map-get($warning-colors, "normal"),
"error" $background-color map-get($error-colors, "normal"); "error" $background-color map-get($error-colors, "normal");
@each $type in $types { @each $type in $types {
&.is-#{nth($type, 1)} { & span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3)); @include badge-style(nth($type, 2), nth($type, 3));
} }
} }
@include setup(5px); @include setup(9px);
&.is-small { &.is-small {
@include setup(5px); @include setup(5px);