From 92d3bd6fb3b66f0393b618501e361ac6ef76d196 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 29 Apr 2013 18:27:04 -0400 Subject: [PATCH] finishing up the text block page Former-commit-id: d150ae71a0b352bcc9a6d9e7b9ac66017d6138a7 Former-commit-id: 2e787fb4e4e357cdd4e650df18a9f65d04ea3dd6 --- docs/form.html | 6 +-- docs/text.html | 86 ++++++++++++++++++++++++++++++++++++--- src/ui/flat/block.css | 88 ++++++++++++++++++++++++++++++---------- src/ui/flat/checkbox.css | 2 +- 4 files changed, 152 insertions(+), 30 deletions(-) diff --git a/docs/form.html b/docs/form.html index 8845e0909..07a217266 100755 --- a/docs/form.html +++ b/docs/form.html @@ -165,6 +165,9 @@

Form:

A form is a collection of user input elements, and has no stylings of its own.

+
+

This example uses a ui segment to add the padding and background color. This is not required.

+

Let's go ahead and get you signed up.

@@ -194,9 +197,6 @@
Submit
-
-

This example uses a ui segment to add the padding and background color. This is not required.

-

Elements

diff --git a/docs/text.html b/docs/text.html index a1f425e98..825e24906 100755 --- a/docs/text.html +++ b/docs/text.html @@ -8,7 +8,9 @@ + + @@ -211,13 +213,87 @@

States

-

Text Blocks only have a single ui state

+ +

Hidden

+

Text Blocks can be hidden

+ + +
+

Visible

+

Text Blocks can be set to visible if they need to force themselves to be shown.

+
+

You can always see me

+
+

Variations

+
+

Icon Block

+

A text block can contain an icon.

+
+ +
+
+ Have you heard about our mailing list? +
+

Get all the best inventions in your e-mail every day. Sign up now

+
+
+
+ + +
+

Attached Block

+

A text block can be formatted to attach itself to content

+
+
+ Have you heard about our mailing list? +
+

Get all the best inventions in your e-mail every day. Sign up now

+
+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+
+ Are you sure you know what you're doing? +
+
+
+ +

Warning Block

-

A text block that is dismissable.

+

A text block may be formatted to display warning messages.

@@ -229,7 +305,7 @@

Info Block

-

A text block that is dismissable.

+

A text block may be formatted to display information.

@@ -244,7 +320,7 @@

Success Block

-

A text block that is formatted to display success message.

+

A text block may be formatted to display a success message.

@@ -255,7 +331,7 @@

Error Block

-

A text block that formatted to display errors, can also use classname "red" or "negative".

+

A text block may be formatted to display errors.

diff --git a/src/ui/flat/block.css b/src/ui/flat/block.css index 39ede3554..589093bac 100755 --- a/src/ui/flat/block.css +++ b/src/ui/flat/block.css @@ -30,16 +30,6 @@ -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 - ; } @@ -48,17 +38,17 @@ ---------------*/ /* block with headers */ -.ui.block > .header { +.ui.block .header { font-size: 1.33em; font-weight: bold; } /* block with paragraphs */ -.ui.block > p { +.ui.block p { opacity: 0.85; - margin: 0.3em 0em; + margin: 0.2em 0em; } -.ui.block > p:first-child { +.ui.block p:first-child { margin-top: 0em; } @@ -66,13 +56,14 @@ .ui.block ul.list { opacity: 0.85; list-style-position: inside; - margin: 0.3em 0em; + margin: 0.2em 0em; padding: 0em; } .ui.block ul.list li { position: relative; list-style-type: none; - margin: 0em 0em 0em 0.8em; + font-style: italic; + margin: 0em 0em 0em 1em; padding: 0em; } .ui.block ul.list li:before { @@ -123,12 +114,12 @@ States *******************************/ -.ui.block.show, -.ui.header.show { - display: block; +.ui.block.visible, +.ui.header.visible { + display: block !important; } -.ui.block.hide, -.ui.header.hide { +.ui.block.hidden, +.ui.header.hidden { display: none; } @@ -136,6 +127,61 @@ Variations *******************************/ +/*-------------- + Attached +---------------*/ + +.ui.attached.block { + margin-bottom: 0px; + + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; + + -webkit-box-shadow: + 0px 0px 0px 1px #DDDDDD + ; + -moz-box-shadow: + 0px 0px 0px 1px #DDDDDD + ; + box-shadow: + 0px 0px 0px 1px #DDDDDD + ; +} +.ui.bottom.attached.block { + margin-top: 0px; + + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; + + -webkit-box-shadow: + 0px 0px 0px 1px #DDDDDD + ; + -moz-box-shadow: + 0px 0px 0px 1px #DDDDDD + ; + box-shadow: + 0px 0px 0px 1px #DDDDDD + ; +} + + +/*-------------- + Icon +---------------*/ + +.ui.icon.block > .icon { + display: table-cell; + vertical-align: middle; + font-size: 3.8em; + padding-right: 0.4em; + opacity: 0.2; +} +.ui.icon.block > .content { + display: table-cell; + vertical-align: middle; +} /*-------------- Colors diff --git a/src/ui/flat/checkbox.css b/src/ui/flat/checkbox.css index 7eedf7b72..d447642d9 100755 --- a/src/ui/flat/checkbox.css +++ b/src/ui/flat/checkbox.css @@ -9,7 +9,7 @@ .ui.checkbox { position: relative; display: inline-block; - vertical-align: text-bottom; + vertical-align: baseline; } .ui.checkbox input { visibility: hidden;