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

Update some examples

pull/1785/head
jlukic 10 years ago
parent
967a03b99b
commit
859a36a7e0
3 changed files with 111 additions and 120 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      examples/feed.css
  2. 185
      examples/feed.html
  3. 3
      examples/grid.css

43
examples/feed.css
View File

@ -2,30 +2,6 @@
Global
*******************************/
html,
body {
font-size: 15px;
height: 100%;
}
body {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background: #FFFFFF;
margin: 0px;
padding: 0px;
color: #555555;
text-rendering: optimizeLegibility;
min-width: 320px;
}
.ui.header {
font-family: 'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
/*******************************
Global
*******************************/
/*-------------------
Sidebar
--------------------*/
@ -48,12 +24,11 @@ body {
Inbox
--------------------*/
#feed .page {
#feed .pusher {
background-color: #FFFFFF;
padding: 2em 0em;
}
#feed .inbox.tab .item .description {
#feed .tab .item .description {
margin-left: 2em;
}
@ -62,12 +37,13 @@ body {
margin: 0.5em 0em 0em 1em;
}
#feed .middle.column {
#feed .left.column {
background-color: #F7F7F7;
padding: 1em 2em;
max-width: 600px;
}
#feed .middle.column h2 {
margin-top: 0em;
#feed .left.column .menu {
margin-top: 5rem;
}
#feed .right.column {
@ -75,6 +51,11 @@ body {
background-color: #FFFFFF;
}
#feed .right.column {
font-size: 16px;
max-width: 800px;
}
/*******************************
Responsive
*******************************/

185
examples/feed.html
View File

@ -50,111 +50,120 @@
</div>
</div>
</div>
<div class="ui divided padded grid">
<div class="seven wide middle column">
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
<div class="ui divided two column padded grid">
<div class="left column">
<div class="ui left floated launch icon button">
<i class="sidebar icon"></i>
</div>
<h2 class="ui header">
<i class="inbox icon"></i>
Inbox
</h2>
<div class="ui tabular filter menu">
<a class="active item" data-tab="unread">Unread</a>
<a class="item" data-tab="saved">Saved</a>
<a class="item" data-tab="all">All</a>
<div class="ui right floated launch primary button">
<i class="mail icon"></i> Compose
</div>
<div class="ui divided very relaxed selection inbox list active tab" data-tab="unread">
<a class="active item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Scientists discover new breed of dog</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 10, 2013</div>
<div class="description">Dogs colony in Antarctica</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 09, 2013</div>
<div class="description">Famous dog whisperer Chakotay dies today at 104</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 07, 2013</div>
<div class="description">Top 10 Things to Know about Labradoodles</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 05, 2013</div>
<div class="description">Study shows children enjoy the company of animals</div>
</a>
<div class="ui secondary pointing filter menu">
<a class="active red item" data-tab="unread">Unread</a>
<a class="blue item" data-tab="saved">Saved</a>
<a class="green item" data-tab="all">All</a>
</div>
<div class="ui divided very relaxed inbox selection list tab" data-tab="saved">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<div class="ui active tab" data-tab="unread">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Scientists discover new breed of dog</div>
</a>
<a class="active item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 10, 2013</div>
<div class="description">Dogs colony in Antarctica</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 09, 2013</div>
<div class="description">Famous dog whisperer Chakotay dies today at 104</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 07, 2013</div>
<div class="description">Top 10 Things to Know about Labradoodles</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 05, 2013</div>
<div class="description">Study shows children enjoy the company of animals</div>
</a>
</div>
</div>
<div class="ui divided very relaxed inbox selection list tab" data-tab="all">
<a class="item">
<div class="left floated ui star rating">
<i class="link icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">There turns out there is only one article under all.</div>
</a>
<div class="ui tab" data-tab="saved">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
</div>
</div>
<div class="ui tab" data-tab="all">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="link icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">There turns out there is only one article under all.</div>
</a>
</div>
</div>
<div class="ui divider"></div>
<div class="current">Showing <b>6</b> of 213</div>
<div class="ui text menu">
<a class="icon item"><i class="icon left arrow"></i></a>
<a class="icon item"><i class="icon left chevron"></i></a>
<a class="active item">1</a>
<div class="disabled item">...</div>
<a class="item">10</a>
<a class="item">11</a>
<a class="item">12</a>
<a class="icon item"><i class="icon right arrow"></i></a>
<a class="icon item"><i class="icon right chevron"></i></a>
</div>
</div>
<div class="nine wide right column">
<div class="right column">
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
<a class="ui label">Unread</a>

3
examples/grid.css
View File

@ -50,7 +50,7 @@
/* Animation */
/* Uncomment to animate examples
#grid .examples {
margin: 0 auto;
-webkit-animation: grid 7s ease infinite;
@ -100,3 +100,4 @@
width: 100%;
}
}
*/
Write Preview
Loading…
Cancel
Save