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): added is-icon class to badges and new mixin

Browse Source
This commit is contained in:
Igor Guastalla de Lima
2018-12-22 20:32:14 -02:00
parent aaa7107950
commit 20abd54fea
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
scss/elements/badges.scss
View File

@@ -1,3 +1,11 @@
@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
display: $display;
width: $width;
font-size: $font-size;
color: $color;
background-color: $background-color;
}
@mixin span-style($color, $background, $option, $width: 50%) { @mixin span-style($color, $background, $option, $width: 50%) {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -12,10 +20,10 @@
} }
} }
@mixin badge-style($color, $background, $is-splited: true) { @mixin badge-style($color, $background, $option: is-default) {
$box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background; $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
@if $is-splited == true { @if $option == is-splited {
&:first-child { &:first-child {
@include span-style($color, $background, left); @include span-style($color, $background, left);
@@ -26,6 +34,21 @@
box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background; box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
} }
} @else if $option == is-icon {
&:first-child {
@include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
position: absolute;
top: -1.7em;
left: 2.5em;
align-items: center;
height: 2.7em;
}
&:last-child {
@include span-style-is-icon($color, $background, inline-block, 6em, 0.88em);
box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
}
} @else { } @else {
&:first-child { &:first-child {
@include span-style($color, $background, 0, 100%); @include span-style($color, $background, 0, 100%);
@@ -63,12 +86,18 @@
@each $type in $types { @each $type in $types {
&.is-splited { &.is-splited {
& span.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), is-splited);
}
}
&.is-icon {
& span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3), is-icon);
} }
} }
& span.is-#{nth($type, 1)} { & span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3), false); @include badge-style(nth($type, 2), nth($type, 3));
} }
} }
} }