lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Docs work

intro
jlukic 10 years ago
parent
d1fa8b17b2
commit
1d5346c609
7 changed files with 196 additions and 611 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      server/documents/elements/container.html.eco
  2. 34
      server/documents/elements/input.html.eco
  3. 411
      server/documents/hotfix.html
  4. 5
      server/documents/modules/dropdown.html.eco
  5. 2
      server/documents/modules/popup.html.eco
  6. 320
      server/files/stylesheets/docs.css
  7. 23
      server/partials/fixed-menu.html.eco

12
server/documents/elements/container.html.eco
View File

@ -472,7 +472,7 @@ themes : ['Default']
<div class="ui ignored code">
<div class="ui attached menu">
<div class="ui text container">
<div class="ui container">
<a class="item">
<i class="home icon"></i> Home
</a>
@ -491,7 +491,7 @@ themes : ['Default']
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="item">
<div class="right item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
</div>
@ -500,7 +500,7 @@ themes : ['Default']
</div>
<div class="ui attached menu">
<div class="ui text container">
<div class="ui container">
<a class="item">
<i class="home icon"></i> Home
</a>
@ -519,10 +519,8 @@ themes : ['Default']
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="right menu">
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
<div class="right item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
</div>
</div>

34
server/documents/elements/input.html.eco
View File

@ -97,10 +97,12 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Labeled</h4>
<p>An input can be formatted with a label</p>
<div class="ui corner labeled input">
<input type="text" placeholder="Search...">
<div class="ui corner label">
<i class="asterisk icon"></i>
<div class="another example">
<div class="ui labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="mysite.com">
</div>
</div>
</div>
@ -118,14 +120,6 @@ themes : ['Default']
</div>
</div>
</div>
<div class="another example">
<div class="ui labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="mysite.com">
</div>
</div>
<div class="another example">
<div class="ui right labeled left icon input">
<i class="tags icon"></i>
@ -135,6 +129,22 @@ themes : ['Default']
</a>
</div>
</div>
<div class="another example">
<div class="ui left corner labeled input">
<input type="text" placeholder="Search...">
<div class="ui left corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
<div class="another example">
<div class="ui corner labeled input">
<input type="text" placeholder="Search...">
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Action</h4>

411
server/documents/hotfix.html
View File

@ -7,400 +7,33 @@ title : 'Test Page'
type : 'Library'
---
<!-- TEST JS HERE !-->
<style>
.container {
padding: 2em;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.dropdown').dropdown();
$('.container div').popup({
on: 'hover',
position: 'bottom right',
preserve: true
});
});
</script>
<style>
</style>
<div class="ui labeled icon inverted menu">
<div class="ui container">
<a class="item">
<i class="star icon"></i>
Star
</a>
<a class="item">
<i class="heart icon"></i>
Heart
</a>
<a class="item">
<i class="map icon"></i>
Map
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item"><i class="home icon"></i> Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui labeled vertical icon inverted menu">
<a class="item">
<i class="star icon"></i>
Star
</a>
<a class="item">
<i class="heart icon"></i>
Heart
</a>
<a class="item">
<i class="map icon"></i>
Map
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item"><i class="home icon"></i> Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
<div class="ui icon inverted menu">
<div class="ui container">
<a class="item">
<i class="star icon"></i>
</a>
<a class="item">
<i class="heart icon"></i>
</a>
<a class="item">
<i class="map icon"></i>
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item"><i class="home icon"></i> Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui vertical icon inverted menu">
<a class="item">
<i class="star icon"></i>
</a>
<a class="item">
<i class="heart icon"></i>
</a>
<a class="item">
<i class="map icon"></i>
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item"><i class="home icon"></i> Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
<div class="ui menu">
<div class="ui container">
<a class="item">
A
</a>
<a class="item">
B
</a>
<div class="item">
<div class="ui transparent icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui tabular menu">
<div class="ui container">
<a class="item">
Tab
</a>
<a class="item">
Tab
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui text demo menu">
<div class="ui container">
<a class="item">
A
</a>
<a class="item">
B
</a>
<a class="item">
C
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui secondary demo menu">
<div class="ui container">
<a class="item">
A
</a>
<a class="item">
B
</a>
<a class="item">
C
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui secondary pointing three item demo menu">
<div class="ui container">
<a class="item">
A
</a>
<a class="item">
B
</a>
<a class="item">
C
</a>
<div class="ui dropdown item">
<span class="text">Shopping</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="ui container">
<div class="ui divider"></div>
<div class="ui divider"></div>
<div class="ui divider"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
<div style="width: 25px;height:25px;background-color: #DDD; display: inline-block;margin-right:5px" data-content="Popup content"></div>
</div>

5
server/documents/modules/dropdown.html.eco
View File

@ -2518,7 +2518,7 @@ themes : ['Default', 'Material']
</tr>
<tr>
<td>message</td>
<td>
<td colspan="2">
<div class="code">
message: {
addResult : 'Add <b>{term}</b>',
@ -2528,12 +2528,11 @@ themes : ['Default', 'Material']
}
</div>
</td>
<td>Templated strings used to diplay messages to a user.</td>
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
<div class="code" data-type="html">
selector : {
addition : '.addition',
dropdown : '.ui.dropdown',

2
server/documents/modules/popup.html.eco
View File

@ -658,7 +658,7 @@ themes : ['Default']
<tr>
<td>hideOnScroll</td>
<td>auto</td>
<td>Whether popup should hide on scroll or touchmove, <b>auto</b> only hides for popups withohut <code>on:click</code>.<br>
<td>Whether popup should hide on scroll or touchmove, <b>auto</b> only hides for popups without <code>on:click</code>.<br>
Set this to <b>false</b> to prevent mobile browsers from closing popups when your tap inside input fields.</td>
</tr>
<tr>

320
server/files/stylesheets/docs.css
View File

@ -3,10 +3,44 @@
Global
*******************************/
body > .content {
background: #FCFCFC;
/*--------------
Page
---------------*/
ul.list {
list-style-type: disc;
}
ul.list li {
list-style-position: outside;
}
p {
margin: 1em 0em;
}
p:first-child {
margin-top: 0em;
}
p:last-child {
margin-bottom: 0em;
}
/*----------------
Footer
-----------------*/
#example > .pusher > .footer {
margin: 0em;
border-radius: 0em;
padding: 4em 0em 4em 0em;
}
/*--------------
Code
---------------*/
/* Inline Code */
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
@ -20,14 +54,6 @@ pre {
}
ul.list {
list-style-type: disc;
}
ul.list li {
list-style-position: outside;
}
/*rtl:ignore*/
pre.console {
background-color: transparent;
@ -52,26 +78,14 @@ pre code {
padding: 0px;
font-size: 1em;
}
/* Code block */
/* Code Inside Message */
.ui.message > p > code,
.ui.message > code {
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
p {
margin: 1em 0em;
}
p:first-child {
margin-top: 0em;
}
p:last-child {
margin-bottom: 0em;
}
.less-error-message {
/*display: none !important;*/
}
/*--------------
Docs Icon
@ -95,24 +109,20 @@ p:last-child {
}
/*--------------
Sidebar
---------------*/
#example #toc > :last-child {
padding-bottom: 2em;
}
#example #toc .logo.image {
width: 35px;
margin-right: 1em;
}
#example #toc .item {
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
#example #toc > :last-child {
padding-bottom: 2em;
}
/* Incomplete Label */
#example #toc .item .circular.label {
position: absolute;
top: 0.75rem;
@ -125,6 +135,12 @@ p:last-child {
opacity: 0.8;
}
/* Hidden Items */
#example #toc .hide.item {
display: none;
}
/* Sidebar Header */
#example #toc .inverted.header {
font-size: 1em;
font-weight: normal;
@ -135,14 +151,14 @@ p:last-child {
#example #toc a.inverted.header:hover {
color: rgba(255, 255, 255, 1);
}
#example #toc .hide.item {
display: none;
}
#example #toc .menu .active.item {
color: #6DFFFF !important;
}
/* segment headers */
/*--------------
Page Headers
---------------*/
#example .masthead.segment {
position: relative;
z-index: 1;
@ -154,6 +170,21 @@ p:last-child {
box-shadow: none;
}
#example .masthead .introduction {
display: block;
}
#example .masthead .introduction:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#example .masthead.segment h1 {
margin: 0em;
}
#example .masthead iframe.github {
float: right;
}
@ -161,13 +192,17 @@ p:last-child {
/* Align with buttons */
#example .masthead .main.menu {
margin-top: -2px;
min-height: 0em;
}
#example .masthead .main.menu > .item {
padding-top: 0.785714em;
padding-bottom: 0.785714em;
}
/* Language Dropdown */
/*--------------
Languages
---------------*/
#example .language.dropdown.button {
margin-top: 0.3em;
}
@ -178,12 +213,10 @@ p:last-child {
display: none;
}
/* H1 header */
#example .masthead.segment h1 {
margin: 0em;
}
/*--------------
Page Tabs
---------------*/
/* Tab */
#example .tab.masthead.segment {
display: block;
padding-bottom: 0em;
@ -201,6 +234,10 @@ p:last-child {
background-color: #F7F7F7;
}
/*--------------
Download
---------------*/
/* Download Popup */
#example .masthead.segment .download.popup {
width: 400px;
@ -215,31 +252,6 @@ p:last-child {
display: none;
}
#example.legacy .main.menu,
#example.legacy .launch.button {
left: auto !important;
}
#example.scale.down.pushed .masthead.segment {
padding-top: 30px;
}
#example.divider .ui.grid {
position: relative;
}
#example.dim .segment .wireframe.image {
margin-bottom: 0em;
}
#example .main.menu .title.item b {
margin-right: 0.5em;
}
#example .download.menu {
margin-top: 0em;
margin-bottom: 3rem;
}
/* lists */
#example .features {
@ -292,54 +304,25 @@ p:last-child {
transform: translate3d(0, 0, 0);
}
/*--------------
Masthead
Fixed Menu
---------------*/
#example .masthead .grid {
position: relative;
z-index: 2;
}
#example .masthead .introduction {
display: block;
#example .main.menu .title.item b {
margin-right: 0.5em;
}
#example .masthead .introduction:after {
content: ".";
#example .fixed.main.menu .launch.item {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#example .masthead .introduction .theme.buttons {
margin: -0.1em 0em 0em 0.5em;
vertical-align: middle;
}
/*--------------
Footer
---------------*/
#example .footer.link.list {
display: block;
text-align: center;
margin-bottom: 1.5rem;
#example .fixed.main.menu .search .icon {
opacity: 0.9;
}
/*--------------
Transparent
Sidebar Button
---------------*/
.ui.transparent.menu {
opacity: 0.95;
}
#example.pushable.left.overlay .fixed.launch.button {
transform: translate3d(0, 0, 0);
}
#example.pushable.overlay.left.pushed .fixed.launch.button {
transform: translate3d(260px, 0, 0);
}
#example .fixed.launch.button {
display: none;
position: fixed;
@ -371,6 +354,9 @@ p:last-child {
0.5s transform ease
;
}
#example .launch.button .icon {
margin-left: 0px;
}
#example .fixed.launch.button .text {
@ -402,20 +388,23 @@ p:last-child {
opacity: 1;
}
#example .shortcuts {
float: right;
clear: both;
/* Position Change */
#example.pushable.left.overlay .fixed.launch.button {
transform: translate3d(0, 0, 0);
}
#example .launch.button .icon {
margin-left: 0px;
#example.pushable.overlay.left.pushed .fixed.launch.button {
transform: translate3d(260px, 0, 0);
}
/*******************************
Alternate Layouts
*******************************/
/*----------------
Basic Display
Basic Layout
-----------------*/
#example.basic .main.container {
background: transparent !important;
border: none !important;
@ -452,6 +441,10 @@ p:last-child {
max-width: 100%;
}
/*----------------
Minimal Layout
-----------------*/
/* Always Hidden Sidebar */
#example.minimal.basic > .launch.button {
@ -476,61 +469,11 @@ p:last-child {
}
/*----------------
Overview Mode
-----------------*/
#example .right.floated.overview.button {
margin-bottom: 0.5em;
}
#example.overview h2.ui.header {
margin-bottom: 0.5em;
}
#example.overview .example {
display: table-row;
min-height: 0px !important;
overflow: hidden;
}
#example.overview .example .ui.header,
#example.overview .example p {
display: table-cell;
font-size: 1em;
min-width: 170px;
font-weight: bold;
padding: 0.5em 0em;
}
#example.overview .example p {
font-size: 1rem;
font-weight: normal;
padding: 0em 0em 0em 0.5em;
width: auto;
line-height: 1.4;
}
/*----------------
Footer
-----------------*/
#example > .pusher > .footer {
margin: 0em;
border-radius: 0em;
padding: 4em 0em 4em 0em;
}
#example > .pusher > .container {
max-width: 960px !important;
margin-left: 250px !important;
}
/*----------------
Settings Table
-----------------*/
/*
#example .main.container .ui.celled.definition.table thead:not(.full-width) th:first-child {
background-color: #f7f7f7;
box-shadow: 0 -1px 0 1px #f7f7f7;
}
*/
#example .settings.table {
margin-bottom: 20px;
}
@ -541,6 +484,9 @@ p:last-child {
width: 100px;
}
/*----------------
Code Samples
-----------------*/
#example .segment pre {
background-color: transparent;
@ -551,8 +497,6 @@ p:last-child {
margin: 0em;
padding: 0em;
max-height: 610px;
min-width: 500px;
-webkit-overflow-scrolling: touch;
font-weight: normal;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}
@ -584,10 +528,8 @@ p:last-child {
margin-top: 1.5em;
}
/*----------------
Examples
Examples
-----------------*/
#example .example {
@ -829,13 +771,20 @@ p:last-child {
#example .pointing.label + .existing.segment {
margin-top: 0em;
}
#example .existing.code {
display: none;
}
/* Code Annotation */
#example .example .annotation {
margin: 0em;
}
#example .annotation pre code {
min-width: 500px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#example .transition.example .ui.button {
margin-bottom: 0.5em;
@ -1805,13 +1754,6 @@ body.progress.animated .ui.progress .bar {
bottom: -2px;
}
#example .fixed.main.menu .launch.item {
display: block;
}
#example .fixed.main.menu .search .icon {
opacity: 0.9;
}
/* Table Ad */
@media only screen and (max-width: 1272px) {
@ -1873,6 +1815,11 @@ body.progress.animated .ui.progress .bar {
display: none;
}
/* Hide Fixed Launch Button */
#example .fixed.launch.button {
display: none !important;
}
/* Additional Padding for Fixed Menu */
#example .masthead.segment {
padding-top: 5em;
@ -1894,7 +1841,7 @@ body.progress.animated .ui.progress .bar {
#example .main.container > .right.rail .sticky,
#example .main.container > .tab > .examples > .right.rail .sticky,
#example .main.container > .tab > .right.rail .sticky {
padding-top: 2em;
padding-top: 2.5em;
}
/* 100% Menu Width */
@ -1983,6 +1930,8 @@ body.progress.animated .ui.progress .bar {
display: none;
}
/* Remove Menu Text */
/* Let Buttons Vertically Stack */
#example .masthead .button {
margin-bottom: 0.75em;
@ -2004,5 +1953,22 @@ body.progress.animated .ui.progress .bar {
#example .pusher > .footer .grid .three.column {
display: none !important;
}
}
/* Small Phone */
@media only screen and (max-width: 500px) {
/* Stack Advert */
#example .masthead .advertisement #carbonads > span {
max-width: none;
}
#example .advertisement .carbon-wrap {
flex-direction: column-reverse;
text-align: center;
align-items: center;
}
#example .carbon-poweredby {
display: none;
}
}

23
server/partials/fixed-menu.html.eco
View File

@ -5,34 +5,13 @@
<div class="ui fixed inverted main menu">
<div class="ui container">
<a class="launch item">
<a class="launch icon item">
<i class="content icon"></i>
Menu
</a>
<% if @document.title: %>
<div class="item">
<%= @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 scrolling 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 %>">
<%= 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 %>
<% end %>
<div class="right menu">
<% unless 'development' in @getEnvironments(): %>

Write Preview
Loading…
Cancel
Save