- Check our this excellent resource on dogs.
+
+ Ribbon
A label can appear as a ribbon attaching itself to an element.
-
-
-
+
-
-
- Dogs
-
- Pretty nice animals.
- Cats -Also pretty nice animals, but can prefer solitude.
- Ogres and monsters -Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
-
+ Dogs
+
- Pretty nice animals.
+ Cats +Also pretty nice animals, but can prefer solitude.
+ Ogres and monsters +Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
-
Dogs
-
diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco
index 6a3aaa742..0df738040 100755
--- a/server/documents/index.html.eco
+++ b/server/documents/index.html.eco
@@ -16,7 +16,7 @@ type : 'Semantic'
-
Semantic UI - + 1.0.0
diff --git a/server/documents/modules/popup.html.eco b/server/documents/modules/popup.html.eco index 1987899b0..a21889592 100755 --- a/server/documents/modules/popup.html.eco +++ b/server/documents/modules/popup.html.eco @@ -80,7 +80,7 @@ themes : ['Default'] In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
+
Queue
@@ -111,7 +111,7 @@ themes : ['Default']
A fluid popup will take up the entire width of its offset container
-
+
+
1
2
3
@@ -128,6 +128,31 @@ themes : ['Default']
+
+
Flowing
+A popup can have no maximum width and continue to flow to fit its content
+ +
+
+
+
+
+
+ Basic Plan
+2 projects, $10 a month
+ +
+
+ Business Plan
+5 projects, $20 a month
+ +
+
+ Premium Plan
+8 projects, $25 a month
+ +Inverted
A popup can have its colors inverted
@@ -312,7 +337,7 @@ themes : ['Default'] Browse
-
+
Fabrics
diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco
index 71a43ceff..e512c0fd2 100755
--- a/server/documents/views/card.html.eco
+++ b/server/documents/views/card.html.eco
@@ -269,15 +269,54 @@ themes : ['Default', 'Basic']
- 
+ 
+
+
+
+
+
Buttons
+A card can contain buttons
+
+
diff --git a/server/documents/views/item.html.eco b/server/documents/views/item.html.eco
index b3a70c86f..973ec612a 100755
--- a/server/documents/views/item.html.eco
+++ b/server/documents/views/item.html.eco
@@ -23,7 +23,7 @@ themes : ['Default']
+
+
+
+
+ Elliot Fu
+
+ Elliot Fu is a film-maker from New York.
+
+
+
+
+
+
+ Veronika Ossi
+
+ Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
+
+
+
+
+
Jenny Hess
+
+ Jenny is a student studying Media Management at the New School
+
+ Items
A group of items.
-
+
@@ -104,7 +104,7 @@ themes : ['Default']
@@ -104,7 +104,7 @@ themes : ['Default']
Header
A item can contain a header
-
+
-
12 Amazing Secrets for Long Life
@@ -133,7 +133,7 @@ themes : ['Default']
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
+
-
Arrowhead Valley Camp
@@ -180,7 +180,7 @@ themes : ['Default']
To make the entire content of a item link, check out the link variation below
+
@@ -226,7 +226,7 @@ themes : ['Default']
-
@@ -226,7 +226,7 @@ themes : ['Default']
-
+
@@ -240,7 +240,7 @@ themes : ['Default']
Description
A item can contain a description with a single or multiple paragraphs
-
+
Cute Dog
@@ -257,7 +257,7 @@ themes : ['Default']
Extra Content
A item can contain extra content meant to be formatted separately from the main content
-
+
Cute Dog
@@ -279,7 +279,7 @@ themes : ['Default']
Image
A item can contain an image
-
+
@@ -308,7 +308,7 @@ themes : ['Default']
The following example uses ui for legibility only. This is not necessary for using
-
@@ -308,7 +308,7 @@ themes : ['Default']
The following example uses ui for legibility only. This is not necessary for using ui items
+
@@ -391,7 +391,7 @@ themes : ['Default']
@@ -391,7 +391,7 @@ themes : ['Default']
Link Item
A item can be formatted so that the entire contents link to another page
-
+
@@ -460,7 +460,7 @@ themes : ['Default']
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
-
@@ -460,7 +460,7 @@ themes : ['Default']
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
+
Cute Dog
diff --git a/server/files/javascript/popup.js b/server/files/javascript/popup.js
index 83f030d1d..bd785820e 100755
--- a/server/files/javascript/popup.js
+++ b/server/files/javascript/popup.js
@@ -18,8 +18,11 @@ semantic.popup.ready = function() {
;
$('.fluid.example .button')
+ .popup()
+ ;
+ $('.fitted.example .button')
.popup({
- inline: true
+ on: 'click'
})
;
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js
index f051a0b3b..e27503e5c 100755
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@@ -79,7 +79,7 @@ semantic.ready = function() {
.each(function(){
$('')
.addClass('icon code')
- .prependTo( $(this) )
+ .appendTo( $(this) )
;
})
;
@@ -255,9 +255,9 @@ semantic.ready = function() {
.html($followMenu)
;
$rail = $('')
- .addClass('ui right dividing rail')
+ .addClass('ui close right rail')
.html($sticky)
- .prependTo($container)
+ .appendTo($container)
;
$followMenu
.accordion({
@@ -343,7 +343,7 @@ semantic.ready = function() {
url : variableURL,
dataType : 'text',
urlData : urlData,
- success: function(content) {
+ onSuccess: function(content) {
less.modifyVars( handler.less.parseFile(content) );
$themeDropdown
.api({
@@ -351,7 +351,7 @@ semantic.ready = function() {
url : overrideURL,
dataType : 'text',
urlData : urlData,
- success: function(content) {
+ onSuccess: function(content) {
if( $('style.override').size() > 0 ) {
$('style.override').remove();
}
@@ -519,7 +519,7 @@ semantic.ready = function() {
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
- $ignored = $('i.code:first-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+ $ignored = $('i.code:last-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignored),
code = ''
;
@@ -548,7 +548,7 @@ semantic.ready = function() {
$header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
- $ignoredContent = $('.ui.popup, i.code:first-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+ $ignoredContent = $('.ui.popup, i.code:last-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignoredContent),
code = $example.data('code') || $.proxy(handler.generateCode, this)()
;
@@ -901,8 +901,7 @@ semantic.ready = function() {
})
.find('.button')
.popup({
- position : 'top right',
- variation : 'inverted'
+ position : 'top center'
})
;
}
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 9c27c8024..df3b296ec 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -179,39 +179,42 @@ a:hover {
#example .header.segment,
#example > .content > .page > .segment,
#example > .header.segment {
- margin: 0px 0px 3em;
+ position: relative;
+ z-index: 2;
+ margin: 0em;
padding-top: 70px;
padding-bottom: 30px;
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
-#example.legacy .main.menu,
-#example.legacy .launch.button {
- left: auto !important;
-}
-#example.scale.down.pushed .header.segment {
- padding-top: 30px;
-}
-
-#example.divider .ui.grid {
- position: relative;
-}
-
#example .tab.header.segment {
padding-bottom: 0em;
- margin-bottom: 2em;
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1) inset;
}
#example .tab.header.segment .vertical.menu {
display: none;
margin: 2rem 0em 1rem;
}
#example .tab.header.segment .tabular.menu {
- margin: 2rem 0em 0em;
+ margin: 2rem -1px 0em;
border-bottom: none;
}
#example .tab.header.segment .tabular.menu .active.item {
- background-color: #F7F7F7;
- border-bottom-color: #F7F7F7;
+ background-color: #FFFFFF;
+ border-bottom-color: #FFFFFF;
+}
+
+#example.legacy .main.menu,
+#example.legacy .launch.button {
+ left: auto !important;
+}
+#example.scale.down.pushed .header.segment {
+ padding-top: 30px;
+}
+
+#example.divider .ui.grid {
+ position: relative;
}
@@ -529,7 +532,7 @@ body#example.hide {
#example .introduction .label {
position: absolute;
margin-left: 2em;
- top: 1em
+ top: 2em
}
#example .introduction .theme.buttons {
@@ -730,7 +733,6 @@ body#example.hide {
-----------------*/
#example .page > .footer {
- margin-top: 5em;
padding: 5em 0em 6em;
}
@@ -788,6 +790,7 @@ body#example.hide {
#example .example {
margin: 1em 0em;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 1em 0em;
position: relative;
-webkit-tap-highlight-color: transparent;
@@ -812,6 +815,9 @@ body#example.hide {
#example .main.container > h2 {
position: relative;
}
+#example .main.container > h2:first-child {
+ margin-top: 0em;
+}
/* After Section Header */
#example .example:first-child,
@@ -852,10 +858,10 @@ body#example.hide {
cursor: pointer;
position: absolute;
- top: auto;
+ top: 1em;
right: 0px;
margin: 0;
- opacity: 0;
+ opacity: 0.1;
font-size: 18px;
color: #555555;
@@ -1427,17 +1433,26 @@ body.progress .ui.progress .bar {
}
#example .main.container {
+ background-color: #FFFFFF;
+ margin: 2em auto 4em;
+ box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 0.325em;
+ padding: 1em 2em 2em;
z-index: 1;
- padding-bottom: 2em;
+}
+#example .main.container {
+ margin-top: 0em;
+ padding-top: 2em;
+ border-radius: 0em 0em 0.25em 0.25em;
+}
+#example .main.container .right.rail .sticky {
+ padding-top: 2em;
}
#example .container {
position: relative;
width: 915px;
margin: 0px auto;
}
-#example .main.container .right.rail .sticky {
- padding-bottom: 30px;
-}
#example .following.menu .menu .active.item {
font-weight: bold;
@@ -1445,7 +1460,6 @@ body.progress .ui.progress .bar {
@media only screen and (max-width : 600px) {
#example .page > .footer {
- margin-top: 3em;
padding: 2em 0em;
}
#example .container {
@@ -1491,6 +1505,10 @@ body.progress .ui.progress .bar {
#example .container {
width: 850px;
}
+ #example.item .container,
+ #example.card .container {
+ width: 955px;
+ }
}
diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco
index 44257e303..b08dbc557 100755
--- a/server/partials/header.html.eco
+++ b/server/partials/header.html.eco
@@ -28,7 +28,10 @@
<% end %>