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

starting on text blocks 

Former-commit-id: 807da62f0a
Former-commit-id: 52b54ef1c5
pull/258/head
Jack Lukic 11 years ago
parent
b690f5b2be
commit
aa2a2003cc
6 changed files with 452 additions and 63 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      docs/label.html
  2. 276
      docs/text.html
  3. 28
      src/spec/multiple.js
  4. 111
      src/ui/flat/block.css
  5. 67
      src/ui/flat/label.css
  6. 6
      src/ui/flat/segment.css

27
docs/label.html
View File

@ -118,11 +118,11 @@
<a href="table.html" class="item">3. Table</a>
<a href="menu.html" class="item">4. Menu</a>
<a class="active item">5. Label</a>
<a class="item">7. Items</a>
<a href="text.html" class="item">6. Text Block</a>
</div>
</div>
<div class="icon next link item">
<i class="icon right-open"></i>
<a href="text.html"><i class="icon right-open"></i></a>
</div>
<div class="right menu">
<a class="item" href="https://github.com/quirkyinc/semantic">
@ -185,24 +185,11 @@
<div class="ui two elements">
<div class="element">
<div class="ui segment">
<div class="ui black attached label">New Users</div>
<div class="ui fluid form">
<div class="two fields">
<div class="field">
<label>E-mail</label>
<input type="text">
</div>
<div class="field">
<label>Username</label>
<input type="password">
</div>
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui blue button">Sign up</div>
</div>
<div class="ui attached label">Top Left</div>
<div class="ui right attached label">Top Right</div>
<div class="ui bottom attached label">Bottom Left</div>
<div class="ui bottom right attached label">Bottom Right</div>
<p style="margin:40px 0px;">Hey let's look at labels.</p>
</div>
</div>
<div class="element">

276
docs/text.html
View File

@ -0,0 +1,276 @@
<!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/grid.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/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 black menu">
<div class="container">
<div class="title item">
Semantic UI: Text Block
</div>
<div class="icon previous link item">
<a href="label.html"><i class="icon left-open"></i></a>
</div>
<div class="section dropdown item">
6 of 14
<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 blue menu button">Menu</div>
</div>
<div class="segment">
<div class="container">
<h1>Text Block</h1>
<p>Text Blocks can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing link menu">
<div class="active item">Standard</div>
<div class="item">States</div>
<div class="item">Variations</div>
<div class="item">Groups</div>
</div>
</div>
<h2>Standard</h2>
<div class="example">
<h4>Text Block</h4>
<p>A basic text block</p>
<div class="ui block">
<div class="header">
Welcome back!
</div>
<p>
It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.
</p>
<p>
Perhaps we can talk about it if you have the time.
</p>
</div>
</div>
<div class="example">
<h4>List Block</h4>
<p>A text block with a list</p>
<div class="ui block">
<div class="header">
Welcome back!
</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
</ul>
</div>
</div>
<div class="example">
<h4>Dismissable Block</h4>
<p>A text block that the user can choose to hide</p>
<div class="ui block">
<i class="icon close"></i>
<div class="header">
Welcome back!
</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
</ul>
</div>
</div>
<h2>States</h2>
<p>Text Blocks only have a single ui state</p>
<h2>Variations</h2>
<div class="example">
<h4>Warning Block</h4>
<p>A text block that is dismissable.</p>
<div class="ui warning block">
<i class="icon close"></i>
<div class="header">
You must register before you can do that!
</div>
<p>Visit our registration page, then try again</p>
</div>
</div>
<div class="example">
<h4>Info Block</h4>
<p>A text block that is dismissable.</p>
<div class="ui info block">
<i class="icon close"></i>
<div class="header">
Was this what you wanted?
</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
</ul>
</div>
</div>
<div class="example">
<h4>Success Block</h4>
<p>A text block that is formatted to display success message.</p>
<div class="ui success block">
<i class="icon close"></i>
<div class="header">
Congratulations, you are now a member!
</div>
</div>
</div>
<div class="example">
<h4>Error Block</h4>
<p>A text block that formatted to display errors, can also use classname "red" or "negative".</p>
<div class="ui error block">
<i class="icon close"></i>
<div class="header">
Was this what you wanted?
</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

28
src/spec/multiple.js
View File

@ -227,38 +227,46 @@ $.fn.example = function(parameters) {
log: function(message) {
var
currentTime,
executionTime
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
executionTime = currentTime - time;
previousTime = time || currentTime,
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Name' : message,
performance.push({
'Name' : message,
'Execution Time' : executionTime
});
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 500);
module.performance.timer = setTimeout(module.performance.display, 100);
}
},
// Performance data is assumed to be complete 500ms after the last log message receieved
display: function() {
var
title = settings.moduleName + ' Performance (' + selector + ')',
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)'
title = settings.moduleName + ' Performance (' + selector + ')',
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0
;
if(console.group !== undefined && performance.length > 0) {
console.groupCollapsed(title);
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title );
if(console.table) {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ':' + data['Execution Time']);
totalExecutionTime += data['Execution Time'];
});
}
console.log('Total Execution Time:', totalExecutionTime);
console.groupEnd();
performance = [];
time = false;
}
}
},

111
src/ui/flat/block.css
View File

@ -1,15 +1,31 @@
/*
* # Semantic Text Block - Flat
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 29 2013
*/
/*******************************
Text Block
*******************************/
.ui.block {
position: relative;
min-height: 18px;
margin: 15px 0px;
margin: 1em 0em;
height: auto;
background-color: rgba(0, 0, 0, 0.04);
padding: 1em;
font-size: 16px;
line-height: 1.33;
height: auto;
padding: 1em;
color: #333333;
color: rgba(0, 0, 0, 0.6);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
@ -39,39 +55,88 @@
/* block with paragraphs */
.ui.block > p {
margin: 5px 0px;
opacity: 0.85;
margin: 0.3em 0em;
}
.ui.block > p:first-child {
margin: 0px;
margin-top: 0em;
}
/* block with child list */
.ui.block ul.list {
opacity: 0.85;
list-style-position: inside;
margin: 0px 0px 0px;
padding: 0px;
margin: 0.3em 0em;
padding: 0em;
}
.ui.block ul.list li {
position: relative;
list-style-type: none;
margin: 0px 0px 0px 10px;
padding: 0px;
margin: 0em 0em 0em 0.8em;
padding: 0em;
}
.ui.block ul.list li:before {
position: absolute;
content: '\2022';
top: -0.05em;
left: -10px;
left: -0.8em;
height: 100%;
vertical-align: baseline;
color: rgba(0, 0, 0, 0.3);
opacity: 0.5;
}
.ui.block ul.list li:first-child {
margin-top: 0px;
}
/* dismissable block */
.ui.block > .icon.close {
cursor: pointer;
position: absolute;
top: 1em;
right: 0.5em;
opacity: 0.7;
-webkit-transition:
opacity 0.1s linear
;
-moz-transition:
opacity 0.1s linear
;
-o-transition:
opacity 0.1s linear
;
-ms-transition:
opacity 0.1s linear
;
transition:
opacity 0.1s linear
;
}
.ui.block > .icon.close:hover {
opacity: 1;
}
/*******************************
States
*******************************/
.ui.block.show,
.ui.header.show {
display: block;
}
.ui.block.hide,
.ui.header.hide {
display: none;
}
/*******************************
Variations
*******************************/
/*--------------
Colors
---------------*/
@ -82,6 +147,10 @@
background-color: #E9F9FF;
color: #1D6582;
}
.ui.blue.block .header,
.ui.info.block .header {
opacity: 1;
}
/* Success Text Block */
.ui.green.block,
@ -94,7 +163,6 @@
/* Warning Text Block */
.ui.yellow.block,
.ui.warning.header,
.ui.warning.block {
background-color: #F6F3D5;
border-color: #CBB105;
@ -109,16 +177,3 @@
color: #AD0000;
border-color: #B06C6C;
}
/*--------------
States
---------------*/
.ui.block.show,
.ui.header.show {
display: block;
}
.ui.block.hide,
.ui.header.hide {
display: none;
}

67
src/ui/flat/label.css
View File

@ -1,3 +1,15 @@
/*
* # Semantic Label - Flat
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 26 2013
*/
/*******************************
Label
*******************************/
@ -48,6 +60,22 @@ a.ui.label {
cursor: pointer;
margin-left: 0.5em;
opacity: 0.7;
-webkit-transition:
background 0.1s linear
;
-moz-transition:
background 0.1s linear
;
-o-transition:
background 0.1s linear
;
-ms-transition:
background 0.1s linear
;
transition:
background 0.1s linear
;
}
/*******************************
@ -138,11 +166,10 @@ a.ui.label {
position: absolute;
top: 0px;
left: 0px;
margin-top: 0px !important;
padding: 0.5em 1em;
background-color: #FAFAFA;
color: #999999;
color: #AAAAAA;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@ -151,6 +178,40 @@ a.ui.label {
-moz-border-radius: 5px 0px 5px 0px;
border-radius: 5px 0px 5px 0px;
}
.ui.right.attached.label {
left: auto;
right: 0px;
border: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0px 5px 0px 5px;
-moz-border-radius: 0px 5px 0px 5px;
border-radius: 0px 5px 0px 5px;
}
.ui.bottom.attached.label {
top: auto;
bottom: 0px;
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0px 5px 0px 5px;
-moz-border-radius: 0px 5px 0px 5px;
border-radius: 0px 5px 0px 5px;
}
.ui.bottom.right.attached.label {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px 0px 5px 0px;
-moz-border-radius: 5px 0px 5px 0px;
border-radius: 5px 0px 5px 0px;
}

6
src/ui/flat/segment.css
View File

@ -16,14 +16,16 @@
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
min-height: 50px;
overflow: hidden;
}
/* Label at the top of a segment */
.ui.segment .label:first-child + * {
.ui.segment .attached.label:first-child + * {
margin-top: 2em;
}
.ui.segment .bottom.attached.label:first-child + * {
margin-top: 0em;
}
/* Compatability with Grid */
.ui.fitted.elements .ui.segment.element:first-child {

Write Preview
Loading…
Cancel
Save