From 7eb8ffa994780c0e217f64a8ac6dba46063b2259 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 7 May 2013 18:08:53 -0400 Subject: [PATCH] moves button and form to ems, NO MORE PIXELSgit status. Redoes checkbox class --- node/src/documents/collections/form.html | 25 +- node/src/documents/collections/menu.html | 16 + node/src/documents/elements/button.html | 11 +- node/src/documents/elements/label.html | 6 +- .../semantic/src/collections/form.css | 26 +- .../semantic/src/collections/menu.css | 82 ++-- .../semantic/src/elements/button.css | 407 +++++++++--------- .../semantic/src/modules/checkbox.css | 151 ++++--- node/src/files/javascript/semantic.js | 7 +- node/src/files/stylesheets/semantic.css | 9 + node/src/layouts/default.html.eco | 2 +- src/collections/form.css | 26 +- src/collections/menu.css | 82 ++-- src/elements/button.css | 407 +++++++++--------- src/modules/checkbox.css | 151 ++++--- 15 files changed, 797 insertions(+), 611 deletions(-) diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html index 0dc48e928..cfddd9bf8 100755 --- a/node/src/documents/collections/form.html +++ b/node/src/documents/collections/form.html @@ -90,7 +90,7 @@ type : 'UI Collection' - +

Checkbox

Checkboxes are styled forms of standard form checkboxes.

@@ -112,6 +112,29 @@ type : 'UI Collection'
+
+

Radio Box

+

Radio boxes are styled forms of standard form radio controls.

+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+
+
+

Text Block

Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 5fed42abf..b9577fba8 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -260,6 +260,22 @@ type : 'UI Collection'
+ +
+

Basic

+

A menu may reduce its complexity to blend in with a page

+
+
+ Section 1 +
+
+ Section 2 +
+
+ Section 3 +
+
+

Colors

diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index b0c37d6a7..ada25d652 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -126,8 +126,13 @@ type : 'UI Element'

Colors

Can have different colors:

-
Blue Button
-
Purple Button
+ Black Button + Green BUtton + Red Button + Blue Button +

+ Purple Button + Teal Button

Feedback

@@ -169,7 +174,7 @@ type : 'UI Element'

Horizontally Attached

Can be attached to the left or right of other content

Left
-
+
Right
diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index 7a233711d..9d6e1c938 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -43,8 +43,8 @@ type : 'UI Element'

Attached Label

A label attached to a content segment

-
-
+
+
Top Left
Top Right
@@ -53,7 +53,7 @@ type : 'UI Element'

Hey let's look at labels.

-
+
Existing Users
diff --git a/node/src/files/components/semantic/src/collections/form.css b/node/src/files/components/semantic/src/collections/form.css index 2e804352b..3ae6bc0eb 100644 --- a/node/src/files/components/semantic/src/collections/form.css +++ b/node/src/files/components/semantic/src/collections/form.css @@ -21,17 +21,17 @@ .ui.form { position: relative; - width: 450px; + width: 35em; } .ui.form :first-child { - margin-top: 0px; + margin-top: 0em; } /*-------------------- Content ---------------------*/ -.ui.form p { +.ui.form > p { margin: 1em 0; } @@ -75,11 +75,12 @@ border: 1px solid rgba(0, 0, 0, 0.15); outline: none; + color: #555555; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; @@ -97,9 +98,10 @@ .ui.textarea, .ui.form textarea { - min-height: 67px; - height: 101px; - max-height: 202px; + line-height: 1.33; + min-height: 8em; + height: 12em; + max-height: 24em; resize: vertical; } .ui.form select { @@ -147,10 +149,8 @@ .ui.form input:focus, .ui.form textarea:focus { - color: #222222; - background-color: #FFFFFF; - border-color: rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset; + color: rgba(20, 20, 20, 0.9); + border-color: rgba(0, 0, 0, 0.3); } /*-------------------- diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index eef615161..dea7c7ef9 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -216,7 +216,7 @@ /*-------------- - Header + Header ---------------*/ .ui.menu .header.item { @@ -229,7 +229,6 @@ } - /*-------------- Dropdowns ---------------*/ @@ -411,16 +410,9 @@ /*-------------- - Colors + Inverted ---------------*/ -/* Light Colors */ -.ui.grey.menu { - background-color: #F0F0F0; -} - - -/*--- inverted ---*/ .ui.inverted.menu { background-color: #333333; box-shadow: none; @@ -436,14 +428,6 @@ .ui.inverted.menu .item > a { color: #FFFFFF; } -.ui.link.inverted.menu .item:hover, -.ui.inverted.menu .item.hover, -.ui.inverted.menu .link.item:hover, -.ui.inverted.menu a.item:hover, -.ui.inverted.menu .dropdown.item.hover, -.ui.inverted.menu .dropdown.item:hover { - background-color: rgba(255, 255, 255, 0.05); -} .ui.inverted.menu .item .item, .ui.inverted.menu .item .item > a { color: rgba(255, 255, 255, 0.8); @@ -456,48 +440,53 @@ .ui.inverted.menu .dropdown.item .menu .item a { color: rgba(0, 0, 0, 0.75); } -.ui.inverted.menu .item .menu a.item:hover, -.ui.inverted.menu .item .menu a.item.hover, -.ui.inverted.menu .item .menu .link.item:hover, -.ui.inverted.menu .item .menu .link.item.hover { - color: rgba(255, 255, 255, 1); -} -.ui.inverted.menu .item.active, -.ui.inverted.menu .item.active a { - color: rgba(255, 255, 255, 1); + + +/*-------------- + Colors +---------------*/ + +/*--- Light Colors ---*/ +.ui.grey.menu { + background-color: #F0F0F0; } -/*--- inverted Colors ---*/ +/*--- Inverted Colors ---*/ .ui.inverted.green.menu { background-color: #A1CF64; } .ui.inverted.green.pointing.menu .item.active:after { background-color: #A1CF64; } + .ui.inverted.red.menu { background-color: #EF4D6D; } .ui.inverted.red.pointing.menu .item.active:after { background-color: #F16883; } + .ui.inverted.blue.menu { background-color: #6ECFF5; } .ui.inverted.blue.pointing.menu .item.active:after { background-color: #6ECFF5; } + .ui.inverted.purple.menu { background-color: #564F8A; } .ui.inverted.purple.pointing.menu .item.active:after { background-color: #564F8A; } + .ui.inverted.orange.menu { background-color: #F05940; } .ui.inverted.orange.pointing.menu .item.active:after { background-color: #F05940; } + .ui.inverted.teal.menu { background-color: #00B5AD; } @@ -574,12 +563,30 @@ -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; } +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .dropdown.item.hover, +.ui.inverted.menu .dropdown.item:hover { + background-color: rgba(255, 255, 255, 0.05); +} +.ui.inverted.menu .item .menu a.item:hover, +.ui.inverted.menu .item .menu a.item.hover, +.ui.inverted.menu .item .menu .link.item:hover, +.ui.inverted.menu .item .menu .link.item.hover { + color: rgba(255, 255, 255, 1); +} /*--- Active ---*/ .ui.inverted.menu .item.active { border-color: transparent; background-color: rgba(255, 255, 255, 0.15); } +.ui.inverted.menu .item.active, +.ui.inverted.menu .item.active a { + color: rgba(255, 255, 255, 1); +} /*--- Pointers ---*/ .ui.inverted.pointing.menu .item.active:after { @@ -590,13 +597,22 @@ background-color: #3B3B3B; } - /*-------------- - Transparent + Basic ---------------*/ - -.ui.transparent.menu { - opacity: 0.95; +.ui.basic.menu { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.menu .item { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.menu .item:before { + display: none; } /*-------------- diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css index 9f9a19e77..101e50235 100644 --- a/node/src/files/components/semantic/src/elements/button.css +++ b/node/src/files/components/semantic/src/elements/button.css @@ -25,9 +25,9 @@ background-color: #F0F0F0; - padding: 12px 30px; + padding: 0.8em 1.5em; - font-size: 14px; + font-size: 1em; text-transform: uppercase; line-height: 1; font-weight: bold; @@ -36,18 +36,18 @@ color: #7A7A7A; text-align: center; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; -moz-box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; -webkit-user-select: none; @@ -93,8 +93,9 @@ Hover ---------------*/ +.ui.button:hover, .ui.button.hover { - background-color: #DDDDDD; + background-color: #E0E0E0; } /*-------------- @@ -102,10 +103,12 @@ ---------------*/ /* Down */ +.ui.button:active, .ui.button.down { - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + background-color: #DDDDDD; + -webkit-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; + box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; } @@ -117,13 +120,13 @@ .ui.button.active { background-color: #E6E6E6; -webkit-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; -moz-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; } .ui.buttons .button.active, @@ -135,14 +138,15 @@ .ui.buttons .button.active.hover, .ui.button.active.hover { background: #E0E0E0; - -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: 0px 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; + box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; } .ui.buttons .button.active.hover, .ui.buttons .button.active.hover a, .ui.button.active.hover, .ui.button.active.hover a { + background: #DADADA; color: #555555; } @@ -171,8 +175,8 @@ } .ui.button.loading:after { position: absolute; - top: 0px; - left: 0px; + top: 0em; + left: 0em; width: 100%; height: 100%; content: ''; @@ -180,9 +184,9 @@ background-position: 50% 50%; background-repeat: no-repeat; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 0.3125em; + -webkit-border-radius: 0.3125em; + border-radius: 0.3125em; } /* Opposite color loader */ .ui.grey.button.loading, @@ -278,161 +282,224 @@ *******************************/ -/*--------------- - Blue -----------------*/ +/*--- Black ---*/ +.ui.buttons.black .button, +.ui.button.black { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.buttons.black .button.hover, +.ui.buttons.black .button:hover, +.ui.button.black.hover, +.ui.button.black:hover { + background-color: #888888; + color: #FFFFFF; +} +.ui.buttons.black .button.down, +.ui.buttons.black .button:active, +.ui.button.black.down, +.ui.button.black:active { + background-color: #888888; + color: #FFFFFF; +} -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #00B4AC; +/*--- Green ---*/ +.ui.buttons.green .button, +.ui.button.green { + background-color: #A1CF64; color: #FFFFFF; } -.ui.blue.buttons .button.hover, -.ui.blue.button.hover { - background-color: #F15B40; +.ui.buttons.green .button.hover, +.ui.buttons.green .button:hover, +.ui.button.green.hover, +.ui.button.green:hover { + background-color: #89B84C; + color: #FFFFFF; } -.ui.blue.buttons .button.down, -.ui.blue.button.down { - background-color: #F15B40; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; +.ui.buttons.green .button.down, +.ui.buttons.green .button:active, +.ui.button.green.down, +.ui.button.green:active { + background-color: #89B84C; + color: #FFFFFF; } -/*--------------- - Purple -----------------*/ +/*--- Red ---*/ +.ui.buttons.red .button, +.ui.button.red { + background-color: #EF4D6D; + color: #FFFFFF; +} +.ui.buttons.red .button.hover, +.ui.buttons.red .button:hover, +.ui.button.red.hover, +.ui.button.red:hover { + background-color: #DE3859; + color: #FFFFFF; +} +.ui.buttons.red .button.down, +.ui.buttons.red .button:active, +.ui.button.red.down, +.ui.button.red:active { + background-color: #DE3859; + color: #FFFFFF; +} -.ui.purple.buttons .button, -.ui.purple.button { +/*--- Blue ---*/ +.ui.buttons.blue .button, +.ui.button.blue { + background-color: #6ECFF5; color: #FFFFFF; - background-color: #6E4889; } -.ui.purple.buttons .button.hover, -.ui.purple.button.hover { - background-color: #62397F; +.ui.buttons.blue .button.hover, +.ui.buttons.blue .button:hover, +.ui.button.blue.hover, +.ui.button.blue:hover { + background-color: #1AB8F3; + color: #FFFFFF; +} +.ui.buttons.blue .button.down, +.ui.buttons.blue .button:active, +.ui.button.blue.down, +.ui.button.blue:active { + background-color: #1AB8F3; + color: #FFFFFF; +} + +/*--- Purple ---*/ +.ui.buttons.purple .button, +.ui.button.purple { + background-color: #564F8A; + color: #FFFFFF; } -.ui.purple.buttons .button.down, -.ui.purple.button.down { - background-color: #9254BD; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; +.ui.buttons.purple .button.hover, +.ui.buttons.purple .button:hover, +.ui.button.purple.hover, +.ui.button.purple:hover { + background-color: #3E3773; + color: #FFFFFF; +} +.ui.buttons.purple .button.down, +.ui.buttons.purple .button:active, +.ui.button.purple.down, +.ui.button.purple:active { + background-color: #3E3773; + color: #FFFFFF; +} + +/*--- Teal ---*/ +.ui.buttons.teal .button, +.ui.button.teal { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.buttons.teal .button.hover, +.ui.buttons.teal .button:hover, +.ui.button.teal.hover, +.ui.button.teal:hover { + background-color: #009A93; + color: #FFFFFF; +} +.ui.buttons.teal .button.down, +.ui.buttons.teal .button:active, +.ui.button.teal.down, +.ui.button.teal:active { + background-color: #009A93; + color: #FFFFFF; } /*--------------- -Green / Positive + Positive ----------------*/ -.ui.button.green, +.ui.buttons.positive .button, .ui.button.positive { - background-color: #7DDC5C; + background-color: #A1CF64; color: #FFFFFF; } - -.ui.button.green.hover, -.ui.button.positive.hover { - background-color: #7FE95A; +.ui.buttons.positive .button.hover, +.ui.buttons.positive .button:hover, +.ui.button.positive.hover, +.ui.button.positive:hover { + background-color: #7DDC5C; color: #FFFFFF; } - -.ui.button.green.down, -.ui.button.positive.down { - background-color: #59B94B; +.ui.buttons.positive .button.down, +.ui.buttons.positive .button:active, +.ui.button.positive.down, +.ui.button.positive:active { + background-color: #7DDC5C; color: #FFFFFF; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; } /*--------------- - Red / Negative + Negative ----------------*/ -.ui.button.red, +.ui.buttons.negative .button, .ui.button.negative { - background-color: #EF3F49; + background-color: #EF4D6D; color: #FFFFFF; } - -.ui.button.red.hover, -.ui.button.negative.hover { - background-color: #FE313C; +.ui.buttons.negative .button.hover, +.ui.buttons.negative .button:hover, +.ui.button.negative.hover, +.ui.button.negative:hover { + background-color: #DE3859; color: #FFFFFF; } - -.ui.button.red.down, -.ui.button.negative.down { - background-color: #DC323C; +.ui.buttons.negative .button.down, +.ui.buttons.negative .button:active, +.ui.button.negative.down, +.ui.button.negative:active { + background-color: #DE3859; color: #FFFFFF; } /*------------------- - Sizes + Sizes --------------------*/ .ui.buttons.mini .button, .ui.mini.button { - font-size: 9px; - padding: 4px 5px; - border-radius: 3px; -} -.ui.buttons.mini .button i, -.ui.mini.button i { - vertical-align: top; + font-size: 0.5625em; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 11px; - font-weight: bold; - padding: 8px 15px; + font-size: 0.625em; } .ui.small.buttons .button, .ui.small.button { - font-size: 12px; - padding: 10px 20px; + font-size: 0.75em; } -.ui.medium.buttons .button, -.ui.medium.button { - font-size: 14px; - padding: 12px 30px; +.ui.buttons .button, +.ui.button { + font-size: 1em; } .ui.large.buttons .button, .ui.large.button { - font-size: 16px; - padding: 15px 30px; + font-size: 1.125em; } .ui.big.buttons .button, .ui.big.button { - font-size: 18px; - padding: 15px 30px; + font-size: 1.25em; } .ui.huge.buttons .button, .ui.huge.button { - font-size: 20px; - padding: 18px 30px; + font-size: 1.375em; } .ui.massive.buttons .button, .ui.massive.button { - padding: 20px 45px; - - font-size: 24px; + font-size: 1.5em; font-weight: bold; } .ui.gigantic.buttons .button, .ui.gigantic.button { - padding: 18px 45px; - - font-size: 30px; + font-size: 2em; font-weight: bold; } -.ui.mini.button, -.ui.tiny.button { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - /*-------------- Containing Icon @@ -467,48 +534,14 @@ Containing Icon ---------------*/ .ui.icon.buttons .button, .ui.icon.button { - padding: 7px; + padding: 0.75em; text-align: center; } .ui.icon.buttons .button i, .ui.icon.button i { - margin: 0px; + margin: 0em; vertical-align: text-top; } -/* Image Button Resizes */ -.ui.icon.buttons.mini .button, -.ui.mini.icon.button { - padding: 4px; -} -.ui.tiny.icon.buttons .button, -.ui.tiny.icon.button { - padding: 6px; -} -.ui.small.icon.buttons .button, -.ui.small.icon.button { - padding: 6px; -} -.ui.medium.icon.buttons .button, -.ui.medium.icon.button { - padding: 7px; -} -.ui.big.icon.buttons .button, -.ui.big.icon.button { - padding: 10px; -} -.ui.huge.icon.buttons .button, -.ui.huge.icon.button { - padding: 11px; -} -.ui.massive.icon.buttons .button, -.ui.massive.icon.button { - padding: 15px; -} -.ui.gigantic.icon.buttons .button, -.ui.gigantic.icon.button { - padding: 18px; -} - /*-------------- Toggle @@ -553,9 +586,9 @@ Containing Icon ---------------*/ .ui.button.bubbly { - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - border-radius: 30px; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; } @@ -570,17 +603,17 @@ Containing Icon border: 1px solid rgba(0, 0, 0, 0.1); border-bottom: none; - -webkit-border-radius: 5px 5px 0px 0px; - -moz-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0px 0px; + -moz-border-radius: 0.3125em 0.3125em 0px 0px; + border-radius: 0.3125em 0.3125em 0px 0px; } .ui.button.attached.bottom { border: 1px solid rgba(0, 0, 0, 0.1); border-top: none; - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 0.3125em 0.3125em; + -moz-border-radius: 0px 0px 0.3125em 0.3125em; + border-radius: 0px 0px 0.3125em 0.3125em; } .ui.button.attached.left { display: inline-block; @@ -588,18 +621,18 @@ Containing Icon border-right: 1px solid rgba(0, 0, 0, 0.1); - -webkit-border-radius: 5px 0px 0px 5px; - -moz-border-radius: 5px 0px 0px 5px; - border-radius: 5px 0px 0px 5px; + -webkit-border-radius: 0.3125em 0px 0px 0.3125em; + -moz-border-radius: 0.3125em 0px 0px 0.3125em; + border-radius: 0.3125em 0px 0px 0.3125em; } .ui.button.attached.right { display: inline-block; border-left: 1px solid rgba(0, 0, 0, 0.1); - -webkit-border-radius: 0px 5px 5px 0px; - -moz-border-radius: 0px 5px 5px 0px; - border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 0.3125em 0.3125em 0px; + -moz-border-radius: 0px 0.3125em 0.3125em 0px; + border-radius: 0px 0.3125em 0.3125em 0px; } /* Button attached to a form element */ @@ -615,9 +648,9 @@ input + .ui.attached.button { -moz-box-shadow: none; box-shadow: none; - -webkit-border-radius: 0px 5px 5px 0px; - -moz-border-radius: 0px 5px 5px 0px; - border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 0.3125em 0.3125em 0px; + -moz-border-radius: 0px 0.3125em 0.3125em 0px; + border-radius: 0px 0.3125em 0.3125em 0px; vertical-align: top; } @@ -648,9 +681,9 @@ input + .ui.attached.button.down { .ui.buttons .huge.button, .ui.buttons .gigantic.button { float: left; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; } .ui.buttons .button:first-child, .ui.buttons .mini.button:first-child, @@ -659,9 +692,9 @@ input + .ui.attached.button.down { .ui.buttons .massive.button:first-child, .ui.buttons .huge.button:first-child, .ui.buttons .gigantic.button:first-child { - margin-left: 0px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + margin-left: 0em; + border-top-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; } .ui.buttons .button:last-child, .ui.buttons .mini.button:last-child, @@ -670,8 +703,8 @@ input + .ui.attached.button.down { .ui.buttons .massive.button:last-child, .ui.buttons .huge.button:last-child, .ui.buttons .gigantic.button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; } /* Vertical Style */ @@ -690,9 +723,9 @@ input + .ui.attached.button.down { .ui.buttons.vertical .huge.button:first-child, .ui.buttons.vertical .gigantic.button:first-child { margin-top: 0px; - -moz-border-radius: 5px 5px 0px 0px; - -webkit-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; + -moz-border-radius: 0.3125em 0.3125em 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0px 0px; + border-radius: 0.3125em 0.3125em 0px 0px; } .ui.buttons.vertical .button:last-child, .ui.buttons.vertical .mini.button:last-child, @@ -701,23 +734,9 @@ input + .ui.attached.button.down { .ui.buttons.vertical .massive.button:last-child, .ui.buttons.vertical .huge.button:last-child, .ui.buttons.vertical .gigantic.button:last-child { - -moz-border-radius: 0px 0px 5px 5px; - -webkit-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; -} - -/* Only show multiple borders when changing colors in group */ -.ui.buttons .grey.button + .grey.button, -.ui.buttons .blue.button + .blue.button, -.ui.buttons .purple.button + .purple.button, -.ui.buttons .green.button + .green.button { - margin-left: -1px; -} -.ui.vertical.buttons .grey.button + .grey.button, -.ui.vertical.buttons .blue.button + .blue.button, -.ui.vertical.buttons .purple.button + .purple.button, -.ui.vertical.buttons .green.button + .green.button { - margin-top: -1px; + -moz-border-radius: 0px 0px 0.3125em 0.3125em; + -webkit-border-radius: 0px 0px 0.3125em 0.3125em; + border-radius: 0px 0px 0.3125em 0.3125em; } /******************************* diff --git a/node/src/files/components/semantic/src/modules/checkbox.css b/node/src/files/components/semantic/src/modules/checkbox.css index d447642d9..59321353e 100644 --- a/node/src/files/components/semantic/src/modules/checkbox.css +++ b/node/src/files/components/semantic/src/modules/checkbox.css @@ -6,33 +6,60 @@ Standard ---------------*/ + +/*--- Content ---*/ .ui.checkbox { position: relative; display: inline-block; + + width: 1em; + height: 1em; vertical-align: baseline; } .ui.checkbox input { visibility: hidden; } + + +/*--- Box ---*/ .ui.checkbox label { cursor: pointer; position: absolute; - bottom: 0; - left: 0px; + width: 1em; + height: 1em; + bottom: 0em; + left: 0em; border-radius: 4px; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - background: #fcfff4; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + + 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 ); + -webkit-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -moz-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -o-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -ms-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; } + +/*--- Checkbox ---*/ .ui.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -40,7 +67,7 @@ content: ''; position: absolute; background: transparent; - border: 3px solid #333333; + border: 0.2em solid #333333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); @@ -49,51 +76,53 @@ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } +.ui.checkbox label:after { + width: 0.5em; + height: 0.2em; + top: 0.25em; + left: 0.2em; +} + + +/******************************* + States +*******************************/ + + + +/*--- Hover ---*/ .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%); + background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} + + +/*--- Down ---*/ +.ui.checkbox label:active { + background-color: rgba(0, 0, 0, 0.05); } + +/*--- Active ---*/ .ui.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } -/* States */ + +/*--- Disabled ---*/ .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; -} +/******************************* + Variations +*******************************/ /*-------------- @@ -126,6 +155,24 @@ border-radius: 500px; } +/*-------------- + Sizes +---------------*/ + +.ui.checkbox, +.ui.checkbox label { + font-size: 1em; +} +.ui.large.checkbox, +.ui.large.checkbox label { + font-size: 1.5em; +} +.ui.huge.checkbox, +.ui.huge.checkbox label { + font-size: 1.5em; +} + + /*-------------- Rounded ---------------*/ @@ -232,22 +279,4 @@ 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; } \ No newline at end of file diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 9e2498671..b45b4efb5 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -9,6 +9,7 @@ semantic.ready = function() { // selector cache var $ui = $('.ui').not('.hover, .down'), + $checkbox = $('.ui.checkbox'), $swap = $('.theme.menu .item'), $menu = $('.sidebar.button'), $sortTable = $('.sortable.table'), @@ -141,7 +142,6 @@ semantic.ready = function() { $waypoint = $('h2').eq( $group.index( $header ) ), offset = $waypoint.offset().top - 80 ; - console.log($headers); $menu .addClass('animating') ; @@ -274,6 +274,11 @@ semantic.ready = function() { .on('click', handler.createCode) ; + $checkbox + .checkbox() + ; + console.log($checkbox); + $swap .on('click', handler.swapStyle) ; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 0f2da6637..e6bb25e61 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -289,6 +289,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ font-weight: bold; } +/*-------------- + Transparent +---------------*/ + +.ui.transparent.menu { + opacity: 0.95; +} + + /* content */ #example .container { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 41dd5073a..0279bae2f 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -131,7 +131,7 @@
-
Menu
+
Menu
<%- @content %> diff --git a/src/collections/form.css b/src/collections/form.css index 2e804352b..3ae6bc0eb 100755 --- a/src/collections/form.css +++ b/src/collections/form.css @@ -21,17 +21,17 @@ .ui.form { position: relative; - width: 450px; + width: 35em; } .ui.form :first-child { - margin-top: 0px; + margin-top: 0em; } /*-------------------- Content ---------------------*/ -.ui.form p { +.ui.form > p { margin: 1em 0; } @@ -75,11 +75,12 @@ border: 1px solid rgba(0, 0, 0, 0.15); outline: none; + color: #555555; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; @@ -97,9 +98,10 @@ .ui.textarea, .ui.form textarea { - min-height: 67px; - height: 101px; - max-height: 202px; + line-height: 1.33; + min-height: 8em; + height: 12em; + max-height: 24em; resize: vertical; } .ui.form select { @@ -147,10 +149,8 @@ .ui.form input:focus, .ui.form textarea:focus { - color: #222222; - background-color: #FFFFFF; - border-color: rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset; + color: rgba(20, 20, 20, 0.9); + border-color: rgba(0, 0, 0, 0.3); } /*-------------------- diff --git a/src/collections/menu.css b/src/collections/menu.css index eef615161..dea7c7ef9 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -216,7 +216,7 @@ /*-------------- - Header + Header ---------------*/ .ui.menu .header.item { @@ -229,7 +229,6 @@ } - /*-------------- Dropdowns ---------------*/ @@ -411,16 +410,9 @@ /*-------------- - Colors + Inverted ---------------*/ -/* Light Colors */ -.ui.grey.menu { - background-color: #F0F0F0; -} - - -/*--- inverted ---*/ .ui.inverted.menu { background-color: #333333; box-shadow: none; @@ -436,14 +428,6 @@ .ui.inverted.menu .item > a { color: #FFFFFF; } -.ui.link.inverted.menu .item:hover, -.ui.inverted.menu .item.hover, -.ui.inverted.menu .link.item:hover, -.ui.inverted.menu a.item:hover, -.ui.inverted.menu .dropdown.item.hover, -.ui.inverted.menu .dropdown.item:hover { - background-color: rgba(255, 255, 255, 0.05); -} .ui.inverted.menu .item .item, .ui.inverted.menu .item .item > a { color: rgba(255, 255, 255, 0.8); @@ -456,48 +440,53 @@ .ui.inverted.menu .dropdown.item .menu .item a { color: rgba(0, 0, 0, 0.75); } -.ui.inverted.menu .item .menu a.item:hover, -.ui.inverted.menu .item .menu a.item.hover, -.ui.inverted.menu .item .menu .link.item:hover, -.ui.inverted.menu .item .menu .link.item.hover { - color: rgba(255, 255, 255, 1); -} -.ui.inverted.menu .item.active, -.ui.inverted.menu .item.active a { - color: rgba(255, 255, 255, 1); + + +/*-------------- + Colors +---------------*/ + +/*--- Light Colors ---*/ +.ui.grey.menu { + background-color: #F0F0F0; } -/*--- inverted Colors ---*/ +/*--- Inverted Colors ---*/ .ui.inverted.green.menu { background-color: #A1CF64; } .ui.inverted.green.pointing.menu .item.active:after { background-color: #A1CF64; } + .ui.inverted.red.menu { background-color: #EF4D6D; } .ui.inverted.red.pointing.menu .item.active:after { background-color: #F16883; } + .ui.inverted.blue.menu { background-color: #6ECFF5; } .ui.inverted.blue.pointing.menu .item.active:after { background-color: #6ECFF5; } + .ui.inverted.purple.menu { background-color: #564F8A; } .ui.inverted.purple.pointing.menu .item.active:after { background-color: #564F8A; } + .ui.inverted.orange.menu { background-color: #F05940; } .ui.inverted.orange.pointing.menu .item.active:after { background-color: #F05940; } + .ui.inverted.teal.menu { background-color: #00B5AD; } @@ -574,12 +563,30 @@ -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; } +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .dropdown.item.hover, +.ui.inverted.menu .dropdown.item:hover { + background-color: rgba(255, 255, 255, 0.05); +} +.ui.inverted.menu .item .menu a.item:hover, +.ui.inverted.menu .item .menu a.item.hover, +.ui.inverted.menu .item .menu .link.item:hover, +.ui.inverted.menu .item .menu .link.item.hover { + color: rgba(255, 255, 255, 1); +} /*--- Active ---*/ .ui.inverted.menu .item.active { border-color: transparent; background-color: rgba(255, 255, 255, 0.15); } +.ui.inverted.menu .item.active, +.ui.inverted.menu .item.active a { + color: rgba(255, 255, 255, 1); +} /*--- Pointers ---*/ .ui.inverted.pointing.menu .item.active:after { @@ -590,13 +597,22 @@ background-color: #3B3B3B; } - /*-------------- - Transparent + Basic ---------------*/ - -.ui.transparent.menu { - opacity: 0.95; +.ui.basic.menu { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.menu .item { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.menu .item:before { + display: none; } /*-------------- diff --git a/src/elements/button.css b/src/elements/button.css index 9f9a19e77..101e50235 100755 --- a/src/elements/button.css +++ b/src/elements/button.css @@ -25,9 +25,9 @@ background-color: #F0F0F0; - padding: 12px 30px; + padding: 0.8em 1.5em; - font-size: 14px; + font-size: 1em; text-transform: uppercase; line-height: 1; font-weight: bold; @@ -36,18 +36,18 @@ color: #7A7A7A; text-align: center; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; -moz-box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; box-shadow: - 0px -2px 0px rgba(0, 0, 0, 0.1) inset + 0em -0.125em 0em rgba(0, 0, 0, 0.1) inset ; -webkit-user-select: none; @@ -93,8 +93,9 @@ Hover ---------------*/ +.ui.button:hover, .ui.button.hover { - background-color: #DDDDDD; + background-color: #E0E0E0; } /*-------------- @@ -102,10 +103,12 @@ ---------------*/ /* Down */ +.ui.button:active, .ui.button.down { - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + background-color: #DDDDDD; + -webkit-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; + box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset; } @@ -117,13 +120,13 @@ .ui.button.active { background-color: #E6E6E6; -webkit-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; -moz-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset ; } .ui.buttons .button.active, @@ -135,14 +138,15 @@ .ui.buttons .button.active.hover, .ui.button.active.hover { background: #E0E0E0; - -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: 0px 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; + box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset; } .ui.buttons .button.active.hover, .ui.buttons .button.active.hover a, .ui.button.active.hover, .ui.button.active.hover a { + background: #DADADA; color: #555555; } @@ -171,8 +175,8 @@ } .ui.button.loading:after { position: absolute; - top: 0px; - left: 0px; + top: 0em; + left: 0em; width: 100%; height: 100%; content: ''; @@ -180,9 +184,9 @@ background-position: 50% 50%; background-repeat: no-repeat; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 0.3125em; + -webkit-border-radius: 0.3125em; + border-radius: 0.3125em; } /* Opposite color loader */ .ui.grey.button.loading, @@ -278,161 +282,224 @@ *******************************/ -/*--------------- - Blue -----------------*/ +/*--- Black ---*/ +.ui.buttons.black .button, +.ui.button.black { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.buttons.black .button.hover, +.ui.buttons.black .button:hover, +.ui.button.black.hover, +.ui.button.black:hover { + background-color: #888888; + color: #FFFFFF; +} +.ui.buttons.black .button.down, +.ui.buttons.black .button:active, +.ui.button.black.down, +.ui.button.black:active { + background-color: #888888; + color: #FFFFFF; +} -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #00B4AC; +/*--- Green ---*/ +.ui.buttons.green .button, +.ui.button.green { + background-color: #A1CF64; color: #FFFFFF; } -.ui.blue.buttons .button.hover, -.ui.blue.button.hover { - background-color: #F15B40; +.ui.buttons.green .button.hover, +.ui.buttons.green .button:hover, +.ui.button.green.hover, +.ui.button.green:hover { + background-color: #89B84C; + color: #FFFFFF; } -.ui.blue.buttons .button.down, -.ui.blue.button.down { - background-color: #F15B40; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; +.ui.buttons.green .button.down, +.ui.buttons.green .button:active, +.ui.button.green.down, +.ui.button.green:active { + background-color: #89B84C; + color: #FFFFFF; } -/*--------------- - Purple -----------------*/ +/*--- Red ---*/ +.ui.buttons.red .button, +.ui.button.red { + background-color: #EF4D6D; + color: #FFFFFF; +} +.ui.buttons.red .button.hover, +.ui.buttons.red .button:hover, +.ui.button.red.hover, +.ui.button.red:hover { + background-color: #DE3859; + color: #FFFFFF; +} +.ui.buttons.red .button.down, +.ui.buttons.red .button:active, +.ui.button.red.down, +.ui.button.red:active { + background-color: #DE3859; + color: #FFFFFF; +} -.ui.purple.buttons .button, -.ui.purple.button { +/*--- Blue ---*/ +.ui.buttons.blue .button, +.ui.button.blue { + background-color: #6ECFF5; color: #FFFFFF; - background-color: #6E4889; } -.ui.purple.buttons .button.hover, -.ui.purple.button.hover { - background-color: #62397F; +.ui.buttons.blue .button.hover, +.ui.buttons.blue .button:hover, +.ui.button.blue.hover, +.ui.button.blue:hover { + background-color: #1AB8F3; + color: #FFFFFF; +} +.ui.buttons.blue .button.down, +.ui.buttons.blue .button:active, +.ui.button.blue.down, +.ui.button.blue:active { + background-color: #1AB8F3; + color: #FFFFFF; +} + +/*--- Purple ---*/ +.ui.buttons.purple .button, +.ui.button.purple { + background-color: #564F8A; + color: #FFFFFF; } -.ui.purple.buttons .button.down, -.ui.purple.button.down { - background-color: #9254BD; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; +.ui.buttons.purple .button.hover, +.ui.buttons.purple .button:hover, +.ui.button.purple.hover, +.ui.button.purple:hover { + background-color: #3E3773; + color: #FFFFFF; +} +.ui.buttons.purple .button.down, +.ui.buttons.purple .button:active, +.ui.button.purple.down, +.ui.button.purple:active { + background-color: #3E3773; + color: #FFFFFF; +} + +/*--- Teal ---*/ +.ui.buttons.teal .button, +.ui.button.teal { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.buttons.teal .button.hover, +.ui.buttons.teal .button:hover, +.ui.button.teal.hover, +.ui.button.teal:hover { + background-color: #009A93; + color: #FFFFFF; +} +.ui.buttons.teal .button.down, +.ui.buttons.teal .button:active, +.ui.button.teal.down, +.ui.button.teal:active { + background-color: #009A93; + color: #FFFFFF; } /*--------------- -Green / Positive + Positive ----------------*/ -.ui.button.green, +.ui.buttons.positive .button, .ui.button.positive { - background-color: #7DDC5C; + background-color: #A1CF64; color: #FFFFFF; } - -.ui.button.green.hover, -.ui.button.positive.hover { - background-color: #7FE95A; +.ui.buttons.positive .button.hover, +.ui.buttons.positive .button:hover, +.ui.button.positive.hover, +.ui.button.positive:hover { + background-color: #7DDC5C; color: #FFFFFF; } - -.ui.button.green.down, -.ui.button.positive.down { - background-color: #59B94B; +.ui.buttons.positive .button.down, +.ui.buttons.positive .button:active, +.ui.button.positive.down, +.ui.button.positive:active { + background-color: #7DDC5C; color: #FFFFFF; - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset; } /*--------------- - Red / Negative + Negative ----------------*/ -.ui.button.red, +.ui.buttons.negative .button, .ui.button.negative { - background-color: #EF3F49; + background-color: #EF4D6D; color: #FFFFFF; } - -.ui.button.red.hover, -.ui.button.negative.hover { - background-color: #FE313C; +.ui.buttons.negative .button.hover, +.ui.buttons.negative .button:hover, +.ui.button.negative.hover, +.ui.button.negative:hover { + background-color: #DE3859; color: #FFFFFF; } - -.ui.button.red.down, -.ui.button.negative.down { - background-color: #DC323C; +.ui.buttons.negative .button.down, +.ui.buttons.negative .button:active, +.ui.button.negative.down, +.ui.button.negative:active { + background-color: #DE3859; color: #FFFFFF; } /*------------------- - Sizes + Sizes --------------------*/ .ui.buttons.mini .button, .ui.mini.button { - font-size: 9px; - padding: 4px 5px; - border-radius: 3px; -} -.ui.buttons.mini .button i, -.ui.mini.button i { - vertical-align: top; + font-size: 0.5625em; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 11px; - font-weight: bold; - padding: 8px 15px; + font-size: 0.625em; } .ui.small.buttons .button, .ui.small.button { - font-size: 12px; - padding: 10px 20px; + font-size: 0.75em; } -.ui.medium.buttons .button, -.ui.medium.button { - font-size: 14px; - padding: 12px 30px; +.ui.buttons .button, +.ui.button { + font-size: 1em; } .ui.large.buttons .button, .ui.large.button { - font-size: 16px; - padding: 15px 30px; + font-size: 1.125em; } .ui.big.buttons .button, .ui.big.button { - font-size: 18px; - padding: 15px 30px; + font-size: 1.25em; } .ui.huge.buttons .button, .ui.huge.button { - font-size: 20px; - padding: 18px 30px; + font-size: 1.375em; } .ui.massive.buttons .button, .ui.massive.button { - padding: 20px 45px; - - font-size: 24px; + font-size: 1.5em; font-weight: bold; } .ui.gigantic.buttons .button, .ui.gigantic.button { - padding: 18px 45px; - - font-size: 30px; + font-size: 2em; font-weight: bold; } -.ui.mini.button, -.ui.tiny.button { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - /*-------------- Containing Icon @@ -467,48 +534,14 @@ Containing Icon ---------------*/ .ui.icon.buttons .button, .ui.icon.button { - padding: 7px; + padding: 0.75em; text-align: center; } .ui.icon.buttons .button i, .ui.icon.button i { - margin: 0px; + margin: 0em; vertical-align: text-top; } -/* Image Button Resizes */ -.ui.icon.buttons.mini .button, -.ui.mini.icon.button { - padding: 4px; -} -.ui.tiny.icon.buttons .button, -.ui.tiny.icon.button { - padding: 6px; -} -.ui.small.icon.buttons .button, -.ui.small.icon.button { - padding: 6px; -} -.ui.medium.icon.buttons .button, -.ui.medium.icon.button { - padding: 7px; -} -.ui.big.icon.buttons .button, -.ui.big.icon.button { - padding: 10px; -} -.ui.huge.icon.buttons .button, -.ui.huge.icon.button { - padding: 11px; -} -.ui.massive.icon.buttons .button, -.ui.massive.icon.button { - padding: 15px; -} -.ui.gigantic.icon.buttons .button, -.ui.gigantic.icon.button { - padding: 18px; -} - /*-------------- Toggle @@ -553,9 +586,9 @@ Containing Icon ---------------*/ .ui.button.bubbly { - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - border-radius: 30px; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; } @@ -570,17 +603,17 @@ Containing Icon border: 1px solid rgba(0, 0, 0, 0.1); border-bottom: none; - -webkit-border-radius: 5px 5px 0px 0px; - -moz-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0px 0px; + -moz-border-radius: 0.3125em 0.3125em 0px 0px; + border-radius: 0.3125em 0.3125em 0px 0px; } .ui.button.attached.bottom { border: 1px solid rgba(0, 0, 0, 0.1); border-top: none; - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 0.3125em 0.3125em; + -moz-border-radius: 0px 0px 0.3125em 0.3125em; + border-radius: 0px 0px 0.3125em 0.3125em; } .ui.button.attached.left { display: inline-block; @@ -588,18 +621,18 @@ Containing Icon border-right: 1px solid rgba(0, 0, 0, 0.1); - -webkit-border-radius: 5px 0px 0px 5px; - -moz-border-radius: 5px 0px 0px 5px; - border-radius: 5px 0px 0px 5px; + -webkit-border-radius: 0.3125em 0px 0px 0.3125em; + -moz-border-radius: 0.3125em 0px 0px 0.3125em; + border-radius: 0.3125em 0px 0px 0.3125em; } .ui.button.attached.right { display: inline-block; border-left: 1px solid rgba(0, 0, 0, 0.1); - -webkit-border-radius: 0px 5px 5px 0px; - -moz-border-radius: 0px 5px 5px 0px; - border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 0.3125em 0.3125em 0px; + -moz-border-radius: 0px 0.3125em 0.3125em 0px; + border-radius: 0px 0.3125em 0.3125em 0px; } /* Button attached to a form element */ @@ -615,9 +648,9 @@ input + .ui.attached.button { -moz-box-shadow: none; box-shadow: none; - -webkit-border-radius: 0px 5px 5px 0px; - -moz-border-radius: 0px 5px 5px 0px; - border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 0.3125em 0.3125em 0px; + -moz-border-radius: 0px 0.3125em 0.3125em 0px; + border-radius: 0px 0.3125em 0.3125em 0px; vertical-align: top; } @@ -648,9 +681,9 @@ input + .ui.attached.button.down { .ui.buttons .huge.button, .ui.buttons .gigantic.button { float: left; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; } .ui.buttons .button:first-child, .ui.buttons .mini.button:first-child, @@ -659,9 +692,9 @@ input + .ui.attached.button.down { .ui.buttons .massive.button:first-child, .ui.buttons .huge.button:first-child, .ui.buttons .gigantic.button:first-child { - margin-left: 0px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + margin-left: 0em; + border-top-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; } .ui.buttons .button:last-child, .ui.buttons .mini.button:last-child, @@ -670,8 +703,8 @@ input + .ui.attached.button.down { .ui.buttons .massive.button:last-child, .ui.buttons .huge.button:last-child, .ui.buttons .gigantic.button:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; } /* Vertical Style */ @@ -690,9 +723,9 @@ input + .ui.attached.button.down { .ui.buttons.vertical .huge.button:first-child, .ui.buttons.vertical .gigantic.button:first-child { margin-top: 0px; - -moz-border-radius: 5px 5px 0px 0px; - -webkit-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; + -moz-border-radius: 0.3125em 0.3125em 0px 0px; + -webkit-border-radius: 0.3125em 0.3125em 0px 0px; + border-radius: 0.3125em 0.3125em 0px 0px; } .ui.buttons.vertical .button:last-child, .ui.buttons.vertical .mini.button:last-child, @@ -701,23 +734,9 @@ input + .ui.attached.button.down { .ui.buttons.vertical .massive.button:last-child, .ui.buttons.vertical .huge.button:last-child, .ui.buttons.vertical .gigantic.button:last-child { - -moz-border-radius: 0px 0px 5px 5px; - -webkit-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; -} - -/* Only show multiple borders when changing colors in group */ -.ui.buttons .grey.button + .grey.button, -.ui.buttons .blue.button + .blue.button, -.ui.buttons .purple.button + .purple.button, -.ui.buttons .green.button + .green.button { - margin-left: -1px; -} -.ui.vertical.buttons .grey.button + .grey.button, -.ui.vertical.buttons .blue.button + .blue.button, -.ui.vertical.buttons .purple.button + .purple.button, -.ui.vertical.buttons .green.button + .green.button { - margin-top: -1px; + -moz-border-radius: 0px 0px 0.3125em 0.3125em; + -webkit-border-radius: 0px 0px 0.3125em 0.3125em; + border-radius: 0px 0px 0.3125em 0.3125em; } /******************************* diff --git a/src/modules/checkbox.css b/src/modules/checkbox.css index d447642d9..59321353e 100755 --- a/src/modules/checkbox.css +++ b/src/modules/checkbox.css @@ -6,33 +6,60 @@ Standard ---------------*/ + +/*--- Content ---*/ .ui.checkbox { position: relative; display: inline-block; + + width: 1em; + height: 1em; vertical-align: baseline; } .ui.checkbox input { visibility: hidden; } + + +/*--- Box ---*/ .ui.checkbox label { cursor: pointer; position: absolute; - bottom: 0; - left: 0px; + width: 1em; + height: 1em; + bottom: 0em; + left: 0em; border-radius: 4px; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - background: #fcfff4; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + + 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 ); + -webkit-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -moz-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -o-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + -ms-transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; + transition: + background-color 0.1s ease-out, + box-shadow 0.1s ease-out + ; } + +/*--- Checkbox ---*/ .ui.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -40,7 +67,7 @@ content: ''; position: absolute; background: transparent; - border: 3px solid #333333; + border: 0.2em solid #333333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); @@ -49,51 +76,53 @@ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } +.ui.checkbox label:after { + width: 0.5em; + height: 0.2em; + top: 0.25em; + left: 0.2em; +} + + +/******************************* + States +*******************************/ + + + +/*--- Hover ---*/ .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%); + background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} + + +/*--- Down ---*/ +.ui.checkbox label:active { + background-color: rgba(0, 0, 0, 0.05); } + +/*--- Active ---*/ .ui.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } -/* States */ + +/*--- Disabled ---*/ .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; -} +/******************************* + Variations +*******************************/ /*-------------- @@ -126,6 +155,24 @@ border-radius: 500px; } +/*-------------- + Sizes +---------------*/ + +.ui.checkbox, +.ui.checkbox label { + font-size: 1em; +} +.ui.large.checkbox, +.ui.large.checkbox label { + font-size: 1.5em; +} +.ui.huge.checkbox, +.ui.huge.checkbox label { + font-size: 1.5em; +} + + /*-------------- Rounded ---------------*/ @@ -232,22 +279,4 @@ 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; } \ No newline at end of file