diff --git a/src/badge/_badge.scss b/src/badge/_badge.scss index abc02b3c..fb000268 100644 --- a/src/badge/_badge.scss +++ b/src/badge/_badge.scss @@ -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; } + } } diff --git a/src/badge/demo.html b/src/badge/demo.html index b909ad54..a189a421 100644 --- a/src/badge/demo.html +++ b/src/badge/demo.html @@ -14,84 +14,47 @@
-
-
-
-
- - - - -
-
+
+
+
+
+
-
-
- - - - -
-
+
+
+
-
-
- - - - -
-
+
+
+
+
+
+
+
+
-
-
- - - - -
-
-
-

- Hint: Check your log and you'll see the values for the first badge... -

-
+
+
Text
+ I am in a span + Me too +
I am in a div, but that makes no sense here
+ I have no data-badge! But I have one +

Right margin is set automatically, top margin is left to you - it depends too much on the situation

+
-
-
Text
- I am in span - Me too -
Im am in a div, but makes no sense here
- I have no data-badge!!! But I have one -

Right margin is set automatically, top margin is left to you - it depends to much on the situation

-
+
+
Links
-
-
Links
+ Hello + Hello + no background - Hallo - Hallo - no background - -
- Simulate header - no background -
-
- - Test - - - - Test - - - - - -
-
+
+ Simulate header + no background +
+
diff --git a/src/badge/demo.scss b/src/badge/demo.scss index e484a8d5..dda88626 100644 --- a/src/badge/demo.scss +++ b/src/badge/demo.scss @@ -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; + } } + } } - - -