Permalink
Browse files

doc: Improved 'badge' sample

  • Loading branch information...
MikeMitterer committed Mar 14, 2015
1 parent b0ae4ba commit 1f0dcfb3423effe32619ed260d890f2230fb51ae
Showing with 100 additions and 44 deletions.
  1. +40 −8 example/badge/web/demo.css
  2. +6 −3 example/badge/web/demo.scss
  3. +41 −29 example/badge/web/index.html
  4. +13 −4 lib/sass/badge/_badge.scss
View
@@ -556,6 +556,34 @@ body > h2 {
background: #f5f5f5;
padding: 20px; }
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+/* ========== Color Palettes ========== */
+/* ========== Color & Themes ========== */
+/* ========== Typography ========== */
+/* ========== Components ========== */
+/* ========== Standard Buttons ========== */
+/* ========== Icon Toggles ========== */
+/* ========== Radio Buttons ========== */
+/* ========== Ripple effect ========== */
+/* ========== Layout ========== */
+/* ========== Content Tabs ========== */
+/* ========== Checkboxes ========== */
+/* ========== Switches ========== */
+/* ========== Spinner ========== */
+/* ========== Text fields ========== */
+/* ========== Card ========== */
+/* Heading back */
+/* ========== Sliders ========== */
+/* ========== List ========== */
+/* ========== Item ========== */
+/* ========== Dropdown menu ========== */
+/* ========== Tooltips ========== */
+/* ========== Footer ========== */
/**
*
* Material design color palettes.
@@ -586,7 +614,10 @@ body > h2 {
/* ========== Footer ========== */
.wsk-badge {
position: relative;
- white-space: nowrap; }
+ white-space: nowrap;
+ margin-right: 22px; }
+ .wsk-badge:not([data-badge]) {
+ margin-right: auto; }
.wsk-badge[data-badge]:after {
content: attr(data-badge);
display: -webkit-box;
@@ -1211,7 +1242,9 @@ body {
.sample.badge section {
margin-bottom: 30px; }
-.sample.badge .toolbar {
+ .sample.badge section h5 {
+ margin-bottom: 15px; }
+.sample.badge div.toolbar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1239,7 +1272,7 @@ body {
padding: 10px 10px 0 10px;
height: 40px;
border-radius: 5px; }
- .sample.badge .toolbar .wrapper {
+ .sample.badge div.toolbar .wrapper {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -1267,7 +1300,7 @@ body {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
- .sample.badge .toolbar .wrapper .icon {
+ .sample.badge div.toolbar .wrapper .icon {
background-color: transparent;
border: none;
display: inline-block;
@@ -1278,17 +1311,16 @@ body {
padding: 0;
position: relative;
width: 21px; }
- .sample.badge .toolbar .wrapper .icon.wsk-badge {
+ .sample.badge div.toolbar .wrapper .icon.wsk-badge {
opacity: 1; }
- .sample.badge .toolbar .wrapper .icon:hover {
+ .sample.badge div.toolbar .wrapper .icon:hover {
opacity: 1; }
.sample.badge .links {
margin-top: 25px; }
.sample.badge .links a {
text-decoration: none;
font-weight: normal;
- margin-top: 10px;
- margin-right: 2em; }
+ margin-top: 10px; }
.sample.badge .links .dark {
display: block;
border-radius: 5px;
@@ -16,9 +16,14 @@ body {
.sample.badge {
section {
+ h5 {
+ margin-bottom: 15px;
+ }
+
margin-bottom: 30px;
}
- .toolbar {
+
+ div.toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -72,8 +77,6 @@ body {
font-weight: normal;
margin-top: 10px;
- margin-right: 2em;
-
}
.dark {
display: block;
@@ -30,48 +30,60 @@
<div class="preview-block sample badge">
- <h5>SVGs in Toolbar</h5>
<section class="toolbar">
- <div class="wrapper">
- <div id="el1" class="icon wsk-badge" data-badge="">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path d="M0 0h24v24h-24z" fill="none"/>
- <path d="M14 2h-8c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.89 2 1.99 2h12.01c1.1 0 2-.9 2-2v-12l-6-6zm2 14h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2zm-3-7v-5.5l5.5 5.5h-5.5z"/>
- </svg>
+ <h5>SVGs in Toolbar</h5>
+ <div class="toolbar">
+ <div class="wrapper">
+ <div id="el1" class="icon wsk-badge" data-badge="">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M0 0h24v24h-24z" fill="none"/>
+ <path d="M14 2h-8c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.89 2 1.99 2h12.01c1.1 0 2-.9 2-2v-12l-6-6zm2 14h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2zm-3-7v-5.5l5.5 5.5h-5.5z"/>
+ </svg>
+ </div>
</div>
- </div>
- <div class="wrapper">
- <div id="el2" class="icon wsk-badge" data-badge="1">
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
- <path d="M0 0h18v18h-18z" fill="none"/>
- <path d="M6 8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-3 5.5c2.14 0 3.92-1.5 4.38-3.5h-8.76c.46 2 2.24 3.5 4.38 3.5zm0-12.5c-4.43 0-8 3.58-8 8s3.57 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/>
- </svg>
+ <div class="wrapper">
+ <div id="el2" class="icon wsk-badge" data-badge="1">
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+ <path d="M0 0h18v18h-18z" fill="none"/>
+ <path d="M6 8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-3 5.5c2.14 0 3.92-1.5 4.38-3.5h-8.76c.46 2 2.24 3.5 4.38 3.5zm0-12.5c-4.43 0-8 3.58-8 8s3.57 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/>
+ </svg>
+ </div>
</div>
- </div>
- <div class="wrapper">
- <div id="el3" class="icon wsk-badge" data-badge="99">
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
- <path d="M0 0h18v18h-18z" fill="none"/>
- <path d="M6 8c1.11 0 2-.9 2-2s-.89-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm6 0c1.11 0 2-.9 2-2s-.89-2-2-2c-1.11 0-2 .9-2 2s.9 2 2 2zm-6 1.2c-1.67 0-5 .83-5 2.5v1.3h10v-1.3c0-1.67-3.33-2.5-5-2.5zm6 0c-.25 0-.54.02-.84.06.79.6 1.34 1.4 1.34 2.44v1.3h4.5v-1.3c0-1.67-3.33-2.5-5-2.5z"/>
- </svg>
+ <div class="wrapper">
+ <div id="el3" class="icon wsk-badge" data-badge="99">
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+ <path d="M0 0h18v18h-18z" fill="none"/>
+ <path d="M6 8c1.11 0 2-.9 2-2s-.89-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm6 0c1.11 0 2-.9 2-2s-.89-2-2-2c-1.11 0-2 .9-2 2s.9 2 2 2zm-6 1.2c-1.67 0-5 .83-5 2.5v1.3h10v-1.3c0-1.67-3.33-2.5-5-2.5zm6 0c-.25 0-.54.02-.84.06.79.6 1.34 1.4 1.34 2.44v1.3h4.5v-1.3c0-1.67-3.33-2.5-5-2.5z"/>
+ </svg>
+ </div>
</div>
- </div>
- <div class="wrapper">
- <div id="el4" class="icon wsk-badge" data-badge="888">
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
- <path d="M0 0h18v18h-18z" fill="none"/>
- <path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"/>
- </svg>
+ <div class="wrapper">
+ <div id="el4" class="icon wsk-badge" data-badge="888">
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+ <path d="M0 0h18v18h-18z" fill="none"/>
+ <path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"/>
+ </svg>
+ </div>
</div>
</div>
</section>
- <h5>Links</h5>
+ <section class="text">
+ <h5>Text</h5>
+ <span class="wsk-badge" data-badge="42">I am in span</span>
+ <span class="wsk-badge" data-badge="!">Me too</span>
+ <div class="wsk-badge" data-badge="99">Im am in a div, but makes no sense here</div>
+ <span class="wsk-badge">I have <strong>no</strong> data-badge!!!</span> <span class="wsk-badge" data-badge="88">But I have one</span>
+ <p style="margin-top: 1em">Right margin is set <strong>automatically</strong>, top margin is left to you - it depends to much on the situation</p>
+ </section>
+
<section class="links">
+ <h5>Links</h5>
+
<a href="#" class="wsk-badge" data-badge="10">Hallo</a>
<a href="#" class="wsk-badge" data-badge="1">Hallo</a>
<a href="#" class="wsk-badge wsk-badge--no-background" data-badge="1">no background</a>
View
@@ -1,11 +1,20 @@
+@import "../colors";
+
$badge-color: #fff !default;
$badge-color-inverse: nth($palette-accent, 5) !default;
$badge-background: nth($palette-accent, 5) !default;
$badge-background-inverse: #fff !default;
+$badge-size : 20px;
+$badge-padding: 2px;
.wsk-badge {
position : relative;
white-space: nowrap;
+ margin-right: ($badge-size + $badge-padding);
+
+ &:not([data-badge]) {
+ margin-right: auto;
+ }
&[data-badge]:after {
content : attr(data-badge);
@@ -18,17 +27,17 @@ $badge-background-inverse: #fff !default;
align-items: center; // ↓
position : absolute;
- top : -10px;
- right : -22px;
+ top : -($badge-size / 2);
+ right : -($badge-size + $badge-padding);
.wsk-button & {
top : -10px;
right : -5px;
}
font-size : 10px;
- width : 20px;
- height : 20px;
+ width : $badge-size;
+ height : $badge-size;
border-radius : 50%;
background : $badge-background;

0 comments on commit 1f0dcfb

Please sign in to comment.