richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

begin importing font-awesome

pull/80/head
jlukic 11 years ago
parent
008d6d20e1
commit
a194e147b6
4 changed files with 392 additions and 21 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 366
      node/src/documents/elements/icon.html
  2. 38
      node/src/documents/modules/popup.html
  3. 4
      node/src/files/stylesheets/semantic.css
  4. 5
      node/src/layouts/default.html.eco

366
node/src/documents/elements/icon.html
View File

@ -34,6 +34,372 @@ type : 'UI Element'
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
</div>
<h4 class="ui header">Font Awesome</h4>
<p>Semantic includes a complete port of font awesome. The amazing font designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a></p>
<div class="ui eight column grid">
<div class="column"><i class="icon adjust"></i>adjust</div>
<div class="column"><i class="icon adn"></i>adn</div>
<div class="column"><i class="icon align center"></i>align center</div>
<div class="column"><i class="icon align justify"></i>align justify</div>
<div class="column"><i class="icon align left"></i>align left</div>
<div class="column"><i class="icon align right"></i>align right</div>
<div class="column"><i class="icon ambulance"></i>ambulance</div>
<div class="column"><i class="icon anchor"></i>anchor</div>
<div class="column"><i class="icon android"></i>android</div>
<div class="column"><i class="icon angle down"></i>angle down</div>
<div class="column"><i class="icon angle left"></i>angle left</div>
<div class="column"><i class="icon angle right"></i>angle right</div>
<div class="column"><i class="icon angle up"></i>angle up</div>
<div class="column"><i class="icon apple"></i>apple</div>
<div class="column"><i class="icon archive"></i>archive</div>
<div class="column"><i class="icon arrow down"></i>arrow down</div>
<div class="column"><i class="icon arrow left"></i>arrow left</div>
<div class="column"><i class="icon arrow right"></i>arrow right</div>
<div class="column"><i class="icon arrow up"></i>arrow up</div>
<div class="column"><i class="icon asterisk"></i>asterisk</div>
<div class="column"><i class="icon backward"></i>backward</div>
<div class="column"><i class="icon ban circle"></i>ban circle</div>
<div class="column"><i class="icon bar chart"></i>bar chart</div>
<div class="column"><i class="icon barcode"></i>barcode</div>
<div class="column"><i class="icon beaker"></i>beaker</div>
<div class="column"><i class="icon beer"></i>beer</div>
<div class="column"><i class="icon bell alternate"></i>bell alternate</div>
<div class="column"><i class="icon bell"></i>bell</div>
<div class="column"><i class="icon bitbucket sign"></i>bitbucket sign</div>
<div class="column"><i class="icon bitbucket"></i>bitbucket</div>
<div class="column"><i class="icon bitcoin"></i>bitcoin</div>
<div class="column"><i class="icon bold"></i>bold</div>
<div class="column"><i class="icon bolt"></i>bolt</div>
<div class="column"><i class="icon book"></i>book</div>
<div class="column"><i class="icon bookmark empty"></i>bookmark empty</div>
<div class="column"><i class="icon bookmark"></i>bookmark</div>
<div class="column"><i class="icon briefcase"></i>briefcase</div>
<div class="column"><i class="icon bug"></i>bug</div>
<div class="column"><i class="icon building"></i>building</div>
<div class="column"><i class="icon bullhorn"></i>bullhorn</div>
<div class="column"><i class="icon bullseye"></i>bullseye</div>
<div class="column"><i class="icon calendar empty"></i>calendar empty</div>
<div class="column"><i class="icon calendar"></i>calendar</div>
<div class="column"><i class="icon camera retro"></i>camera retro</div>
<div class="column"><i class="icon camera"></i>camera</div>
<div class="column"><i class="icon caret down"></i>caret down</div>
<div class="column"><i class="icon caret left"></i>caret left</div>
<div class="column"><i class="icon caret right"></i>caret right</div>
<div class="column"><i class="icon caret up"></i>caret up</div>
<div class="column"><i class="icon certificate"></i>certificate</div>
<div class="column"><i class="icon check minus"></i>check minus</div>
<div class="column"><i class="icon check sign"></i>check sign</div>
<div class="column"><i class="icon check"></i>check</div>
<div class="column"><i class="icon chevron down"></i>chevron down</div>
<div class="column"><i class="icon chevron left"></i>chevron left</div>
<div class="column"><i class="icon chevron right"></i>chevron right</div>
<div class="column"><i class="icon chevron sign down"></i>chevron sign down</div>
<div class="column"><i class="icon chevron sign left"></i>chevron sign left</div>
<div class="column"><i class="icon chevron sign right"></i>chevron sign right</div>
<div class="column"><i class="icon chevron sign up"></i>chevron sign up</div>
<div class="column"><i class="icon chevron up"></i>chevron up</div>
<div class="column"><i class="icon circle down arrow"></i>circle down arrow</div>
<div class="column"><i class="icon circle arrow left"></i>circle arrow left</div>
<div class="column"><i class="icon circle arrow right"></i>circle arrow right</div>
<div class="column"><i class="icon circle arrow up"></i>circle arrow up</div>
<div class="column"><i class="icon circle blank"></i>circle blank</div>
<div class="column"><i class="icon circle"></i>circle</div>
<div class="column"><i class="icon cloud download"></i>cloud download</div>
<div class="column"><i class="icon cloud upload"></i>cloud upload</div>
<div class="column"><i class="icon cloud"></i>cloud</div>
<div class="column"><i class="icon code fork"></i>code fork</div>
<div class="column"><i class="icon code"></i>code</div>
<div class="column"><i class="icon coffee"></i>coffee</div>
<div class="column"><i class="icon collapse alternate"></i>collapse alternate</div>
<div class="column"><i class="icon collapse top"></i>collapse top</div>
<div class="column"><i class="icon collapse"></i>collapse</div>
<div class="column"><i class="icon columns"></i>columns</div>
<div class="column"><i class="icon comment alternate"></i>comment alternate</div>
<div class="column"><i class="icon comment"></i>comment</div>
<div class="column"><i class="icon comments alternate"></i>comments alternate</div>
<div class="column"><i class="icon comments"></i>comments</div>
<div class="column"><i class="icon compass"></i>compass</div>
<div class="column"><i class="icon copy"></i>copy</div>
<div class="column"><i class="icon credit card"></i>credit card</div>
<div class="column"><i class="icon crop"></i>crop</div>
<div class="column"><i class="icon css3"></i>css3</div>
<div class="column"><i class="icon cut"></i>cut</div>
<div class="column"><i class="icon dashboard"></i>dashboard</div>
<div class="column"><i class="icon desktop"></i>desktop</div>
<div class="column"><i class="icon dollar"></i>dollar</div>
<div class="column"><i class="icon double angle down"></i>double angle down</div>
<div class="column"><i class="icon double angle left"></i>double angle left</div>
<div class="column"><i class="icon double angle right"></i>double angle right</div>
<div class="column"><i class="icon double angle up"></i>double angle up</div>
<div class="column"><i class="icon download alternate"></i>download alternate</div>
<div class="column"><i class="icon download"></i>download</div>
<div class="column"><i class="icon dribbble"></i>dribbble</div>
<div class="column"><i class="icon dropbox"></i>dropbox</div>
<div class="column"><i class="icon edit sign"></i>edit sign</div>
<div class="column"><i class="icon edit"></i>edit</div>
<div class="column"><i class="icon eject"></i>eject</div>
<div class="column"><i class="icon ellipsis horizontal"></i>ellipsis horizontal</div>
<div class="column"><i class="icon ellipsis vertical"></i>ellipsis vertical</div>
<div class="column"><i class="icon envelope alternate"></i>envelope alternate</div>
<div class="column"><i class="icon envelope"></i>envelope</div>
<div class="column"><i class="icon eraser"></i>eraser</div>
<div class="column"><i class="icon euro"></i>euro</div>
<div class="column"><i class="icon exchange"></i>exchange</div>
<div class="column"><i class="icon exclamation sign"></i>exclamation sign</div>
<div class="column"><i class="icon exclamation"></i>exclamation</div>
<div class="column"><i class="icon expand alternate"></i>expand alternate</div>
<div class="column"><i class="icon expand"></i>expand</div>
<div class="column"><i class="icon external link sign"></i>external link sign</div>
<div class="column"><i class="icon external link"></i>external link</div>
<div class="column"><i class="icon eye close"></i>eye close</div>
<div class="column"><i class="icon eye open"></i>eye open</div>
<div class="column"><i class="icon facebook sign"></i>facebook sign</div>
<div class="column"><i class="icon facebook"></i>facebook</div>
<div class="column"><i class="icon facetime video"></i>facetime video</div>
<div class="column"><i class="icon fast backward"></i>fast backward</div>
<div class="column"><i class="icon fast forward"></i>fast forward</div>
<div class="column"><i class="icon female"></i>female</div>
<div class="column"><i class="icon fighter jet"></i>fighter jet</div>
<div class="column"><i class="icon file alternate"></i>file alternate</div>
<div class="column"><i class="icon file text alternate"></i>file text alternate</div>
<div class="column"><i class="icon file text"></i>file text</div>
<div class="column"><i class="icon file"></i>file</div>
<div class="column"><i class="icon film"></i>film</div>
<div class="column"><i class="icon filter"></i>filter</div>
<div class="column"><i class="icon fire extinguisher"></i>fire extinguisher</div>
<div class="column"><i class="icon fire"></i>fire</div>
<div class="column"><i class="icon flag alternate"></i>flag alternate</div>
<div class="column"><i class="icon flag checkered"></i>flag checkered</div>
<div class="column"><i class="icon flag"></i>flag</div>
<div class="column"><i class="icon flickr"></i>flickr</div>
<div class="column"><i class="icon folder close alternate"></i>folder close alternate</div>
<div class="column"><i class="icon folder close"></i>folder close</div>
<div class="column"><i class="icon folder open alternate"></i>folder open alternate</div>
<div class="column"><i class="icon folder open"></i>folder open</div>
<div class="column"><i class="icon font"></i>font</div>
<div class="column"><i class="icon food"></i>food</div>
<div class="column"><i class="icon forward"></i>forward</div>
<div class="column"><i class="icon foursquare"></i>foursquare</div>
<div class="column"><i class="icon frown"></i>frown</div>
<div class="column"><i class="icon fullscreen"></i>fullscreen</div>
<div class="column"><i class="icon gamepad"></i>gamepad</div>
<div class="column"><i class="icon gbp"></i>gbp</div>
<div class="column"><i class="icon gear"></i>gear</div>
<div class="column"><i class="icon gears"></i>gears</div>
<div class="column"><i class="icon gift"></i>gift</div>
<div class="column"><i class="icon github alternate"></i>github alternate</div>
<div class="column"><i class="icon github sign"></i>github sign</div>
<div class="column"><i class="icon github"></i>github</div>
<div class="column"><i class="icon gittip"></i>gittip</div>
<div class="column"><i class="icon glass"></i>glass</div>
<div class="column"><i class="icon globe"></i>globe</div>
<div class="column"><i class="icon google plus sign"></i>google plus sign</div>
<div class="column"><i class="icon google plus"></i>google plus</div>
<div class="column"><i class="icon group"></i>group</div>
<div class="column"><i class="icon h sign"></i>h sign</div>
<div class="column"><i class="icon hand down"></i>hand down</div>
<div class="column"><i class="icon hand left"></i>hand left</div>
<div class="column"><i class="icon hand right"></i>hand right</div>
<div class="column"><i class="icon hand up"></i>hand up</div>
<div class="column"><i class="icon hdd"></i>hdd</div>
<div class="column"><i class="icon headphones"></i>headphones</div>
<div class="column"><i class="icon heart empty"></i>heart empty</div>
<div class="column"><i class="icon heart"></i>heart</div>
<div class="column"><i class="icon home"></i>home</div>
<div class="column"><i class="icon hospital"></i>hospital</div>
<div class="column"><i class="icon html5"></i>html5</div>
<div class="column"><i class="icon inbox"></i>inbox</div>
<div class="column"><i class="icon indent left"></i>indent left</div>
<div class="column"><i class="icon indent right"></i>indent right</div>
<div class="column"><i class="icon info sign"></i>info sign</div>
<div class="column"><i class="icon info"></i>info</div>
<div class="column"><i class="icon instagram"></i>instagram</div>
<div class="column"><i class="icon italic"></i>italic</div>
<div class="column"><i class="icon key"></i>key</div>
<div class="column"><i class="icon keyboard"></i>keyboard</div>
<div class="column"><i class="icon laptop"></i>laptop</div>
<div class="column"><i class="icon leaf"></i>leaf</div>
<div class="column"><i class="icon legal"></i>legal</div>
<div class="column"><i class="icon lemon"></i>lemon</div>
<div class="column"><i class="icon level down"></i>level down</div>
<div class="column"><i class="icon level up"></i>level up</div>
<div class="column"><i class="icon lightbulb"></i>lightbulb</div>
<div class="column"><i class="icon link"></i>link</div>
<div class="column"><i class="icon linkedin sign"></i>linkedin sign</div>
<div class="column"><i class="icon linkedin"></i>linkedin</div>
<div class="column"><i class="icon linux"></i>linux</div>
<div class="column"><i class="icon list alternate"></i>list alternate</div>
<div class="column"><i class="icon list ol"></i>list ol</div>
<div class="column"><i class="icon list ul"></i>list ul</div>
<div class="column"><i class="icon list"></i>list</div>
<div class="column"><i class="icon location arrow"></i>location arrow</div>
<div class="column"><i class="icon lock"></i>lock</div>
<div class="column"><i class="icon long arrow down"></i>long arrow down</div>
<div class="column"><i class="icon long arrow left"></i>long arrow left</div>
<div class="column"><i class="icon long arrow right"></i>long arrow right</div>
<div class="column"><i class="icon long arrow up"></i>long arrow up</div>
<div class="column"><i class="icon magic"></i>magic</div>
<div class="column"><i class="icon magnet"></i>magnet</div>
<div class="column"><i class="icon share alternate"></i>share alternate</div>
<div class="column"><i class="icon mail reply all"></i>mail reply all</div>
<div class="column"><i class="icon reply"></i>reply</div>
<div class="column"><i class="icon male"></i>male</div>
<div class="column"><i class="icon map marker"></i>map marker</div>
<div class="column"><i class="icon maxcdn"></i>maxcdn</div>
<div class="column"><i class="icon medkit"></i>medkit</div>
<div class="column"><i class="icon meh"></i>meh</div>
<div class="column"><i class="icon microphone off"></i>microphone off</div>
<div class="column"><i class="icon microphone"></i>microphone</div>
<div class="column"><i class="icon minus sign alternate"></i>minus sign alternate</div>
<div class="column"><i class="icon minus sign"></i>minus sign</div>
<div class="column"><i class="icon minus"></i>minus</div>
<div class="column"><i class="icon mobile phone"></i>mobile phone</div>
<div class="column"><i class="icon money"></i>money</div>
<div class="column"><i class="icon moon"></i>moon</div>
<div class="column"><i class="icon move"></i>move</div>
<div class="column"><i class="icon music"></i>music</div>
<div class="column"><i class="icon ok circle"></i>ok circle</div>
<div class="column"><i class="icon ok sign"></i>ok sign</div>
<div class="column"><i class="icon ok"></i>ok</div>
<div class="column"><i class="icon paper clip"></i>paper clip</div>
<div class="column"><i class="icon paste"></i>paste</div>
<div class="column"><i class="icon pause"></i>pause</div>
<div class="column"><i class="icon pencil"></i>pencil</div>
<div class="column"><i class="icon phone sign"></i>phone sign</div>
<div class="column"><i class="icon phone"></i>phone</div>
<div class="column"><i class="icon picture"></i>picture</div>
<div class="column"><i class="icon pinterest sign"></i>pinterest sign</div>
<div class="column"><i class="icon pinterest"></i>pinterest</div>
<div class="column"><i class="icon plane"></i>plane</div>
<div class="column"><i class="icon play circle"></i>play circle</div>
<div class="column"><i class="icon play sign"></i>play sign</div>
<div class="column"><i class="icon play"></i>play</div>
<div class="column"><i class="icon plus sign alternate"></i>plus sign alternate</div>
<div class="column"><i class="icon plus sign"></i>plus sign</div>
<div class="column"><i class="icon plus"></i>plus</div>
<div class="column"><i class="icon off"></i>off</div>
<div class="column"><i class="icon print"></i>print</div>
<div class="column"><i class="icon pushpin"></i>pushpin</div>
<div class="column"><i class="icon puzzle piece"></i>puzzle piece</div>
<div class="column"><i class="icon qrcode"></i>qrcode</div>
<div class="column"><i class="icon question sign"></i>question sign</div>
<div class="column"><i class="icon question"></i>question</div>
<div class="column"><i class="icon quote left"></i>quote left</div>
<div class="column"><i class="icon quote right"></i>quote right</div>
<div class="column"><i class="icon random"></i>random</div>
<div class="column"><i class="icon refresh"></i>refresh</div>
<div class="column"><i class="icon remove circle"></i>remove circle</div>
<div class="column"><i class="icon remove sign"></i>remove sign</div>
<div class="column"><i class="icon remove"></i>remove</div>
<div class="column"><i class="icon cny"></i>cny</div>
<div class="column"><i class="icon renren"></i>renren</div>
<div class="column"><i class="icon reorder"></i>reorder</div>
<div class="column"><i class="icon reply all"></i>reply all</div>
<div class="column"><i class="icon resize full"></i>resize full</div>
<div class="column"><i class="icon resize horizontal"></i>resize horizontal</div>
<div class="column"><i class="icon resize small"></i>resize small</div>
<div class="column"><i class="icon resize vertical"></i>resize vertical</div>
<div class="column"><i class="icon retweet"></i>retweet</div>
<div class="column"><i class="icon road"></i>road</div>
<div class="column"><i class="icon rocket"></i>rocket</div>
<div class="column"><i class="icon undo"></i>undo</div>
<div class="column"><i class="icon repeat"></i>repeat</div>
<div class="column"><i class="icon rss sign"></i>rss sign</div>
<div class="column"><i class="icon rss"></i>rss</div>
<div class="column"><i class="icon inr"></i>inr</div>
<div class="column"><i class="icon save"></i>save</div>
<div class="column"><i class="icon screenshot"></i>screenshot</div>
<div class="column"><i class="icon search"></i>search</div>
<div class="column"><i class="icon share sign"></i>share sign</div>
<div class="column"><i class="icon share"></i>share</div>
<div class="column"><i class="icon shield"></i>shield</div>
<div class="column"><i class="icon shopping cart"></i>shopping cart</div>
<div class="column"><i class="icon sign blank"></i>sign blank</div>
<div class="column"><i class="icon signal"></i>signal</div>
<div class="column"><i class="icon signin"></i>signin</div>
<div class="column"><i class="icon signout"></i>signout</div>
<div class="column"><i class="icon sitemap"></i>sitemap</div>
<div class="column"><i class="icon skype"></i>skype</div>
<div class="column"><i class="icon smile"></i>smile</div>
<div class="column"><i class="icon sort alphabet alternate"></i>sort alphabet alternate</div>
<div class="column"><i class="icon sort alphabet"></i>sort alphabet</div>
<div class="column"><i class="icon sort attributes alternate"></i>sort attributes alternate</div>
<div class="column"><i class="icon sort attributes"></i>sort attributes</div>
<div class="column"><i class="icon sort order alternate"></i>sort order alternate</div>
<div class="column"><i class="icon sort order"></i>sort order</div>
<div class="column"><i class="icon sort descending"></i>sort descending</div>
<div class="column"><i class="icon sort ascending"></i>sort ascending</div>
<div class="column"><i class="icon sort"></i>sort</div>
<div class="column"><i class="icon spinner"></i>spinner</div>
<div class="column"><i class="icon stackexchange"></i>stackexchange</div>
<div class="column"><i class="icon star empty"></i>star empty</div>
<div class="column"><i class="icon star half empty"></i>star half empty</div>
<div class="column"><i class="icon star half"></i>star half</div>
<div class="column"><i class="icon star"></i>star</div>
<div class="column"><i class="icon step backward"></i>step backward</div>
<div class="column"><i class="icon step forward"></i>step forward</div>
<div class="column"><i class="icon stethoscope"></i>stethoscope</div>
<div class="column"><i class="icon stop"></i>stop</div>
<div class="column"><i class="icon strikethrough"></i>strikethrough</div>
<div class="column"><i class="icon subscript"></i>subscript</div>
<div class="column"><i class="icon suitcase"></i>suitcase</div>
<div class="column"><i class="icon sun"></i>sun</div>
<div class="column"><i class="icon superscript"></i>superscript</div>
<div class="column"><i class="icon table"></i>table</div>
<div class="column"><i class="icon tablet"></i>tablet</div>
<div class="column"><i class="icon tag"></i>tag</div>
<div class="column"><i class="icon tags"></i>tags</div>
<div class="column"><i class="icon tasks"></i>tasks</div>
<div class="column"><i class="icon terminal"></i>terminal</div>
<div class="column"><i class="icon text height"></i>text height</div>
<div class="column"><i class="icon text width"></i>text width</div>
<div class="column"><i class="icon th large"></i>th large</div>
<div class="column"><i class="icon th list"></i>th list</div>
<div class="column"><i class="icon th"></i>th</div>
<div class="column"><i class="icon thumbs down alternate"></i>thumbs down alternate</div>
<div class="column"><i class="icon thumbs down"></i>thumbs down</div>
<div class="column"><i class="icon thumbs up alternate"></i>thumbs up alternate</div>
<div class="column"><i class="icon thumbs up"></i>thumbs up</div>
<div class="column"><i class="icon ticket"></i>ticket</div>
<div class="column"><i class="icon time"></i>time</div>
<div class="column"><i class="icon tint"></i>tint</div>
<div class="column"><i class="icon trash"></i>trash</div>
<div class="column"><i class="icon trello"></i>trello</div>
<div class="column"><i class="icon trophy"></i>trophy</div>
<div class="column"><i class="icon truck"></i>truck</div>
<div class="column"><i class="icon tumblr sign"></i>tumblr sign</div>
<div class="column"><i class="icon tumblr"></i>tumblr</div>
<div class="column"><i class="icon twitter sign"></i>twitter sign</div>
<div class="column"><i class="icon twitter"></i>twitter</div>
<div class="column"><i class="icon umbrella"></i>umbrella</div>
<div class="column"><i class="icon check empty"></i>check empty</div>
<div class="column"><i class="icon underline"></i>underline</div>
<div class="column"><i class="icon unlink"></i>unlink</div>
<div class="column"><i class="icon unlock alternate"></i>unlock alternate</div>
<div class="column"><i class="icon unlock"></i>unlock</div>
<div class="column"><i class="icon upload alternate"></i>upload alternate</div>
<div class="column"><i class="icon upload"></i>upload</div>
<div class="column"><i class="icon user md"></i>user md</div>
<div class="column"><i class="icon user"></i>user</div>
<div class="column"><i class="icon vk"></i>vk</div>
<div class="column"><i class="icon volume down"></i>volume down</div>
<div class="column"><i class="icon volume off"></i>volume off</div>
<div class="column"><i class="icon volume up"></i>volume up</div>
<div class="column"><i class="icon warning sign"></i>warning sign</div>
<div class="column"><i class="icon weibo"></i>weibo</div>
<div class="column"><i class="icon windows"></i>windows</div>
<div class="column"><i class="icon krw"></i>krw</div>
<div class="column"><i class="icon wrench"></i>wrench</div>
<div class="column"><i class="icon xing sign"></i>xing sign</div>
<div class="column"><i class="icon xing"></i>xing</div>
<div class="column"><i class="icon jpy"></i>jpy</div>
<div class="column"><i class="icon youtube play"></i>youtube play</div>
<div class="column"><i class="icon youtube sign"></i>youtube sign</div>
<div class="column"><i class="icon youtube"></i>youtube</div>
<div class="column"><i class="icon zoom in"></i>zoom in</div>
<div class="column"><i class="icon zoom out"></i>zoom out</div>
</div>
<div class="ui ignored green message">
This icon set was built using a custom combination of fonts using the amazing web tool <a href="http://fontello.com/">Fontello</a>
</div>

38
node/src/documents/modules/popup.html
View File

@ -33,7 +33,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<i class="sketchy circular question icon link" data-content="Hello, I am a pop-up."></i>
<i class="circular question icon link" data-content="Hello, I am a pop-up."></i>
</div>
<h2 class="ui dividing header">Variations</h2>
@ -41,14 +41,14 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Size</h4>
<p>A popup can be large or small</p>
<i class="sketchy circular question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="sketchy circular question icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
<i class="circular question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="circular question 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="sketchy circular question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
<i class="circular question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
@ -64,7 +64,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 sketchy circular question circle"></i>
<i class="icon circular question circle"></i>
<div class="content">
<div class="header">Specifying Content</div>
<p>Popups can specify content in three ways:<p>
@ -76,7 +76,7 @@ type : 'UI Module'
</div>
</div>
<div class="code" data-type="html">
<i class="sketchy circular question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
<i class="circular question 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>
@ -84,32 +84,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="sketchy circular question icon link" data-content="Top Left" data-position="top left"></i>
<i class="sketchy circular question icon link" data-content="Top Center" data-position="top center"></i>
<i class="sketchy circular question icon link" data-content="Top Right" data-position="top right"></i>
<i class="sketchy circular question icon link" data-content="Left Center" data-position="left center"></i>
<i class="sketchy circular question icon link" data-content="Right Center" data-position="right center"></i>
<i class="sketchy circular question icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="sketchy circular question icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="sketchy circular question icon link" data-content="Bottom Right" data-position="bottom right"></i>
<i class="circular question icon link" data-content="Top Left" data-position="top left"></i>
<i class="circular question icon link" data-content="Top Center" data-position="top center"></i>
<i class="circular question icon link" data-content="Top Right" data-position="top right"></i>
<i class="circular question icon link" data-content="Left Center" data-position="left center"></i>
<i class="circular question icon link" data-content="Right Center" data-position="right center"></i>
<i class="circular question icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="circular question icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="circular question 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="sketchy circular question 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="circular question 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="sketchy circular question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
<i class="circular question 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="sketchy circular question icon fade link" data-content="This is a different transition"></i>
<i class="circular question icon fade link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Fade">
$('.fade.icon')
@ -119,7 +119,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="sketchy circular question icon slide link" data-content="This is a different transition"></i>
<i class="circular question 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')
@ -129,7 +129,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="sketchy circular question icon flip link" data-content="This is a different transition"></i>
<i class="circular question 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')

4
node/src/files/stylesheets/semantic.css
View File

@ -289,6 +289,10 @@ a:hover {
top: 50%;
width: 100%;
}
#example .error.masthead .container {
position: relative;
z-index: 100;
}
#example .masthead {
position: relative;
overflow: hidden;

5
node/src/layouts/default.html.eco
View File

@ -24,10 +24,12 @@
<meta name="description" content="<%= @getPreparedDescription() %>" />
<meta name="keywords" content="<%= @getPreparedKeywords() %>" />
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/icon.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/button.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/divider.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/header.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/icon.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/awesome.icon.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/image.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/input.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/elements/label.css">
@ -62,7 +64,6 @@
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/modules/dimmer.css">
<link rel="stylesheet" type="text/css" class="ui" href="/release/uncompressed/modules/transition.css">
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/fonts/sketchy.icons.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
<!--
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

Write Preview
Loading…
Cancel
Save