From 9b7e5e354b1b3d2f046a96c3b61f154fee5519b6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sun, 7 Sep 2014 03:20:04 -0400 Subject: [PATCH] Additions to button and sidebar docs --- server/documents/elements/button.html.eco | 37 ++++---- server/documents/modules/sidebar.html.eco | 20 ++--- server/files/javascript/semantic.js | 2 +- server/files/stylesheets/semantic.css | 29 +++---- server/layouts/default.html.eco | 101 +++++++++++----------- 5 files changed, 91 insertions(+), 98 deletions(-) diff --git a/server/documents/elements/button.html.eco b/server/documents/elements/button.html.eco index 59beab583..e1a9c5b9d 100755 --- a/server/documents/elements/button.html.eco +++ b/server/documents/elements/button.html.eco @@ -37,6 +37,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Ordinality

+
Setting your brand colors to primary and secondary color variables in site.variables, will allow you to use consistent color theming for UI elements

A button can be formatted to show different levels of emphasis

Add to Cart @@ -95,54 +96,51 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Basic

-

A basic button removes all unnecessary formatting

+

A basic button is less pronounced

Add Friend
-
-
-
- - Change Language -
-
+
+
Black
+
Yellow
+
Green
+
Blue
+
Orange
+
Purple
+
Pink
+
Red
+
Teal
-
+

Inverted

A button can be formatted to appear on dark backgrounds

Standard
Black
Yellow
-

Green
Blue
Orange
-

Purple
Pink
Red
-

Teal
-
+
Basic
Basic Black
Basic Yellow
-

Basic Green
Basic Blue
Basic Orange
-

Basic Purple
Basic Pink
Basic Red
-

Basic Teal
@@ -233,7 +231,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Variations

-
+

Social

A button can be formatted to link to a social website

-

LinkedIn @@ -268,7 +265,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
-
+

Sizes

A button can have different sizes:

@@ -297,7 +294,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
-
+

Colors

A button can have different colors:

Black
diff --git a/server/documents/modules/sidebar.html.eco b/server/documents/modules/sidebar.html.eco index 9285007d3..17d35f20c 100755 --- a/server/documents/modules/sidebar.html.eco +++ b/server/documents/modules/sidebar.html.eco @@ -30,10 +30,7 @@ themes : ['Default']

Transitions

-

A sidebar can use different transitions

-
- Safe -
+

A sidebar can use different transitions to display itself

Overlay
@@ -52,17 +49,16 @@ themes : ['Default']
Scale Down
-
- Scale Up -
-
- Open Door +
+
+

Safe

+

A safe transitioning sidebar does not adjust the page context

+
A safe transition does not create a new 3D context, this means any fixed position elements within your pusher will not be adjusted
-
- Rotate In +
+ Safe
-

Direction

A sidebar can appear on any side of content

diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index e7d51c4b9..6701dfa43 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -607,7 +607,7 @@ semantic.ready = function() { $menu .sidebar({ - transition: 'scale down' + transition: 'push' }) .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item') .sidebar('attach events', $hideMenu, 'hide') diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index a6e8c1563..7c015d67e 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -191,6 +191,9 @@ a:hover { background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } +#example.scale.down.pushed .header.segment { + padding-top: 30px; +} #example .tab.header.segment { padding-bottom: 0em; @@ -222,21 +225,10 @@ a:hover { #example .main.menu { top: 0px; - left: auto; + left: -1px; min-width: 320px; width: 100%; - z-index: 900; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - - -webkit-transition: margin 0.3s ease; - -moz-transition: margin 0.3s ease; - -o-transition: margin 0.3s ease; - -ms-transition: margin 0.3s ease; - transition: margin 0.3s ease; + z-index: 1004; } #example .main.menu iframe { margin: 0px 0px 0px 0px; @@ -609,8 +601,7 @@ body#example.hide { #example .fixed.launch.button { position: fixed; top: 63px; - left: auto; - z-index: 500; + left: -1px; width: 55px; height: 50px; overflow: hidden; @@ -635,6 +626,7 @@ body#example.hide { 0.5s transform ease ; } + #example .fixed.launch.button .text { position: absolute; top: 15px; @@ -777,6 +769,13 @@ body#example.hide { #example .example .language.label { margin: 1em 0em 0.75em; } +#example .spaced.example .buttons, +#example .spaced.example .button { + margin-bottom: 0.75em; +} +#example .spaced.example .buttons .button { + margin-bottom: 0em; +} #example .icon.example .grid { margin-top: 1.5rem; text-align: left; diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index 84d650465..815322596 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -199,60 +199,61 @@
-
-
-
-
- Content -
- <%= @document.type %>: <%= @document.title %> -
- <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %> - - <% else: %> -
- <% end %> -
- <%= "#{pageNumber} of #{pageCount}" %> -
- <% for element, index in currentCollection: %> - - <%= (index+1) %>. <%= element.title %> - - <% end %> -
-
- <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %> - - <% else: %> -
- <% end %> -
-
- -
- <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> - - - - - - - <% end %> - - +
+
+ Content +
+ <%= @document.type %>: <%= @document.title %> +
+ <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %> + + <% else: %> +
+ <% end %> +
+ <%= "#{pageNumber} of #{pageCount}" %> +
+ <% for element, index in currentCollection: %> + + <%= (index+1) %>. <%= element.title %> - -
+ <% end %>
-
- - Menu + <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %> + + <% else: %> +
+ <% end %> +
+
+ +
+ <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> + + + + + + + <% end %> + + + +
+
+
+
+ + Menu +
+ +
+
<%- @content %>