Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Implement labels

Browse source
This commit is contained in:
Paul Adam Davis 2014-08-12 15:27:22 +01:00
parent 58e4d47e08
commit ad26ed39b7
3 changed files with 126 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
core/client/assets/sass/patterns/labels.scss Normal file
View file

@ -0,0 +1,81 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 300;
line-height: 1;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
// [converter] extracted a& to a.label
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: -1px;
}
}
h1, h2, h3, h4, h5, h6 {
.label {
display: inline-block;
padding: 0.2em 0.5em 0.25em;
top: -0.18em;
position: relative;
line-height: 70%;
font-size: 70%;
}
}
// Add hover effects, but only for links
a.label {
&:hover,
&:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
}
}
// Colors
@mixin label-variant($text-color, $bg-color) {
background-color: $bg-color;
color: $text-color;
&[href] {
color: $text-color;
&:hover,
&:focus {
background-color: darken($bg-color, 10%);
}
}
}
.label-default {
@include label-variant(#fff, #A1ADB3);
}
.label-alt {
@include label-variant(#fff, #666);
}
.label-blue {
@include label-variant(#fff, $blue);
}
.label-green {
@include label-variant(#fff, $green);
}
.label-red {
@include label-variant(#fff, $red);
}

1
core/client/assets/sass/screen.scss
View file

@ -26,6 +26,7 @@
@import "patterns/_shame"; // TODO: Remove
@import "patterns/forms";
@import "patterns/buttons";
@import "patterns/labels";
@import "patterns/tables";

44
core/client/docs/labels.html Normal file
View file

@ -0,0 +1,44 @@
---
layout: default
title: Ghost UI · Making publishing beautiful.
---
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>
<section class="page-content">
<h3>Labels In Headers</h3>
<h1>Heading 1 <span class="label label-default">New</span></h1>
<h2>Heading 2 <span class="label label-default">New</span></h2>
<h3>Heading 3 <span class="label label-default">New</span></h3>
<h4>Heading 4 <span class="label label-default">New</span></h4>
<h5>Heading 5 <span class="label label-default">New</span></h5>
<h6>Heading 6 <span class="label label-default">New</span></h6>
<hr>
<h3>Span Labels</h3>
<span class="label label-default">Default</span>
<span class="label label-alt">Alt</span>
<span class="label label-blue">Blue</span>
<span class="label label-green">Green</span>
<span class="label label-red">Red</span>
<hr>
<h3>Links as Labels</h3>
<a href="#" class="label label-default">Default</a>
<a href="#" class="label label-alt">Alt</a>
<a href="#" class="label label-blue">Blue</a>
<a href="#" class="label label-green">Green</a>
<a href="#" class="label label-red">Red</a>
<hr>
<h3>Labels in a Paragraph</h3>
<p>Lorem ipsum dolor sit amet, consectetur <span class="label label-red">Lorem</span> adipisicing elit. Voluptate provident ad perferendis fugiat saepe consequuntur, aspernatur quod eveniet accusantium excepturi, ut omnis. Fugiat excepturi, quae, nemo aut maxime commodi, ullam distinctio porro, culpa quisquam optio. Consectetur voluptatem culpa cupiditate numquam nihil aut, blanditiis dignissimos. Repellat iure odit dicta dignissimos, ex rerum, alias fugit, molestiae eaque quibusdam sint dolor quisquam nesciunt illum!</p>
</section>