liquid_feedback_frontend
annotate style/mdl/badge/_badge.scss @ 1554:61d8e264d163
Set attr default value for new unit
| author | bsw |
|---|---|
| date | Wed Nov 04 17:41:20 2020 +0100 (2020-11-04) |
| parents | 32cc544d5a5b |
| children |
| rev | line source |
|---|---|
| bsw/jbe@1309 | 1 /** |
| bsw/jbe@1309 | 2 * Copyright 2015 Google Inc. All Rights Reserved. |
| bsw/jbe@1309 | 3 * |
| bsw/jbe@1309 | 4 * Licensed under the Apache License, Version 2.0 (the "License"); |
| bsw/jbe@1309 | 5 * you may not use this file except in compliance with the License. |
| bsw/jbe@1309 | 6 * You may obtain a copy of the License at |
| bsw/jbe@1309 | 7 * |
| bsw/jbe@1309 | 8 * http://www.apache.org/licenses/LICENSE-2.0 |
| bsw/jbe@1309 | 9 * |
| bsw/jbe@1309 | 10 * Unless required by applicable law or agreed to in writing, software |
| bsw/jbe@1309 | 11 * distributed under the License is distributed on an "AS IS" BASIS, |
| bsw/jbe@1309 | 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| bsw/jbe@1309 | 13 * See the License for the specific language governing permissions and |
| bsw/jbe@1309 | 14 * limitations under the License. |
| bsw/jbe@1309 | 15 */ |
| bsw/jbe@1309 | 16 |
| bsw/jbe@1309 | 17 @import "../variables"; |
| bsw/jbe@1309 | 18 |
| bsw/jbe@1309 | 19 .mdl-badge { |
| bsw/jbe@1309 | 20 position : relative; |
| bsw/jbe@1309 | 21 white-space: nowrap; |
| bsw/jbe@1309 | 22 margin-right: ($badge-size + $badge-padding); |
| bsw/jbe@1309 | 23 |
| bsw/jbe@1309 | 24 &:not([data-badge]) { |
| bsw/jbe@1309 | 25 margin-right: auto; |
| bsw/jbe@1309 | 26 } |
| bsw/jbe@1309 | 27 |
| bsw/jbe@1309 | 28 &[data-badge]:after { |
| bsw/jbe@1309 | 29 content: attr(data-badge); |
| bsw/jbe@1309 | 30 |
| bsw/jbe@1309 | 31 display: flex; |
| bsw/jbe@1309 | 32 flex-direction: row; |
| bsw/jbe@1309 | 33 flex-wrap: wrap; |
| bsw/jbe@1309 | 34 justify-content: center; |
| bsw/jbe@1309 | 35 align-content: center; |
| bsw/jbe@1309 | 36 align-items: center; |
| bsw/jbe@1309 | 37 |
| bsw/jbe@1309 | 38 position: absolute; |
| bsw/jbe@1309 | 39 top: -($badge-size / 2); |
| bsw/jbe@1309 | 40 right: -($badge-size + $badge-padding); |
| bsw/jbe@1309 | 41 |
| bsw/jbe@1309 | 42 .mdl-button & { |
| bsw/jbe@1309 | 43 top: -10px; |
| bsw/jbe@1309 | 44 right: -5px; |
| bsw/jbe@1309 | 45 } |
| bsw/jbe@1309 | 46 |
| bsw/jbe@1309 | 47 font-family: $preferred_font; |
| bsw/jbe@1309 | 48 font-weight: 600; |
| bsw/jbe@1309 | 49 font-size: $badge-font-size; |
| bsw/jbe@1309 | 50 width: $badge-size; |
| bsw/jbe@1309 | 51 height: $badge-size; |
| bsw/jbe@1309 | 52 border-radius : 50%; |
| bsw/jbe@1309 | 53 |
| bsw/jbe@1309 | 54 background: $badge-background; |
| bsw/jbe@1309 | 55 color: $badge-color; |
| bsw/jbe@1309 | 56 } |
| bsw/jbe@1309 | 57 |
| bsw/jbe@1309 | 58 &.mdl-badge--no-background { |
| bsw/jbe@1309 | 59 &[data-badge]:after { |
| bsw/jbe@1309 | 60 color: $badge-color-inverse; |
| bsw/jbe@1309 | 61 background: $badge-background-inverse; |
| bsw/jbe@1309 | 62 |
| bsw/jbe@1309 | 63 box-shadow: 0 0 1px gray; |
| bsw/jbe@1309 | 64 } |
| bsw/jbe@1309 | 65 } |
| bsw/jbe@1309 | 66 &.mdl-badge--overlap { |
| bsw/jbe@1309 | 67 margin-right: ($badge-size - $badge-overlap); |
| bsw/jbe@1309 | 68 &:after { |
| bsw/jbe@1309 | 69 right: -($badge-size - $badge-overlap); |
| bsw/jbe@1309 | 70 } |
| bsw/jbe@1309 | 71 } |
| bsw/jbe@1309 | 72 } |