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

Additions to button and sidebar docs

pull/1129/head
jlukic 10 years ago
parent
a24115c4d8
commit
9b7e5e354b
5 changed files with 91 additions and 98 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      server/documents/elements/button.html.eco
  2. 20
      server/documents/modules/sidebar.html.eco
  3. 2
      server/files/javascript/semantic.js
  4. 29
      server/files/stylesheets/semantic.css
  5. 101
      server/layouts/default.html.eco

37
server/documents/elements/button.html.eco
View File

@ -37,6 +37,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<div class="example">
<h4 class="ui header">Ordinality</h4>
<div class="ui info message">Setting your brand colors to primary and secondary color variables in <code>site.variables</code>, will allow you to use consistent color theming for UI elements</div>
<p>A button can be formatted to show different levels of emphasis</p>
<div class="ui primary button">
<i class="shop icon"></i> Add to Cart
@ -95,54 +96,51 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A basic button removes all unnecessary formatting</p>
<p>A basic button is less pronounced</p>
<div class="ui basic button">
<i class="icon user"></i>
Add Friend
</div>
</div>
<div class="another example">
<div class="ui inverted segment">
<div class="ui inverted basic button">
<i class="icon globe"></i>
Change Language
</div>
</div>
<div class="another spaced example">
<div class="ui black basic button">Black</div>
<div class="ui yellow basic button">Yellow</div>
<div class="ui green basic button">Green</div>
<div class="ui blue basic button">Blue</div>
<div class="ui orange basic button">Orange</div>
<div class="ui purple basic button">Purple</div>
<div class="ui pink basic button">Pink</div>
<div class="ui red basic button">Red</div>
<div class="ui teal basic button">Teal</div>
</div>
<div class="example">
<div class="spaced example">
<h4 class="ui header">Inverted</h4>
<p>A button can be formatted to appear on dark backgrounds</p>
<div class="ui inverted segment">
<div class="ui inverted button">Standard</div>
<div class="ui inverted black button">Black</div>
<div class="ui inverted yellow button">Yellow</div>
<br><br>
<div class="ui inverted green button">Green</div>
<div class="ui inverted blue button">Blue</div>
<div class="ui inverted orange button">Orange</div>
<br><br>
<div class="ui inverted purple button">Purple</div>
<div class="ui inverted pink button">Pink</div>
<div class="ui inverted red button">Red</div>
<br><br>
<div class="ui inverted teal button">Teal</div>
</div>
</div>
<div class="another example">
<div class="another spaced example">
<div class="ui inverted segment">
<div class="ui inverted basic button">Basic</div>
<div class="ui inverted black basic button">Basic Black</div>
<div class="ui inverted yellow basic button">Basic Yellow</div>
<br><br>
<div class="ui inverted green basic button">Basic Green</div>
<div class="ui inverted blue basic button">Basic Blue</div>
<div class="ui inverted orange basic button">Basic Orange</div>
<br><br>
<div class="ui inverted purple basic button">Basic Purple</div>
<div class="ui inverted pink basic button">Basic Pink</div>
<div class="ui inverted red basic button">Basic Red</div>
<br><br>
<div class="ui inverted teal basic button">Basic Teal</div>
</div>
</div>
@ -233,7 +231,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<div class="spaced example">
<h4 class="ui header">Social</h4>
<p>A button can be formatted to link to a social website</p>
<div class="ui facebook button">
@ -252,7 +250,6 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<i class="vk icon"></i>
VK
</div>
<br><br>
<div class="ui linkedin button">
<i class="linkedin icon"></i>
LinkedIn
@ -268,7 +265,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
</div>
<div class="example">
<div class="spaced example">
<h4 class="ui header">Sizes</h4>
<p>A button can have different sizes:</p>
<div class="mini ui button">
@ -297,7 +294,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
</div>
</div>
<div class="example">
<div class="spaced example">
<h4 class="ui header">Colors</h4>
<p>A button can have different colors:</p>
<div class="ui black button">Black</div>

20
server/documents/modules/sidebar.html.eco
View File

@ -30,10 +30,7 @@ themes : ['Default']
<div class="transition example">
<h4 class="ui header">Transitions</h4>
<p>A sidebar can use different transitions</p>
<div class="ui button" data-transition="safe">
Safe
</div>
<p>A sidebar can use different transitions to display itself</p>
<div class="ui button" data-transition="overlay">
Overlay
</div>
@ -52,17 +49,16 @@ themes : ['Default']
<div class="ui button" data-transition="scale down">
Scale Down
</div>
<div class="ui button" data-transition="scale up">
Scale Up
</div>
<div class="ui button" data-transition="open door">
Open Door
</div>
<div class="transition example">
<h4 class="ui header">Safe</h4>
<p>A safe transitioning sidebar does not adjust the page context</p>
<div class="ui ignored info message">A safe transition does not create a new 3D context, this means any <code>fixed position</code> elements within your <code>pusher</code> will not be adjusted
</div>
<div class="ui button" data-transition="rotate in">
Rotate In
<div class="ui button" data-transition="safe">
Safe
</div>
</div>
<div class="no example">
<h4 class="ui header">Direction</h4>
<p>A sidebar can appear on any side of content</p>

2
server/files/javascript/semantic.js
View File

@ -607,7 +607,7 @@ semantic.ready = function() {
$menu
.sidebar({
transition: 'scale down'
transition: 'push'
})
.sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
.sidebar('attach events', $hideMenu, 'hide')

29
server/files/stylesheets/semantic.css
View File

@ -191,6 +191,9 @@ a:hover {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
}
#example.scale.down.pushed .header.segment {
padding-top: 30px;
}
#example .tab.header.segment {
padding-bottom: 0em;
@ -222,21 +225,10 @@ a:hover {
#example .main.menu {
top: 0px;
left: auto;
left: -1px;
min-width: 320px;
width: 100%;
z-index: 900;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
-ms-transition: margin 0.3s ease;
transition: margin 0.3s ease;
z-index: 1004;
}
#example .main.menu iframe {
margin: 0px 0px 0px 0px;
@ -609,8 +601,7 @@ body#example.hide {
#example .fixed.launch.button {
position: fixed;
top: 63px;
left: auto;
z-index: 500;
left: -1px;
width: 55px;
height: 50px;
overflow: hidden;
@ -635,6 +626,7 @@ body#example.hide {
0.5s transform ease
;
}
#example .fixed.launch.button .text {
position: absolute;
top: 15px;
@ -777,6 +769,13 @@ body#example.hide {
#example .example .language.label {
margin: 1em 0em 0.75em;
}
#example .spaced.example .buttons,
#example .spaced.example .button {
margin-bottom: 0.75em;
}
#example .spaced.example .buttons .button {
margin-bottom: 0em;
}
#example .icon.example .grid {
margin-top: 1.5rem;
text-align: left;

101
server/layouts/default.html.eco
View File

@ -199,60 +199,61 @@
</div>
</div>
<div class="pusher">
<div class="page">
<div class="ui fixed inverted main menu">
<div class="container">
<a class="launch item"><i class="content icon"></i> Content</a>
<div class="title item">
<b><%= @document.type %>:</b> <%= @document.title %>
</div>
<% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="left chevron icon"></i></div>
<% end %>
<div class="section ui dropdown link item">
<span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
<div class="menu">
<% for element, index in currentCollection: %>
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
<%= (index+1) %>. <%= element.title %>
</a>
<% end %>
</div>
</div>
<% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="right chevron icon"></i></div>
<% end %>
<div class="right menu">
<div class="vertically fitted borderless item">
<iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer icon item" data-content="Designer Mode">
<i class="docs designer icon"></i>
</a>
<a class="popup developer icon item" data-content="Developer Mode">
<i class="docs developer icon"></i>
</a>
<% end %>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
<i class="alternate github icon"></i>
<div class="ui fixed inverted main menu">
<div class="container">
<a class="launch item"><i class="content icon"></i> Content</a>
<div class="title item">
<b><%= @document.type %>:</b> <%= @document.title %>
</div>
<% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="left chevron icon"></i></div>
<% end %>
<div class="section ui dropdown link item">
<span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
<div class="menu">
<% for element, index in currentCollection: %>
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
<%= (index+1) %>. <%= element.title %>
</a>
<!-- <a class="popup localization icon item" data-content="International">
<i class="docs globe icon"></i>
</a> -->
</div>
<% end %>
</div>
</div>
<div class="ui black huge launch right attached fixed button">
<i class="content icon"></i>
<span class="text">Menu</span>
<% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="right chevron icon"></i></div>
<% end %>
<div class="right menu">
<div class="vertically fitted borderless item">
<iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer icon item" data-content="Designer Mode">
<i class="docs designer icon"></i>
</a>
<a class="popup developer icon item" data-content="Developer Mode">
<i class="docs developer icon"></i>
</a>
<% end %>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
<i class="alternate github icon"></i>
</a>
<!-- <a class="popup localization icon item" data-content="International">
<i class="docs globe icon"></i>
</a> -->
</div>
</div>
</div>
<div class="ui black huge launch right attached fixed button">
<i class="content icon"></i>
<span class="text">Menu</span>
</div>
<div class="pusher">
<div class="page">
<%- @content %>
</div>
</div>

Write Preview
Loading…
Cancel
Save