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

Merge branch 'develop' into fix-container-with-title

Browse Source
This commit is contained in:
Abdullah Samman
2019-01-03 18:35:58 +03:00
committed by GitHub
parent 78e522e4dd 2d2ff64177
commit 85c173fadb
2 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -272,6 +272,43 @@
<progress class="nes-progress is-pattern" value="50" max="100"></progress> <progress class="nes-progress is-pattern" value="50" max="100"></progress>
</section> </section>
<section class="nes-container with-title">
<h2 class="title">Badges</h2>
<a href="#" class="nes-badge">
<span class="is-dark">NES.css</span>
</a>
<a href="#" class="nes-badge">
<span class="is-primary">is</span>
</a>
<a href="#" class="nes-badge">
<span class="is-success">a</span>
</a>
<a href="#" class="nes-badge">
<span class="is-warning">great</span>
</a>
<a href="#" class="nes-badge">
<span class="is-error">framework!</span>
</a>
<a href="#" class="nes-badge is-splited">
<span class="is-dark">npm</span>
<span class="is-primary">1.1.0</span>
</a>
<a href="#" class="nes-badge is-splited">
<span class="is-dark">test</span>
<span class="is-success">100%</span>
</a>
<a href="#" class="nes-badge is-icon">
<span class="is-warning">
<i class="nes-icon star is-small"></i>
</span>
<span class="is-primary">Icons</span>
</a>
<a href="#" class="nes-badge is-icon">
<span class="is-dark">hi</span>
<span class="is-warning">Text</span>
</a>
</section>
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Icons</h2> <h2 class="title">Icons</h2>
<section class="nes-container with-title"> <section class="nes-container with-title">

16
scss/elements/badges.scss
View File

@@ -1,8 +1,11 @@
@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) { @mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
display: $display; display: $display;
align-items: center;
justify-content: center;
width: $width; width: $width;
font-size: $font-size; font-size: $font-size;
color: $color; color: $color;
text-align: center;
background-color: $background-color; background-color: $background-color;
} }
@@ -11,6 +14,7 @@
top: 0; top: 0;
width: $width; width: $width;
color: $color; color: $color;
text-align: center;
background-color: $background; background-color: $background;
@if $option == left { @if $option == left {
@@ -39,9 +43,8 @@
@include span-style-is-icon($color, $background, flex, 2.7em, 0.5em); @include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
position: absolute; position: absolute;
top: -1.7em; top: -2.8em;
left: 2.5em; left: -2.7em;
align-items: center;
height: 2.7em; height: 2.7em;
} }
&:last-child { &:last-child {
@@ -65,13 +68,11 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $em * 14; width: $em * 14;
height: $em; height: $em * 2.5;
padding: 0.75em;
margin: 0.5em; margin: 0.5em;
font-size: $em * 1.2; font-size: $em * 1.2;
text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: top;
user-select: none; user-select: none;
// Other styles // Other styles
@@ -91,6 +92,7 @@
} }
&.is-icon { &.is-icon {
width: $em * 7;
& span.is-#{nth($type, 1)} { & span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3), is-icon); @include badge-style(nth($type, 2), nth($type, 3), is-icon);
} }