Browse Source
Former-commit-id: d9042c3bf45960384e41d59c2080794b40f5955a Former-commit-id: 39235d374afa5d6e69511f36cadd6f63e5af9688beta
Jack Lukic
12 years ago
27 changed files with 888 additions and 894 deletions
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;z-index:1000}.ui.dimmer .loader{display:block}.ui.loader.text{width:auto!important;height:auto!important;text-align:center;font-style:normal;margin-top:-28px;min-width:32px;padding-top:40px;font-size:14px}.ui.loader.text.mini{margin-top:-16px;min-width:16px;padding-top:20px;font-size:11px}.ui.loader.text.small{margin-top:-23px;min-width:24px;padding-top:32px;font-size:13px}.ui.loader.text.large{margin-top:-46px;min-width:64px;padding-top:80px;font-size:16px}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.dimmer .ui.text.loader,.ui.inverted.text.loader{color:#FFF}.ui.dimmer .mini.ui.loader,.ui.inverted .mini.ui.loader{background-image:url(../images/loader-mini-inverted.gif)}.ui.dimmer .small.ui.loader,.ui.inverted .small.ui.loader{background-image:url(../images/loader-small-inverted.gif)}.ui.dimmer .ui.loader,.ui.inverted.loader{background-image:url(../images/loader-medium-inverted.gif)}.ui.dimmer .large.ui.loader,.ui.inverted .large.ui.loader{background-image:url(../images/loader-large-inverted.gif)}.ui.inverted.dimmer .ui.loader.mini,.ui.loader.mini{width:16px;height:16px;background-image:url(../images/loader-mini.gif);margin:-8px 0 0 -8px}.ui.inverted.dimmer .ui.loader.small,.ui.loader.small{width:24px;height:24px;background-image:url(../images/loader-small.gif);margin:-12px 0 0 -12px}.ui.inverted.dimmer .ui.loader,.ui.loader{width:32px;height:32px;background:url(../images/loader-medium.gif) no-repeat;background-position:48% 0}.ui.inverted.dimmer .ui.loader.large,.ui.loader.large{width:64px;height:64px;background-image:url(../images/loader-large.gif);margin:-32px 0 0 -32px}.ui.inline.loader{display:inline-block;vertical-align:middle;margin:0} |
|||
.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;z-index:1000}.ui.dimmer .loader{display:block}.ui.loader.text{width:auto!important;height:auto!important;text-align:center;font-style:normal;margin-top:-28px;min-width:32px;padding-top:40px;font-size:14px}.ui.loader.text.mini{margin-top:-16px;min-width:16px;padding-top:20px;font-size:11px}.ui.loader.text.small{margin-top:-23px;min-width:24px;padding-top:32px;font-size:13px}.ui.loader.text.large{margin-top:-46px;min-width:64px;padding-top:80px;font-size:16px}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.dimmer .ui.text.loader,.ui.inverted.text.loader{color:rgba(0,0,0,.8)}.ui.dimmer .mini.ui.loader,.ui.inverted .mini.ui.loader{background-image:url(../images/loader-mini-inverted.gif)}.ui.dimmer .small.ui.loader,.ui.inverted .small.ui.loader{background-image:url(../images/loader-small-inverted.gif)}.ui.dimmer .ui.loader,.ui.inverted.loader{background-image:url(../images/loader-medium-inverted.gif)}.ui.dimmer .large.ui.loader,.ui.inverted .large.ui.loader{background-image:url(../images/loader-large-inverted.gif)}.ui.inverted.dimmer .ui.loader.mini,.ui.loader.mini{width:16px;height:16px;background-image:url(../images/loader-mini.gif);margin:-8px 0 0 -8px}.ui.inverted.dimmer .ui.loader.small,.ui.loader.small{width:24px;height:24px;background-image:url(../images/loader-small.gif);margin:-12px 0 0 -12px}.ui.inverted.dimmer .ui.loader,.ui.loader{width:32px;height:32px;background:url(../images/loader-medium.gif) no-repeat;background-position:48% 0}.ui.inverted.dimmer .ui.loader.large,.ui.loader.large{width:64px;height:64px;background-image:url(../images/loader-large.gif);margin:-32px 0 0 -32px}.ui.inline.loader{display:inline-block;vertical-align:middle;margin:0} |
|||
@ -1 +1 @@ |
|||
.ui.popup{display:none;position:absolute;top:57px;right:0;z-index:900;max-width:250px;background-color:#FAFAFA;padding:6px 8px;border:1px solid #DFDFDF;border:1px solid rgba(0,0,0,.12);font-size:11px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,.3);box-shadow:0 2px 2px rgba(0,0,0,.3)}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup:after{font-family:Arial,"Helevetica Neue",sans-serif;display:block;position:absolute;font-size:14px;color:#FAFAFA;text-shadow:0 2px 2px rgba(0,0,0,.3)}.ui.popup:after,.ui.popup.top.left:after,.ui.popup.top.center:after,.ui.popup.top.right:after{content:'\25BC'}.ui.popup.bottom:after,.ui.popup.bottom.left:after,.ui.popup.bottom.right:after,.ui.popup.bottom.center:after{content:'\25B2'}.ui.popup.left:after{content:'\25B6'}.ui.popup.right:after{content:'\25C0'}.ui.popup{margin:0}.ui.popup.bottom{margin:9px 0 0}.ui.popup.top{margin:0 0 9px}.ui.popup.top.left,.ui.popup.bottom.left{margin-left:-12px}.ui.popup.top.right,.ui.popup.bottom.right{margin-right:-12px}.ui.popup.left.center{margin:0 9px 0 0}.ui.popup.right.center{margin:0 0 0 10px}.ui.popup:after{line-height:1;bottom:-10px;left:50%}.ui.popup.bottom:after{top:-11px;right:18px;text-shadow:0 -1px 1px rgba(0,0,0,.3)}.ui.popup.top.right:after,.ui.popup.bottom.right:after{left:auto;right:8px}.ui.popup.top.left:after,.ui.popup.bottom.left:after{right:auto;left:8px}.ui.popup.left.center:after{left:auto;right:-10px;top:50%;margin-top:-7px;text-shadow:2px 0 2px rgba(0,0,0,.3)}.ui.popup.right.center:after{left:-10px;right:auto;top:50%;margin-top:-7px;text-shadow:-2px 0 2px rgba(0,0,0,.3)}.ui.popup.top.center:after,.ui.popup.bottom.center:after{margin-left:-7px;left:50%;right:auto}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.large.popup{padding:10px}.ui.large.popup .content{font-size:13px}.ui.large.popup.bottom{margin:11px 0 0}.ui.large.popup.top{margin:0 0 11px}.ui.large.popup.top.left,.ui.large.popup.bottom.left{margin-left:-12px}.ui.large.popup.top.right,.ui.large.popup.bottom.right{margin-right:-12px}.ui.large.popup.left.center{margin:0 12px 0 0}.ui.large.popup.right.center{margin:0 0 0 12px}.ui.large.popup:after{bottom:-13px;font-size:18px}.ui.popup.large.bottom:after{top:-15px}.ui.popup.large.left.center:after{right:-13px;margin-top:-9px}.ui.popup.large.right.center:after{left:-13px;margin-top:-9px}.ui.popup h2{font-size:14px;font-weight:700;color:#603E72;margin-bottom:5px}.ui.popup .content{font-size:12px;font-weight:400;line-height:1.33;color:#666;padding:0}.ui.popup .content p{margin-top:5px}.ui.popup .content p b{color:#603E72}.ui.popup .content p:first-child{margin-top:0}.ui.popup.transparent,.ui.popup.transparent:after{background-color:rgba(250,250,250,.9)}.ui.black.popup{background-color:#000;border:0}.ui.black.popup:after{color:#000}.ui.black.popup .content{color:#FFF} |
|||
.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;color:rgba(0,0,0,.7);-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.black.popup{background-color:#333;border:0;color:#FFF}.ui.black.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.black.popup:before{background-color:#333} |
|||
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
c6bd3dedc19942c09ffd7c60c62481c7945b921e |
|||
90a30609cb6f43c82c405df2b6369c9aff133c2a |
|||
@ -1 +1 @@ |
|||
1fb06ecbe12fc123cf62c98087ec6d8d468f12e9 |
|||
f4796810ca6ec794949f0fef2c3df98514fa4d2f |
|||
@ -0,0 +1,270 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'popup' |
|||
|
|||
title : 'Popup' |
|||
type : 'UI Module' |
|||
--- |
|||
<script src="/javascript/popup.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Popup</h1> |
|||
<p>A popup displays additional information on top of a page element.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Popup</h4> |
|||
<p>A standard popup</p> |
|||
<div class="ui info icon ignored message"> |
|||
<i class="icon sketchy question circle"></i> |
|||
<div class="content"> |
|||
<div class="header">Specifying Content</div> |
|||
<p>Popups can specify content in three ways:<p> |
|||
<ul class="list"> |
|||
<li>Using html title attribute</li> |
|||
<li>Using data-content attribute</li> |
|||
<li>Using the content property in the initialization of the popup</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a popup"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A popup can be large or small</p> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a small popup" data-variation="small"></i> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a large popup" data-variation="large"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A popup can have its colors inverted</p> |
|||
<i class="sketchy question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h4 class="ui header">Initializing an popup</h4> |
|||
<div class="code"> |
|||
$('.ui.popup') |
|||
.popup() |
|||
; |
|||
</div> |
|||
|
|||
<h4 class="ui header">Including metadata</h4> |
|||
<p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p> |
|||
<div class="code" data-type="html"> |
|||
<i class="sketchy question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">Positioning</h4> |
|||
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p> |
|||
<i class="sketchy question icon link" data-content="Top Left" data-position="top left"></i> |
|||
<i class="sketchy question icon link" data-content="Top Center" data-position="top center"></i> |
|||
<i class="sketchy question icon link" data-content="Top Right" data-position="top right"></i> |
|||
<i class="sketchy question icon link" data-content="Left Center" data-position="left center"></i> |
|||
<i class="sketchy question icon link" data-content="Right Center" data-position="right center"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Left" data-position="bottom left"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Center " data-position="bottom center"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Right" data-position="bottom right"></i> |
|||
</div> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">Title</h4> |
|||
<p>A popup can be formatted with a title</p> |
|||
<i class="sketchy question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i> |
|||
</div> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">HTML</h4> |
|||
<p>A popup can be formatted with html</p> |
|||
<i class="sketchy question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i> |
|||
</div> |
|||
|
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Content</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>content</td> |
|||
<td></td> |
|||
<td>Content to display</td> |
|||
</tr> |
|||
<tr> |
|||
<td>title</td> |
|||
<td></td> |
|||
<td>Title to display alongside content</td> |
|||
</tr> |
|||
<tr> |
|||
<td>html</td> |
|||
<td></td> |
|||
<td>HTML content to display instead of preformatted title and content</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<table class="ui green table segment"> |
|||
<thead> |
|||
<th colspan="3">Popup Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>inline</td> |
|||
<td>true</td> |
|||
<td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. Otherwise popups will appended to body and removed after being hidden.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>delay</td> |
|||
<td>0</td> |
|||
<td>Delay in milliseconds before showing a popup when using hover events.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>variation</td> |
|||
<td></td> |
|||
<td>Popup variation to use, can use multiple variations with a space delimiter</td> |
|||
</tr> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>hover</td> |
|||
<td>Event used to invoke popup</td> |
|||
</tr> |
|||
<tr> |
|||
<td>clickToClose</td> |
|||
<td>hover</td> |
|||
<td>Whether clicking anywhere outside a popup should close it.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>position</td> |
|||
<td>top center</td> |
|||
<td>Position that the popup should appear</td> |
|||
</tr> |
|||
<tr> |
|||
<td>distanceAway</td> |
|||
<td>0</td> |
|||
<td>Distance away from element for the popup to appear.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>arrowOffset</td> |
|||
<td>0</td> |
|||
<td>Offset to apply to arrow positioning of element</td> |
|||
</tr> |
|||
<tr> |
|||
<td>maxSearchDepth</td> |
|||
<td>10</td> |
|||
<td>Number of iterations before giving up search for popup position when a popup cannot fit on screen</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">Animation</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>animation</td> |
|||
<td>Pop</td> |
|||
<td>Animation to use, can be set to either pop or fade.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>duration</td> |
|||
<td>250</td> |
|||
<td>Callback after a popup html is generated.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>easing</td> |
|||
<td>easeOutQuint</td> |
|||
<td>Callback after a popup section is shown.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onInit</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup html is generated.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onShow</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup section is shown.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onHide</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup section is hidden.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Popup</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>popup</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,26 @@ |
|||
semantic.accordion = {}; |
|||
|
|||
// ready event
|
|||
semantic.accordion.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$popup = $('.example .question.icon'), |
|||
// alias
|
|||
handler |
|||
; |
|||
$popup |
|||
.popup({ |
|||
className: { |
|||
popup: 'ignored ui popup' |
|||
} |
|||
}) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.accordion.ready) |
|||
; |
|||
@ -1,73 +0,0 @@ |
|||
/******************************* |
|||
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; |
|||
} |
|||
@ -1,36 +0,0 @@ |
|||
/*--------------- |
|||
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; |
|||
} |
|||
@ -1,45 +0,0 @@ |
|||
/******************************* |
|||
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; |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
/******************************* |
|||
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; |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
/******************************* |
|||
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; |
|||
} |
|||
Loading…
Reference in new issue