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

added side menu 

Former-commit-id: 5e391d5d49
Former-commit-id: d6cfd05c85
pull/258/head
Jack Lukic 11 years ago
parent
6b145c23f5
commit
30f0fbdf68
6 changed files with 135 additions and 30 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      examples/button.html
  2. 43
      examples/example.css
  3. 51
      examples/module.html
  4. 5
      examples/ui/button.css
  5. 2
      examples/ui/form.css
  6. 4
      examples/ui/panel.css

60
examples/button.html
View File

@ -31,18 +31,56 @@
<div class="sidr" id="menu"> <div class="sidr" id="menu">
<ul> <ul>
<li><a href="#">UI Library</a></li>
<li class="active"><a href="#">Button</a></li>
<li><a href="#">Shape</a></li>
<li><a href="module.html">Introduction</a></li>
<li><a>Download</a></li>
<li><a href="#">UI</a>
<ul>
<li class="active"><a href="#">Button</a></li>
<li><a>Text</a></li>
<li><a>Headers</a></li>
<li><a>Columns</a></li>
<li><a>Elements (Grid System)</a></li>
<li><a>Tags</a></li>
<li><a>Items (Lists of Content)</a></li>
<li><a>Panels (Type of Menu)</a></li>
<li><a>Forms</a></li>
<li><a>Fields</a></li>
<li><a>Checkboxes</a></li>
<li><a>Icons</a></li>
<li><a>Dividers</a></li>
</ul>
</li>
<li><a href="#">Modules</a>
<ul>
<li><a>Accordion</a></li>
<li><a>API</a></li>
<li><a>Animation</a></li>
<li><a>Chat Room</a></li>
<li><a>Form Validation</a></li>
<li><a>Placeholder Text</a></li>
<li><a>Modal</a></li>
<li><a>Nag</a></li>
<li><a>Popup</a></li>
<li><a>Search</a></li>
<li><a>Star Rating</a></li>
<li><a>Shape</a></li>
<li><a>State</a></li>
<li><a>Tabs</a></li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="ui left attached vertical blue menu buttons">
<div class="ui menu button">Menu</div>
</div>
<div class="full container"> <div class="full container">
<div class="ui left attached vertical blue menu buttons">
<div class="ui menu button">Menu</div>
<div class="ui button">Source</div>
</div>
<!-- <ul class="ui vertical panel sub menu">
<li>Standard</li>
<li>State</li>
<li>Plural</li>
<li>Variations</li>
</ul> -->
<div class="container"> <div class="container">
<h1>Semantic UI Spec</h1> <h1>Semantic UI Spec</h1>
<p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p> <p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
@ -70,10 +108,10 @@
<div class="ui loading button">Loading Button</div> <div class="ui loading button">Loading Button</div>
<h4>Can alert to a succesful action:</h4> <h4>Can alert to a succesful action:</h4>
<div class="ui success button">Succesful Button</div>
<div class="ui success button">Successful Button</div>
<h4>Can alert user of an error:</h4> <h4>Can alert user of an error:</h4>
<div class="ui error button">Succesful Button</div>
<div class="ui error button">Error Button</div>
<h2>Standard Variations</h2> <h2>Standard Variations</h2>
@ -186,7 +224,7 @@
<h4>Can be attached to an input field</h4> <h4>Can be attached to an input field</h4>
<div class="ui form"> <div class="ui form">
<input type="text">
<input type="text" class="attached">
<div class="ui attached button">Search</div> <div class="ui attached button">Search</div>
</div> </div>

43
examples/example.css
View File

@ -12,11 +12,11 @@
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Neutraface Bold';
font-family: 'Neutraface';
src: src:
url("fonts/neutraface-bold.otf") format('opentype') url("fonts/neutraface-bold.otf") format('opentype')
; ;
font-weight: normal;
font-weight: bold;
font-style: normal; font-style: normal;
} }
@ -35,13 +35,23 @@ a:hover {
color: #00BAFF; color: #00BAFF;
} }
#example h1,
#example h2,
#example h3,
#example a,
#example .ui {
font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif;
font-weight: normal
#example .sidr {
font-weight: bold;
}
#example .sidr ul li ul {
font-weight: normal;
}
#example .sidr ul li ul li a {
font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
}
#example .sidr .active {
background-color: #555555;
}
#example .sidr .active > a {
color: #FFFFFF;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
} }
/* text and headers */ /* text and headers */
@ -51,7 +61,8 @@ a:hover {
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;
} }
#example h1:first-child { #example h1:first-child {
margin-top: 20px;
margin-top: 0px;
padding-top: 20px;
} }
#example h2 { #example h2 {
margin: 40px 0px 20px; margin: 40px 0px 20px;
@ -62,6 +73,7 @@ a:hover {
} }
#example h4 { #example h4 {
font-size: 16px; font-size: 16px;
font-weight: normal;
color: #555555; color: #555555;
} }
#example pre { #example pre {
@ -102,15 +114,15 @@ a:hover {
/* content */ /* content */
#example .container {
width: 700px;
margin: 0px auto;
}
#example .full.container { #example .full.container {
position: relative; position: relative;
width: 1000px; width: 1000px;
} }
#example .container {
width: 700px;
margin: 0px auto;
}
#example .shortcuts { #example .shortcuts {
float: right; float: right;
clear: both; clear: both;
@ -118,7 +130,8 @@ a:hover {
#example .menu.buttons { #example .menu.buttons {
position: fixed; position: fixed;
margin-top: 20px;
margin-left: -8px;
} }

51
examples/module.html
View File

@ -9,15 +9,16 @@
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> <link rel="stylesheet" href="example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script> <script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>
<script src="ui/state.js" type="text/javascript"></script> <script src="ui/state.js" type="text/javascript"></script>
<script src="../dependencies/transform2d.js" type="text/javascript"></script>
<script src="../dependencies/transform3d.js" type="text/javascript"></script>
<script src="../src/shape.js" type="text/javascript"></script> <script src="../src/shape.js" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script> <script src="example.js" type="text/javascript"></script>
@ -25,7 +26,51 @@
</head> </head>
<body id="example"> <body id="example">
<div class="container">
<div class="sidr" id="menu">
<ul>
<li class="active"><a href="module.html">Introduction</a></li>
<li><a>Download</a></li>
<li><a href="#">UI</a>
<ul>
<li><a href="button.html">Button</a></li>
<li><a>Text</a></li>
<li><a>Headers</a></li>
<li><a>Columns</a></li>
<li><a>Elements (Grid System)</a></li>
<li><a>Tags</a></li>
<li><a>Items (Lists of Content)</a></li>
<li><a>Panels (Type of Menu)</a></li>
<li><a>Forms</a></li>
<li><a>Fields</a></li>
<li><a>Checkboxes</a></li>
<li><a>Icons</a></li>
<li><a>Dividers</a></li>
</ul>
</li>
<li><a href="#">Modules</a>
<ul>
<li><a>Accordion</a></li>
<li><a>API</a></li>
<li><a>Animation</a></li>
<li><a>Chat Room</a></li>
<li><a>Form Validation</a></li>
<li><a>Placeholder Text</a></li>
<li><a>Modal</a></li>
<li><a>Nag</a></li>
<li><a>Popup</a></li>
<li><a>Search</a></li>
<li><a>Star Rating</a></li>
<li><a>Shape</a></li>
<li><a>State</a></li>
<li><a>Tabs</a></li>
</ul>
</li>
</ul>
</div>
<div class="ui left attached vertical blue menu buttons">
<div class="ui menu button">Menu</div>
</div>
<div class="full container">
<h1>Semantic</h1> <h1>Semantic</h1>

5
examples/ui/button.css
View File

@ -376,6 +376,11 @@ input + .ui.attached.button {
vertical-align: top; vertical-align: top;
} }
input + .ui.attached.button.down {
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading, .ui.attached.button.loading,
.ui.attached.button.loading.hover { .ui.attached.button.loading.hover {
opacity: 1; opacity: 1;

2
examples/ui/form.css
View File

@ -134,7 +134,7 @@
---------------------*/ ---------------------*/
.ui.form input.attached { .ui.form input.attached {
float: left;
width: auto;
} }
.ui.form .date.field > label { .ui.form .date.field > label {

4
examples/ui/panel.css
View File

@ -9,6 +9,8 @@
border: 1px solid #DADADA; border: 1px solid #DADADA;
border: 1px solid rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.12);
padding: 0px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
@ -27,6 +29,8 @@
cursor: pointer; cursor: pointer;
float: left; float: left;
list-style-type: none;
line-height: 1; line-height: 1;
padding: 14px 35px; padding: 14px 35px;
vertical-align: middle; vertical-align: middle;

Write Preview
Loading…
Cancel
Save