Browse Source

fixes name conflict with url icon and link variation. formatting on popup module

pull/80/head
jlukic 11 years ago
parent
commit
94b7bd5d92
3 changed files with 74 additions and 74 deletions
  1. 104
      node/src/documents/elements/icon.html.eco
  2. 38
      node/src/documents/modules/popup.html.eco
  3. 6
      src/elements/icon.less

104
node/src/documents/elements/icon.html.eco

@ -56,8 +56,8 @@ type : 'UI Element'
<div class="column"><i class="dashboard icon"></i>Dashboard</div>
<div class="column"><i class="desktop icon"></i>Desktop</div>
<div class="column"><i class="empty calendar icon"></i>Empty Calendar</div>
<div class="column"><i class="external link icon"></i>External Link</div>
<div class="column"><i class="external link sign icon"></i>External Link Sign</div>
<div class="column"><i class="external url icon"></i>External URL</div>
<div class="column"><i class="external url sign icon"></i>External URL Sign</div>
<div class="column"><i class="file icon"></i>File</div>
<div class="column"><i class="file outline icon"></i>File Outline</div>
<div class="column"><i class="folder icon"></i>Folder</div>
@ -96,6 +96,7 @@ type : 'UI Element'
<div class="column"><i class="text file outline icon"></i>Text File Outline</div>
<div class="column"><i class="time icon"></i>Time</div>
<div class="column"><i class="trash icon"></i>Trash</div>
<div class="column"><i class="url icon"></i>URL</div>
<div class="column"><i class="user icon"></i>User</div>
<div class="column"><i class="users icon"></i>Users</div>
</div>
@ -114,8 +115,8 @@ type : 'UI Element'
<i class="dashboard icon"></i>
<i class="desktop icon"></i>
<i class="empty calendar icon"></i>
<i class="external link icon"></i>
<i class="external link sign icon"></i>
<i class="external url icon"></i>
<i class="external url sign icon"></i>
<i class="file icon"></i>
<i class="file outline icon"></i>
<i class="folder icon"></i>
@ -154,6 +155,7 @@ type : 'UI Element'
<i class="text file outline icon"></i>
<i class="time icon"></i>
<i class="trash icon"></i>
<i class="url icon"></i>
<i class="user icon"></i>
<i class="users icon"></i>
</div>
@ -189,7 +191,6 @@ type : 'UI Element'
<div class="column"><i class="level down icon"></i>Level Down</div>
<div class="column"><i class="level up icon"></i>Level Up</div>
<div class="column"><i class="lightbulb icon"></i>Lightbulb</div>
<div class="column"><i class="link icon"></i>Link</div>
<div class="column"><i class="off icon"></i>Off</div>
<div class="column"><i class="refresh icon"></i>Refresh</div>
<div class="column"><i class="remove circle icon"></i>Remove Circle</div>
@ -212,53 +213,52 @@ type : 'UI Element'
<div class="column"><i class="upload icon"></i>Upload</div>
</div>
<div class="existing code">
<i class="add icon"></i>
<i class="add sign box icon"></i>
<i class="add sign icon"></i>
<i class="adjust icon"></i>
<i class="bookmark empty icon"></i>
<i class="bookmark icon"></i>
<i class="cloud download icon"></i>
<i class="cloud upload icon"></i>
<i class="collapse icon"></i>
<i class="crop icon"></i>
<i class="download disk icon"></i>
<i class="download icon"></i>
<i class="edit icon"></i>
<i class="edit sign icon"></i>
<i class="empty flag icon"></i>
<i class="exchange icon"></i>
<i class="expand icon"></i>
<i class="filter icon"></i>
<i class="flag icon"></i>
<i class="fork code icon"></i>
<i class="forward mail icon"></i>
<i class="fullscreen icon"></i>
<i class="hide icon"></i>
<i class="level down icon"></i>
<i class="level up icon"></i>
<i class="lightbulb icon"></i>
<i class="link icon"></i>
<i class="off icon"></i>
<i class="refresh icon"></i>
<i class="remove circle icon"></i>
<i class="remove icon"></i>
<i class="remove sign icon"></i>
<i class="reorder icon"></i>
<i class="reply all mail icon"></i>
<i class="reply mail icon"></i>
<i class="retweet icon"></i>
<i class="save icon"></i>
<i class="screenshot icon"></i>
<i class="search icon"></i>
<i class="share icon"></i>
<i class="share sign icon"></i>
<i class="sign in icon"></i>
<i class="sign out icon"></i>
<i class="tint icon"></i>
<i class="unhide icon"></i>
<i class="upload disk icon"></i>
<i class="upload icon"></i>
<i class="add icon"></i>
<i class="add sign box icon"></i>
<i class="add sign icon"></i>
<i class="adjust icon"></i>
<i class="bookmark empty icon"></i>
<i class="bookmark icon"></i>
<i class="cloud download icon"></i>
<i class="cloud upload icon"></i>
<i class="collapse icon"></i>
<i class="crop icon"></i>
<i class="download disk icon"></i>
<i class="download icon"></i>
<i class="edit icon"></i>
<i class="edit sign icon"></i>
<i class="empty flag icon"></i>
<i class="exchange icon"></i>
<i class="expand icon"></i>
<i class="filter icon"></i>
<i class="flag icon"></i>
<i class="fork code icon"></i>
<i class="forward mail icon"></i>
<i class="fullscreen icon"></i>
<i class="hide icon"></i>
<i class="level down icon"></i>
<i class="level up icon"></i>
<i class="lightbulb icon"></i>
<i class="off icon"></i>
<i class="refresh icon"></i>
<i class="remove circle icon"></i>
<i class="remove icon"></i>
<i class="remove sign icon"></i>
<i class="reorder icon"></i>
<i class="reply all mail icon"></i>
<i class="reply mail icon"></i>
<i class="retweet icon"></i>
<i class="save icon"></i>
<i class="screenshot icon"></i>
<i class="search icon"></i>
<i class="share icon"></i>
<i class="share sign icon"></i>
<i class="sign in icon"></i>
<i class="sign out icon"></i>
<i class="tint icon"></i>
<i class="unhide icon"></i>
<i class="upload disk icon"></i>
<i class="upload icon"></i>
</div>
</div>

38
node/src/documents/modules/popup.html.eco

@ -26,7 +26,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<i class="circular help icon link" data-content="Hello, I am a pop-up."></i>
<i class="large help icon link" data-content="Hello, I am a pop-up."></i>
</div>
<h2 class="ui dividing header">Variations</h2>
@ -34,14 +34,14 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Size</h4>
<p>A popup can be large or small</p>
<i class="circular help icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="circular help icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
<i class="help icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="help icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A popup can have its colors inverted</p>
<i class="circular help icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
<i class="help icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
@ -57,7 +57,7 @@ type : 'UI Module'
<h4 class="ui header">Including metadata</h4>
<p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p>
<div class="ui info icon ignored message">
<i class="icon circular help circle"></i>
<i class="icon help circle"></i>
<div class="content">
<div class="header">Specifying Content</div>
<p>Popups can specify content in three ways:<p>
@ -69,7 +69,7 @@ type : 'UI Module'
</div>
</div>
<div class="code" data-type="html">
<i class="circular help icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
<i class="help icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
</div>
<h2 class="ui dividing header">Examples</h2>
@ -77,32 +77,32 @@ type : 'UI Module'
<div class="example segment">
<h4 class="ui header">Positioning</h4>
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
<i class="circular help icon link" data-content="Top Left" data-position="top left"></i>
<i class="circular help icon link" data-content="Top Center" data-position="top center"></i>
<i class="circular help icon link" data-content="Top Right" data-position="top right"></i>
<i class="circular help icon link" data-content="Left Center" data-position="left center"></i>
<i class="circular help icon link" data-content="Right Center" data-position="right center"></i>
<i class="circular help icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="circular help icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="circular help icon link" data-content="Bottom Right" data-position="bottom right"></i>
<i class="help icon link" data-content="Top Left" data-position="top left"></i>
<i class="help icon link" data-content="Top Center" data-position="top center"></i>
<i class="help icon link" data-content="Top Right" data-position="top right"></i>
<i class="help icon link" data-content="Left Center" data-position="left center"></i>
<i class="help icon link" data-content="Right Center" data-position="right center"></i>
<i class="help icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="help icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="help icon link" data-content="Bottom Right" data-position="bottom right"></i>
</div>
<div class="example segment">
<h4 class="ui header">Title</h4>
<p>A popup can be formatted with a title</p>
<i class="circular help icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
<i class="help icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
</div>
<div class="example segment">
<h4 class="ui header">HTML</h4>
<p>A popup can be formatted with html</p>
<i class="circular help icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
<i class="help icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
</div>
<div class="no example">
<h4 class="ui header">Transitions</h4>
<p>A popup can have different <a href="/modules/transition.html">transitions</a>. Any transition with both an in and out animation can be specified. The following are just a few examples.</p>
<i class="circular help icon fade link" data-content="This is a different transition"></i>
<i class="help icon fade link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Fade">
$('.fade.icon')
@ -112,7 +112,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="circular help icon slide link" data-content="This is a different transition"></i>
<i class="help icon slide link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Slide Up">
$('.slide.icon')
@ -122,7 +122,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="circular help icon flip link" data-content="This is a different transition"></i>
<i class="help icon flip link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Vertical Flip">
$('.flip.icon')

6
src/elements/icon.less

@ -185,8 +185,8 @@ i.icon.exchange:before { content: "\f0ec"; }
i.icon.attention:before { content: "\f06a"; }
i.icon.exclamation:before { content: "\f12a"; }
i.icon.expand:before { content: "\f116"; }
i.icon.external.link.sign:before { content: "\f14c"; }
i.icon.external.link:before { content: "\f08e"; }
i.icon.external.url.sign:before { content: "\f14c"; }
i.icon.external.url:before { content: "\f08e"; }
i.icon.facebook.sign:before { content: "\f082"; }
i.icon.facebook:before { content: "\f09a"; }
i.icon.facetime.video:before { content: "\f03d"; }
@ -261,7 +261,7 @@ i.icon.lemon:before { content: "\f094"; }
i.icon.level.down:before { content: "\f149"; }
i.icon.level.up:before { content: "\f148"; }
i.icon.lightbulb:before { content: "\f0eb"; }
i.icon.link:before { content: "\f0c1"; }
i.icon.url:before { content: "\f0c1"; }
i.icon.linkedin.sign:before { content: "\f08c"; }
i.icon.linkedin:before { content: "\f0e1"; }
i.icon.linux:before { content: "\f17c"; }

Loading…
Cancel
Save