New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use icons (or CSS) to create numbered bullets for callouts #114

Closed
mojavelinux opened this Issue Jan 25, 2013 · 5 comments

Comments

Projects
None yet
2 participants
@mojavelinux
Member

mojavelinux commented Jan 25, 2013

When the icons attribute is enabled, callout lists are not using numbered bullet icons (circles) like AsciiDoc. We should either add support for those icons, or do something with CSS that produces a similar look.

Callouts are a major feature of AsciiDoc over other lightweight markup languages, so we should give this feature high priority.

@mojavelinux

This comment has been minimized.

Show comment
Hide comment
@mojavelinux

mojavelinux Jan 25, 2013

Member

The CSS I'm thinking about is Bootstrap's badge style.

Member

mojavelinux commented Jan 25, 2013

The CSS I'm thinking about is Bootstrap's badge style.

@mojavelinux

This comment has been minimized.

Show comment
Hide comment
@mojavelinux

mojavelinux Jan 27, 2013

Member

Here's the styles that would give us pure CSS numbered bullets:

.callout-number {
  display: inline-block;
  color: white;
  background-color: black;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  font-family: Arial;
}

Here's how it would be used:

<b class="callout-number">1</b>

As of yet we don't have a built-in stylesheet for Asciidoctor, but we could lay down the markup and assume the stylesheet will be there to make it pretty. (I used the <b> tag to retain some compliance w/ AsciiDoc output).

This would be activated by the following attribute:

:icons: awesome
Member

mojavelinux commented Jan 27, 2013

Here's the styles that would give us pure CSS numbered bullets:

.callout-number {
  display: inline-block;
  color: white;
  background-color: black;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  font-family: Arial;
}

Here's how it would be used:

<b class="callout-number">1</b>

As of yet we don't have a built-in stylesheet for Asciidoctor, but we could lay down the markup and assume the stylesheet will be there to make it pretty. (I used the <b> tag to retain some compliance w/ AsciiDoc output).

This would be activated by the following attribute:

:icons: awesome

@ghost ghost assigned mojavelinux Aug 8, 2013

@llaville

This comment has been minimized.

Show comment
Hide comment
@llaville

llaville Dec 20, 2013

@mojavelinux Hello Dan,

Thanks for this cool idea. I've implemented myself in the AsciiDoc-Bootstrap backend : my gift !

Have a nice Christmas hollidays
Laurent

llaville commented Dec 20, 2013

@mojavelinux Hello Dan,

Thanks for this cool idea. I've implemented myself in the AsciiDoc-Bootstrap backend : my gift !

Have a nice Christmas hollidays
Laurent

@mojavelinux

This comment has been minimized.

Show comment
Hide comment
@mojavelinux

mojavelinux Dec 21, 2013

Member

Great job @llaville! You are helping AsciiDoc look really nice!

Member

mojavelinux commented Dec 21, 2013

Great job @llaville! You are helping AsciiDoc look really nice!

@mojavelinux

This comment has been minimized.

Show comment
Hide comment
@mojavelinux

mojavelinux May 18, 2014

Member

This was resolved by in 0.1.3.

Member

mojavelinux commented May 18, 2014

This was resolved by in 0.1.3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment