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

adding progress/header docs, iteration on ui

pull/13/head
Jack Lukic 12 years ago
parent
ebec03da3d
commit
698a92f38d
17 changed files with 697 additions and 573 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      node/src/documents/elements/header.html
  2. 111
      node/src/documents/elements/progress.html
  3. 171
      node/src/documents/sink.html
  4. 10
      node/src/files/components/semantic/src/collections/grid.css
  5. 9
      node/src/files/components/semantic/src/collections/menu.css
  6. 20
      node/src/files/components/semantic/src/elements/button.css
  7. 5
      node/src/files/components/semantic/src/elements/header.css
  8. 323
      node/src/files/components/semantic/src/elements/progress.css
  9. 14
      node/src/files/components/semantic/src/modules/popup.js
  10. 109
      node/src/files/javascript/semantic.js
  11. 42
      node/src/files/stylesheets/semantic.css
  12. 10
      src/collections/grid.css
  13. 9
      src/collections/menu.css
  14. 20
      src/elements/button.css
  15. 5
      src/elements/header.css
  16. 323
      src/elements/progress.css
  17. 14
      src/modules/popup.js

75
node/src/documents/elements/header.html
View File

@ -0,0 +1,75 @@
---
layout : 'default'
css : 'header'
title : 'Header'
type : 'UI Element'
---
<div class="segment">
<div class="container">
<h1>Header</h1>
<p>Headers provide a short summary of content</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="item">States</a>
<a class="item">Variations</a>
</div>
</div>
<h2>Standard</h2>
<h3>Page Headings</h3>
<p>Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
<div class="example">
<div class="ui segment">
<h1 class="ui header">First header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<h2 class="ui header">Second header</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<h3 class="ui header">Third header</h3>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<h4 class="ui header">Fourth header</h4>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<h5 class="ui header">Fifth header</h5>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
</div>
<h3>Content Headings</h3>
<p>Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.</p>
<div class="example">
<div class="ui segment">
<div class="ui two font icon buttons">
<div class="ui increase positive button"> <i class="icon plus"></i></div>
<div class="ui decrease negative button"> <i class="icon minus"></i></div>
</div>
<h3 class="ui huge header">Huge Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<h3 class="ui large header">Large Header</h3>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<h3 class="ui medium header">Medium Header</h3>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<h3 class="ui small header">Small Header</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<h3 class="ui tiny header">Tiny Header</h3>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
</div>
<h2>States</h2>
<div class="example">
<h4>Disabled</h4>
<p>A header bar can show activity</p>
<div class="ui disabled header">
Disabled Header
</div>
</div>
<h2>Variations</h2>
</div>

111
node/src/documents/elements/progress.html
View File

@ -0,0 +1,111 @@
---
layout : 'default'
css : 'progress'
title : 'Progress'
type : 'UI Element'
---
<div class="segment">
<div class="container">
<h1>Progress Bar</h1>
<p>Progress bars show the percent of a task complete</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="item">States</a>
<a class="item">Variations</a>
</div>
</div>
<h2>Standard</h2>
<div class="shown example">
<h4>Progress:</h4>
<p>A standard progress bar</p>
<div class="ui progress">
<div class="bar"></div>
</div>
</div>
<h2>States</h2>
<div class="example">
<h4>Active</h4>
<p>A progress bar can show activity</p>
<div class="ui active progress">
<div class="bar"></div>
</div>
</div>
<div class="example">
<h4>Successful</h4>
<p>A progress bar can be successful</p>
<div class="ui successful progress">
<div class="bar" style="width:100%"></div>
</div>
</div>
<div class="example">
<h4>Failed</h4>
<p>A progress bar can be failed</p>
<div class="ui failed progress">
<div class="bar" style="width:100%"></div>
</div>
</div>
<div class="example">
<h4>Disabled</h4>
<p>A progress bar can be disabled</p>
<div class="ui disabled progress">
<div class="bar" style="width:100%"></div>
</div>
</div>
<h2>Variations</h2>
<div class="example">
<h4>Color</h4>
<p>Can have different colors:</p>
<div class="ui blue progress">
<div class="bar"></div>
</div>
<br>
<div class="ui black progress">
<div class="bar"></div>
</div>
<br>
<div class="ui green progress">
<div class="bar"></div>
</div>
<br>
<div class="ui red progress">
<div class="bar"></div>
</div>
<br>
<div class="ui blue progress">
<div class="bar"></div>
</div>
<br>
<div class="ui purple progress">
<div class="bar"></div>
</div>
<br>
<div class="ui teal progress">
<div class="bar"></div>
</div>
<br>
</div>
<div class="example">
<h4>Striped</h4>
<p>A progress bar can be striped</p>
<div class="ui striped progress">
<div class="bar"></div>
</div>
</div>
</div>

171
node/src/documents/sink.html
View File

@ -2,163 +2,12 @@
layout : 'default'
css : 'sink'
title : 'Kitchen Sink'
title : 'Roadmap'
type : 'Other'
---
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UI Text Block - Semantic</title>
<link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/table.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/label.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
<script src="library/jquery.js" type="text/javascript"></script>
<script src="library/ace/ace.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>
<script src="library/tablesort.js" type="text/javascript"></script>
<script src="library/waypoints.js" type="text/javascript"></script>
<script src="javascript/semantic.js" type="text/javascript"></script>
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
</head>
<body id="example">
<div class="ui large vertical menu" id="menu">
<div class="menu">
<div class="item"><a href="module.html"><b>Introduction</b></a></div>
<div class="item"><a href="download"><b>Download</b></a></div>
<div class="item">
<a><b>UI Collections</b></a>
<div class="menu">
<div class="item"><a href="form.html">Forms</a></div>
<div class="active item"><a href="menu.html">Menu</a></div>
<div class="item"><a href="element.html">Grid</a></div>
<div class="item"><a href="table.html">Table</a></div>
<div class="item"><a href="item.html">Items</a></div>
</div>
</div>
<div class="item">
<a><b>UI Elements</b></a>
<div class="menu">
<div class="item"><a href="steps.html">Steps</a></div>
<div class="item"><a href="button.html">Button</a></div>
<div class="item"><a href="table.html">Table</a></div>
<div class="item"><a href="progress.html">Progress</a></div>
<div class="item"><a href="text.html">Text Block</a></div>
<div class="item"><a href="header.html">Headers</a></div>
<div class="item"><a href="header.html">Segment</a></div>
<div class="item"><a href="column.html">Columns</a></div>
<div class="item"><a href="element.html">Elements (Grid System)</a></div>
<div class="active item"><a href="text.html">Text Block</a></div>
<div class="item"><a href="item.html">Items (Lists of Content)</a></div>
<div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
<div class="item"><a href="icon.html">Icons</a></div>
<div class="item"><a href="divider.html">Dividers</a></div>
</div>
</div>
<div class="item">
<a><b>UI Views</b></a>
<div class="menu">
<div class="item"><a href="form.html">Forms</a></div>
<div class="item"><a href="activity.html">Activity Feed</a></div>
<div class="item"><a href="list.html">Content List</a></div>
<div class="item"><a href="user-list.html">User List</a></div>
</div>
</div>
<div class="item">
<a><b>UI Modules</b></a>
<div class="menu">
<div class="item"><a href="accordion.html">Accordion</a></div>
<div class="item"><a href="chatroom.html">Chat Room</a></div>
<div class="item"><a href="modal.html">Modal</a></div>
<div class="item"><a href="nag.html">Nag</a></div>
<div class="item"><a href="popup.html">Popup</a></div>
<div class="item"><a href="search.html">Search</a></div>
<div class="item"><a href="star.html">Star Rating</a></div>
<div class="item"><a href="tab.html">Tabs</a></div>
</div>
</div>
<div class="item">
<a><b>Behavioral Modules</b></a>
<div class="menu">
<div class="item"><a href="api.html">API</a></div>
<div class="item"><a href="animation.html">Animation</a></div>
<div class="item"><a href="validate.html">Form Validation</a></div>
<div class="item"><a href="placeholder.html">Placeholder Text</a></div>
<div class="item"><a href="shape.html">Shape</a></div>
<div class="item"><a href="state.html">State</a></div>
</div>
</div>
</div>
</div>
<div class="ui fixed transparent contrasting menu">
<div class="container">
<div class="title item">
Semantic UI: Kitchen Sink
</div>
<div class="icon previous link item">
<a href="label.html"><i class="icon left-open"></i></a>
</div>
<div class="section dropdown item">
3 of 4
<div class="menu">
<a href="button.html" class="item">1. Button</a>
<a href="form.html" class="item">2. Form</a>
<a href="table.html" class="item">3. Table</a>
<a href="menu.html" class="item">4. Menu</a>
<a href="label.html" class="item">5. Labels</a>
<a href="text.html" class="active item">6. Text Block</a>
</div>
</div>
<div class="icon next link item">
<i class="icon right-open"></i>
</div>
<div class="right menu">
<a class="item" href="https://github.com/quirkyinc/semantic">
<i class="icon cloud"></i>
</a>
<a class="item" href="https://github.com/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<div class="dropdown item">
<i class="icon tint"></i> Theme
<div class="theme menu">
<div class="item" data-theme="flat">Flat</div>
<div class="item" data-theme="shaded">Shaded</div>
<div class="item" data-theme="classic">Classic</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui huge left attached vertical side buttons">
<div class="ui large blue sidebar button">Menu</div>
</div>
<div class="segment">
<div class="container">
<h1>Kitchen Sink</h1>
<p>The kitchen sink uses many of the UI elements described in the library to provide examples for how content pieces can be used together.</p>
<h1>Project Roadmap</h1>
</div>
</div>
<div class="main container">
@ -167,21 +16,20 @@ type : 'Other'
<i class="icon heart"></i>
<div class="content">
<div class="header">
Welcome to the kitchen sink!
Progress Report
</div>
<p>This is a work in progress view, these elements may change.</p>
<p>Current status of work on Semantic UI</p>
</div>
</div>
<div class="ui divider simple"></div>
<div class="ui black top attached menu">
<div class="header item">
<div class="item">
<b>Redesign Timeline</b>
</div>
<div class="right item">
<div class="badge">6.5</div>
Days Left
<div class="borderless item">
<div class="ui red label">6.5 <div class="detail">days left</div></div>
</div>
</div>
<div class="ui bottom attached segment">
@ -368,7 +216,4 @@ type : 'Other'
</div>
</div>
</body>
</html>
</div>

10
node/src/files/components/semantic/src/collections/grid.css
View File

@ -28,11 +28,11 @@
}
.ui.grid:after,
.ui.row:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-------------------

9
node/src/files/components/semantic/src/collections/menu.css
View File

@ -30,8 +30,17 @@
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.ui.menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ui.menu > .item:first-child {
border-radius: 5px 0px 0px 5px;
}

20
node/src/files/components/semantic/src/elements/button.css
View File

@ -28,7 +28,7 @@
padding: 0.8em 1.5em;
font-size: 1em;
font-size: 1rem;
text-transform: uppercase;
line-height: 1;
font-weight: bold;
@ -464,40 +464,40 @@
.ui.buttons.mini .button,
.ui.mini.button {
font-size: 0.5625em;
font-size: 0.5625rem;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
font-size: 0.625em;
font-size: 0.625rem;
}
.ui.small.buttons .button,
.ui.small.button {
font-size: 0.75em;
font-size: 0.75rem;
}
.ui.buttons .button,
.ui.button {
font-size: 1em;
font-size: 1rem;
}
.ui.large.buttons .button,
.ui.large.button {
font-size: 1.125em;
font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.button {
font-size: 1.25em;
font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.button {
font-size: 1.375em;
font-size: 1.375rem;
}
.ui.massive.buttons .button,
.ui.massive.button {
font-size: 1.5em;
font-size: 1.5rem;
font-weight: bold;
}
.ui.gigantic.buttons .button,
.ui.gigantic.button {
font-size: 2em;
font-size: 2rem;
font-weight: bold;
}

5
node/src/files/components/semantic/src/elements/header.css
View File

@ -78,6 +78,11 @@ h5.ui.header {
line-height: 1.33em;
font-size: 1.5em;
}
.medium.ui.header {
margin-bottom: 0.25em;
line-height: 1.33em;
font-size: 1.25em;
}
.small.ui.header {
margin-bottom: 0.25em;
line-height: 1.33em;

323
node/src/files/components/semantic/src/elements/progress.css
View File

@ -1,16 +1,33 @@
/*
* # Semantic Progress Bar
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: Nay 14, 2013
*/
/*******************************
Progress Bar
*******************************/
.ui.progress {
border: 1px solid #DDDDDD;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 100%;
max-width: 400px;
height: 35px;
background-color: #FAFAFA;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -28,44 +45,37 @@
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
-webkit-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-moz-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-ms-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-o-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
}
/* Colors */
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
/*******************************
States
*******************************/
/* Fluid Width */
.ui.fluid.progress {
width: 100%;
}
/* State */
/*--------------
Successful
---------------*/
.ui.successful.progress .bar {
background-color: #73E064 !important;
@ -76,6 +86,10 @@
-moz-animation: none !important;
}
/*--------------
Failed
---------------*/
.ui.failed.progress .bar {
background-color: #DF9BA4 !important;
}
@ -84,6 +98,81 @@
-webkit-animation: none !important;
-moz-animation: none !important;
}
/*--------------
Active
---------------*/
.ui.active.progress .bar {
position: relative;
}
.ui.active.progress .bar::after {
content: '';
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-emphasis 2s ease-out infinite;
-moz-animation: animate-emphasis 2s ease-out infinite;
animation: animate-emphasis 2s ease-out infinite;
}
@-webkit-keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 95%;
}
}
@-moz-keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
/*--------------
Disabled
---------------*/
.ui.disabled.progress {
opacity: 0.35;
}
.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
-webkit-animation: none !important;
@ -91,8 +180,45 @@
}
/* Variations */
/*******************************
Variations
*******************************/
/*--------------
Colors
---------------*/
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
.ui.black.progress .bar {
background-color: #5C6166;
}
.ui.green.progress .bar {
background-color: #A1CF64;
}
.ui.red.progress .bar {
background-color: #EF4D6D;
}
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
.ui.purple.progress .bar {
background-color: #564F8A;
}
.ui.teal.progress .bar {
background-color: #00B5AD;
}
/*--------------
Attached
---------------*/
/*--------------
Striped
---------------*/
.ui.progress.striped .bar {
-webkit-background-size: 30px 30px;
@ -141,7 +267,9 @@
transparent 75%, transparent
)
;
}
.ui.progress.active.striped .bar {
-webkit-animation: animate-striped 3s linear infinite;
-moz-animation: animate-striped 3s linear infinite;
}
@ -170,150 +298,3 @@
background-position: 60px 0;
}
}
/* Shining animation */
.ui.shiny.progress .bar {
position: relative;
}
.ui.shiny.progress .bar::after {
content: '';
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-shiny 2s ease-out infinite;
-moz-animation: animate-shiny 2s ease-out infinite;
}
@-webkit-keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 95%;
}
}
@-moz-keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
/* Glowing animation */
.ui.glowing.progress .bar {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
-webkit-animation: animate-glow 1s ease-out infinite;
-moz-animation: animate-glow 1s ease-out infinite;
}
@-webkit-keyframes animate-glow {
0% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
50% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
}
100% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
}
@-moz-keyframes animate-glow {
0% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
50% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
}
100% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
}

14
node/src/files/components/semantic/src/modules/popup.js
View File

@ -83,7 +83,7 @@
var element = this;
timer = setTimeout(function() {
$.proxy(module.toggle, element)();
if( $(element).hasClass(className.active) ) {
if( $(element).hasClass(className.visible) ) {
event.stopPropagation();
}
}, settings.delay);
@ -96,7 +96,7 @@
},
click: function(event) {
$.proxy(module.toggle, this)();
if( $(this).hasClass(className.active) ) {
if( $(this).hasClass(className.visible) ) {
event.stopPropagation();
}
},
@ -224,7 +224,7 @@
if($popup.size() === 0) {
module.create();
}
if( !$module.hasClass(className.active) ) {
if( !$module.hasClass(className.visible) ) {
if( module.position() ) {
module.show();
}
@ -367,10 +367,10 @@
.stop()
.fadeOut(200)
.prev($module)
.removeClass(className.active)
.removeClass(className.visible)
;
$module
.addClass(className.active)
.addClass(className.visible)
;
$popup
.removeClass(className.loading)
@ -398,7 +398,7 @@
hide: function() {
$module
.removeClass(className.active)
.removeClass(className.visible)
;
if($popup.is(':visible') ) {
module.debug('Hiding pop-up');
@ -564,7 +564,7 @@
className : {
popup : 'ui popup',
active : 'active',
visible : 'visible',
loading : 'loading'
},

109
node/src/files/javascript/semantic.js
View File

@ -8,25 +8,29 @@ semantic.ready = function() {
// selector cache
var
$ui = $('.ui').not('.hover, .down'),
$checkbox = $('.ui.checkbox'),
$swap = $('.theme.menu .item'),
$menu = $('.sidebar'),
$sortTable = $('.sortable.table'),
$demo = $('.demo'),
$waypoints = $('h2'),
$ui = $('.ui').not('.hover, .down'),
$checkbox = $('.ui.checkbox'),
$swap = $('.theme.menu .item'),
$menu = $('.sidebar'),
$sortTable = $('.sortable.table'),
$demo = $('.demo'),
$waypoints = $('h2:not(.ui)'),
$menuPopup = $('.ui.main.menu .popup.item'),
$example = $('.example'),
$developer = $('.developer.item'),
$designer = $('.designer.item'),
$menuPopup = $('.ui.main.menu .popup.item'),
$example = $('.example'),
$shownExample = $example.filter('.shown'),
$developer = $('.developer.item'),
$designer = $('.designer.item'),
$increaseFont = $('.font .increase'),
$decreaseFont = $('.font .decrease'),
$peek = $('.peek'),
$peekItem = $peek.children('.menu').children('a.item'),
$peekSubItem = $peek.find('.item .menu .item'),
$code = $('div.code'),
$peek = $('.peek'),
$peekItem = $peek.children('.menu').children('a.item'),
$peekSubItem = $peek.find('.item .menu .item'),
$code = $('div.code'),
// alias
handler
@ -46,10 +50,53 @@ semantic.ready = function() {
;
},
createCode: function() {
font: {
increase: function() {
var
$container = $(this).closest('.ui.segment'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container
.css('font-size', fontSize + 1)
;
},
decrease: function() {
var
$container = $(this).closest('.ui.segment'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container
.css('font-size', fontSize - 1)
;
}
},
developerMode: function() {
console.log('dev mode');
$developer.addClass('active');
$designer.removeClass('active');
$example
.each(function() {
$.proxy(handler.createCode, $(this))('developer');
})
;
},
designerMode: function() {
console.log('design mode');
$designer.addClass('active');
$developer.removeClass('active');
$example
.each(function() {
$.proxy(handler.createCode, $(this))('designer');
})
;
},
createCode: function(type) {
var
$example = $(this).closest('.example'),
$demo = $example.children().not('p, h4, i.code, .annotated, .ignore'),
$demo = $example.children().not('p:not(.ui), h4:not(.ui), i.code, .annotated, .ignore'),
$annotated = $example.find('.annotated'),
$code = $annotated.find('.code'),
whiteSpace = new RegExp('\\n\\s{4}', 'g'),
@ -83,7 +130,7 @@ semantic.ready = function() {
;
$.proxy(handler.initializeCode, $code)();
}
if( $demo.first().is(':visible') ) {
if( $demo.first().is(':visible') || type == 'developer' ) {
$demo.hide();
$annotated.fadeIn(500);
}
@ -208,7 +255,6 @@ semantic.ready = function() {
$subWaypoint = $waypoint.nextAll('h3').eq( $subHeaderGroup.index($subHeader) ),
offset = $subWaypoint.offset().top - 80
;
console.log($subHeader, $headerGroup, $header, $waypoint, $subWaypoint, $subHeaderGroup.index($subHeader))
$menu
.addClass('animating')
;
@ -262,9 +308,6 @@ semantic.ready = function() {
};
// attach events
$ui
.state()
;
if($.fn.tablesort !== undefined) {
$sortTable
.tablesort()
@ -304,6 +347,10 @@ semantic.ready = function() {
.on('click', handler.createCode)
;
$shownExample
.each(handler.createCode)
;
$checkbox
.checkbox()
;
@ -312,6 +359,20 @@ semantic.ready = function() {
.on('click', handler.swapStyle)
;
$increaseFont
.on('click', handler.font.increase)
;
$decreaseFont
.on('click', handler.font.decrease)
;
$developer
.on('click', handler.developerMode)
;
$designer
.on('click', handler.designerMode)
;
$menuPopup
.popup({
position: 'bottom center',

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

@ -662,6 +662,48 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
cursor: pointer;
}
.ui.progress .bar {
-webkit-animation: finish 10s ease-in-out infinite;
-moz-animation: finish 10s ease-in-out infinite;
}
@-webkit-keyframes finish {
0% {
width: 0%;
}
40% {
width: 100%;
}
100% {
width: 100%;
}
}
@-moz-keyframes finish {
0% {
width: 0%;
}
40% {
width: 100%;
}
100% {
width: 100%;
}
}
@keyframes finish {
0% {
width: 0%;
}
40% {
width: 100%;
}
100% {
width: 100%;
}
}
@media only screen and (max-width : 1100px) {
}

10
src/collections/grid.css
View File

@ -28,11 +28,11 @@
}
.ui.grid:after,
.ui.row:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-------------------

9
src/collections/menu.css
View File

@ -30,8 +30,17 @@
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.ui.menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ui.menu > .item:first-child {
border-radius: 5px 0px 0px 5px;
}

20
src/elements/button.css
View File

@ -28,7 +28,7 @@
padding: 0.8em 1.5em;
font-size: 1em;
font-size: 1rem;
text-transform: uppercase;
line-height: 1;
font-weight: bold;
@ -464,40 +464,40 @@
.ui.buttons.mini .button,
.ui.mini.button {
font-size: 0.5625em;
font-size: 0.5625rem;
}
.ui.tiny.buttons .button,
.ui.tiny.button {
font-size: 0.625em;
font-size: 0.625rem;
}
.ui.small.buttons .button,
.ui.small.button {
font-size: 0.75em;
font-size: 0.75rem;
}
.ui.buttons .button,
.ui.button {
font-size: 1em;
font-size: 1rem;
}
.ui.large.buttons .button,
.ui.large.button {
font-size: 1.125em;
font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.button {
font-size: 1.25em;
font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.button {
font-size: 1.375em;
font-size: 1.375rem;
}
.ui.massive.buttons .button,
.ui.massive.button {
font-size: 1.5em;
font-size: 1.5rem;
font-weight: bold;
}
.ui.gigantic.buttons .button,
.ui.gigantic.button {
font-size: 2em;
font-size: 2rem;
font-weight: bold;
}

5
src/elements/header.css
View File

@ -78,6 +78,11 @@ h5.ui.header {
line-height: 1.33em;
font-size: 1.5em;
}
.medium.ui.header {
margin-bottom: 0.25em;
line-height: 1.33em;
font-size: 1.25em;
}
.small.ui.header {
margin-bottom: 0.25em;
line-height: 1.33em;

323
src/elements/progress.css
View File

@ -1,16 +1,33 @@
/*
* # Semantic Progress Bar
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: Nay 14, 2013
*/
/*******************************
Progress Bar
*******************************/
.ui.progress {
border: 1px solid #DDDDDD;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 100%;
max-width: 400px;
height: 35px;
background-color: #FAFAFA;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -28,44 +45,37 @@
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
-webkit-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-moz-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-ms-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
-o-transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
transition:
width 1s ease-out,
width 1s ease-in-out,
background-color 1s ease-out
;
}
/* Colors */
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
/*******************************
States
*******************************/
/* Fluid Width */
.ui.fluid.progress {
width: 100%;
}
/* State */
/*--------------
Successful
---------------*/
.ui.successful.progress .bar {
background-color: #73E064 !important;
@ -76,6 +86,10 @@
-moz-animation: none !important;
}
/*--------------
Failed
---------------*/
.ui.failed.progress .bar {
background-color: #DF9BA4 !important;
}
@ -84,6 +98,81 @@
-webkit-animation: none !important;
-moz-animation: none !important;
}
/*--------------
Active
---------------*/
.ui.active.progress .bar {
position: relative;
}
.ui.active.progress .bar::after {
content: '';
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-emphasis 2s ease-out infinite;
-moz-animation: animate-emphasis 2s ease-out infinite;
animation: animate-emphasis 2s ease-out infinite;
}
@-webkit-keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 95%;
}
}
@-moz-keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes animate-emphasis {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
/*--------------
Disabled
---------------*/
.ui.disabled.progress {
opacity: 0.35;
}
.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
-webkit-animation: none !important;
@ -91,8 +180,45 @@
}
/* Variations */
/*******************************
Variations
*******************************/
/*--------------
Colors
---------------*/
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
.ui.black.progress .bar {
background-color: #5C6166;
}
.ui.green.progress .bar {
background-color: #A1CF64;
}
.ui.red.progress .bar {
background-color: #EF4D6D;
}
.ui.blue.progress .bar {
background-color: #6ECFF5;
}
.ui.purple.progress .bar {
background-color: #564F8A;
}
.ui.teal.progress .bar {
background-color: #00B5AD;
}
/*--------------
Attached
---------------*/
/*--------------
Striped
---------------*/
.ui.progress.striped .bar {
-webkit-background-size: 30px 30px;
@ -141,7 +267,9 @@
transparent 75%, transparent
)
;
}
.ui.progress.active.striped .bar {
-webkit-animation: animate-striped 3s linear infinite;
-moz-animation: animate-striped 3s linear infinite;
}
@ -170,150 +298,3 @@
background-position: 60px 0;
}
}
/* Shining animation */
.ui.shiny.progress .bar {
position: relative;
}
.ui.shiny.progress .bar::after {
content: '';
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-shiny 2s ease-out infinite;
-moz-animation: animate-shiny 2s ease-out infinite;
}
@-webkit-keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 95%;
}
}
@-moz-keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes animate-shiny {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
width: 100%;
}
}
/* Glowing animation */
.ui.glowing.progress .bar {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
-webkit-animation: animate-glow 1s ease-out infinite;
-moz-animation: animate-glow 1s ease-out infinite;
}
@-webkit-keyframes animate-glow {
0% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
50% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
}
100% {
-webkit-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
}
@-moz-keyframes animate-glow {
0% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
50% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.3) inset,
0px -5px 5px rgba(255, 255, 255, 0.3) inset
;
}
100% {
-moz-box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
box-shadow:
0px 5px 5px rgba(255, 255, 255, 0.7) inset,
0px -5px 5px rgba(255, 255, 255, 0.7) inset
;
}
}

14
src/modules/popup.js
View File

@ -83,7 +83,7 @@
var element = this;
timer = setTimeout(function() {
$.proxy(module.toggle, element)();
if( $(element).hasClass(className.active) ) {
if( $(element).hasClass(className.visible) ) {
event.stopPropagation();
}
}, settings.delay);
@ -96,7 +96,7 @@
},
click: function(event) {
$.proxy(module.toggle, this)();
if( $(this).hasClass(className.active) ) {
if( $(this).hasClass(className.visible) ) {
event.stopPropagation();
}
},
@ -224,7 +224,7 @@
if($popup.size() === 0) {
module.create();
}
if( !$module.hasClass(className.active) ) {
if( !$module.hasClass(className.visible) ) {
if( module.position() ) {
module.show();
}
@ -367,10 +367,10 @@
.stop()
.fadeOut(200)
.prev($module)
.removeClass(className.active)
.removeClass(className.visible)
;
$module
.addClass(className.active)
.addClass(className.visible)
;
$popup
.removeClass(className.loading)
@ -398,7 +398,7 @@
hide: function() {
$module
.removeClass(className.active)
.removeClass(className.visible)
;
if($popup.is(':visible') ) {
module.debug('Hiding pop-up');
@ -564,7 +564,7 @@
className : {
popup : 'ui popup',
active : 'active',
visible : 'visible',
loading : 'loading'
},

Write Preview
Loading…
Cancel
Save