Cleaning up badges
Sérgio Gomes
parent
fd5892aa83
commit
05c5c207d9
|
|
@ -1,67 +1,66 @@
|
|||
//---
|
||||
// Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
|
||||
// IT-Consulting and Development Limited.
|
||||
//
|
||||
// All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.mdl-badge {
|
||||
position : relative;
|
||||
white-space: nowrap;
|
||||
margin-right: ($badge-size + $badge-padding);
|
||||
position : relative;
|
||||
white-space: nowrap;
|
||||
margin-right: ($badge-size + $badge-padding);
|
||||
|
||||
&:not([data-badge]) {
|
||||
margin-right: auto;
|
||||
&:not([data-badge]) {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&[data-badge]:after {
|
||||
content: attr(data-badge);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
top: -($badge-size / 2);
|
||||
right: -($badge-size + $badge-padding);
|
||||
|
||||
.mdl-button & {
|
||||
top: -10px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
font-family: $preferred_font;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
width: $badge-size;
|
||||
height: $badge-size;
|
||||
border-radius : 50%;
|
||||
|
||||
background: $badge-background;
|
||||
color: $badge-color;
|
||||
}
|
||||
|
||||
&.mdl-badge--no-background {
|
||||
&[data-badge]:after {
|
||||
content : attr(data-badge);
|
||||
color: $badge-color-inverse;
|
||||
background: $badge-background-inverse;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
position : absolute;
|
||||
top : -($badge-size / 2);
|
||||
right : -($badge-size + $badge-padding);
|
||||
|
||||
.mdl-button & {
|
||||
top : -10px;
|
||||
right : -5px;
|
||||
}
|
||||
|
||||
font-size : 10px;
|
||||
width : $badge-size;
|
||||
height : $badge-size;
|
||||
border-radius : 50%;
|
||||
|
||||
background : $badge-background;
|
||||
color : $badge-color;
|
||||
}
|
||||
|
||||
&.mdl-badge--no-background {
|
||||
&[data-badge]:after {
|
||||
color : $badge-color-inverse;
|
||||
background : $badge-background-inverse;
|
||||
|
||||
box-shadow:0 0 1px gray;
|
||||
}
|
||||
box-shadow: 0 0 1px gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,84 +14,47 @@
|
|||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<section class="toolbar">
|
||||
<div class="toolbar">
|
||||
<div class="wrapper">
|
||||
<div id="el1" class="icon mdl-badge mdl-js-badge" data-badge="1">
|
||||
<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>
|
||||
<section class="toolbar">
|
||||
<div class="toolbar">
|
||||
<div class="wrapper">
|
||||
<div id="el1" class="icon mdl-icon mdl-icon--note-add mdl-badge mdl-js-badge" data-badge="1"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="el2" class="icon mdl-badge" data-badge="♥">
|
||||
<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 class="wrapper">
|
||||
<div id="el2" class="icon mdl-icon mdl-icon--mood mdl-badge" data-badge="♥"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="el3" class="icon mdl-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 class="wrapper">
|
||||
<div id="el3" class="icon mdl-icon mdl-icon--group mdl-badge" data-badge="99"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="el4" class="icon mdl-icon mdl-icon--group mdl-badge" data-badge="888"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="el4" class="icon mdl-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>
|
||||
<p>
|
||||
<strong>Hint:</strong> Check your log and you'll see the values for the first badge...
|
||||
</p>
|
||||
</section>
|
||||
<section class="text">
|
||||
<h5>Text</h5>
|
||||
<span class="mdl-badge" data-badge="42">I am in a span</span>
|
||||
<span class="mdl-badge" data-badge="!">Me too</span>
|
||||
<div class="mdl-badge" data-badge="99">I am in a div, but that makes no sense here</div>
|
||||
<span class="mdl-badge">I have <strong>no</strong> data-badge!</span> <span class="mdl-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 too much on the situation</p>
|
||||
</section>
|
||||
|
||||
<section class="text">
|
||||
<h5>Text</h5>
|
||||
<span class="mdl-badge" data-badge="42">I am in span</span>
|
||||
<span class="mdl-badge" data-badge="!">Me too</span>
|
||||
<div class="mdl-badge" data-badge="99">Im am in a div, but makes no sense here</div>
|
||||
<span class="mdl-badge">I have <strong>no</strong> data-badge!!!</span> <span class="mdl-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>
|
||||
|
||||
<section class="links">
|
||||
<h5>Links</h5>
|
||||
<a href="#" class="mdl-badge" data-badge="10">Hello</a>
|
||||
<a href="#" class="mdl-badge" data-badge="1">Hello</a>
|
||||
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
|
||||
|
||||
<a href="#" class="mdl-badge" data-badge="10">Hallo</a>
|
||||
<a href="#" class="mdl-badge" data-badge="1">Hallo</a>
|
||||
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
|
||||
|
||||
<div class="dark">
|
||||
<a href="#" class="mdl-badge" data-badge="1">Simulate header</a>
|
||||
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
|
||||
</div>
|
||||
<div class="fontawsom">
|
||||
<a href="#">
|
||||
<i class="fa fa-user-secret"></i><span class="mdl-badge" data-badge="1">Test</span>
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<i class="fa fa-exclamation-circle"></i><span class="mdl-badge" data-badge="10">Test</span>
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<i class="fa fa-heartbeat"></i><span class="mdl-badge" data-badge="42"></span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="dark">
|
||||
<a href="#" class="mdl-badge" data-badge="1">Simulate header</a>
|
||||
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -17,99 +17,79 @@
|
|||
@import "../material-design-lite";
|
||||
|
||||
.demo-page--badge {
|
||||
section {
|
||||
h5 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
margin-bottom: 30px;
|
||||
section {
|
||||
h5 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
div.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
div.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
background : #eee;
|
||||
padding : 10px 10px 0 10px;
|
||||
height : 40px;
|
||||
border-radius: 5px;
|
||||
background: #eee;
|
||||
padding: 10px 10px 0 10px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
|
||||
.wrapper {
|
||||
flex-grow: 1;
|
||||
.wrapper {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.icon {
|
||||
background-color : transparent;
|
||||
&.mdl-badge {
|
||||
opacity: 1;
|
||||
}
|
||||
border : none;
|
||||
display : inline-block;
|
||||
height : 21px;
|
||||
margin : 10px 25px 15px 25px;
|
||||
opacity : .7;
|
||||
outline : none;
|
||||
padding : 0;
|
||||
position : relative;
|
||||
width : 21px;
|
||||
|
||||
&:hover {
|
||||
opacity : 1;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
background-color : transparent;
|
||||
&.mdl-badge {
|
||||
opacity: 1;
|
||||
}
|
||||
border: none;
|
||||
display: inline-block;
|
||||
height: 21px;
|
||||
margin: 10px 25px 15px 25px;
|
||||
opacity: .7;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 21px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 25px;
|
||||
.links {
|
||||
margin-top: 25px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dark {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
|
||||
margin: 5px 0;
|
||||
padding: 15px;
|
||||
background-color: $layout-header-bg-color;;
|
||||
a {
|
||||
color: white;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fontawsom {
|
||||
margin-top: 25px;
|
||||
a, a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-size: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dark {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
|
||||
.button-block {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
padding: 15px;
|
||||
background-color: $layout-header-bg-color;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue