Browse Source
Conflicts: docs/form.html Former-commit-id: d526f2e57657335cf44edc50fa35a79cfc4090a0 Former-commit-id: b08c58f32a926d728b0ad45ec9ddd5d5393203f8beta
Jack Lukic
12 years ago
71 changed files with 9830 additions and 1269 deletions
@ -1 +0,0 @@ |
|||
c508b0af276ef6d67a302391fd4f07d960597be9 |
|||
@ -0,0 +1 @@ |
|||
bcbdac0112db03c61221dff30aac156ea17ca354 |
|||
@ -0,0 +1 @@ |
|||
e687f3b19d0e732fe65e366f41c9d1d9d1b20415 |
|||
@ -0,0 +1 @@ |
|||
c0bfe9091fe0c8eca2a07e2d357a756a098db8f6 |
|||
@ -0,0 +1 @@ |
|||
1f706e3e82012131896883d58311eee778781216 |
|||
@ -0,0 +1 @@ |
|||
0ee2ef6c76e9f09e071889fb36b00a40e9b28c00 |
|||
@ -0,0 +1 @@ |
|||
a1edbbc12498e8e53c839a2668129d582d68dc47 |
|||
@ -1,144 +0,0 @@ |
|||
// namespace
|
|||
var shape = { |
|||
handler: {} |
|||
}; |
|||
|
|||
// ready event
|
|||
shape.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$ui = $('.ui').not('.hover, .down'), |
|||
$swap = $('.swap'), |
|||
$menu = $('.menu.button'), |
|||
$demo = $('.demo'), |
|||
$waypoints = $('h2'), |
|||
|
|||
$peek = $('.peek'), |
|||
$peekMenu = $peek.find('li'), |
|||
$code = $('.code'), |
|||
|
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
// event handlers
|
|||
handler = { |
|||
|
|||
initializeCode: function() { |
|||
var |
|||
$content = $(this), |
|||
contentType = $content.data('type') || 'javascript', |
|||
editor = ace.edit($content[0]), |
|||
editorSession = editor.getSession(), |
|||
padding = 3, |
|||
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth() |
|||
; |
|||
editor.setTheme('ace/theme/github'); |
|||
editor.setShowPrintMargin(false); |
|||
editor.setReadOnly(true); |
|||
editor.renderer.setShowGutter(false); |
|||
editor.setHighlightActiveLine(false); |
|||
|
|||
editorSession.setMode('ace/mode/'+ contentType); |
|||
editorSession.setTabSize(2); |
|||
editorSession.setUseSoftTabs(true); |
|||
|
|||
|
|||
$(this).height(codeHeight + 'px'); |
|||
editor.resize(); |
|||
|
|||
}, |
|||
|
|||
peek: function() { |
|||
$('html, body') |
|||
.stop() |
|||
.animate({ |
|||
scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90 |
|||
}, 500, function(){ |
|||
$(this).addClass('active').siblings().removeClass('active'); |
|||
}) |
|||
; |
|||
$('html') |
|||
.one('scroll', function() { |
|||
$('html,body').stop(); |
|||
}) |
|||
; |
|||
}, |
|||
swapStyle: function() { |
|||
$('head link.ui') |
|||
.each(function() { |
|||
var |
|||
href = $(this).attr('href') |
|||
; |
|||
if( href.search('flat') > -1 ) { |
|||
$(this).attr('href', href.replace('flat', 'shaded')); |
|||
} |
|||
else { |
|||
$(this).attr('href', href.replace('shaded', 'flat')); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
}; |
|||
|
|||
// attach events
|
|||
$ui |
|||
.state() |
|||
; |
|||
|
|||
$waypoints |
|||
.waypoint({ |
|||
continuous : false, |
|||
offset : 215, |
|||
handler : function(direction) { |
|||
var |
|||
index = (direction == 'down') |
|||
? $waypoints.index(this) |
|||
: ($waypoints.index(this) - 1 >= 0) |
|||
? ($waypoints.index(this) - 1) |
|||
: 0 |
|||
; |
|||
$peekMenu |
|||
.removeClass('active') |
|||
.eq( index ) |
|||
.addClass('active') |
|||
; |
|||
} |
|||
}) |
|||
; |
|||
|
|||
if(window.ace !== undefined) { |
|||
$code |
|||
.each(handler.initializeCode) |
|||
; |
|||
} |
|||
|
|||
$swap |
|||
.on('click', handler.swapStyle) |
|||
; |
|||
|
|||
$menu |
|||
.sidr({ |
|||
name: 'menu' |
|||
}) |
|||
; |
|||
|
|||
$peek |
|||
.waypoint('sticky', { |
|||
offset: 80, |
|||
stuckClass: 'stuck' |
|||
}) |
|||
; |
|||
$peekMenu |
|||
.state() |
|||
.on('click', handler.peek) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(shape.ready) |
|||
; |
|||
@ -0,0 +1,224 @@ |
|||
// namespace
|
|||
window.semantic = { |
|||
handler: {} |
|||
}; |
|||
|
|||
// ready event
|
|||
semantic.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$ui = $('.ui').not('.hover, .down'), |
|||
$swap = $('.theme.menu .item'), |
|||
$menu = $('.menu.button'), |
|||
$demo = $('.demo'), |
|||
$waypoints = $('h2'), |
|||
|
|||
$example = $('.example'), |
|||
|
|||
$peek = $('.peek'), |
|||
$peekMenu = $peek.find('li'), |
|||
$code = $('div.code'), |
|||
|
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
// event handlers
|
|||
handler = { |
|||
|
|||
createIcon: function() { |
|||
$example |
|||
.each(function(){ |
|||
$('<i/>') |
|||
.addClass('icon code') |
|||
.prependTo( $(this) ) |
|||
; |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
createCode: function() { |
|||
var |
|||
$example = $(this).closest('.example'), |
|||
$shape = $example.find('.shape.module'), |
|||
$demo = $example.children().slice(3).not('.annotated'), |
|||
$annotated = $example.find('.annotated'), |
|||
$code = $annotated.find('.code'), |
|||
whiteSpace = new RegExp('\\n\\s{4}', 'g'), |
|||
code = '' |
|||
; |
|||
// if ui has wrapper use that
|
|||
if($demo.filter('.ui').size() === 0) { |
|||
$demo = $example.children().eq(3).children(); |
|||
} |
|||
// add source if doesnt exist and initialize
|
|||
if($annotated.size() === 0) { |
|||
$annotated = $('<div/>') |
|||
.addClass('annotated') |
|||
.appendTo($example) |
|||
; |
|||
} |
|||
if( $code.size() === 0) { |
|||
$demo |
|||
.each(function(){ |
|||
if($(this).hasClass('ui')) { |
|||
code += $(this).get(0).outerHTML + "\n"; |
|||
} |
|||
}) |
|||
; |
|||
code = $.trim(code.replace(whiteSpace, '\n')); |
|||
$code = $('<div/>') |
|||
.data('type', 'html') |
|||
.addClass('code') |
|||
.text(code) |
|||
.appendTo($annotated) |
|||
; |
|||
$.proxy(handler.initializeCode, $code)(); |
|||
} |
|||
if( $demo.first().is(':visible') ) { |
|||
$demo.hide(); |
|||
$annotated.fadeIn(500); |
|||
} |
|||
else { |
|||
$annotated.hide(); |
|||
if($demo.size() > 1) { |
|||
$demo.show(); |
|||
} |
|||
else { |
|||
$demo.fadeIn(500); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
initializeCode: function() { |
|||
var |
|||
$code = $(this), |
|||
contentType = $code.data('type') || 'javascript', |
|||
editor = ace.edit($code[0]), |
|||
editorSession = editor.getSession(), |
|||
padding = 4, |
|||
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding |
|||
; |
|||
editor.setTheme('ace/theme/github'); |
|||
editor.setShowPrintMargin(false); |
|||
editor.setReadOnly(true); |
|||
editor.renderer.setShowGutter(false); |
|||
editor.setHighlightActiveLine(false); |
|||
|
|||
editorSession.setMode('ace/mode/'+ contentType); |
|||
editorSession.setTabSize(2); |
|||
editorSession.setUseSoftTabs(true); |
|||
|
|||
|
|||
$(this).height(codeHeight + 'px'); |
|||
editor.resize(); |
|||
|
|||
}, |
|||
|
|||
peek: function() { |
|||
$('html, body') |
|||
.stop() |
|||
.animate({ |
|||
scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90 |
|||
}, 500, function(){ |
|||
$(this).addClass('active').siblings().removeClass('active'); |
|||
}) |
|||
; |
|||
$('html') |
|||
.one('scroll', function() { |
|||
$('html,body').stop(); |
|||
}) |
|||
; |
|||
}, |
|||
swapStyle: function() { |
|||
var |
|||
theme = $(this).data('theme') |
|||
; |
|||
$(this) |
|||
.addClass('active') |
|||
.siblings() |
|||
.removeClass('active') |
|||
; |
|||
$('head link.ui') |
|||
.each(function() { |
|||
var |
|||
href = $(this).attr('href'), |
|||
subDirectory = href.split('/')[3], |
|||
newLink = href.replace(subDirectory, theme) |
|||
; |
|||
console.log(theme, newLink); |
|||
$(this) |
|||
.attr('href', newLink) |
|||
; |
|||
}) |
|||
; |
|||
} |
|||
}; |
|||
|
|||
// attach events
|
|||
$ui |
|||
.state() |
|||
; |
|||
|
|||
$waypoints |
|||
.waypoint({ |
|||
continuous : false, |
|||
offset : 215, |
|||
handler : function(direction) { |
|||
var |
|||
index = (direction == 'down') |
|||
? $waypoints.index(this) |
|||
: ($waypoints.index(this) - 1 >= 0) |
|||
? ($waypoints.index(this) - 1) |
|||
: 0 |
|||
; |
|||
$peekMenu |
|||
.removeClass('active') |
|||
.eq( index ) |
|||
.addClass('active') |
|||
; |
|||
} |
|||
}) |
|||
; |
|||
|
|||
if(window.ace !== undefined) { |
|||
$code |
|||
.each(handler.initializeCode) |
|||
; |
|||
} |
|||
|
|||
handler.createIcon(); |
|||
$example |
|||
.find('i.code') |
|||
.on('click', handler.createCode) |
|||
; |
|||
|
|||
$swap |
|||
.on('click', handler.swapStyle) |
|||
; |
|||
|
|||
$menu |
|||
.sidr({ |
|||
name: 'menu' |
|||
}) |
|||
; |
|||
|
|||
$peek |
|||
.waypoint('sticky', { |
|||
offset: 80, |
|||
stuckClass: 'stuck' |
|||
}) |
|||
; |
|||
$peekMenu |
|||
.state() |
|||
.on('click', handler.peek) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.ready) |
|||
; |
|||
@ -0,0 +1,23 @@ |
|||
semantic.table = {}; |
|||
|
|||
// ready event
|
|||
semantic.table.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$sortTable = $('.sortable.table'), |
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
$sortTable |
|||
.tablesort() |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.table.ready) |
|||
; |
|||
@ -0,0 +1 @@ |
|||
9908c1a7219dda4289be6b1dce8de87c439bec13 |
|||
@ -0,0 +1,209 @@ |
|||
/* |
|||
A simple, lightweight jQuery plugin for creating sortable tables. |
|||
https://github.com/kylefox/jquery-tablesort
|
|||
Version 0.0.1 |
|||
*/ |
|||
|
|||
;(function($) { |
|||
|
|||
$.tablesort = function ($table, settings) { |
|||
var self = this; |
|||
this.$table = $table; |
|||
this.settings = $.extend({}, $.tablesort.defaults, settings); |
|||
this.$table.find('thead th').bind('click.tablesort', function() { |
|||
if( !$(this).hasClass('disabled') ) { |
|||
self.sort($(this)); |
|||
} |
|||
}); |
|||
this.index = null; |
|||
this.$th = null; |
|||
this.direction = []; |
|||
}; |
|||
|
|||
$.tablesort.prototype = { |
|||
|
|||
sort: function(th, direction) { |
|||
var start = new Date(), |
|||
self = this, |
|||
table = this.$table, |
|||
rows = table.find('tbody tr'), |
|||
index = th.index(), |
|||
cache = [], |
|||
fragment = $('<div/>'), |
|||
sortValueForCell = function(th, td, sorter) { |
|||
var |
|||
sortBy |
|||
; |
|||
if(th.data().sortBy) { |
|||
sortBy = th.data().sortBy; |
|||
return (typeof sortBy === 'function') |
|||
? sortBy(th, td, sorter) |
|||
: sortBy |
|||
; |
|||
} |
|||
return ( td.data('sort') ) |
|||
? td.data('sort') |
|||
: td.text() |
|||
; |
|||
}, |
|||
naturalSort = function naturalSort (a, b) { |
|||
var |
|||
chunkRegExp = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi, |
|||
stripRegExp = /(^[ ]*|[ ]*$)/g, |
|||
dateRegExp = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/, |
|||
numericRegExp = /^0x[0-9a-f]+$/i, |
|||
oRegExp = /^0/, |
|||
cLoc = 0, |
|||
useInsensitive = function(string) { |
|||
return ('' + string).toLowerCase().replace(',', ''); |
|||
}, |
|||
// convert all to strings strip whitespace
|
|||
x = useInsensitive(a).replace(stripRegExp, '') || '', |
|||
y = useInsensitive(b).replace(stripRegExp, '') || '', |
|||
// chunk/tokenize
|
|||
xChunked = x.replace(chunkRegExp, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'), |
|||
yChunked = y.replace(chunkRegExp, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'), |
|||
chunkLength = Math.max(xChunked.length, yChunked.length), |
|||
// numeric, hex or date detection
|
|||
xDate = parseInt(x.match(numericRegExp), 10) || (xChunked.length != 1 && x.match(dateRegExp) && Date.parse(x)), |
|||
yDate = parseInt(y.match(numericRegExp), 10) || xDate && y.match(dateRegExp) && Date.parse(y) || null, |
|||
xHexValue, |
|||
yHexValue, |
|||
index |
|||
; |
|||
// first try and sort Hex codes or Dates
|
|||
if (yDate) { |
|||
if( xDate < yDate ) { |
|||
return -1; |
|||
} |
|||
else if ( xDate > yDate ) { |
|||
return 1; |
|||
} |
|||
} |
|||
// natural sorting through split numeric strings and default strings
|
|||
for(index = 0; index < chunkLength; index++) { |
|||
// find floats not starting with '0', string or 0 if not defined (Clint Priest)
|
|||
xHexValue = !(xChunked[index] || '').match(oRegExp) && parseFloat(xChunked[index]) || xChunked[index] || 0; |
|||
yHexValue = !(yChunked[index] || '').match(oRegExp) && parseFloat(yChunked[index]) || yChunked[index] || 0; |
|||
// handle numeric vs string comparison - number < string - (Kyle Adams)
|
|||
if (isNaN(xHexValue) !== isNaN(yHexValue)) { |
|||
return ( isNaN(xHexValue) ) |
|||
? 1 |
|||
: -1 |
|||
; |
|||
} |
|||
// rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
|
|||
else if (typeof xHexValue !== typeof yHexValue) { |
|||
xHexValue += ''; |
|||
yHexValue += ''; |
|||
} |
|||
if (xHexValue < yHexValue) { |
|||
return -1; |
|||
} |
|||
if (xHexValue > yHexValue) { |
|||
return 1; |
|||
} |
|||
} |
|||
return 0; |
|||
} |
|||
; |
|||
|
|||
if(rows.length === 0) { |
|||
return; |
|||
} |
|||
|
|||
self.$table.find('thead th').removeClass(self.settings.asc + ' ' + self.settings.desc); |
|||
|
|||
this.$th = th; |
|||
if(this.index != index) { |
|||
this.direction[index] = 'desc'; |
|||
} |
|||
else if(direction !== 'asc' && direction !== 'desc') { |
|||
this.direction[index] = this.direction[index] === 'desc' ? 'asc' : 'desc'; |
|||
} |
|||
else { |
|||
this.direction[index] = direction; |
|||
} |
|||
this.index = index; |
|||
direction = this.direction[index] == 'asc' ? 1 : -1; |
|||
|
|||
self.$table.trigger('tablesort:start', [self]); |
|||
self.log("Sorting by " + this.index + ' ' + this.direction[index]); |
|||
|
|||
rows.sort(function(a, b) { |
|||
var aRow = $(a); |
|||
var bRow = $(b); |
|||
var aIndex = aRow.index(); |
|||
var bIndex = bRow.index(); |
|||
|
|||
// Sort value A
|
|||
if(cache[aIndex]) { |
|||
a = cache[aIndex]; |
|||
} |
|||
else { |
|||
a = sortValueForCell(th, self.cellToSort(a), self); |
|||
cache[aIndex] = a; |
|||
} |
|||
// Sort Value B
|
|||
if(cache[bIndex]) { |
|||
b = cache[bIndex]; |
|||
} |
|||
else { |
|||
b = sortValueForCell(th, self.cellToSort(b), self); |
|||
cache[bIndex]= b; |
|||
} |
|||
return (naturalSort(a, b) * direction); |
|||
}); |
|||
|
|||
rows.each(function(i, tr) { |
|||
fragment.append(tr); |
|||
}); |
|||
table.append(fragment.html()); |
|||
|
|||
th.addClass(self.settings[self.direction[index]]); |
|||
|
|||
self.log('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms'); |
|||
self.$table.trigger('tablesort:complete', [self]); |
|||
|
|||
}, |
|||
|
|||
cellToSort: function(row) { |
|||
return $($(row).find('td').get(this.index)); |
|||
}, |
|||
|
|||
|
|||
log: function(msg) { |
|||
if(($.tablesort.DEBUG || this.settings.debug) && console && console.log) { |
|||
console.log('[tablesort] ' + msg); |
|||
} |
|||
}, |
|||
|
|||
destroy: function() { |
|||
this.$table.find('thead th').unbind('click.tablesort'); |
|||
this.$table.data('tablesort', null); |
|||
return null; |
|||
} |
|||
|
|||
}; |
|||
|
|||
$.tablesort.DEBUG = false; |
|||
|
|||
$.tablesort.defaults = { |
|||
debug: $.tablesort.DEBUG, |
|||
asc: 'sorted ascending', |
|||
desc: 'sorted descending' |
|||
}; |
|||
|
|||
$.fn.tablesort = function(settings) { |
|||
var table, sortable, previous; |
|||
return this.each(function() { |
|||
table = $(this); |
|||
previous = table.data('tablesort'); |
|||
if(previous) { |
|||
previous.destroy(); |
|||
} |
|||
table.data('tablesort', new $.tablesort(table, settings)); |
|||
}); |
|||
}; |
|||
|
|||
})(jQuery); |
|||
@ -0,0 +1,316 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>UI Menu - 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/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/checkbox.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" 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 href="#"><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 href="#"><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="item"><a href="tag.html">Tags</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 href="#"><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 href="#"><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 href="#"><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: Menu |
|||
</div> |
|||
<div class="icon previous link item"> |
|||
<a href="button.html"><i class="icon left-open"></i></a> |
|||
</div> |
|||
<div class="section dropdown item"> |
|||
3 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 class="item active">4. Menu</a> |
|||
<a class="item">5. Elements</a> |
|||
<a class="item">6. Tags</a> |
|||
<a class="item">7. Items</a> |
|||
<a class="item">8. Panels</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>Menu</h1> |
|||
<p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, or other item types.</p> |
|||
<p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui large vertical pointing bottom attached panel"> |
|||
<li class="active">Collection</li> |
|||
<li>Elements</li> |
|||
<li>Variations</li> |
|||
<li>Group</li> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Collection</h2> |
|||
<div class="example"> |
|||
<h4>Menu</h4> |
|||
|
|||
<p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p> |
|||
<div class="ui menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
<a>Current section</a> |
|||
</div> |
|||
<div class="item"> |
|||
<a>Section 1</a> |
|||
</div> |
|||
<div class="icon item"> |
|||
<a><i class="icon heart"></i></a> |
|||
</div> |
|||
<div class="right dropdown item"> |
|||
Dropdown <i class="icon down-dir"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
<div class="item">Choice 3</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Vertical Menu</h4> |
|||
<p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p> |
|||
<div class="ui vertical menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
<a href="#">Current section</a> |
|||
</div> |
|||
<div class="item"> |
|||
<a href="#">Grouped Section</a> |
|||
<div class="menu"> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
</div> |
|||
</div> |
|||
<div class="dropdown item"> |
|||
Dropdown <i class="icon right-dir"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
<div class="item">Choice 3</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Elements</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Text Item</h4> |
|||
<p>Your menu may have a simple text item</p> |
|||
<div class="ui vertical menu"> |
|||
<div class="item"> |
|||
Text Item |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4>Link Item</h4> |
|||
<p>Your menu may have either a real page link or an item that behaves as a link.</p> |
|||
<div class="ui vertical menu"> |
|||
<a href="http://www.google.com" class="item"> |
|||
Visit Google |
|||
</a> |
|||
<div class="link item"> |
|||
Javascript Link |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<h2>States</h2> |
|||
|
|||
<h2>Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Pointing (Horizontal)</h4> |
|||
<p>A horizontal menu can point to content below itself to show ownership</p> |
|||
<div class="ui pointing menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
<a href="#">Current section</a> |
|||
</div> |
|||
<div class="right menu"> |
|||
<div class="dropdown item"> |
|||
Dropdown <i class="icon down-dir"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
<div class="item">Choice 3</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4>Pointing (Horizontal)</h4> |
|||
<p>A menu can point to content adjacent to itself to show ownership</p> |
|||
<div class="ui pointing vertical menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
<a href="#">Current section</a> |
|||
</div> |
|||
<div class="item"> |
|||
<a href="#">Grouped Section</a> |
|||
<div class="menu"> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
</div> |
|||
</div> |
|||
<div class="dropdown item"> |
|||
Dropdown <i class="icon right-dir"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
<div class="item">Choice 3</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Groups</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Menu Groups</h4> |
|||
<p>Menu can exist side by side to show relation</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,197 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>UI ZZZZZZZZZZZZZ - 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/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/checkbox.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" 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="sidr" id="menu"> |
|||
<ul> |
|||
<li><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 href="form.html">Forms</a></li> |
|||
<li><a href="table.html">Table</a></li> |
|||
<li><a href="table.html">Steps</a></li> |
|||
<li><a href="table.html">Progress</a></li> |
|||
<li><a href="text.html">Text Block</a></li> |
|||
<li><a href="header.html">Headers</a></li> |
|||
<li><a href="header.html">Segment</a></li> |
|||
<li><a href="column.html">Columns</a></li> |
|||
<li><a href="element.html">Elements (Grid System)</a></li> |
|||
<li><a href="tag.html">Tags</a></li> |
|||
<li><a href="item.html">Items (Lists of Content)</a></li> |
|||
<li><a href="panel.html">Panels (Type of Menu)</a></li> |
|||
<li><a href="icon.html">Icons</a></li> |
|||
<li><a href="divider.html">Dividers</a></li> |
|||
</ul> |
|||
</li> |
|||
<li><a href="#">UI Collections</a> |
|||
<ul> |
|||
<li><a href="activity.html">Activity Feed</a></li> |
|||
<li><a href="list.html">Content List</a></li> |
|||
<li><a href="user-list.html">User List</a></li> |
|||
<li><a href="form.html">Forms</a></li> |
|||
</ul> |
|||
</li> |
|||
<li><a href="#">UI Modules</a> |
|||
<ul> |
|||
<li><a href="accordion.html">Accordion</a></li> |
|||
<li><a href="chatroom.html">Chat Room</a></li> |
|||
<li><a href="modal.html">Modal</a></li> |
|||
<li><a href="nag.html">Nag</a></li> |
|||
<li><a href="popup.html">Popup</a></li> |
|||
<li><a href="search.html">Search</a></li> |
|||
<li><a href="star.html">Star Rating</a></li> |
|||
<li><a href="tab.html">Tabs</a></li> |
|||
</ul> |
|||
</li> |
|||
<li><a href="#">Behavioral Modules</a> |
|||
<ul> |
|||
<li><a href="api.html">API</a></li> |
|||
<li><a href="animation.html">Animation</a></li> |
|||
<li><a href="validate.html">Form Validation</a></li> |
|||
<li><a href="placeholder.html">Placeholder Text</a></li> |
|||
<li><a href="shape.html">Shape</a></li> |
|||
<li><a href="state.html">State</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="ui fixed transparent black menu"> |
|||
<div class="container"> |
|||
<div class="title item"> |
|||
Semantic UI: ZZZZZZZZZZZZZ |
|||
</div> |
|||
<div class="icon previous link item"> |
|||
<a href="button.html"><i class="icon left-open"></i></a> |
|||
</div> |
|||
<div class="section dropdown item"> |
|||
3 of 14 |
|||
<div class="menu"> |
|||
<a href="button.html" class="item">1. Button</a> |
|||
<a class="active item">2. Form</a> |
|||
<a class="item">3. Table</a> |
|||
<a class="item">4. Columns</a> |
|||
<a class="item">5. Elements</a> |
|||
<a class="item">6. Tags</a> |
|||
<a class="item">7. Items</a> |
|||
<a class="item">8. Panels</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>ZZZZZZZZZZZZZ</h1> |
|||
<p>qqqqqqqqqq</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui large vertical pointing bottom attached panel"> |
|||
<li class="active">Standard</li> |
|||
<li>States</li> |
|||
<li>Variations</li> |
|||
<li>Group</li> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Standard</h2> |
|||
<div class="example"> |
|||
<h4>ZZZZZZZZZZZZZ</h4> |
|||
<p>qqqqqqqqqq</p> |
|||
<div class="ui form"> |
|||
<div class="field"> |
|||
<label>User Input</label> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2>States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Loading</h4> |
|||
<p>If a ZZZZZZZZZZZZZ is in loading state, it will automatically show a loading indicator:</p> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Error</h4> |
|||
<p>If a ZZZZZZZZZZZZZ is in an error state, it will automatically show any error message blocks:</p> |
|||
</div> |
|||
|
|||
<h2>Variations</h2> |
|||
|
|||
<h3>Forms</h3> |
|||
|
|||
<div class="example"> |
|||
<h4>Size</h4> |
|||
<p>A ZZZZZZZZZZZZZ can also be small or large</p> |
|||
</div> |
|||
|
|||
<h2>Groups</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>ZZZZZZZZZZZZZ Groups</h4> |
|||
<p>ZZZZZZZZZZZZZ can exist side by side to show relation</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,589 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>UI Table - 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/divider.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/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/checkbox.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" 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/tablesort.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="javascript/table.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 href="#"><b>UI Elements</b></a> |
|||
<div class="menu"> |
|||
<div class="item"><a href="button.html">Button</a></div> |
|||
<div class="item"><a href="form.html">Forms</a></div> |
|||
<div class="active item"><a href="table.html">Table</a></div> |
|||
<div class="item"><a href="steps.html">Steps</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="item"><a href="tag.html">Tags</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 href="#"><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 href="#"><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 href="#"><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: Table |
|||
</div> |
|||
<div class="icon previous link item"> |
|||
<a href="form.html"><i class="icon left-open"></i></a> |
|||
</div> |
|||
<div class="section dropdown item"> |
|||
3 of 14 |
|||
<div class="menu"> |
|||
<a href="button.html" class="item">1. Button</a> |
|||
<a href="form.html" class="item">2. Form</a> |
|||
<a class="active item">3. Table</a> |
|||
<a class="item">4. Columns</a> |
|||
<a class="item">5. Elements</a> |
|||
<a class="item">6. Tags</a> |
|||
<a class="item">7. Items</a> |
|||
<a class="item">8. Panels</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="active 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>Tables</h1> |
|||
<p>Tables are useful for displaying collections of tuples.</p> |
|||
<p> |
|||
Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text. |
|||
</p> |
|||
<p>Although no plugin has been created using the <a href="generated/multiple.html">semantic module spec</a> for sorting tables, other plugins such as kylefox's <a href="https://github.com/kylefox/jquery-tablesort">tablesort</a> may be useful.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui large vertical pointing bottom attached panel"> |
|||
<li class="active">Standard</li> |
|||
<li>States</li> |
|||
<li>Variations</li> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Standard</h2> |
|||
<div class="example"> |
|||
<h4>Table</h4> |
|||
<p>A standard table</p> |
|||
<table class="ui table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th colspan="3"> |
|||
<div class="ui blue button">Add User</div> |
|||
</th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
<h2>States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Positive / Negative</h4> |
|||
<p>A cell may let a user know whether a value is good or bad:</p> |
|||
<table class="ui grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="positive"> |
|||
<td>Jimmy</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td class="negative">Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<h3>Cells</h3> |
|||
<div class="example"> |
|||
<h4>Error</h4> |
|||
<p>A cell or row may alert the user to an error or a negative value:</p> |
|||
<table class="ui grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="error"> |
|||
<td>Jimmy</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td class="error">Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Warning</h4> |
|||
<p>A cell or row may warn a user:</p> |
|||
<table class="ui grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="warning"> |
|||
<td>Jimmy</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td class="warning">Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Active</h4> |
|||
<p>A cell or row can be active:</p> |
|||
<table class="ui grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr class="active"> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="active">Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<h2>Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Collapsing</h4> |
|||
<p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p> |
|||
<table class="ui grid table collapsing"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Grid</h4> |
|||
<p>A table may have a grid to help differentiate cells</p> |
|||
<table class="ui grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Sortable</h4> |
|||
<p>A table may allow a user to sort contents by clicking on a table header.</p> |
|||
|
|||
<p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p> |
|||
|
|||
<table class="ui sortable grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No Action</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td class="positive">Approved</td> |
|||
<td class="warning">Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td class="negative">Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="example"> |
|||
<h4>Padded</h4> |
|||
<p>A table may sometimes need to be more padded for legibility</p> |
|||
<table class="ui padded grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Jamie was not interested in purchasing our product.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="example"> |
|||
<h4>Compact</h4> |
|||
<p>A table may sometimes need to be more compact to make more rows visible at a time</p> |
|||
<table class="ui compact grid table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Size</h4> |
|||
<p>A table can also be small or large</p> |
|||
<table class="ui small table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
<br><br> |
|||
<table class="ui large table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,125 @@ |
|||
|
|||
/******************************* |
|||
Activity Feed |
|||
*******************************/ |
|||
|
|||
/* Who */ |
|||
.ui.feed .event { |
|||
overflow: hidden; |
|||
border-top: 1px solid #D9D9D9; |
|||
padding: 11px 9px; |
|||
} |
|||
.ui.feed .event:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.feed .event .who { |
|||
float: left; |
|||
width: 35px; |
|||
height: 35px; |
|||
|
|||
background: #EFEFEF url(../images/placeholder-tiny.png) no-repeat center center; |
|||
|
|||
-webkit-box-shadow: -1px -1px 0 #F0F0F0 inset; |
|||
-moz-box-shadow: -1px -1px 0 #F0F0F0 inset; |
|||
box-shadow: -1px -1px 0 #F0F0F0 inset; |
|||
} |
|||
.ui.feed .event .who img { |
|||
display: block; |
|||
width: 35px; |
|||
} |
|||
|
|||
/* What */ |
|||
.ui.feed .event .what { |
|||
margin-left: 50px; |
|||
|
|||
font-size: 12px; |
|||
line-height: 1.33; |
|||
color: #555555; |
|||
} |
|||
.ui.feed .event .what p { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
.ui.feed .event .what a { |
|||
font-weight: bold; |
|||
} |
|||
.ui.feed .event .what img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.ui.feed .event .what blockquote { |
|||
display: block; |
|||
overflow: hidden; |
|||
|
|||
margin: 8px 0px; |
|||
background-color: #F6FAFC; |
|||
border: 1px solid #E8F2F7; |
|||
line-height: 1.6; |
|||
padding: 6px 9px; |
|||
|
|||
color: #666666; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.feed .event .what blockquote.grey { |
|||
background-color: #FAFAFA; |
|||
border: 1px solid #EAEAEA; |
|||
font-weight: bold; |
|||
} |
|||
.ui.feed .event blockquote img { |
|||
float: left; |
|||
width: 75px; |
|||
margin-right: 20px; |
|||
} |
|||
.ui.feed .event .what blockquote p { |
|||
margin: 0px 0px 10px; |
|||
} |
|||
|
|||
|
|||
.ui.feed .event .what .attached { |
|||
overflow: hidden; |
|||
margin: 8px 0px 0px; |
|||
} |
|||
.ui.feed .event .what .attached img { |
|||
float: left; |
|||
margin: 0px 5px 0px 0px; |
|||
} |
|||
.ui.feed .event .what .attached a img { |
|||
border: 1px solid #B2B2B2; |
|||
} |
|||
.ui.feed .event .what .attached a:hover img { |
|||
border: 1px solid #999999; |
|||
} |
|||
|
|||
/* When */ |
|||
.ui.feed .event .when { |
|||
float: right; |
|||
|
|||
font-size: 11px; |
|||
text-align: right; |
|||
color: #A1A1A1; |
|||
} |
|||
|
|||
|
|||
/* Expanded Style */ |
|||
.ui.large.feed .who { |
|||
width: auto; |
|||
height: auto; |
|||
} |
|||
.ui.large.feed .who img { |
|||
width: auto; |
|||
} |
|||
.ui.large.feed .what { |
|||
margin-left: 70px; |
|||
font-size: 14px; |
|||
line-height: 1.33; |
|||
} |
|||
.ui.large.feed .what blockquote { |
|||
color: #555555; |
|||
} |
|||
.ui.large.feed .what img { |
|||
display: block; |
|||
width: auto; |
|||
} |
|||
.ui.large.feed .when { |
|||
font-size: 12px; |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
/******************************* |
|||
Banner |
|||
*******************************/ |
|||
|
|||
.ui.banner { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1; |
|||
|
|||
margin-left: 6px; |
|||
padding: 8px 10px; |
|||
|
|||
border: 1px solid #D4DBDE; |
|||
background-color: #ECF6FB; |
|||
|
|||
text-align: center; |
|||
font-size: 10px; |
|||
color: #999999; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.banner b { |
|||
color: #666666; |
|||
} |
|||
.ui.banner:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
margin-top: -6px; |
|||
font-size: 12px; |
|||
} |
|||
.ui.banner:after, |
|||
.ui.banner.left:after { |
|||
color: #ECF6FB; |
|||
left: -7px; |
|||
right: auto; |
|||
content: '\25C0'; |
|||
text-shadow: -2px 0px 0px #D4DBDE; |
|||
} |
|||
.ui.banner.right { |
|||
margin-right: 6px; |
|||
} |
|||
.ui.banner.right:after { |
|||
left: auto; |
|||
right: -7px; |
|||
content: '\25B6'; |
|||
text-shadow: 2px 0px 0px #D4DBDE; |
|||
} |
|||
|
|||
/* Banner Icons */ |
|||
.ui.banner i { |
|||
margin-right: 0.5em; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
/* Banner Colors */ |
|||
.ui.banner.grey { |
|||
border-color: #D6D6D6; |
|||
background-color: #F3F3F3; |
|||
} |
|||
.ui.banner.grey:after, |
|||
.ui.banner.grey.left:after { |
|||
color: #F3F3F3; |
|||
text-shadow: -2px 0px 0px #D6D6D6; |
|||
} |
|||
.ui.banner.grey.right:after { |
|||
color: #F3F3F3; |
|||
text-shadow: 2px 0px 0px #D6D6D6; |
|||
} |
|||
|
|||
.ui.banner.big { |
|||
font-size: 12px; |
|||
padding: 11px 15px; |
|||
} |
|||
@ -0,0 +1,253 @@ |
|||
/******************************* |
|||
UI Checkbox |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Standard |
|||
---------------*/ |
|||
|
|||
.ui.checkbox { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.checkbox input { |
|||
visibility: hidden; |
|||
} |
|||
.ui.checkbox label { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0px; |
|||
border-radius: 4px; |
|||
|
|||
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
background: #fcfff4; |
|||
|
|||
background: -webkit-linear-gradient(#FFFFFF 0%, #EAEAEA 100%); |
|||
background: -moz-linear-gradient(#FFFFFF 0%, #EAEAEA 100%); |
|||
background: -o-linear-gradient(#FFFFFF 0%, #EAEAEA 100%); |
|||
background: -ms-linear-gradient(#FFFFFF 0%, #EAEAEA 100%); |
|||
background: linear-gradient(#FFFFFF 0%, #EAEAEA 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); |
|||
} |
|||
.ui.checkbox label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
opacity: 0; |
|||
content: ''; |
|||
position: absolute; |
|||
background: transparent; |
|||
border: 3px solid #333333; |
|||
border-top: none; |
|||
border-right: none; |
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
.ui.checkbox label:hover { |
|||
background-color: #FAFAFA; |
|||
background: -webkit-linear-gradient(#FFFFFF 0%, #F6F6F6 100%); |
|||
background: -moz-linear-gradient(#FFFFFF 0%, #F6F6F6 100%); |
|||
background: -o-linear-gradient(#FFFFFF 0%, #F6F6F6 100%); |
|||
background: -ms-linear-gradient(#FFFFFF 0%, #F6F6F6 100%); |
|||
background: linear-gradient(#FFFFFF 0%, #F6F6F6 100%); |
|||
} |
|||
|
|||
.ui.checkbox input:checked + label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|||
filter: alpha(opacity=100); |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* States */ |
|||
.ui.disabled.checkbox label, |
|||
.ui.checkbox input[disabled] + label { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
/* Resizes */ |
|||
.ui.checkbox, |
|||
.ui.checkbox label { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
.ui.checkbox label:after { |
|||
width: 7px; |
|||
height: 3px; |
|||
top: 4px; |
|||
left: 3px; |
|||
} |
|||
|
|||
.ui.large.checkbox, |
|||
.ui.large.checkbox label { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
.ui.large.checkbox label:after { |
|||
width: 9px; |
|||
height: 5px; |
|||
top: 4px; |
|||
left: 4px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Radio |
|||
---------------*/ |
|||
|
|||
.ui.radio.checkbox { |
|||
width: 14px; |
|||
height: 16px; |
|||
} |
|||
.ui.radio.checkbox label { |
|||
width: 14px; |
|||
height: 14px; |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
.ui.radio.checkbox label:after { |
|||
top: 3px; |
|||
left: 3px; |
|||
|
|||
border: none; |
|||
width: 8px; |
|||
height: 8px; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Rounded |
|||
---------------*/ |
|||
|
|||
/* Alternate Round Style */ |
|||
.ui.round.checkbox { |
|||
width: 20px; |
|||
height: 20px; |
|||
margin: 0px auto; |
|||
|
|||
background: #FCFFF4; |
|||
background: -webkit-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); |
|||
background: -moz-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); |
|||
background: -o-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); |
|||
background: -ms-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); |
|||
background: linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFFF4', endColorstr='#b3bead',GradientType=0 ); |
|||
|
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
|
|||
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
position: relative; |
|||
} |
|||
|
|||
.ui.round.checkbox label { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
width: 14px; |
|||
height: 14px; |
|||
|
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
left: 3px; |
|||
top: 3px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 1px rgba(0, 0, 0, 0.5) inset, |
|||
0px 1px 0px rgba(255,255,255,1) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 1px rgba(0, 0, 0, 0.5) inset, |
|||
0px 1px 0px rgba(255,255,255,1) |
|||
; |
|||
box-shadow: |
|||
0px 1px 1px rgba(0, 0, 0, 0.5) inset, |
|||
0px 1px 0px rgba(255,255,255,1) |
|||
; |
|||
|
|||
background: -webkit-linear-gradient(top, #222222 0%, #4D4D4D 100%); |
|||
background: -moz-linear-gradient(top, #222222 0%, #4D4D4D 100%); |
|||
background: -o-linear-gradient(top, #222222 0%, #4D4D4D 100%); |
|||
background: -ms-linear-gradient(top, #222222 0%, #4D4D4D 100%); |
|||
background: linear-gradient(top, #222222 0%, #4D4D4D 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 ); |
|||
} |
|||
|
|||
.ui.round.checkbox label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|||
filter: alpha(opacity=0); |
|||
opacity: 0; |
|||
content: ''; |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
background: #B6B6B6; |
|||
|
|||
background: -webkit-linear-gradient(top, #B6B6B6 0%, #929292 100%); |
|||
background: -moz-linear-gradient(top, #B6B6B6 0%, #929292 100%); |
|||
background: -o-linear-gradient(top, #B6B6B6 0%, #929292 100%); |
|||
background: -ms-linear-gradient(top, #B6B6B6 0%, #929292 100%); |
|||
background: linear-gradient(top, #B6B6B6 0%, #929292 100%); |
|||
|
|||
border: none; |
|||
-webkit-border-radius: 500px; |
|||
-moz-border-radius: 500px; |
|||
border-radius: 500px; |
|||
top: 2px; |
|||
left: 2px; |
|||
|
|||
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); |
|||
} |
|||
.ui.round.checkbox label:hover:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; |
|||
filter: alpha(opacity=30); |
|||
opacity: 0.3; |
|||
} |
|||
.ui.round.checkbox input:checked + label:after { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|||
filter: alpha(opacity=100); |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Variations */ |
|||
.ui.round.blue.checkbox label:after { |
|||
background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); |
|||
background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); |
|||
background: -o-linear-gradient(top, #016286 0%, #00506E 100%); |
|||
background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); |
|||
background: linear-gradient(top, #016286 0%, #00506E 100%); |
|||
} |
|||
|
|||
/* Resizes */ |
|||
.ui.large.round.checkbox { |
|||
width: 28px; |
|||
height: 28px; |
|||
} |
|||
.ui.large.round.checkbox label { |
|||
top: 4px; |
|||
left: 4px; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
.ui.large.round.checkbox label:after { |
|||
top: 2px; |
|||
left: 2px; |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
/******************************* |
|||
Columns |
|||
*******************************/ |
|||
|
|||
/* Text Columns */ |
|||
.ui.columns > .column, |
|||
.ui.column { |
|||
width: 50%; |
|||
margin: 0px; |
|||
padding: 0px 4% 0px; |
|||
float: left; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
border-left: 1px solid rgba(255, 255, 255, 0.7); |
|||
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15); |
|||
-moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15); |
|||
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15); |
|||
} |
|||
.ui.columns > .column:first-child, |
|||
.ui.column:first-child { |
|||
border-left: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Sizing Combinations */ |
|||
.ui.one.columns .column { |
|||
width: 100%; |
|||
padding-left: 3.5%; |
|||
padding-right: 3.5%; |
|||
} |
|||
.ui.two.columns .column { |
|||
width: 50%; |
|||
padding-left: 3%; |
|||
padding-right: 3%; |
|||
} |
|||
.ui.three.columns .column { |
|||
width: 33.333%; |
|||
padding-left: 3%; |
|||
padding-right: 3%; |
|||
} |
|||
.ui.four.columns .column { |
|||
width: 25%; |
|||
padding-left: 2%; |
|||
padding-right: 2%; |
|||
} |
|||
.ui.five.columns .column { |
|||
width: 20%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.six.columns .column { |
|||
width: 16.66%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.seven.columns .column { |
|||
width: 14.28%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.eight.columns .column { |
|||
width: 12.5%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.nine.columns .column { |
|||
width: 11.11%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.ten.columns .column { |
|||
width: 10%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.eleven.columns .column { |
|||
width: 9.09%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.twelve.columns .column { |
|||
width: 8.3333%; |
|||
padding-left: 0.1%; |
|||
padding-right: 0.1%; |
|||
} |
|||
|
|||
/* Fitted Colums */ |
|||
.ui.fitted.columns .column:first-child { |
|||
padding-left: 0px; |
|||
} |
|||
.ui.fitted.columns .column:last-child { |
|||
padding-right: 0px; |
|||
} |
|||
|
|||
/* Simple Columns */ |
|||
.ui.columns.simple .column, |
|||
.ui.column.simple { |
|||
border-left: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
/******************************* |
|||
UI Cover View |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
UI Cover View |
|||
---------------*/ |
|||
|
|||
/* Normal */ |
|||
ul.ui.cover-view li, |
|||
div.ui.cover-view { |
|||
position: relative; |
|||
width: 220px; |
|||
height: 290px; |
|||
|
|||
background-color: #111111; |
|||
background: transparent -webkit-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat; |
|||
background: transparent -moz-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat; |
|||
background: transparent -o-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat; |
|||
background: transparent -ms-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat; |
|||
background: transparent linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat; |
|||
|
|||
|
|||
-webkit-border-radius: 9px; |
|||
-moz-border-radius: 9px; |
|||
border-radius: 9px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 5px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 5px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 5px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset |
|||
; |
|||
} |
|||
|
|||
ul.ui.cover-view li .content, |
|||
.ui.cover-view .content { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
ul.ui.cover-view li .cover, |
|||
.ui.cover-view .cover { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
background-position: center center; |
|||
|
|||
-webkit-background-size: cover; |
|||
-moz-background-size: cover; |
|||
background-size: cover; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-border-radius: 9px; |
|||
-moz-border-radius: 9px; |
|||
border-radius: 9px; |
|||
|
|||
opacity: 1; |
|||
} |
|||
|
|||
ul.ui.cover-view li .text, |
|||
.ui.cover-view .text { |
|||
|
|||
position: absolute; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
|
|||
padding: 15px 15px; |
|||
line-height: 1.44; |
|||
|
|||
background-color: #111111; |
|||
background: transparent -webkit-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat; |
|||
background: transparent -moz-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat; |
|||
background: transparent -o-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat; |
|||
background: transparent -ms-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat; |
|||
background: transparent linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat; |
|||
|
|||
-webkit-border-radius: 0px 0px 9px 9px; |
|||
-moz-border-radius: 0px 0px 9px 9px; |
|||
border-radius: 0px 0px 9px 9px; |
|||
|
|||
-moz-box-shadow: |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, |
|||
0px -1px 4px rgba(0, 0, 0, 0.4) |
|||
; |
|||
-webkit-box-shadow: |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, |
|||
0px -1px 4px rgba(0, 0, 0, 0.4) |
|||
; |
|||
box-shadow: |
|||
0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, |
|||
0px -1px 4px rgba(0, 0, 0, 0.4) |
|||
; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
opacity: 1; |
|||
} |
|||
|
|||
ul.ui.cover-view li .text h2, |
|||
.ui.cover-view .text h2 { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #009FDA; |
|||
margin: 0px 0px 5px; |
|||
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9); |
|||
} |
|||
|
|||
ul.ui.cover-view li .text h3, |
|||
.ui.cover-view .text h3 { |
|||
color: #FFFFFF; |
|||
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9); |
|||
} |
|||
|
|||
/* Loading State */ |
|||
ul.ui.cover-view li > .throbber, |
|||
div.ui.cover-view > .throbber { |
|||
display: none; |
|||
} |
|||
ul.ui.cover-view li.loading > .throbber, |
|||
div.ui.cover-view.loading > .throbber { |
|||
display: block; |
|||
opacity: 0.3; |
|||
} |
|||
ul.ui.cover-view li.loading .text, |
|||
div.ui.cover-view.loading .text, |
|||
ul.ui.cover-view li.loading .cover, |
|||
div.ui.cover-view.loading .cover { |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
/* Cover Flow Floated List */ |
|||
ul.ui.cover-view li { |
|||
float: left; |
|||
margin: 0px 5px 10px; |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
|
|||
/******************************* |
|||
Data Display Grid |
|||
*******************************/ |
|||
|
|||
.ui.data-grid { |
|||
width: 100%; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.data-grid.hide { |
|||
display: none; |
|||
} |
|||
|
|||
.ui.data-grid thead { |
|||
|
|||
} |
|||
.ui.data-grid thead th { |
|||
|
|||
} |
|||
.ui.data-grid tbody tr { |
|||
border-top: 1px solid #D9D9D9; |
|||
} |
|||
.ui.data-grid tbody tr:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.data-grid tbody td { |
|||
padding: 10px 14px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/* Special Row Types */ |
|||
.ui.data-grid tbody td.who { |
|||
width: 240px; |
|||
} |
|||
.ui.data-grid tbody td.who i { |
|||
float: left; |
|||
width: 35px; |
|||
height: 35px; |
|||
background: #EFEFEF url(../images/placeholder-tiny.png) no-repeat center center; |
|||
} |
|||
.ui.data-grid tbody td.who img { |
|||
width: 35px; |
|||
} |
|||
.ui.data-grid tbody td.who hgroup { |
|||
display: block; |
|||
margin-left: 50px; |
|||
} |
|||
.ui.data-grid tbody td.who hgroup h2 { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
.ui.data-grid tbody td.who hgroup h3 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.ui.data-grid tbody td.action { |
|||
width: 120px; |
|||
text-align: right; |
|||
} |
|||
|
|||
|
|||
/* data-grid Hover Style */ |
|||
.ui.data-grid tbody tr.hover { |
|||
background-color: #F4F4F4; |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
/*--------------- |
|||
UI Notification |
|||
----------------*/ |
|||
|
|||
.ui.notification.hidden { |
|||
display: none; |
|||
} |
|||
.ui.notification { |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
|
|||
background-color: #EEEEEE; |
|||
padding: 3px 5px; |
|||
|
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
|
|||
border: 1px solid #DDDDDD; |
|||
|
|||
border-radius: 5px; |
|||
|
|||
box-shadow: |
|||
1px 1px 1px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
|
|||
font-size: 11px; |
|||
line-height: 1; |
|||
text-transform: uppercase; |
|||
color: #555555; |
|||
z-index: 100; |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
/******************************* |
|||
UI Footnote |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Footnote |
|||
---------------*/ |
|||
|
|||
.ui.footnote { |
|||
position: absolute; |
|||
right: 0px; |
|||
margin-right: 100%; |
|||
|
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAECAIAAABEEOcGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEYyQzdFNjZGQjhBMTFFMTgzQzJFN0E3NEFBRTJEOTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEYyQzdFNjdGQjhBMTFFMTgzQzJFN0E3NEFBRTJEOTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RjJDN0U2NEZCOEExMUUxODNDMkU3QTc0QUFFMkQ5NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RjJDN0U2NUZCOEExMUUxODNDMkU3QTc0QUFFMkQ5NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhEaqvMAAABcSURBVHjaYvnw9PXdY1fu7DkvsfG9/AsOhlEwCqgBWHhEBRRMNXk3vhB4/Y9pNDxGAbUS1s/777/EbWE7+fLbaGCMAiomrG+/vn8TYhRiZmP+yzgaHKOAWgAgwAC5ghtNGOU2wgAAAABJRU5ErkJggg==); |
|||
background-repeat: repeat-y; |
|||
background-position: 0px 0px; |
|||
|
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*-------------- |
|||
Positions |
|||
---------------*/ |
|||
|
|||
.ui.footnote.right { |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAECAIAAABEEOcGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUIwQzNFNTc3NTYwMTFFMjk1QzNCN0YzRjhERkM1RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUIwQzNFNTg3NTYwMTFFMjk1QzNCN0YzRjhERkM1RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1QjBDM0U1NTc1NjAxMUUyOTVDM0I3RjNGOERGQzVGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1QjBDM0U1Njc1NjAxMUUyOTVDM0I3RjNGOERGQzVGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpXH9FAAAABeSURBVHjaYnzA0MowCkYBNcBDiR8v/AVVXAyVrXRYeBjYR0NkFFAFaL5ml/wqKWyqySMqwPKF4edoiIwC6oC/DGxL7n25/ZVjkd9oiTUKqJq0mP+/E2L89us7QIABAIrfFu2AX0jvAAAAAElFTkSuQmCC); |
|||
background-position: right top; |
|||
padding: 10px 15px 10px 5px; |
|||
|
|||
left: 0px; |
|||
right: auto; |
|||
margin-left: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.footnote { |
|||
padding: 10px 5px 10px 15px; |
|||
font-size: 14px; |
|||
} |
|||
@ -0,0 +1,415 @@ |
|||
/*-------------------- |
|||
Form |
|||
---------------------*/ |
|||
|
|||
.ui.form { |
|||
position: relative; |
|||
width: 330px; |
|||
} |
|||
|
|||
/* Form Controls */ |
|||
.ui.form .field { |
|||
clear: both; |
|||
margin: 0px 0px 15px; |
|||
} |
|||
|
|||
/*------------------------------- |
|||
Simple Form (No Placeholders) |
|||
--------------------------------*/ |
|||
|
|||
.ui.form.simple textarea, |
|||
.ui.form.simple input[type="text"] { |
|||
color: #444444; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Fluid Form |
|||
---------------------*/ |
|||
|
|||
.ui.form.fluid { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Form Labels |
|||
---------------------*/ |
|||
|
|||
.ui.form .field > label { |
|||
margin: 0px 0px 3px; |
|||
display: block; |
|||
|
|||
color: #555555; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
line-height: 1.2; |
|||
} |
|||
.ui.form .field > label.inline { |
|||
display: inline-block; |
|||
margin: 0px 5px 0px 0px; |
|||
} |
|||
.ui.form .field > label.inline:first-child { |
|||
margin: 0px 0px 0px 5px; |
|||
} |
|||
|
|||
.ui.form .field > label.selector { |
|||
display: inline; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Form Inputs |
|||
---------------------*/ |
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="text"], |
|||
.ui.form input[type="password"], |
|||
.ui.textarea, |
|||
.ui.input { |
|||
width: 100%; |
|||
height: 32px; |
|||
padding: 7px 10px; |
|||
|
|||
font-size: 14px; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid #CCCCCC; |
|||
|
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
|
|||
-webkit-transition: background-color 0.3s ease-out; |
|||
-moz-transition: background-color 0.3s ease-out; |
|||
-o-transition: background-color 0.3s ease-out; |
|||
-ms-transition: background-color 0.3s ease-out; |
|||
transition: background-color 0.3s ease-out; |
|||
|
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.form select { |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
} |
|||
|
|||
.ui.form textarea { |
|||
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; |
|||
line-height: 1.44; |
|||
height: 100px; |
|||
resize: vertical; |
|||
} |
|||
|
|||
|
|||
/* Input State */ |
|||
.ui.form textarea, |
|||
.ui.form input[type="text"] { |
|||
color: #DADADA; |
|||
} |
|||
.ui.form input:focus, |
|||
.ui.form textarea:focus { |
|||
color: #222222; |
|||
background-color: #FFFFFF; |
|||
border-color: #009FDA; |
|||
box-shadow: 0px 0px 2px 1px rgba(0, 159, 218, 0.15) inset; |
|||
} |
|||
.ui.form textarea.filled, |
|||
.ui.form input.filled { |
|||
color: #444444; |
|||
} |
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="checkbox"] { |
|||
vertical-align: top; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Special Types |
|||
---------------------*/ |
|||
|
|||
.ui.form input.attached { |
|||
width: auto; |
|||
} |
|||
|
|||
.ui.form .date.field > label { |
|||
position: relative; |
|||
} |
|||
.ui.form .date.field > label:after { |
|||
position: absolute; |
|||
top: 22px; |
|||
right: 10px; |
|||
|
|||
font-family: 'Icons'; |
|||
content: '📅'; /* '\1f4c5' */ |
|||
font-size: 20px; |
|||
font-weight: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
|
|||
.ui.large.form .date.field > label:after { |
|||
top: 29px; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Higher Contrast |
|||
---------------------*/ |
|||
|
|||
.ui.form.contrast label { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="text"] { |
|||
background-color: #FFAAAA; |
|||
border-color: #FF3333; |
|||
color: #AA5555; |
|||
} |
|||
.ui.form.contrast .field.error label { |
|||
color: #FF3333; |
|||
} |
|||
.ui.form.contrast .notices, |
|||
.ui.form.contrast .errors { |
|||
border-color: #FF3333; |
|||
background-image: -webkit-linear-gradient(top , #F36666 0px, #E14242 100%); |
|||
background-image: -moz-linear-gradient(top , #F36666 0px, #E14242 100%); |
|||
background-image: -o-linear-gradient(top , #F36666 0px, #E14242 100%); |
|||
background-image: -ms-linear-gradient(top , #F36666 0px, #E14242 100%); |
|||
background-image: linear-gradient(top , #F36666 0px, #E14242 100%); |
|||
|
|||
color: #FFFFFF; |
|||
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field Groups |
|||
---------------------*/ |
|||
|
|||
/* Split fields */ |
|||
.ui.form .fields { |
|||
clear: both; |
|||
overflow: hidden; |
|||
} |
|||
.ui.form .fields .field { |
|||
clear: none; |
|||
float: left; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.form .fields .field:first-child { |
|||
border-left: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Other Combinations */ |
|||
.ui.form .fields .field, |
|||
.ui.form .two.fields .field { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
.ui.form .three.fields .field { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .four.fields .field { |
|||
width: 25%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.form .five.fields .field { |
|||
width: 20%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
|
|||
/* override sides, ie8 no last-child */ |
|||
.ui.form .fields .field:first-child { |
|||
padding-left: 0%; |
|||
} |
|||
.ui.form .fields .field:last-child { |
|||
padding-right: 0%; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inline Fields |
|||
---------------------*/ |
|||
|
|||
.ui.form .inline.field > :first-child { |
|||
margin-right: 5px; |
|||
} |
|||
.ui.form .inline.field label, |
|||
.ui.form .inline.field input[type="text"], |
|||
.ui.form .inline.field input[type="password"], |
|||
.ui.form .inline.field textarea, |
|||
.ui.form .inline.field select { |
|||
display: inline-block; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Success Messages |
|||
---------------------*/ |
|||
|
|||
.ui.form .notices { |
|||
color: #67a210; |
|||
|
|||
background-color: #ebf8d8; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error State |
|||
---------------------*/ |
|||
|
|||
/* Form has an error */ |
|||
.ui.form.error .errors { |
|||
display: block; |
|||
} |
|||
|
|||
/* Form field has an error */ |
|||
.ui.form .field.error label { |
|||
color: #AC3A3A; |
|||
} |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="text"], |
|||
.ui.form .field.error input[type="password"] { |
|||
background-color: #FFEFEF; |
|||
border-color: #FF9999; |
|||
color: #F0BBBB; |
|||
} |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="password"], |
|||
.ui.form .field.error textarea.filled, |
|||
.ui.form .field.error input.filled { |
|||
color: #AC3A3A; |
|||
} |
|||
.ui.form .field.error textarea:focus, |
|||
.ui.form .field.error input:focus { |
|||
border-color: #E68585; |
|||
color: #AC3A3A; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading State |
|||
---------------------*/ |
|||
|
|||
.ui.form.loading i.throbber { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Resizes |
|||
---------------------*/ |
|||
|
|||
.ui.large.form { |
|||
width: 440px; |
|||
} |
|||
.ui.large.fluid.form { |
|||
width: 100%; |
|||
} |
|||
|
|||
.ui.large.form .field { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.ui.large.form .divider { |
|||
margin: 30px 0px; |
|||
} |
|||
|
|||
.ui.large.form .field > label { |
|||
margin-bottom: 7px; |
|||
font-size: 14px; |
|||
} |
|||
.ui.large.form .field input[type="text"] { |
|||
height: 38px; |
|||
padding: 10px 12px; |
|||
|
|||
font-size: 14px; |
|||
} |
|||
.ui.large.form .field textarea { |
|||
height: 140px; |
|||
padding: 10px 12px; |
|||
font-size: 14px; |
|||
} |
|||
.ui.large.form .inline.field > :first-child { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Error Messages |
|||
---------------------*/ |
|||
|
|||
.ui.form .notices, |
|||
.ui.form .errors { |
|||
margin: 25px 0px 10px; |
|||
|
|||
background-color: #F8EBEB; |
|||
background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); |
|||
background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); |
|||
background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); |
|||
background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); |
|||
background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); |
|||
|
|||
color: #AD0000; |
|||
border: 1px solid #B06C6C; |
|||
|
|||
padding: 7px 12px; |
|||
|
|||
-webkit-border-radius: 10px; |
|||
-moz-border-radius: 10px; |
|||
border-radius: 10px; |
|||
} |
|||
.ui.form .errors i:before { |
|||
opacity: 0.8; |
|||
margin: 0px; |
|||
font-family: 'Icons'; |
|||
content: '\2757'; |
|||
display: inline-block; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
line-height: 1; |
|||
margin-right: 0.3em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.form .errors i, |
|||
.ui.form .errors .error { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.ui.form .errors h3 { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
} |
|||
.ui.form .errors .error { |
|||
display: block; |
|||
margin-left: 15px; |
|||
line-height: 1.55; |
|||
} |
|||
.ui.form .errors .error.list { |
|||
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|||
margin: 5px 0px; |
|||
padding: 5px 0px 0px 15px; |
|||
|
|||
-webkit-box-shadow: 0px -1px rgba(0, 0, 0, 0.05); |
|||
-moz-box-shadow: 0px -1px rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0px -1px rgba(0, 0, 0, 0.05); |
|||
} |
|||
.ui.form .errors .error.list li { |
|||
list-style-type: disc; |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
/******************************* |
|||
Grid |
|||
*******************************/ |
|||
|
|||
/* Classic 12 section grid */ |
|||
.ui.elements { |
|||
width: 100%; |
|||
display: table; |
|||
} |
|||
.ui.elements > .element { |
|||
display: table-cell; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
vertical-align: top; |
|||
} |
|||
.ui.elements > .element:first-child, |
|||
.ui.element:first-child { |
|||
border-left: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.ui.elements .element:first-child { |
|||
padding-left: 0% !important; |
|||
} |
|||
.ui.elements .element:last-child { |
|||
padding-right: 0% !important; |
|||
} |
|||
|
|||
/* Sizing Combinations */ |
|||
.ui.elements .element, |
|||
.ui.elements .one.wide.element { |
|||
width: 8.3333%; |
|||
padding-left: 1.5%; |
|||
padding-right: 1.5%; |
|||
} |
|||
.ui.six.elements .element, |
|||
.ui.elements .two.wide.element { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.four.elements .element, |
|||
.ui.elements .three.wide.element { |
|||
width: 25%; |
|||
} |
|||
.ui.three.elements .element, |
|||
.ui.elements .four.wide.element { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.elements .five.wide.element { |
|||
width: 41.6666%; |
|||
} |
|||
.ui.two.elements .element, |
|||
.ui.elements .six.wide.element { |
|||
width: 50%; |
|||
} |
|||
.ui.elements .seven.wide.element { |
|||
width: 58.3333%; |
|||
} |
|||
.ui.elements .eight.wide.element { |
|||
width: 66.6666%; |
|||
} |
|||
.ui.elements .nine.wide.element { |
|||
width: 75%; |
|||
} |
|||
.ui.elements .ten.wide.element { |
|||
width: 83.3333%; |
|||
} |
|||
.ui.elements .eleven.wide.element { |
|||
width: 91.666%; |
|||
} |
|||
.ui.elements .twelve.wide.element { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* Variations */ |
|||
|
|||
|
|||
/* Fitted Elements */ |
|||
.ui.fitted.elements .element, |
|||
.ui.elements .fitted.element { |
|||
padding-left: 0%; |
|||
padding-right: 0%; |
|||
} |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.centered.elements .element, |
|||
.ui.centered.element { |
|||
vertical-align: middle; |
|||
} |
|||
@ -0,0 +1,198 @@ |
|||
/******************************* |
|||
UI Icon |
|||
*******************************/ |
|||
|
|||
i.icon { |
|||
display: inline-block; |
|||
|
|||
width: 1em; |
|||
height: 1em; |
|||
|
|||
margin: 0px 0.2em 0px 0px; |
|||
|
|||
font-style: normal; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
text-align: center; |
|||
-webkit-font-smoothing: antialiased; |
|||
} |
|||
i.icon:before { |
|||
font-family: 'Icons'; |
|||
speak: none; |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
/* manual corrections */ |
|||
i.icon.cloud, |
|||
i.icon.code, |
|||
i.icon.terminal, |
|||
i.icon.twitter-bird, |
|||
i.icon.dollar { |
|||
margin-left: 0em; |
|||
padding-right: 0.2em; |
|||
} |
|||
|
|||
i.icon.left, |
|||
i.icon.left-open, |
|||
i.icon.left-dir { |
|||
width: 1em; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
i.icon.up, |
|||
i.icon.up-open, |
|||
i.icon.up-dir, |
|||
i.icon.down, |
|||
i.icon.down-open, |
|||
i.icon.down-dir, |
|||
i.icon.right, |
|||
i.icon.right-open, |
|||
i.icon.right-dir { |
|||
width: 1em; |
|||
margin: 0em 0em 0em 0.1em; |
|||
} |
|||
/* circular icon easier to notice misaligned */ |
|||
i.icon.clock { |
|||
margin-top: -0.05em; |
|||
} |
|||
|
|||
/* aliases for convenience */ |
|||
i.icon.close:before { content: '\e80d'; } /* '' */ |
|||
i.icon.help:before { content: '\e704'; } /* '' */ |
|||
i.icon.info:before { content: '\e705'; } /* '' */ |
|||
i.icon.error:before { content: '\e80d'; } /* '' */ |
|||
|
|||
/* icons available */ |
|||
i.icon.asterisk:before { content: '\2731'; } /* '✱' */ |
|||
i.icon.at:before { content: '\40'; } /* '@' */ |
|||
i.icon.attach:before { content: '📎'; } /* '\1f4ce' */ |
|||
i.icon.attention-circle:before { content: '\2757'; } /* '❗' */ |
|||
i.icon.attention:before { content: '\26a0'; } /* '⚠' */ |
|||
i.icon.award:before { content: '🏉'; } /* '\1f3c9' */ |
|||
i.icon.barcode:before { content: '\e792'; } /* '' */ |
|||
i.icon.basket:before { content: '\e73d'; } /* '' */ |
|||
i.icon.basket:before { content: '\e813'; } /* '' */ |
|||
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */ |
|||
i.icon.book-open:before { content: '📖'; } /* '\1f4d6' */ |
|||
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */ |
|||
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */ |
|||
i.icon.cancel-alt:before { content: '\e80d'; } /* '' */ |
|||
i.icon.cancel-circle:before { content: '\2716'; } /* '✖' */ |
|||
i.icon.cancel:before { content: '\2715'; } /* '✕' */ |
|||
i.icon.ccw:before { content: '\27f2'; } /* '⟲' */ |
|||
i.icon.chart-bar:before { content: '📊'; } /* '\1f4ca' */ |
|||
i.icon.chart-pie:before { content: '\e7a2'; } /* '' */ |
|||
i.icon.chart:before { content: '📈'; } /* '\1f4c8' */ |
|||
i.icon.chat:before { content: '\e720'; } /* '' */ |
|||
i.icon.check:before { content: '\2611'; } /* '☑' */ |
|||
i.icon.clock:before { content: '🕔'; } /* '\1f554' */ |
|||
i.icon.cloud:before { content: '\2601'; } /* '☁' */ |
|||
i.icon.code:before { content: '\e714'; } /* '' */ |
|||
i.icon.cog-alt:before { content: '\26ef'; } /* '⛯' */ |
|||
i.icon.cog:before { content: '\2699'; } /* '⚙' */ |
|||
i.icon.comment-alt:before { content: '\e802'; } /* '' */ |
|||
i.icon.comment:before { content: '\e718'; } /* '' */ |
|||
i.icon.cw:before { content: '\27f3'; } /* '⟳' */ |
|||
i.icon.direction:before { content: '\27a2'; } /* '➢' */ |
|||
i.icon.doc:before { content: '📄'; } /* '\1f4c4' */ |
|||
i.icon.docs:before { content: '\e736'; } /* '' */ |
|||
i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */ |
|||
i.icon.down-dir:before { content: '\25be'; } /* '▾' */ |
|||
i.icon.down-open:before { content: '\e75c'; } /* '' */ |
|||
i.icon.down:before { content: '\2193'; } /* '↓' */ |
|||
i.icon.easel:before { content: '\e7b5'; } /* '' */ |
|||
i.icon.edit:before { content: '\270d'; } /* '✍' */ |
|||
i.icon.eject:before { content: '\2ecf'; } /* '⻏' */ |
|||
i.icon.export:before { content: '\e715'; } /* '' */ |
|||
i.icon.eye:before { content: '\e80f'; } /* '' */ |
|||
i.icon.eye-off:before { content: '\e70b'; } /* '' */ |
|||
i.icon.facebook-rect:before { content: '\f301'; } /* '' */ |
|||
i.icon.fast-fw:before { content: '\e804'; } /* '' */ |
|||
i.icon.fire:before { content: '🔥'; } /* '\1f525' */ |
|||
i.icon.flag:before { content: '\2691'; } /* '⚑' */ |
|||
i.icon.flash:before { content: '\26a1'; } /* '⚡' */ |
|||
i.icon.flash-alt:before { content: '\e815'; } /* '' */ |
|||
i.icon.flask:before { content: '\68'; } /* 'h' */ |
|||
i.icon.flight:before { content: '\2708'; } /* '✈' */ |
|||
i.icon.folder-open:before { content: '📂'; } /* '\1f4c2' */ |
|||
i.icon.folder:before { content: '\e810'; } /* '' */ |
|||
i.icon.forward:before { content: '\27a6'; } /* '➦' */ |
|||
i.icon.gift:before { content: '🎁'; } /* '\1f381' */ |
|||
i.icon.github:before { content: '\f308'; } /* '' */ |
|||
i.icon.globe:before { content: '\e817'; } /* '' */ |
|||
i.icon.globe-alt:before { content: '🌐'; } /* '\1f310' */ |
|||
i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */ |
|||
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */ |
|||
i.icon.heart-empty:before { content: '\2661'; } /* '♡' */ |
|||
i.icon.heart:before { content: '\2665'; } /* '♥' */ |
|||
i.icon.help-circle:before { content: '\e704'; } /* '' */ |
|||
i.icon.question:before { content: '\2753'; } /* '❓' */ |
|||
i.icon.home-alt:before { content: '\e80e'; } /* '' */ |
|||
i.icon.home:before { content: '\2302'; } /* '⌂' */ |
|||
i.icon.info-circle:before { content: '\e705'; } /* '' */ |
|||
i.icon.i-letter:before { content: '\2139'; } /* 'ℹ' */ |
|||
i.icon.lamp:before { content: '💡'; } /* '\1f4a1' */ |
|||
i.icon.left-dir:before { content: '\25c2'; } /* '◂' */ |
|||
i.icon.left-open:before { content: '\e75d'; } /* '' */ |
|||
i.icon.left:before { content: '\2190'; } /* '←' */ |
|||
i.icon.link:before { content: '🔗'; } /* '\1f517' */ |
|||
i.icon.list:before { content: '\e782'; } /* '' */ |
|||
i.icon.location-alt:before { content: '\e811'; } /* '' */ |
|||
i.icon.location:before { content: '\e724'; } /* '' */ |
|||
i.icon.lock-open:before { content: '🔓'; } /* '\1f513' */ |
|||
i.icon.lock:before { content: '🔒'; } /* '\1f512' */ |
|||
i.icon.mail:before { content: '\2709'; } /* '✉' */ |
|||
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ |
|||
i.icon.minus:before { content: '\2d'; } /* '-' */ |
|||
i.icon.money:before { content: '💰'; } /* '\1f4b0' */ |
|||
i.icon.off:before { content: '\e78e'; } /* '' */ |
|||
i.icon.pause:before { content: '\e808'; } /* '' */ |
|||
i.icon.picture-alt:before { content: '\e812'; } /* '' */ |
|||
i.icon.picture:before { content: '🌄'; } /* '\1f304' */ |
|||
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ |
|||
i.icon.play:before { content: '\e809'; } /* '' */ |
|||
i.icon.plus-circle:before { content: '\2795'; } /* '➕' */ |
|||
i.icon.plus:before { content: '\2b'; } /* '+' */ |
|||
i.icon.print:before { content: '\e716'; } /* '' */ |
|||
i.icon.resize-full:before { content: '\e744'; } /* '' */ |
|||
i.icon.resize-horizontal:before { content: '\2b0d'; } /* '⬍' */ |
|||
i.icon.resize-small:before { content: '\e746'; } /* '' */ |
|||
i.icon.resize-vertical:before { content: '\2b0c'; } /* '⬌' */ |
|||
i.icon.right-dir:before { content: '\25b8'; } /* '▸' */ |
|||
i.icon.right-open:before { content: '\e75e'; } /* '' */ |
|||
i.icon.right:before { content: '\2192'; } /* '→' */ |
|||
i.icon.rss:before { content: '\e73a'; } /* '' */ |
|||
i.icon.search:before { content: '🔍'; } /* '\1f50d' */ |
|||
i.icon.shuffle:before { content: '\e803'; } /* '' */ |
|||
i.icon.star:before { content: '\e801'; } /* '' */ |
|||
i.icon.star-empty:before { content: '\e800'; } /* '' */ |
|||
i.icon.star-half:before { content: '\e701'; } /* '' */ |
|||
i.icon.stop:before { content: '\e807'; } /* '' */ |
|||
i.icon.tag:before { content: '\e80a'; } /* '' */ |
|||
i.icon.tags:before { content: '\e70d'; } /* '' */ |
|||
i.icon.terminal:before { content: '\e7ac'; } /* '' */ |
|||
i.icon.th-alt:before { content: '\e80c'; } /* '' */ |
|||
i.icon.th-large:before { content: '\e708'; } /* '' */ |
|||
i.icon.th-list:before { content: '\e80b'; } /* '' */ |
|||
i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */ |
|||
i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */ |
|||
i.icon.tint:before { content: '\e794'; } /* '' */ |
|||
i.icon.to-end:before { content: '\e762'; } /* '' */ |
|||
i.icon.to-end-alt:before { content: '\e806'; } /* '' */ |
|||
i.icon.to-start:before { content: '\e763'; } /* '' */ |
|||
i.icon.to-start-alt:before { content: '\e805'; } /* '' */ |
|||
i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */ |
|||
i.icon.trash:before { content: '\e729'; } /* '' */ |
|||
i.icon.twitter-bird:before { content: '\f303'; } /* '' */ |
|||
i.icon.up-dir:before { content: '\25b4'; } /* '▴' */ |
|||
i.icon.up-open:before { content: '\e75f'; } /* '' */ |
|||
i.icon.up:before { content: '\2191'; } /* '↑' */ |
|||
i.icon.upload-cloud:before { content: '\e711'; } /* '' */ |
|||
i.icon.user-add:before { content: '\e700'; } /* '' */ |
|||
i.icon.user:before { content: '👤'; } /* '\1f464' */ |
|||
i.icon.users-alt:before { content: '\e814'; } /* '' */ |
|||
i.icon.users:before { content: '👥'; } /* '\1f465' */ |
|||
i.icon.vcard:before { content: '\e722'; } /* '' */ |
|||
i.icon.zoom-in:before { content: '\e750'; } /* '' */ |
|||
i.icon.zoom-out:before { content: '\e751'; } /* '' */ |
|||
@ -0,0 +1,39 @@ |
|||
.ui.feature.image { |
|||
position: relative; |
|||
display: inline-block; |
|||
border: 1px solid #CCCCCC; |
|||
background: #F5F5F5 url(../images/placeholder-subtle.png) no-repeat center center; |
|||
} |
|||
.ui.feature.image img { |
|||
display: block; |
|||
} |
|||
.ui.feature.image:after { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
content: ''; |
|||
-webkit-box-shadow: |
|||
0px 0px 0px 3px rgba(255, 255, 255, 0.6) inset, |
|||
0px 1px 1px rgba(0, 0, 0, 0.3) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 0px 3px rgba(255, 255, 255, 0.6) inset, |
|||
0px 1px 1px rgba(0, 0, 0, 0.3) |
|||
; |
|||
box-shadow: |
|||
0px 0px 0px 3px rgba(255, 255, 255, 0.6) inset, |
|||
0px 1px 1px rgba(0, 0, 0, 0.3) |
|||
; |
|||
z-index: 10; |
|||
} |
|||
|
|||
/* Rounded Corners */ |
|||
.ui.feature.image, |
|||
.ui.feature.image img, |
|||
.ui.feature.image:after { |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
} |
|||
@ -0,0 +1,371 @@ |
|||
/******************************* |
|||
UI Items (Views) |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Sizing |
|||
---------------*/ |
|||
|
|||
.ui.items .item { |
|||
float: left; |
|||
display: block; |
|||
|
|||
width: 100%; |
|||
margin: 0%; |
|||
font-size: 13px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* Force Clearing */ |
|||
.ui.items:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.two.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.items .item { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
font-size: 13px; |
|||
} |
|||
.ui.two.items .item:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.three.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.items .item { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
font-size: 13px; |
|||
} |
|||
.ui.three.items .item:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.four.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.items .item { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 12px; |
|||
} |
|||
.ui.four.items .item:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.five.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.items .item { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 12px; |
|||
} |
|||
.ui.five.items .item:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.six.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.items .item { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 12px; |
|||
} |
|||
.ui.six.items .item:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.seven.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.items .item { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.items .item:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eight.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.items .item { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.items .item:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.nine.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.items .item { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.items .item:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.ten.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.items .item { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.items .item:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eleven.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.items .item { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.items .item:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.twelve.items { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.items .item { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.items .item:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Grid Items |
|||
*******************************/ |
|||
|
|||
.ui.grid.items { |
|||
margin-top: 15px; |
|||
margin-bottom: 15px; |
|||
padding: 0px; |
|||
} |
|||
.ui.grid.items > .item, |
|||
.ui.grid.items > .item > .image, |
|||
.ui.grid.items > .item > .image .overlay, |
|||
.ui.grid.items > .item > .content, |
|||
.ui.grid.items > .item > .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.grid.items > .item { |
|||
display: block; |
|||
position: relative; |
|||
margin-top: 10px; |
|||
margin-bottom: 10px; |
|||
|
|||
min-height: 50px; |
|||
background-color: #FFFFFF; |
|||
|
|||
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-border-radius: 5px; |
|||
-webkit-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
padding: 0.7%; |
|||
} |
|||
|
|||
.ui.grid.items .item > .image a, |
|||
.ui.grid.items .item > .image img { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
} |
|||
.ui.grid.items .item > .image a:after { |
|||
position: absolute; |
|||
display: block; |
|||
content: ''; |
|||
z-index: 2; |
|||
top: 0px; |
|||
left: 0px; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; |
|||
} |
|||
.ui.grid.items .item > .image .overlay { |
|||
position: absolute; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
|
|||
background: transparent -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); |
|||
background: transparent -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); |
|||
background: transparent -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); |
|||
background: transparent -ms-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); |
|||
background: transparent linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); |
|||
padding: 3% 2.5%; |
|||
width: 100%; |
|||
|
|||
font-size: 1em; |
|||
font-weight: bold; |
|||
color: #FFFFFF; |
|||
|
|||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6); |
|||
} |
|||
.ui.grid.items .item > .image .overlay i { |
|||
font-size: 1.3em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.grid.items .item > .content { |
|||
padding: 4% 1% 6%; |
|||
color: #888888; |
|||
} |
|||
.ui.grid.items .item > .content > .name, |
|||
.ui.grid.items .item > .content > .title { |
|||
margin-bottom: 1%; |
|||
|
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
color: #009FDA; |
|||
} |
|||
.ui.grid.items .item > .content p { |
|||
line-height: 1.33; |
|||
margin: 0% 0% 5%; |
|||
} |
|||
.ui.grid.items .item > .content :last-child { |
|||
margin-bottom: 0%; |
|||
} |
|||
|
|||
|
|||
/* Optional Content */ |
|||
.ui.grid.items .item > .extra { |
|||
color: #C6C7C9; |
|||
padding: 0% 1% 1%; |
|||
} |
|||
.ui.grid.items .item > .extra img { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.ui.grid.items .item .avatar { |
|||
display: inline-block; |
|||
width: 5.5%; |
|||
min-width: 15px; |
|||
margin-right: 0.2em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/******************************* |
|||
Table Grid Items |
|||
*******************************/ |
|||
|
|||
.ui.horizontal.grid.items .item, |
|||
.ui.grid.items .horizontal.item { |
|||
display: table; |
|||
} |
|||
/* prevents reflow bug in chrome by targeting webkit browser */ |
|||
@media screen and (-webkit-min-device-pixel-ratio: 0) { |
|||
.ui.grid.items .item { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.ui.horizontal.grid.items .item > .image |
|||
.ui.grid.items .horizontal.item > .image { |
|||
display: table-cell; |
|||
width: 50%; |
|||
} |
|||
.ui.horizontal.grid.items .item > .image + .content, |
|||
.ui.grid.items .horizontal.item > .image + .content { |
|||
width: 50%; |
|||
display: table-cell; |
|||
} |
|||
.ui.horizontal.grid.items .item > .content, |
|||
.ui.grid.items .horizontal.item > .content { |
|||
padding: 1% 1.7% 11% 3%; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.ui.horizontal.grid.items .item > .extra, |
|||
.ui.grid.items .horizontal.item > .extra { |
|||
position: absolute; |
|||
padding: 0%; |
|||
bottom: 7%; |
|||
left: 3%; |
|||
width: 94%; |
|||
} |
|||
.ui.horizontal.grid.items .item > .image + .content + .extra, |
|||
.ui.grid.items .horizontal.item > .image + .content + .extra { |
|||
bottom: 7%; |
|||
left: 53%; |
|||
width: 44%; |
|||
} |
|||
|
|||
|
|||
.ui.horizontal.grid.items .item .avatar, |
|||
.ui.grid.items .horizontal.item .avatar { |
|||
width: 11.5%; |
|||
} |
|||
|
|||
.ui.grid.items .item .avatar { |
|||
max-width: 25px; |
|||
} |
|||
@ -0,0 +1,94 @@ |
|||
/******************************* |
|||
UI Cover View |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
UI Note Card |
|||
---------------*/ |
|||
|
|||
/* Normal */ |
|||
.ui.notecard { |
|||
position: relative; |
|||
width: 520px; |
|||
padding: 10px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
background-color: #FDFBE9; |
|||
|
|||
border: 1px solid #DDDDDD; |
|||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.notecard .stripes { |
|||
height: 100%; |
|||
margin-top: 10px; |
|||
padding: 0px 5px 10px; |
|||
background: url(../images/notecard-stripes.png) repeat; |
|||
line-height: 21px; |
|||
} |
|||
.ui.notecard .stripes h2 { |
|||
margin: 0px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
.ui.notecard .stripes p { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.ui.notecard .stripes .image { |
|||
display: block; |
|||
overflow: hidden; |
|||
|
|||
border: 1px solid #DAD8C9; |
|||
background: #FFFFFF url(../images/placeholder-tiny.png) no-repeat center center; |
|||
padding: 4px; |
|||
} |
|||
.ui.notecard .stripes .image img { |
|||
display: block; |
|||
} |
|||
.ui.notecard br, |
|||
.ui.notecard hr { |
|||
height: 21px; |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/* imageless */ |
|||
.ui.notecard.simple .stripes { |
|||
margin-top: 10px; |
|||
background-image: -moz-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px); |
|||
background-image: -webkit-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px); |
|||
background-image: -ms-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px); |
|||
background-image: -o-repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px); |
|||
background-image: repeating-linear-gradient(transparent 19px, rgba(255, 255, 255, 0.2) 20px, transparent 0px, transparent 40px); |
|||
} |
|||
|
|||
/* contrast */ |
|||
.ui.notecard.contrast { |
|||
border: none; |
|||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7); |
|||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7); |
|||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
/*-------------- |
|||
Clipped |
|||
---------------*/ |
|||
|
|||
.ui.clipped.notecard.paperclip img { |
|||
height: auto; |
|||
width: 135px; |
|||
} |
|||
.ui.clipped.notecard.stripes { |
|||
min-height: 150px; |
|||
padding: 0px 5px 10px 160px; |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
|
|||
/*--------------- |
|||
UI Notification |
|||
----------------*/ |
|||
|
|||
.ui.notification.hidden { |
|||
display: none; |
|||
} |
|||
.ui.notification { |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
|
|||
background-color: #EEEEEE; |
|||
padding: 3px 5px; |
|||
|
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
|||
|
|||
border: 1px solid #DDDDDD; |
|||
|
|||
border-radius: 5px; |
|||
|
|||
box-shadow: |
|||
1px 1px 1px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
|
|||
font-size: 11px; |
|||
line-height: 1; |
|||
text-transform: uppercase; |
|||
color: #555555; |
|||
z-index: 100; |
|||
} |
|||
@ -0,0 +1,531 @@ |
|||
/******************************* |
|||
UI Panel |
|||
*******************************/ |
|||
|
|||
.ui.panel { |
|||
margin: 0px 0px 25px; |
|||
height: 41px; |
|||
|
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
|
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
|
|||
background-color: #FAFAFA; |
|||
background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
|
|||
} |
|||
|
|||
.ui.panel li { |
|||
position: relative; |
|||
cursor: pointer; |
|||
float: left; |
|||
list-style-type: none; |
|||
|
|||
line-height: 1; |
|||
padding: 14px 35px; |
|||
vertical-align: middle; |
|||
|
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
|
|||
color: #555555; |
|||
|
|||
-webkit-box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
-moz-box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
box-shadow: |
|||
1px 0px 0px rgba(255, 255, 255, 0.5) inset, |
|||
-1px 0px 0px rgba(0, 0, 0, 0.06) |
|||
; |
|||
|
|||
background-color: #FAFAFA; |
|||
background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); |
|||
|
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
|
|||
-webkit-transition: color 0.3s linear; |
|||
-moz-transition: color 0.3s linear; |
|||
-o-transition: color 0.3s linear; |
|||
-ms-transition: color 0.3s linear; |
|||
transition: color 0.3s linear; |
|||
} |
|||
.ui.panel li a { |
|||
color: #555555; |
|||
} |
|||
|
|||
.ui.panel li:first-child { |
|||
-webkit-border-radius: 4px 0px 0px 4px; |
|||
-moz-border-radius: 4px 0px 0px 4px; |
|||
border-radius: 4px 0px 0px 4px; |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.panel i { |
|||
line-height: 1; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* left arrow icons */ |
|||
.ui.panel i.icon.left, |
|||
.ui.panel i.icon.left-open, |
|||
.ui.panel i.icon.left-dir { |
|||
margin: 0em 0.5em 0em; |
|||
} |
|||
/* right positioned icons */ |
|||
.ui.panel i.icon.up, |
|||
.ui.panel i.icon.up-open, |
|||
.ui.panel i.icon.up-dir, |
|||
.ui.panel i.icon.down, |
|||
.ui.panel i.icon.down-open, |
|||
.ui.panel i.icon.down-dir, |
|||
.ui.panel i.icon.right, |
|||
.ui.panel i.icon.right-open, |
|||
.ui.panel i.icon.right-dir { |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/* States */ |
|||
.ui.panel li.hover { |
|||
background: -webkit-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -o-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: -ms-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
background: linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); |
|||
color: #333333; |
|||
} |
|||
.ui.panel li.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
.ui.panel li.down, |
|||
.ui.panel li.active { |
|||
|
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
box-shadow: |
|||
0px 1px 5px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 1px #DDDDDD inset, |
|||
0px 0px 0px 1px #CCCCCC |
|||
; |
|||
|
|||
background-color: #EAEAEA; |
|||
background: -webkit-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -moz-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -o-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: -ms-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
background: linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); |
|||
|
|||
} |
|||
.ui.panel li.active, |
|||
.ui.panel li.active.hover { |
|||
cursor: default; |
|||
color: #333333; |
|||
} |
|||
.ui.panel li.active a, |
|||
.ui.panel li.active.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
/*------------------- |
|||
Pointing |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.panel li.active:after { |
|||
position: absolute; |
|||
bottom: -6px; |
|||
left: 50%; |
|||
content: ""; |
|||
|
|||
margin-left: -5px; |
|||
width: 12px; |
|||
height: 12px; |
|||
|
|||
-webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; |
|||
|
|||
background-color: #ECECEC; |
|||
background-image: none; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.ui.vertical.pointing.panel li.active:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: -6px; |
|||
bottom: auto; |
|||
left: auto; |
|||
|
|||
-webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
-moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; |
|||
|
|||
margin-top: -7px; |
|||
width: 12px; |
|||
height: 12px; |
|||
} |
|||
.ui.simple.pointing.panel li.active:after { |
|||
background-color: #ECECEC; |
|||
background-image: none; |
|||
} |
|||
.ui.vertical.pointing.panel li.active:after { |
|||
background: -webkit-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -moz-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -o-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: -ms-linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
background: linear-gradient(top, #E9E9E9, #EBEBEB); |
|||
} |
|||
.ui.simple.vertical.pointing.panel li.active:after { |
|||
background: -webkit-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -moz-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -o-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: -ms-linear-gradient(top, #F2F2F2, #ECECEC); |
|||
background: linear-gradient(top, #F2F2F2, #ECECEC); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Alerts |
|||
--------------------*/ |
|||
|
|||
.ui.panel li .alert { |
|||
position: absolute; |
|||
top: -8px; |
|||
left: 75%; |
|||
|
|||
background-color: #EEEEEE; |
|||
padding: 3px 5px; |
|||
|
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); |
|||
|
|||
border: 1px solid #E5E5E5; |
|||
|
|||
border-radius: 5px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 0px rgba(0, 0, 0, 0.3), |
|||
0px 1px 0px rgba(255, 255, 255, 0.6) inset |
|||
; |
|||
|
|||
font-size: 11px; |
|||
line-height: 1; |
|||
text-transform: uppercase; |
|||
color: #555555; |
|||
z-index: 100; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.attached.ui.panel { |
|||
margin: 0px; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.attached.ui.panel li:first-child { |
|||
-webkit-border-radius: 4px 0px 0px 0px; |
|||
-moz-border-radius: 4px 0px 0px 0px; |
|||
border-radius: 4px 0px 0px 0px; |
|||
} |
|||
.attached.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 4px 0px 0px; |
|||
-moz-border-radius: 0px 4px 0px 0px; |
|||
border-radius: 0px 4px 0px 0px; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.panel { |
|||
margin-top: -1px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.bottom.attached.ui.panel li:first-child { |
|||
-webkit-border-radius: 0px 0px 0px 4px; |
|||
-moz-border-radius: 0px 0px 0px 4px; |
|||
border-radius: 0px 0px 0px 4px; |
|||
} |
|||
.bottom.attached.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 0px 4px 0px; |
|||
-moz-border-radius: 0px 0px 4px 0px; |
|||
border-radius: 0px 0px 4px 0px; |
|||
} |
|||
|
|||
/*------------------- |
|||
Vertical |
|||
--------------------*/ |
|||
|
|||
.vertical.ui.panel { |
|||
float: left; |
|||
width: 150px; |
|||
height: auto; |
|||
} |
|||
.vertical.ui.panel li { |
|||
float: none; |
|||
border-top: 1px solid #DDDDDD; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.08); |
|||
padding: 12px 15px; |
|||
} |
|||
.vertical.ui.panel li:first-child { |
|||
border-top: 1px solid transparent; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.vertical.ui.panel li:last-child { |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.vertical.ui.panel li.down, |
|||
.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
.vertical.fluid.ui.panel { |
|||
height: auto; |
|||
} |
|||
.bottom.attached.vertical.ui.panel li:first-child { |
|||
-moz-border-radius: 0px; |
|||
-webkit-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.bottom.attached.vertical.ui.panel li:last-child { |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.attached.vertical.ui.panel li:first-child:last-child { |
|||
-moz-border-radius: 4px; |
|||
-webkit-border-radius: 4px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/*------------------- |
|||
Simple |
|||
--------------------*/ |
|||
.simple.ui.panel { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
|
|||
border-color: #EDEDED #E6E6E6 #E6E6E6 #EDEDED; |
|||
border-color: rgba(0, 0, 0, 0.09) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.09); |
|||
} |
|||
.simple.ui.panel li { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); |
|||
} |
|||
.simple.ui.panel li.hover { |
|||
background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -moz-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -o-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: -ms-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
background-image: linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); |
|||
} |
|||
.simple.ui.panel li.down, |
|||
.simple.ui.panel li.active { |
|||
background-image: -webkit-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -moz-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -o-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: -ms-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
background-image: linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 3px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
} |
|||
|
|||
.ui.simple.panel li.active, |
|||
.ui.simple.panel li.active.hover { |
|||
cursor: default; |
|||
color: #333333; |
|||
} |
|||
.ui.simple.panel li.active a, |
|||
.ui.simple.panel li.active.hover a { |
|||
color: #333333; |
|||
} |
|||
|
|||
.simple.vertical.ui.panel li.down, |
|||
.simple.vertical.ui.panel li.active { |
|||
border-top: 1px solid #DDDDDD; |
|||
border-left: none; |
|||
border-right: none; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fluid |
|||
--------------------*/ |
|||
|
|||
.ui.panel.fluid { |
|||
width: 100%; |
|||
height: 43px; |
|||
} |
|||
.ui.panel.fluid, |
|||
.ui.panel.fluid li { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
} |
|||
.ui.panel.fluid li { |
|||
padding-left: 0px !important; |
|||
padding-right: 0px !important; |
|||
} |
|||
.ui.panel.two.fluid li { |
|||
width: 50%; |
|||
} |
|||
.ui.panel.three.fluid li { |
|||
width: 33.333%; |
|||
} |
|||
.ui.panel.four.fluid li { |
|||
width: 25%; |
|||
} |
|||
.ui.panel.five.fluid li { |
|||
width: 20%; |
|||
} |
|||
.ui.panel.six.fluid li { |
|||
width: 16.666%; |
|||
} |
|||
.ui.panel.seven.fluid li { |
|||
width: 14.285%; |
|||
} |
|||
.ui.panel.eight.fluid li { |
|||
width: 12.500%; |
|||
} |
|||
.ui.panel.nine.fluid li { |
|||
width: 11.11%; |
|||
} |
|||
.ui.panel.ten.fluid li { |
|||
width: 10.0%; |
|||
} |
|||
.ui.panel.eleven.fluid li { |
|||
width: 9.09%; |
|||
} |
|||
.ui.panel.twelve.fluid li { |
|||
width: 8.333%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Resizes |
|||
--------------------*/ |
|||
|
|||
.small.ui.panel { |
|||
height: 32px; |
|||
margin: 0px 0px 15px; |
|||
} |
|||
.small.fluid.ui.panel { |
|||
height: 34px; |
|||
} |
|||
.small.ui.panel li { |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
padding: 10px 25px; |
|||
} |
|||
|
|||
/* Small Vertical Panel */ |
|||
.small.vertical.ui.panel, |
|||
.small.vertical.ui.panel li { |
|||
height: auto; |
|||
} |
|||
.small.vertical.ui.panel li { |
|||
padding: 5px 9px; |
|||
} |
|||
.small.vertical.ui.panel li.down, |
|||
.small.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
.large.ui.panel { |
|||
height: 47px; |
|||
} |
|||
.large.fluid.ui.panel { |
|||
height: 49px; |
|||
} |
|||
.large.ui.panel li { |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
padding: 16px 35px; |
|||
} |
|||
|
|||
/* Large Vertical Panel */ |
|||
.large.vertical.ui.panel, |
|||
.large.vertical.ui.panel li { |
|||
height: auto; |
|||
} |
|||
.large.vertical.ui.panel li { |
|||
padding: 15px 20px; |
|||
} |
|||
.large.vertical.ui.panel li.down, |
|||
.large.vertical.ui.panel li.active { |
|||
border-top: 1px solid #CCCCCC; |
|||
} |
|||
|
|||
@ -0,0 +1,80 @@ |
|||
/******************************* |
|||
UI Paperclip |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Paperclip |
|||
---------------*/ |
|||
|
|||
/* Normal */ |
|||
.ui.paperclip { |
|||
z-index: 2; |
|||
} |
|||
.ui.paperclip .paperclip { |
|||
display: block; |
|||
position: absolute; |
|||
z-index: 4; |
|||
|
|||
background: url(../images/paperclip.png) no-repeat; |
|||
width: 37px; |
|||
height: 21px; |
|||
} |
|||
.ui.paperclip .label { |
|||
position: absolute; |
|||
top: 42px; |
|||
left: 8px; |
|||
z-index: 3; |
|||
|
|||
border: 1px solid #D3CB4F; |
|||
background-color: #FFF557; |
|||
|
|||
font-size: 9px; |
|||
color: #444005; |
|||
font-weight: bold; |
|||
padding: 2px 7px; |
|||
} |
|||
.ui.paperclip .content, |
|||
.ui.paperclip img { |
|||
border: 5px solid #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(-11deg); |
|||
-moz-transform: rotate(-11deg); |
|||
-o-transform: rotate(-11deg); |
|||
-ms-transform: rotate(-11deg); |
|||
transform: rotate(-11deg); |
|||
} |
|||
.ui.paperclip img { |
|||
height: 60px; |
|||
-webkit-box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); |
|||
-moz-box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
/* positioning */ |
|||
.ui.paperclip { |
|||
position: absolute; |
|||
top: 10%; |
|||
left: -3px; |
|||
} |
|||
.ui.paperclip .paperclip { |
|||
position: absolute; |
|||
bottom: 10px; |
|||
left: -10px; |
|||
} |
|||
|
|||
/* hidden */ |
|||
.ui.paperclip.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
/* simple */ |
|||
.ui.paperclip.simple .content, |
|||
.ui.paperclip.simple img { |
|||
border: none; |
|||
} |
|||
|
|||
/* large */ |
|||
.ui.paperclip.large img { |
|||
height: 140px; |
|||
} |
|||
@ -0,0 +1,312 @@ |
|||
.ui.progress { |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
width: 350px; |
|||
max-width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-moz-border-radius: 5px; |
|||
-webkit-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-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, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/* Colors */ |
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
|
|||
/* Fluid Width */ |
|||
.ui.fluid.progress { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* State */ |
|||
.ui.success.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.success.progress .bar, |
|||
.ui.success.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
.ui.error.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.error.progress .bar, |
|||
.ui.error.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
|
|||
|
|||
/* Variations */ |
|||
|
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
|
|||
-webkit-animation: animate-striped 3s linear infinite; |
|||
-moz-animation: animate-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
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 |
|||
; |
|||
} |
|||
} |
|||
@ -0,0 +1,295 @@ |
|||
.ui.steps { |
|||
display: inline-block; |
|||
font-size: 0px; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); |
|||
|
|||
-moz-border-radius: 4px; |
|||
-webkit-border-radius: 4px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.ui.steps .step { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 13px 23px 13px 40px; |
|||
|
|||
background-color: #F3F3F3; |
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%); |
|||
|
|||
color: #555555; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.steps .step:after { |
|||
position: absolute; |
|||
content: ''; |
|||
z-index: 2; |
|||
|
|||
top: 7px; |
|||
right: -16px; |
|||
|
|||
width: 32px; |
|||
height: 31px; |
|||
|
|||
background-color: #F3F3F3; |
|||
background: -webkit-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -moz-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -o-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: -ms-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%); |
|||
background: linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%); |
|||
|
|||
-moz-box-shadow: |
|||
1px -1px 1px rgba(0, 0, 0, 0.1), |
|||
1px -1px 1px rgba(255, 255, 255, 0.6) |
|||
; |
|||
-webkit-box-shadow: |
|||
1px -1px 1px rgba(0, 0, 0, 0.1), |
|||
1px -1px 1px rgba(255, 255, 255, 0.6) |
|||
; |
|||
box-shadow: |
|||
1px -1px 1px rgba(0, 0, 0, 0.1), |
|||
1px -1px 1px rgba(255, 255, 255, 0.6) |
|||
; |
|||
|
|||
-moz-transform: rotate(45deg); |
|||
-webkit-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.ui.steps .step:first-child { |
|||
padding-left: 20px; |
|||
-webkit-border-radius: 5px 0px 0px 5px; |
|||
-moz-border-radius: 5px 0px 0px 5px; |
|||
border-radius: 5px 0px 0px 5px; |
|||
} |
|||
.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0px 5px 5px 0px; |
|||
-moz-border-radius: 0px 5px 5px 0px; |
|||
border-radius: 0px 5px 5px 0px; |
|||
} |
|||
.ui.steps .step:last-child { |
|||
margin-right: 0px; |
|||
} |
|||
.ui.steps .step:last-child:after { |
|||
width: 0px !important; |
|||
height: 0px !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* Attached */ |
|||
.attached.ui.steps { |
|||
margin: 0px; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 4px 0px 0px 0px; |
|||
-moz-border-radius: 4px 0px 0px 0px; |
|||
border-radius: 4px 0px 0px 0px; |
|||
} |
|||
.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0px 4px 0px 0px; |
|||
-moz-border-radius: 0px 4px 0px 0px; |
|||
border-radius: 0px 4px 0px 0px; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.steps { |
|||
margin-top: -1px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.bottom.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0px 0px 0px 4px; |
|||
-moz-border-radius: 0px 0px 0px 4px; |
|||
border-radius: 0px 0px 0px 4px; |
|||
} |
|||
.bottom.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0px 0px 4px 0px; |
|||
-moz-border-radius: 0px 0px 4px 0px; |
|||
border-radius: 0px 0px 4px 0px; |
|||
} |
|||
|
|||
/* Fluid */ |
|||
.ui.steps.fluid, |
|||
.ui.steps.fluid > .step { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.steps.two.fluid > .step { |
|||
width: 50%; |
|||
} |
|||
.ui.steps.three.fluid > .step { |
|||
width: 33.333%; |
|||
} |
|||
.ui.steps.four.fluid > .step { |
|||
width: 25%; |
|||
} |
|||
.ui.steps.five.fluid > .step { |
|||
width: 20%; |
|||
} |
|||
.ui.steps.six.fluid > .step { |
|||
width: 16.666%; |
|||
} |
|||
.ui.steps.seven.fluid > .step { |
|||
width: 14.285%; |
|||
} |
|||
.ui.steps.eight.fluid > .step { |
|||
width: 12.500%; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Sizes |
|||
*******************************/ |
|||
|
|||
.ui.steps .step { |
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.steps .hover.step { |
|||
cursor: pointer; |
|||
background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -moz-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -o-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -ms-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%); |
|||
|
|||
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.steps .hover.step:after { |
|||
cursor: pointer; |
|||
background: -webkit-linear-gradient(top left, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -moz-linear-gradient(top left, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -o-linear-gradient(top left, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: -ms-linear-gradient(top left, #FFFFFF 0%, #F0F0F0 100%); |
|||
background: linear-gradient(top left, #FFFFFF 0%, #F0F0F0 100%); |
|||
|
|||
-moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.steps .hover.step:before { |
|||
position: absolute; |
|||
top: 7px; |
|||
left: -15px; |
|||
|
|||
width: 32px; |
|||
height: 31px; |
|||
content: ''; |
|||
|
|||
background-color: transparent; |
|||
background-image: none; |
|||
|
|||
-moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
-moz-transform: rotate(45deg); |
|||
-webkit-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
z-index: 2; |
|||
} |
|||
.ui.steps .hover:first-child:before { |
|||
width: 0px; |
|||
height: 0px; |
|||
} |
|||
|
|||
/* Down */ |
|||
.ui.steps .down.step { |
|||
background: -webkit-linear-gradient(top, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -moz-linear-gradient(top, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -o-linear-gradient(top, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -ms-linear-gradient(top, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: linear-gradient(top, #F0F0F0 0%, #FFFFFF 100%); |
|||
} |
|||
.ui.steps .down.step:after { |
|||
background: -webkit-linear-gradient(top left, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -moz-linear-gradient(top left, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -o-linear-gradient(top left, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: -ms-linear-gradient(top left, #F0F0F0 0%, #FFFFFF 100%); |
|||
background: linear-gradient(top left, #F0F0F0 0%, #FFFFFF 100%); |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.steps .active.step { |
|||
cursor: auto; |
|||
background-color: #009FDA; |
|||
background: -webkit-linear-gradient(top, #009FDA 0%, #00B3F5 100%); |
|||
background: -moz-linear-gradient(top, #009FDA 0%, #00B3F5 100%); |
|||
background: -o-linear-gradient(top, #009FDA 0%, #00B3F5 100%); |
|||
background: -ms-linear-gradient(top, #009FDA 0%, #00B3F5 100%); |
|||
background: linear-gradient(top, #009FDA 0%, #00B3F5 100%); |
|||
|
|||
color: #FFFFFF; |
|||
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); |
|||
|
|||
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; |
|||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; |
|||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; |
|||
} |
|||
.ui.steps .active.step:before { |
|||
position: absolute; |
|||
top: 7px; |
|||
left: -16px; |
|||
content: ''; |
|||
|
|||
width: 32px; |
|||
height: 31px; |
|||
|
|||
background-color: transparent; |
|||
background-image: none; |
|||
|
|||
-moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); |
|||
-webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); |
|||
box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); |
|||
|
|||
-moz-transform: rotate(45deg); |
|||
-webkit-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
.ui.steps .active.step:first-child:before { |
|||
width: 0px; |
|||
height: 0px; |
|||
} |
|||
.ui.steps .active.step:after { |
|||
background-color: #009FDA; |
|||
background: -webkit-linear-gradient(left top, #009FDA 0%, #00B3F5 100%); |
|||
background: -moz-linear-gradient(left top, #009FDA 0%, #00B3F5 100%); |
|||
background: -o-linear-gradient(left top, #009FDA 0%, #00B3F5 100%); |
|||
background: -ms-linear-gradient(left top, #009FDA 0%, #00B3F5 100%); |
|||
background: linear-gradient(left top, #009FDA 0%, #00B3F5 100%); |
|||
|
|||
-moz-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; |
|||
-webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; |
|||
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.steps .disabled.step { |
|||
color: #BBBBBB; |
|||
} |
|||
@ -0,0 +1,213 @@ |
|||
.ui.table { |
|||
width: 100%; |
|||
border: 1px solid #F0F0F0; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
background-color: #FFFFFF; |
|||
border-collapse: collapse; |
|||
|
|||
font-size: 12px; |
|||
color: #555555; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/* Standard Table Icons */ |
|||
.ui.table i.icon { |
|||
vertical-align: middle; |
|||
margin: 0px; |
|||
} |
|||
.ui.table .star-empty, |
|||
.ui.table .star-half, |
|||
.ui.table .star { |
|||
color: #D9B347; |
|||
} |
|||
|
|||
|
|||
.ui.table tr, |
|||
.ui.table td { |
|||
border-collapse: collapse; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.table thead { |
|||
border-bottom: 1px solid #DADADA; |
|||
} |
|||
.ui.table thead tr { |
|||
/* |
|||
-webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
-moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
*/ |
|||
} |
|||
.ui.table td, |
|||
.ui.table th { |
|||
padding: 6px 10px; |
|||
vertical-align: middle; |
|||
text-align: left; |
|||
} |
|||
|
|||
.ui.table th, |
|||
.ui.sortable.table th.disabled:hover { |
|||
cursor: auto; |
|||
background-color: #FAFAFA; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
|
|||
background: -webkit-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
} |
|||
|
|||
/* Header & Footer Formatting */ |
|||
.ui.table thead, |
|||
.ui.table tfoot { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
font-size: 13px; |
|||
} |
|||
|
|||
/* Table Striping */ |
|||
.ui.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Variations |
|||
---------------*/ |
|||
|
|||
|
|||
/* Grid */ |
|||
.ui.grid.table tbody tr, |
|||
.ui.grid.table tfoot tr { |
|||
border: none; |
|||
|
|||
} |
|||
.ui.grid.table th { |
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom-color: #CCCCCC; |
|||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
} |
|||
.ui.grid.table tbody td { |
|||
border: 1px solid #E0E0E0; |
|||
border-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Special Row Types */ |
|||
.ui.table tr.button td { |
|||
padding: 0px; |
|||
} |
|||
.ui.table tr.button .button { |
|||
border: none !important; |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.ui.table tfoot tr td, |
|||
.ui.table tr.emphasis td, |
|||
.ui.table tr td.emphasis { |
|||
background-color: #F0F0F0; |
|||
|
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
/* Sortable Table */ |
|||
.ui.sortable.table th { |
|||
cursor: pointer; |
|||
color: #555555; |
|||
vertical-align: top; |
|||
} |
|||
.ui.sortable.table th:hover { |
|||
background-image: none; |
|||
background-color: #F4F4F4; |
|||
} |
|||
.ui.sortable.table th.sorted { |
|||
background-image: none; |
|||
background-color: #EEEEEE; |
|||
|
|||
border-color: #CACACA; |
|||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.4); |
|||
|
|||
border-bottom-width: 2px; |
|||
|
|||
color: #333333; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); |
|||
|
|||
background: -webkit-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -moz-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -o-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -ms-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
} |
|||
|
|||
.ui.sortable.table th:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 1em; |
|||
opacity: 0.5; |
|||
|
|||
margin: 0px 0px 0px 8px; |
|||
font-size: 18px; |
|||
line-height: 12px; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
|
|||
vertical-align: middle; |
|||
vertical-align: calc(); |
|||
} |
|||
.ui.sortable.table th.ascending:after { |
|||
content: '\25b4'; |
|||
} |
|||
.ui.sortable.table th.descending:after { |
|||
content: '\25be'; |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.sortable.table th .icon.info-circle { |
|||
float: right; |
|||
} |
|||
/* Red Icons */ |
|||
.ui.sortable.table td .icon.cancel-circle { |
|||
color: #CC3333; |
|||
} |
|||
/* Green Icons */ |
|||
.ui.sortable.table td .icon.check, |
|||
.ui.sortable.table td .icon.dollar, |
|||
.ui.sortable.table td .icon.money { |
|||
color: #40D100; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Resizes |
|||
---------------*/ |
|||
|
|||
.ui.large.table { |
|||
font-size: 13px; |
|||
} |
|||
.ui.large.table td, |
|||
.ui.large.table th { |
|||
padding: 10px 12px; |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
|
|||
/******************************* |
|||
UI Tabs |
|||
*******************************/ |
|||
|
|||
.ui.tab { |
|||
display: none; |
|||
background-color: #FFFFFF; |
|||
border: 1px solid #DADADA; |
|||
border-top-color: transparent; |
|||
border-top-width: 0px; |
|||
} |
|||
.ui.tab.active, |
|||
.ui.tab.open { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.tab.loading > .throbber { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.tab.simple { |
|||
background-color: transparent; |
|||
border: none; |
|||
} |
|||
@ -0,0 +1,106 @@ |
|||
/******************************* |
|||
Tags |
|||
*******************************/ |
|||
|
|||
.ui.tag { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
|
|||
background-color: #7A7A7A; |
|||
padding: 4px 10px; |
|||
|
|||
color: #FFFFFF; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
|
|||
|
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
} |
|||
.ui.tag.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
a.ui.tag { |
|||
position: relative; |
|||
} |
|||
a.ui.tag:after { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
content: ''; |
|||
} |
|||
a.ui.tag:hover:after { |
|||
background-color: rgba(255, 255, 255, 0.15); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.square.tag { |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
|
|||
.ui.shaded.tag { |
|||
-moz-box-shadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset |
|||
; |
|||
-webkit-box-shadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset |
|||
; |
|||
box-shadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset |
|||
; |
|||
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.green.tag { |
|||
background-color: #3EBC47; |
|||
} |
|||
.ui.red.tag { |
|||
background-color: #BC3eEE; |
|||
} |
|||
.ui.blue.tag { |
|||
background-color: #009FDA; |
|||
} |
|||
.ui.purple.tag { |
|||
background-color: #512598; |
|||
} |
|||
.ui.yellow.tag { |
|||
background-color: #D8C62E; |
|||
} |
|||
.ui.pink.tag { |
|||
background-color: #EC008C; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Sizes |
|||
*******************************/ |
|||
.ui.tag { |
|||
font-size: 11px; |
|||
} |
|||
.ui.small.tag { |
|||
font-size: 10px; |
|||
padding: 3px 5px; |
|||
} |
|||
.ui.large.tag { |
|||
font-size: 14px; |
|||
padding-top: 4px; |
|||
padding-bottom: 4px; |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
/******************************* |
|||
Global Throbber Styles |
|||
*******************************/ |
|||
|
|||
/* Standard Size */ |
|||
.ui.throbber { |
|||
display: inline-block; |
|||
width: 32px; |
|||
height: 32px; |
|||
background: url(../images/throbber-medium.gif) no-repeat; |
|||
background-position: 48% 0px; |
|||
} |
|||
.ui.throbber.center { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -16px 0px 0px -16px; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.throbber.large { |
|||
width: 64px; |
|||
height: 64px; |
|||
background-image: url(../images/throbber-large.gif); |
|||
} |
|||
.ui.throbber.large.center { |
|||
margin: -32px 0px 0px -32px; |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.throbber.small { |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url(../images/throbber-small.gif); |
|||
} |
|||
.ui.throbber.small.center { |
|||
margin: -12px 0px 0px -12px; |
|||
} |
|||
|
|||
/* Tiny Size */ |
|||
.ui.throbber.tiny { |
|||
width: 16px; |
|||
height: 16px; |
|||
background-image: url(../images/throbber-tiny.gif); |
|||
} |
|||
.ui.throbber.tiny.center { |
|||
margin: -8px 0px 0px -8px; |
|||
} |
|||
|
|||
/* Text Styles */ |
|||
.ui.throbber.text { |
|||
width: auto !important; |
|||
height: auto !important; |
|||
text-align: center; |
|||
font-style: normal; |
|||
color: #422256; |
|||
|
|||
margin-top: -28px; |
|||
min-width: 32px; |
|||
padding-top: 40px; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
} |
|||
.ui.throbber.text.tiny { |
|||
margin-top: -16px; |
|||
min-width: 16px; |
|||
padding-top: 20px; |
|||
font-size: 9px; |
|||
} |
|||
.ui.throbber.text.small { |
|||
margin-top: -23px; |
|||
min-width: 24px; |
|||
padding-top: 32px; |
|||
font-size: 11px; |
|||
} |
|||
.ui.throbber.text.large { |
|||
margin-top: -46px; |
|||
min-width: 64px; |
|||
padding-top: 80px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* Blue */ |
|||
.ui.throbber.text.blue { |
|||
color: #FFFFFF |
|||
} |
|||
.ui.throbber.tiny.blue { |
|||
background-image: url(../images/throbber-blue-tiny.gif); |
|||
} |
|||
.ui.throbber.small.blue { |
|||
background-image: url(../images/throbber-blue-small.gif); |
|||
} |
|||
.ui.throbber.blue { |
|||
background-image: url(../images/throbber-blue-medium.gif); |
|||
} |
|||
.ui.throbber.large.blue { |
|||
background-image: url(../images/throbber-blue-large.gif); |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
|
|||
/*--------------- |
|||
Video Module |
|||
----------------*/ |
|||
|
|||
.video.module { |
|||
position: relative; |
|||
background: #333333 url(/images/icon-placeholder-logo.png) no-repeat center center; |
|||
} |
|||
|
|||
.video.module .play { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 100; |
|||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
|||
filter: alpha(opacity=60); |
|||
opacity: 0.6; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url(/images/icon-play.png) no-repeat center center; |
|||
|
|||
-webkit-transition: opacity 0.3s; |
|||
-moz-transition: opacity 0.3s; |
|||
-o-transition: opacity 0.3s; |
|||
-ms-transition: opacity 0.3s; |
|||
transition: opacity 0.3s; |
|||
} |
|||
.video.module .play:hover { |
|||
opacity: 1; |
|||
} |
|||
.video.module .placeholder { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.video.module .embed { |
|||
display: none; |
|||
} |
|||
|
|||
/* Video Active */ |
|||
.video.module.active .play, |
|||
.video.module.active .placeholder { |
|||
display: none; |
|||
} |
|||
.video.module.active .embed { |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,80 @@ |
|||
/******************************* |
|||
Content Well |
|||
*******************************/ |
|||
|
|||
.ui.well { |
|||
display: inline-block; |
|||
padding: 6px; |
|||
|
|||
-webkit-border-radius: 10px; |
|||
-moz-border-radius: 10px; |
|||
border-radius: 10px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px -1px 0px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px -1px 0px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0px -1px 0px rgba(0, 0, 0, 0.05) inset, |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
|
|||
background-image: linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
background-image: -webkit-linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
background-image: -moz-linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
background-image: -o-linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
background-image: -ms-linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
background-image: linear-gradient(top, rgba(80, 80, 80, 0.24) 0%, rgba(119, 119, 119, 0.24) 100%); |
|||
} |
|||
.ui.well .button { |
|||
-webkit-border-radius: 10px; |
|||
-moz-border-radius: 10px; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
/* Lighter Color Well */ |
|||
.ui.light.well { |
|||
background-image: linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
background-image: -webkit-linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
background-image: -moz-linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
background-image: -o-linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
background-image: -ms-linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
background-image: linear-gradient(top, rgba(80, 80, 80, 0.14) 0%, rgba(119, 119, 119, 0.14) 100%); |
|||
} |
|||
|
|||
/* Shallow Well */ |
|||
.ui.shallow.well { |
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
padding: 4px; |
|||
} |
|||
.ui.shallow.well .button { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/* Deeper Well */ |
|||
.ui.deep.well { |
|||
-webkit-border-radius: 50px; |
|||
-moz-border-radius: 50px; |
|||
border-radius: 50px; |
|||
padding: 10px; |
|||
} |
|||
.ui.deep.well .button { |
|||
border-radius: 50px; |
|||
} |
|||
|
|||
|
|||
/* Fluid Width */ |
|||
.ui.well.fluid, |
|||
.ui.well.fluid .button { |
|||
width: 100%; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
@ -0,0 +1,312 @@ |
|||
.ui.progress { |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
width: 350px; |
|||
max-width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-moz-border-radius: 5px; |
|||
-webkit-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-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, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/* Colors */ |
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
|
|||
/* Fluid Width */ |
|||
.ui.fluid.progress { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* State */ |
|||
.ui.success.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.success.progress .bar, |
|||
.ui.success.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
.ui.error.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.error.progress .bar, |
|||
.ui.error.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
|
|||
|
|||
/* Variations */ |
|||
|
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
|
|||
-webkit-animation: animate-striped 3s linear infinite; |
|||
-moz-animation: animate-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
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 |
|||
; |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 8.3 KiB |
@ -0,0 +1,124 @@ |
|||
.ui.block { |
|||
min-height: 18px; |
|||
margin: 15px 0px; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
|
|||
font-size: 16px; |
|||
|
|||
line-height: 1.33; |
|||
height: auto; |
|||
padding: 1em; |
|||
color: #333333; |
|||
|
|||
-webkit-border-radius: 4px 4px 4px 4px; |
|||
-moz-border-radius: 4px 4px 4px 4px; |
|||
border-radius: 4px 4px 4px 4px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
|||
; |
|||
box-shadow: |
|||
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
|||
; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* block with headers */ |
|||
.ui.block > .header { |
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* block with paragraphs */ |
|||
.ui.block > p { |
|||
margin: 5px 0px; |
|||
} |
|||
.ui.block > p:first-child { |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* block with child list */ |
|||
.ui.block ul.list { |
|||
list-style-position: inside; |
|||
margin: 0px 0px 0px; |
|||
padding: 0px; |
|||
} |
|||
.ui.block ul.list li { |
|||
position: relative; |
|||
list-style-type: none; |
|||
margin: 0px 0px 0px 10px; |
|||
padding: 0px; |
|||
} |
|||
.ui.block ul.list li:before { |
|||
position: absolute; |
|||
content: '\2022'; |
|||
top: -0.05em; |
|||
left: -10px; |
|||
|
|||
height: 100%; |
|||
vertical-align: baseline; |
|||
|
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.block ul.list li:first-child { |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.blue.block, |
|||
.ui.info.block { |
|||
border-color: #75C9E9; |
|||
background-color: #E9F9FF; |
|||
color: #1D6582; |
|||
} |
|||
|
|||
/* Success Text Block */ |
|||
.ui.green.block, |
|||
.ui.success.block, |
|||
.ui.positive.block { |
|||
background-color: #EEFFE9; |
|||
color: #119000; |
|||
border-color: #2FCB05; |
|||
} |
|||
|
|||
/* Warning Text Block */ |
|||
.ui.yellow.block, |
|||
.ui.warning.header, |
|||
.ui.warning.block { |
|||
background-color: #F6F3D5; |
|||
border-color: #CBB105; |
|||
color: #AF9801; |
|||
} |
|||
/* Error Text Block */ |
|||
.ui.red.block, |
|||
.ui.error.block, |
|||
.ui.negative.block { |
|||
background-color: #F1D7D7; |
|||
|
|||
color: #AD0000; |
|||
border-color: #B06C6C; |
|||
} |
|||
|
|||
/*-------------- |
|||
States |
|||
---------------*/ |
|||
|
|||
.ui.block.show, |
|||
.ui.header.show { |
|||
display: block; |
|||
} |
|||
.ui.block.hide, |
|||
.ui.header.hide { |
|||
display: none; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,119 @@ |
|||
/*-------------------- |
|||
Horizontal Dividers |
|||
---------------------*/ |
|||
|
|||
.ui.divider { |
|||
margin: 1em 0em; |
|||
height: 1px; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
border-top: none; |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.ui.vertical.divider, |
|||
.ui.horizontal.divider { |
|||
position: relative; |
|||
margin: 25px 0px 10px; |
|||
|
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
color: #555555; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.ui.divider .rule { |
|||
position: absolute; |
|||
top: 6px; |
|||
|
|||
width: 45%; |
|||
height: 1px; |
|||
|
|||
background-color: #ADADAD; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.9) |
|||
} |
|||
|
|||
.ui.divider .left.rule { |
|||
left: 0px; |
|||
} |
|||
|
|||
.ui.divider .right.rule { |
|||
right: 0px; |
|||
} |
|||
|
|||
.ui.divider .label { |
|||
display: block; |
|||
margin: 14px 0px 0px; |
|||
text-transform: none; |
|||
color: #333333; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Vertical Dividers |
|||
---------------------*/ |
|||
|
|||
.vertical.ui.divider { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 50%; |
|||
height: 100%; |
|||
|
|||
margin: 0px 0px 0px -50px; |
|||
min-width: 100px; |
|||
|
|||
color: #555555; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.vertical.ui.divider .rule { |
|||
position: absolute; |
|||
left: 50%; |
|||
|
|||
width: 1px; |
|||
height: 45%; |
|||
|
|||
background-color: #ADADAD; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
|
|||
border-right: 1px solid #F8F8F8; |
|||
border-right: 1px solid rgba(255, 255, 255, 0.9) |
|||
} |
|||
|
|||
.vertical.ui.divider .top.rule { |
|||
top: 0px; |
|||
} |
|||
|
|||
.vertical.ui.divider .bottom.rule { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
.vertical.ui.divider .label { |
|||
position: relative; |
|||
top: 50%; |
|||
margin-top: -7px; |
|||
|
|||
display: block; |
|||
width: 100%; |
|||
|
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
text-align: center; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
text-transform: none; |
|||
color: #333333; |
|||
} |
|||
/* Inverted Color Divider (Black BG) */ |
|||
.ui.divider.inverted { |
|||
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.divider.inverted .rule { |
|||
border-color: #4A4A4A; |
|||
border-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
/******************************* |
|||
Headers & Text Blocks |
|||
*******************************/ |
|||
|
|||
/* Header Block */ |
|||
.ui.header { |
|||
min-height: 18px; |
|||
margin: 15px 0px; |
|||
padding: 8px 13px; |
|||
|
|||
background-color: #FFFFFF; |
|||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); |
|||
|
|||
line-height: 1.5; |
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
text-shadow: 0px 1px 0px #FFFFFF; |
|||
|
|||
-webkit-border-radius: 4px 4px 4px 4px; |
|||
-moz-border-radius: 4px 4px 4px 4px; |
|||
border-radius: 4px 4px 4px 4px; |
|||
} |
|||
|
|||
/* Sub Header (De-emphasized) */ |
|||
.ui.sub.header { |
|||
margin: 0px; |
|||
|
|||
border: none; |
|||
border-bottom: 1px solid #DADADA; |
|||
border-radius: 0px; |
|||
|
|||
background-color: #FFFFFF; |
|||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
|||
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
|||
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
|||
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
|||
background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
|||
|
|||
font-size: 14px; |
|||
padding: 6px 25px; |
|||
color: #55356A; |
|||
} |
|||
|
|||
/* Neutral Header */ |
|||
.ui.neutral.block, |
|||
.ui.neutral.header { |
|||
background-color: #E0E0E0; |
|||
background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
|||
background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
|||
background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
|||
background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
|||
background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
|||
border-color: #CCCCCC; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
|
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); |
|||
} |
|||
|
|||
/* Attached Header */ |
|||
.ui.header.attached, |
|||
.ui.header.attached.top { |
|||
margin: 0px; |
|||
-webkit-border-radius: 4px 4px 0px 0px; |
|||
-moz-border-radius: 4px 4px 0px 0px; |
|||
border-radius: 4px 4px 0px 0px; |
|||
} |
|||
.ui.header.attached.bottom { |
|||
margin-top: 0px; |
|||
-webkit-border-radius: 0px 0px 4px 4px; |
|||
-moz-border-radius: 0px 0px 4px 4px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.header.simple { |
|||
border-radius: 0px; |
|||
background-color: #FAFAFA; |
|||
background-image: none; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Resizes |
|||
---------------*/ |
|||
.ui.header { |
|||
font-size: 16px; |
|||
} |
|||
.ui.header.large { |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
font-size: 18px; |
|||
} |
|||
.ui.header.huge { |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
font-size: 22px; |
|||
} |
|||
@ -0,0 +1,297 @@ |
|||
/* |
|||
* # Semantic Menu - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
.ui.menu { |
|||
background-color: #EEEEEE; |
|||
font-size: 0px; |
|||
} |
|||
.ui.menu a { |
|||
color: #333333; |
|||
} |
|||
|
|||
/* Items */ |
|||
.ui.menu .item { |
|||
display: inline-block; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
-moz-user-select: -moz-none; |
|||
-khtml-user-select: none; |
|||
} |
|||
.ui.menu .item:first-child { |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.menu .menu.left, |
|||
.ui.menu .item.left { |
|||
float: left; |
|||
} |
|||
.ui.menu .menu.right, |
|||
.ui.menu .item.right { |
|||
float: right; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/* Dropdown Menu */ |
|||
.ui.menu .dropdown.item { |
|||
position: relative; |
|||
} |
|||
.ui.menu .dropdown.item .menu { |
|||
overflow: hidden; |
|||
height: 0px; |
|||
width: 0px; |
|||
position: absolute; |
|||
top: 100%; |
|||
left: 0px; |
|||
background-color: #FFFFFF; |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
.ui.menu .dropdown.item:last-child .menu { |
|||
left: auto; |
|||
right: 0px; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.menu .dropdown.item:hover .menu { |
|||
display: block; |
|||
overflow: visible; |
|||
min-width: 150px; |
|||
width: 100%; |
|||
height: auto; |
|||
|
|||
opacity: 1; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-top: none; |
|||
|
|||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.menu .dropdown.item .menu .item { |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
font-size: 0.9em; |
|||
display: block; |
|||
color: #555555; |
|||
|
|||
-webkit-touch-callout: none; |
|||
-webkit-user-select: none; |
|||
-khtml-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
.ui.menu .dropdown.item .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
/* Pseudo states cautiously used for convenience */ |
|||
.ui.menu .item.hover, |
|||
.ui.menu .link.item:hover, |
|||
.ui.menu a.item:hover, |
|||
.ui.menu .dropdown.item:hover, |
|||
.ui.menu .dropdown.item .menu .item:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.menu .item.down, |
|||
.ui.menu .link.item:active, |
|||
.ui.menu a.item:active, |
|||
.ui.menu .dropdown.item .menu .item:active { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
.ui.menu .item.active { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.menu .item.disabled, |
|||
.ui.menu .item.disabled:hover, |
|||
.ui.menu .item.disabled.hover { |
|||
cursor: default; |
|||
opacity: 0.3; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.menu { |
|||
background-color: #333333; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.black.menu a { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.black.menu .item { |
|||
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
.ui.black.menu .item:first-child { |
|||
border-left: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
.ui.black.menu .menu.right, |
|||
.ui.black.menu .item.right { |
|||
border-left: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
|
|||
/* hover */ |
|||
.ui.black.menu .item.hover, |
|||
.ui.black.menu .link.item:hover, |
|||
.ui.black.menu a.item:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(255, 255, 255, .15); |
|||
} |
|||
/* active */ |
|||
.ui.black.menu .item.down, |
|||
.ui.black.menu .link.item:active, |
|||
.ui.menu .dropdown.item:hover, |
|||
.ui.black.menu a.item:active { |
|||
background-color: rgba(255, 255, 255, .05); |
|||
|
|||
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Transparent |
|||
---------------*/ |
|||
|
|||
.ui.transparent.menu { |
|||
opacity: 0.95; |
|||
} |
|||
|
|||
/*-------------- |
|||
Vertical |
|||
---------------*/ |
|||
|
|||
.ui.vertical.menu { |
|||
width: 100%; |
|||
} |
|||
.ui.vertical.menu .item { |
|||
border-left: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/*-------------- |
|||
Icons |
|||
---------------*/ |
|||
|
|||
.ui.menu .icon.menu .item i { |
|||
margin: 0px; |
|||
} |
|||
.ui.menu .icon.item i { |
|||
padding: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fixed |
|||
---------------*/ |
|||
|
|||
.ui.menu.fixed { |
|||
position: fixed; |
|||
z-index: 10; |
|||
width: 100%; |
|||
} |
|||
.ui.menu.fixed.top { |
|||
top: 0px; |
|||
left: 0px; |
|||
right: auto; |
|||
bottom: auto; |
|||
} |
|||
.ui.menu.fixed.right { |
|||
top: 0px; |
|||
right: 0px; |
|||
left: auto; |
|||
bottom: auto; |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
.ui.menu.fixed.bottom { |
|||
bottom: 0px; |
|||
left: 0px; |
|||
top: auto; |
|||
right: auto; |
|||
} |
|||
.ui.menu.fixed.left { |
|||
top: 0px; |
|||
left: 0px; |
|||
right: auto; |
|||
bottom: auto; |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
.ui.menu .item { |
|||
padding: 5px 10px; |
|||
font-size: 14px; |
|||
} |
|||
.ui.menu .item > a { |
|||
display: block; |
|||
margin: -5px -10px; |
|||
padding: 5px 10px; |
|||
} |
|||
.ui.large.menu .item { |
|||
padding: 12px 10px; |
|||
font-size: 16px; |
|||
} |
|||
.ui.menu .item > a { |
|||
display: block; |
|||
margin: -12px -10px; |
|||
padding: 12px 10px; |
|||
} |
|||
@ -0,0 +1,312 @@ |
|||
.ui.progress { |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
width: 350px; |
|||
max-width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-moz-border-radius: 5px; |
|||
-webkit-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-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, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/* Colors */ |
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
|
|||
/* Fluid Width */ |
|||
.ui.fluid.progress { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* State */ |
|||
.ui.success.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.success.progress .bar, |
|||
.ui.success.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
.ui.error.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.error.progress .bar, |
|||
.ui.error.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
} |
|||
|
|||
|
|||
/* Variations */ |
|||
|
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
|
|||
-webkit-animation: animate-striped 3s linear infinite; |
|||
-moz-animation: animate-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes animate-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
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 |
|||
; |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
/******************************* |
|||
Page Segments |
|||
*******************************/ |
|||
|
|||
.ui.segment { |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
padding: 1em; |
|||
|
|||
-webkit-border-radius: 5px 5px 5px 5px; |
|||
-moz-border-radius: 5px 5px 5px 5px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
|
|||
min-height: 50px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ui.segment.attached { |
|||
margin: -1px 0px; |
|||
-moz-border-radius: 0px; |
|||
-webkit-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.ui.top.attached.segment { |
|||
margin-bottom: -1px; |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.segment.bottom.attached { |
|||
margin-top: -1px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
|
|||
/* Common Views */ |
|||
.ui.segment .list li { |
|||
padding: 10px 25px; |
|||
} |
|||
Loading…
Reference in new issue