From e3fba3dcd493f609e107435867c4a67cb7ee420f Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Sat, 21 Nov 2020 14:13:41 +0100 Subject: import materialize sass sources instead of relying on npm --- sass/components/_badges.scss | 55 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 sass/components/_badges.scss (limited to 'sass/components/_badges.scss') diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss new file mode 100644 index 0000000..ffed87d --- /dev/null +++ b/sass/components/_badges.scss @@ -0,0 +1,55 @@ +// Badges +span.badge { + min-width: 3rem; + padding: 0 6px; + margin-left: 14px; + text-align: center; + font-size: 1rem; + line-height: $badge-height; + height: $badge-height; + color: color('grey', 'darken-1'); + float: right; + box-sizing: border-box; + + &.new { + font-weight: 300; + font-size: 0.8rem; + color: #fff; + background-color: $badge-bg-color; + border-radius: 2px; + } + &.new:after { + content: " new"; + } + + &[data-badge-caption]::after { + content: " " attr(data-badge-caption); + } +} + +// Special cases +nav ul a span.badge { + display: inline-block; + float: none; + margin-left: 4px; + line-height: $badge-height; + height: $badge-height; + -webkit-font-smoothing: auto; +} + +// Line height centering +.collection-item span.badge { + margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2}); +} +.collapsible span.badge { + margin-left: auto; +} +.sidenav span.badge { + margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2}); +} + +table span.badge { + display: inline-block; + float: none; + margin-left: auto; +} -- cgit v1.2.3