From a8a36f093914748ed9d937f9848ac866bff59586 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 22 Apr 2013 19:53:23 -0400 Subject: [PATCH] updating form/block class Former-commit-id: 72b75b8fd6cc12f8a98510a9e7f927d5087edbf1 Former-commit-id: 8664042e41cdbfd375a332cdbfe51e01d10f49a2 --- docs/button.html | 85 ++++++---- docs/javascript/example.js | 60 ++++--- docs/module.html | 4 +- docs/stylesheets/example.css | 42 +++-- src/ui/flat/accordion.css | 92 ---------- src/ui/flat/button.css | 142 +++++++--------- src/ui/flat/checkbox.css | 8 +- src/ui/flat/form.css | 320 +++++++++++++++++------------------ src/ui/flat/icons.css | 12 +- src/ui/flat/menu.css | 11 +- src/ui/flat/modal.css | 182 -------------------- src/ui/flat/nag.css | 140 --------------- src/ui/flat/panel.css | 4 +- src/ui/flat/table.css | 5 + src/ui/flat/text.css | 273 ------------------------------ src/ui/shaded/accordion.css | 92 ---------- src/ui/shaded/icons.css | 12 +- src/ui/shaded/modal.css | 182 -------------------- src/ui/shaded/nag.css | 140 --------------- src/ui/shaded/text.css | 2 + 20 files changed, 350 insertions(+), 1458 deletions(-) delete mode 100755 src/ui/flat/accordion.css delete mode 100755 src/ui/flat/modal.css delete mode 100755 src/ui/flat/nag.css delete mode 100755 src/ui/flat/text.css delete mode 100755 src/ui/shaded/accordion.css delete mode 100755 src/ui/shaded/modal.css delete mode 100755 src/ui/shaded/nag.css diff --git a/docs/button.html b/docs/button.html index 5b58864a1..e77e6b3e1 100755 --- a/docs/button.html +++ b/docs/button.html @@ -99,8 +99,21 @@ -
- Swap Theme +
+ + + + + + +
+ +
+
Change Theme
+
About Semantic
+
About Semantic
+
+
@@ -110,7 +123,8 @@

Button

-

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

+

Buttons indicate a possible action a user may take.

+

Variations can explain relationships between actions and other elements, or to show emphasis.

@@ -192,43 +206,34 @@

Can have different colors:

-
Blue Button
+
Blue Button
Purple Button
-
Green Button
+ +

Can be positive or negative:

+
Positive Button
+
Nevative Button

Can fit parent container:

Fits container
-

Can be formatted to fit just an icon or image:

-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+

Can be bubbly:

+
More bubbly
+ +

Can be formatted as an icon toolbar:

- -
-
- +

Can be attached to the top or bottom of other content

Top
Bottom
+ +

Can be attached to the left or right of other content

+
Left
+
+
Right
+

Can be attached to an input field

@@ -236,7 +241,7 @@
Search
-

Buttons (Button Groups)

+

Buttons (Group)

Can exist together as groups

@@ -244,12 +249,21 @@
Two
Three
-

Groups can be vertical

-
-
One
-
Two
-
Three
+ +

Can be formatted as icon toolbars

+
+
+
+
+ +

Groups can be separated by conditionals

+
+
Cancel
+
+
Save
+
+

Groups can be divided evenly to fit parent

One
@@ -263,6 +277,9 @@
One
Two
Three
+
+
+


Large

diff --git a/docs/javascript/example.js b/docs/javascript/example.js index 0963cbe2e..41bc385a7 100755 --- a/docs/javascript/example.js +++ b/docs/javascript/example.js @@ -8,7 +8,7 @@ shape.ready = function() { // selector cache var - $ui = $('.ui'), + $ui = $('.ui').not('.hover, .down'), $swap = $('.swap'), $menu = $('.menu.button'), $demo = $('.demo'), @@ -25,6 +25,31 @@ shape.ready = function() { // event handlers handler = { + initializeCode: function() { + var + $content = $(this), + contentType = $content.data('type') || 'javascript', + editor = ace.edit($content[0]), + editorSession = editor.getSession(), + padding = 3, + codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth() + ; + editor.setTheme('ace/theme/github'); + editor.setShowPrintMargin(false); + editor.setReadOnly(true); + editor.renderer.setShowGutter(false); + editor.setHighlightActiveLine(false); + + editorSession.setMode('ace/mode/'+ contentType); + editorSession.setTabSize(2); + editorSession.setUseSoftTabs(true); + + + $(this).height(codeHeight + 'px'); + editor.resize(); + + }, + peek: function() { $('html, body') .stop() @@ -65,7 +90,7 @@ shape.ready = function() { $waypoints .waypoint({ continuous : false, - offset : 220, + offset : 215, handler : function(direction) { var index = (direction == 'down') @@ -83,32 +108,11 @@ shape.ready = function() { }) ; - $code - .each(function() { - var - $content = $(this), - contentType = $content.data('type') || 'javascript', - editor = ace.edit($content[0]), - editorSession = editor.getSession(), - padding = 2, - codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth() - ; - editor.setTheme('ace/theme/github'); - editor.setShowPrintMargin(false); - editor.setReadOnly(true); - editor.renderer.setShowGutter(false); - editor.setHighlightActiveLine(false); - - editorSession.setMode('ace/mode/'+ contentType); - editorSession.setTabSize(2); - editorSession.setUseSoftTabs(true); - - - $(this).height(codeHeight + 'px'); - editor.resize(); - - }) - ; + if(window.ace !== undefined) { + $code + .each(handler.initializeCode) + ; + } $swap .on('click', handler.swapStyle) diff --git a/docs/module.html b/docs/module.html index 46fb0ca84..fe8fc887c 100755 --- a/docs/module.html +++ b/docs/module.html @@ -219,7 +219,7 @@

The Libraries

To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.

The UI Library

-
    +

    The module library

    Javascript modules.

    -
      +
      • Accordion
      • API
      • Animation
        • diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index 1f4746519..d1d53969e 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -94,6 +94,7 @@ a:hover { margin: 40px 0px 15px; } #example h4 { + margin: 30px 0px 10px; font-size: 16px; font-weight: normal; color: #555555; @@ -129,13 +130,13 @@ a:hover { } /* segment headers */ -#example .segment { +#example > .segment { margin: 0px 0px 46px; padding: 65px 0px 20px; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } -#example .segment .text { +#example > .segment .text { width: 800px; margin: 0px auto; } @@ -153,12 +154,12 @@ a:hover { #example ol li a { font-weight: bold; } -#example .list { +#example .features { list-style-position: inside; - margin: 10px 0px 40px; + margin: 10px 0px 0px; padding: 0px; } -#example .list li { +#example .features li { list-style-type: disc; margin: 0px 0px 10px; font-weight: bold; @@ -222,17 +223,12 @@ a:hover { width: 300px; } -#example .code { +#example div.code { position: relative; width: 100%; height: 200px; - overflow: hidden; - top: 0; - bottom: 0; - left: 0; - right: 0; } -#example .code { +#example div.code { font-size: 14px; margin: 5px 0px 20px; padding: 5px 0px; @@ -242,35 +238,35 @@ a:hover { background-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.8); } -#example .code .ace_bracket { +#example div.code .ace_bracket { background-color: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); } -#example .code .ace_scroller { - margin: 15px 10px; +#example div.code .ace_scroller { + margin: 14px 10px; } -#example .code .ace_content { +#example div.code .ace_content { } -#example .code .ace_string { +#example div.code .ace_string { color: #e82d2d; } -#example .code .ace_cursor { +#example div.code .ace_cursor { border-left: 1px solid #AAAAAA; } -#example .code .ace_paren { +#example div.code .ace_paren { color: #555555; } -#example .code .ace_keyword { +#example div.code .ace_keyword { color: #555555; } -#example .code .ace_identifier { +#example div.code .ace_identifier { color: #247992; } -#example .code .ace_scrollbar { +#example div.code .ace_scrollbar { overflow: hidden; background-color: #FFFFFF; } -#example .code .ace_punctuation { +#example div.code .ace_punctuation { color: #555555; } diff --git a/src/ui/flat/accordion.css b/src/ui/flat/accordion.css deleted file mode 100755 index 46f0b93a7..000000000 --- a/src/ui/flat/accordion.css +++ /dev/null @@ -1,92 +0,0 @@ -.ui.accordion { - -} - -.ui.accordion .title { - cursor: pointer; - font-size: 16px; - font-weight: bold; - color: #3E2151; - margin-top: 8px; - padding: 8px 8px; - border: 1px solid transparent; - border-top: 1px solid #E0E0E0; - - -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; - -moz-box-shadow: 0px 1px 0px #FFFFFF inset; - box-shadow: 0px 1px 0px #FFFFFF inset; - - transition: color 0.2s ease-out; -} -.ui.accordion .title:first-child { - margin-top: 0px; - border-top-color: transparent; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.ui.accordion .title:hover, -.ui.accordion .title.active { - color: #335687; -} -.ui.accordion .title.active { - background-color: #E0E0E0; - border: 1px solid #BBBBBB; - -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; - -moz-box-shadow: 0px 1px 0px #FFFFFF inset; - box-shadow: 0px 1px 0px #FFFFFF inset; - color: #335687; -} - -.ui.accordion .icon { - margin: 0px 4px 4px 2px; - display: inline-block; - text-indent: -9999px; - - vertical-align: middle; - - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 6px solid #3E2151; - border-right: 4px solid transparent; -} -.ui.accordion .title:hover .icon { - border-left-color: #335687; -} -.ui.accordion .title.active .icon { - border-left: 4px solid transparent; - border-top: 6px solid #335687; - margin-left: 0px; - margin-bottom: 0px; -} - -.ui.accordion .content { - display: none; - padding: 10px 20px; - margin: 0px; - font-size: 12px; - line-height: 2; -} -.ui.accordion .content p { - margin: 12px 0px; - font-size: 12px; -} -.ui.accordion .content.active { - display: block; - background-color: #EEEEEE; - - -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; - -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; -} - - -/* Connected Accordion */ -.ui.accordion.connected { - background-color: #FAFAFA; - border: 1px solid #DDDDDD; -} -.ui.accordion.connected .title { - margin-top: 0px; -} \ No newline at end of file diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index 5eb0e477d..9fd2c867e 100755 --- a/src/ui/flat/button.css +++ b/src/ui/flat/button.css @@ -12,7 +12,7 @@ /******************************* - Standard + Button *******************************/ /* Normal */ @@ -256,8 +256,8 @@ .ui.button.disabled.hover, .ui.button.disabled.down { cursor: default; - color: #BBBBBB; - background-color: #F8F8F8 !important; + color: #DDDDDD; + background-color: rgba(50, 50, 50, 0.05) !important; background-image: none !important; text-shadow: none !important; @@ -310,63 +310,48 @@ } /*--------------- - Green +Green / Positive ----------------*/ .ui.button.green, -.ui.button.success { +.ui.button.positive { background-color: #7DDC5C; color: #FFFFFF; } .ui.button.green.hover, -.ui.button.success.hover { - background-color: #7fe95A; +.ui.button.positive.hover { + background-color: #7FE95A; color: #FFFFFF; } .ui.button.green.down, -.ui.button.success.down { +.ui.button.positive.down { background-color: #59B94B; color: #FFFFFF; } -/*-------------------- - Transparent -----------------------*/ +/*--------------- +Red / Negative +----------------*/ -.ui.transparent.buttons .button, -.ui.transparent.button { - background-color: transparent; - background-image: none; - border: none; - color: #777777; -} -.ui.transparent.buttons .button a, -.ui.transparent.button a { - color: #777777; +.ui.button.red, +.ui.button.negative { + background-color: #EF3F49; + color: #FFFFFF; } -/* Hover / Down */ -.ui.transparent.buttons .button.hover, -.ui.transparent.buttons .button.down, -.ui.transparent.button.hover, -.ui.transparent.button.down { - color: #555555; -} -.ui.transparent.buttons .button.hover a, -.ui.transparent.buttons .button.down a, -.ui.transparent.button.hover a, -.ui.transparent.button.down a { - color: #555555; -} -.ui.transparent.buttons .button.down { - background-color: rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); +.ui.button.red.hover, +.ui.button.negative.hover { + background-color: #FE313C; + color: #FFFFFF; } +.ui.button.red.down, +.ui.button.negative.down { + background-color: #DC323C; + color: #FFFFFF; +} /*------------------- Sizes @@ -457,15 +442,6 @@ Containing Icon margin: 0em; } -/*-------------- - Labels ----------------*/ - -.ui.button .label { - -} - - /*-------------- Icon Only ---------------*/ @@ -555,6 +531,7 @@ Containing Icon /*-------------- Bubbly ---------------*/ + .ui.button.bubbly { -webkit-border-radius: 30px; -moz-border-radius: 30px; @@ -585,6 +562,25 @@ Containing Icon -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } +.ui.button.attached.left { + display: inline-block; + border-left: none; + + 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; +} +.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; +} /* Button attached to a form element */ input + .ui.attached.button { @@ -724,9 +720,9 @@ input + .ui.attached.button.down { font-style: italic; text-align: center; - -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; - -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; + -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; -moz-border-radius: 500px; -webkit-border-radius: 500px; @@ -744,25 +740,25 @@ input + .ui.attached.button.down { content: ' '; background-color: transparent; - border-top: 2px solid #FFFFFF; - border-bottom: 2px solid #FFFFFF; + border-top: 3px solid #FFFFFF; } /* Or Sizes */ .ui.buttons .or { width: 5px; - height: 28px; + height: 38px; } .ui.buttons .or:before { - margin-top: -10px; - margin-left: -12px; + margin-top: -15px; + margin-left: -15px; - padding-top: 5px; - width: 22px; - height: 22px; + padding-top: 6px; + width: 28px; + height: 28px; - font-size: 12px; + font-style: normal; + font-weight: bold; } .ui.buttons .or:after { top: 4px; @@ -892,35 +888,11 @@ input + .ui.attached.button.down { height: 26px; } - - - -/* Wide Style */ -.ui.buttons.wide { - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); - background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); - background: -o-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); - background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); - background: linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); - - -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; - -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; - - border-radius: 3px; - padding-bottom: 0px; -} -.ui.buttons.wide .button:last-child { - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; -} - - /*------------------- Attached --------------------*/ +/* Plural Attached */ .attached.ui.buttons { margin: 0px; -webkit-border-radius: 4px 4px 0px 0px; diff --git a/src/ui/flat/checkbox.css b/src/ui/flat/checkbox.css index 684be02de..7eedf7b72 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: baseline; + vertical-align: text-bottom; } .ui.checkbox input { visibility: hidden; @@ -21,9 +21,9 @@ left: 0px; border-radius: 4px; - -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + -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; background: -webkit-linear-gradient(#FFFFFF 0%, #EAEAEA 100%); diff --git a/src/ui/flat/form.css b/src/ui/flat/form.css index 23760e0e4..3071cf4f4 100755 --- a/src/ui/flat/form.css +++ b/src/ui/flat/form.css @@ -1,67 +1,53 @@ +/* + * # Semantic Button - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 22 2013 + */ + + +/******************************* + Standard +*******************************/ + /*-------------------- Form ---------------------*/ .ui.form { position: relative; - width: 330px; -} - -/* Form Controls */ -.ui.form .field { - clear: both; - margin: 0px 0px 15px; -} - -/*------------------------------- - Simple Form (No Placeholders) ---------------------------------*/ - -.ui.form.simple textarea, -.ui.form.simple input[type="text"] { - color: #444444; + width: 450px; } /*-------------------- - Fluid Form + Field ---------------------*/ -.ui.form.fluid { - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; +.ui.form .field { + clear: both; + margin: 0px 0px 15px; } - /*-------------------- - Form Labels + Labels ---------------------*/ .ui.form .field > label { - margin: 0px 0px 3px; + margin: 0px 0px 0.3em; display: block; color: #555555; - font-size: 12px; - font-weight: bold; + font-size: 0.875em; line-height: 1.2; } -.ui.form .field > label.inline { - display: inline-block; - margin: 0px 5px 0px 0px; -} -.ui.form .field > label.inline:first-child { - margin: 0px 0px 0px 5px; -} - -.ui.form .field > label.selector { - display: inline; -} /*-------------------- - Form Inputs + Standard Inputs ---------------------*/ .ui.form textarea, @@ -73,10 +59,11 @@ height: 32px; padding: 7px 10px; - font-size: 14px; - background-color: #FFFFFF; - border: 1px solid #CCCCCC; + border: 1px solid rgba(0, 0, 0, 0.15); + + font-size: 14px; + color: #555555; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -96,47 +83,147 @@ box-sizing: border-box; } -.ui.form select { - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -} - .ui.form textarea { height: 100px; resize: vertical; } +.ui.form select { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} +/*-------------------- + Types of Messages +---------------------*/ -/* Input State */ -.ui.form textarea, -.ui.form input[type="text"] { - color: #DADADA; +.ui.form .info.block, +.ui.form .warning.block, +.ui.form .error.block { + display: none; } + +/******************************* + States +*******************************/ + + +/*-------------------- + Focus +---------------------*/ + .ui.form input:focus, .ui.form textarea:focus { color: #222222; background-color: #FFFFFF; - border-color: #BBBBBB; - box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.08) inset; + border-color: rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset; } -.ui.form textarea.filled, -.ui.form input.filled { - color: #444444; + +/*-------------------- + Empty (Placeholder) +---------------------*/ + +.ui.form input[placeholder], +.ui.form [placeholder], +.ui.form *[placeholder] { + color: #BBBBBB; +} +.ui.form input:focus[placeholder], +.ui.form :focus[placeholder], +.ui.form *[placeholder] { + color: #555555; } -.ui.form textarea, -.ui.form input[type="checkbox"] { - vertical-align: top; +.ui.form textarea.empty, +.ui.form input.empty { + color: #CCCCCC; } +/*-------------------- + Error +---------------------*/ + +/* On Form */ +.ui.form.error .error.block { + display: block; +} /*-------------------- - Special Types + Warning ---------------------*/ +/* On Form */ +.ui.form.warning .warning.block { + display: block; +} + +/* On Field */ +.ui.form .field.error label { + color: #AC3A3A; +} +.ui.form .field.error textarea, +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="password"] { + background-color: #FFEFEF; + border-color: #FF9999; + color: #F0BBBB; +} +.ui.form .field.error textarea, +.ui.form .field.error input[type="password"], +.ui.form .field.error textarea.filled, +.ui.form .field.error input.filled { + color: #AC3A3A; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error input:focus { + border-color: #E68585; + color: #AC3A3A; +} + +/*-------------------- + Loading State +---------------------*/ + +/* On Form */ +.ui.form.loading .loading, +.ui.form.loading i.throbber { + display: block; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Fluid Width +---------------------*/ + +.ui.form.fluid { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + .ui.form input.attached { width: auto; } +/*-------------------- + Date Input +---------------------*/ + .ui.form .date.field > label { position: relative; } @@ -259,58 +346,25 @@ Success Messages ---------------------*/ +.ui.form .block:first-child { + margin-top: 0px; +} + .ui.form .notices { color: #67a210; background-color: #ebf8d8; } -/*-------------------- - Error State ----------------------*/ -/* Form has an error */ -.ui.form.error .errors { - display: block; -} - -/* Form field has an error */ -.ui.form .field.error label { - color: #AC3A3A; -} -.ui.form .field.error textarea, -.ui.form .field.error input[type="text"], -.ui.form .field.error input[type="password"] { - background-color: #FFEFEF; - border-color: #FF9999; - color: #F0BBBB; -} -.ui.form .field.error textarea, -.ui.form .field.error input[type="password"], -.ui.form .field.error textarea.filled, -.ui.form .field.error input.filled { - color: #AC3A3A; -} -.ui.form .field.error textarea:focus, -.ui.form .field.error input:focus { - border-color: #E68585; - color: #AC3A3A; -} /*-------------------- - Loading State + Sizes ---------------------*/ -.ui.form.loading .loading, -.ui.form.loading i.throbber { - display: block; +.ui.form { + font-size: 16px; } - - -/*-------------------- - Resizes ----------------------*/ - .ui.large.form { width: 440px; } @@ -326,10 +380,6 @@ margin: 30px 0px; } -.ui.large.form .field > label { - margin-bottom: 7px; - font-size: 14px; -} .ui.large.form .field input[type="text"] { height: 38px; padding: 10px 12px; @@ -339,71 +389,9 @@ .ui.large.form .field textarea { height: 140px; padding: 10px 12px; - font-size: 14px; } /*-------------------- Error Messages ---------------------*/ - -.ui.form .notices, -.ui.form .errors { - margin: 25px 0px 10px; - - background-color: #F8EBEB; - background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - - color: #AD0000; - border: 1px solid #B06C6C; - - padding: 7px 12px; - - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; -} -.ui.form .errors i:before { - opacity: 0.8; - margin: 0px; - font-family: 'Icons'; - content: '\2757'; - display: inline-block; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - line-height: 1; - margin-right: 0.3em; - vertical-align: middle; -} -.ui.form .errors i, -.ui.form .errors .error { - display: inline-block; - vertical-align: middle; -} - -.ui.form .errors h3 { - font-size: 18px; - font-weight: bold; -} -.ui.form .errors .error { - display: block; - margin-left: 15px; - line-height: 1.55; -} -.ui.form .errors .error.list { - border-top: 1px solid rgba(255, 255, 255, 0.1); - margin: 5px 0px; - padding: 5px 0px 0px 15px; - - -webkit-box-shadow: 0px -1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px rgba(0, 0, 0, 0.05); - box-shadow: 0px -1px rgba(0, 0, 0, 0.05); -} -.ui.form .errors .error.list li { - list-style-type: disc; -} \ No newline at end of file diff --git a/src/ui/flat/icons.css b/src/ui/flat/icons.css index beb701c84..e9d3ce88b 100755 --- a/src/ui/flat/icons.css +++ b/src/ui/flat/icons.css @@ -123,7 +123,7 @@ i.icon.export:before { content: '\e715'; } /* '' */ i.icon.eye:before { content: '\e80f'; } /* '' */ i.icon.eye-off:before { content: '\e70b'; } /* '' */ i.icon.facebook-rect:before { content: '\f301'; } /* '' */ -i.icon.fast-fw-alt:before { content: '\e804'; } /* '' */ +i.icon.fast-fw:before { content: '\e804'; } /* '' */ i.icon.fire:before { content: '🔥'; } /* '\1f525' */ i.icon.flag:before { content: '\2691'; } /* '⚑' */ i.icon.flash:before { content: '\26a1'; } /* '⚡' */ @@ -162,11 +162,11 @@ i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ i.icon.minus:before { content: '\2d'; } /* '-' */ i.icon.money:before { content: '💰'; } /* '\1f4b0' */ i.icon.off:before { content: '\e78e'; } /* '' */ -i.icon.pause-alt:before { content: '\e808'; } /* '' */ +i.icon.pause:before { content: '\e808'; } /* '' */ i.icon.picture-alt:before { content: '\e812'; } /* '' */ i.icon.picture:before { content: '🌄'; } /* '\1f304' */ i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ -i.icon.play-alt:before { content: '\e809'; } /* '' */ +i.icon.play:before { content: '\e809'; } /* '' */ i.icon.plus-circle:before { content: '\2795'; } /* '➕' */ i.icon.plus:before { content: '\2b'; } /* '+' */ i.icon.print:before { content: '\e716'; } /* '' */ @@ -179,7 +179,7 @@ i.icon.right-open:before { content: '\e75e'; } /* '' */ i.icon.right:before { content: '\2192'; } /* '→' */ i.icon.rss:before { content: '\e73a'; } /* '' */ i.icon.search:before { content: '🔍'; } /* '\1f50d' */ -i.icon.shuffle-alt:before { content: '\e803'; } /* '' */ +i.icon.shuffle:before { content: '\e803'; } /* '' */ i.icon.star:before { content: '\e801'; } /* '' */ i.icon.star-empty:before { content: '\e800'; } /* '' */ i.icon.star-half:before { content: '\e701'; } /* '' */ @@ -193,9 +193,9 @@ i.icon.th-list:before { content: '\e80b'; } /* '' */ i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */ i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */ i.icon.tint:before { content: '\e794'; } /* '' */ -i.icon.to-end-alt:before { content: '\e762'; } /* '' */ +i.icon.to-end:before { content: '\e762'; } /* '' */ i.icon.to-end-alt:before { content: '\e806'; } /* '' */ -i.icon.to-start-alt:before { content: '\e763'; } /* '' */ +i.icon.to-start:before { content: '\e763'; } /* '' */ i.icon.to-start-alt:before { content: '\e805'; } /* '' */ i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */ i.icon.trash:before { content: '\e729'; } /* '' */ diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css index a02c1d69e..7297f7e3a 100755 --- a/src/ui/flat/menu.css +++ b/src/ui/flat/menu.css @@ -67,9 +67,16 @@ -ms-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } +.ui.menu .dropdown.item:last-child .menu { + left: auto; + right: 0px; +} + +/* Hover */ .ui.menu .dropdown.item:hover .menu { display: block; overflow: visible; + min-width: 150px; width: 100%; height: auto; @@ -113,6 +120,7 @@ .ui.menu .item.hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, +.ui.menu .dropdown.item:hover, .ui.menu .dropdown.item .menu .item:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.05); @@ -173,6 +181,7 @@ /* active */ .ui.black.menu .item.down, .ui.black.menu .link.item:active, +.ui.menu .dropdown.item:hover, .ui.black.menu a.item:active { background-color: rgba(255, 255, 255, .05); @@ -257,7 +266,7 @@ ---------------*/ .ui.menu .item { padding: 5px 10px; - font-size: 13px; + font-size: 14px; } .ui.large.menu .item { padding: 12px 10px; diff --git a/src/ui/flat/modal.css b/src/ui/flat/modal.css deleted file mode 100755 index 149a7bc98..000000000 --- a/src/ui/flat/modal.css +++ /dev/null @@ -1,182 +0,0 @@ -/******************************* - Dimmer Styles - *******************************/ - - /* the one true page dimmer */ -#dimmer { - position: absolute; - visibility: hidden; - top: 0px; - left: 0px; - z-index: 999; - - margin: 0px; - width: 100%; - height: 100%; - padding: 0px; -} -#dimmer .content { - position: fixed; - top: 0px; - left: 0px; - - margin: 0px; - width: 100%; - height: 100%; - padding: 0px; - visibility: hidden; - - background-color: #000000; - opacity: 0.0; -} - -/* a generic dimmer */ -.dimmer { - display: none; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - opacity: 0; - background-color: #000000; - z-index: 999; -} -.white.dimmer { - background-color: #FFFFFF; -} -.loading .dimmer { - display: block; - opacity: 0.8; - - -webkit-transition: opacity 0.5s linear; - -moz-transition: opacity 0.5s linear; - -o-transition: opacity 0.5s linear; - -ms-transition: opacity 0.5s linear; - transition: opacity 0.5s linear; -} - - -/******************************* - Modal Styles -*******************************/ -.modal { - display: none; - position: fixed; - z-index: 1000; - - top: 50%; - left: 50%; - - margin-left: -400px; - width: 800px; - - -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.modal.absolute { - position: absolute; -} -.modal.fixed { - position: fixed; -} - -/*-------------- - Close Button ----------------*/ - -.modal > .close { - cursor: pointer; - position: absolute; - font-size: 14px; - color: #FFFFFF; - top: -18px; - right: -18px; - opacity: 0.8; -} -.modal > .close:hover { - opacity: 1; -} - -/*-------------- - Header ----------------*/ - -.modal > hgroup { - background-color: #442359; - padding: 15px 20px; - - -webkit-border-radius: 10px 10px 0px 0px; - -moz-border-radius: 10px 10px 0px 0px; - border-radius: 10px 10px 0px 0px; -} -.modal > hgroup h2 { - margin: 0px; - - font-size: 22px; - font-weight: bold; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75); -} -.modal > hgroup h3 { - font-size: 18px; - color: #FFF; -} - -.modal > .content { - position: relative; - overflow: hidden; - padding: 20px 20px 40px; - background-color: #FAFAFA; - - -webkit-border-radius: 0px 0px 10px 10px; - -moz-border-radius: 0px 0px 10px 10px; - border-radius: 0px 0px 10px 10px; -} - -.modal > .content .left { - float: left; - width: 50%; -} -.modal > .content .right { - float: right; - width: 50%; -} - -/* Static In-Page Modal */ -.modal.static { - display: block; - position: relative; - overflow: hidden; - top: 0px; - left: 0px; - - border: 1px solid #CCCCCC; - - width: auto; - height: auto; - margin: 0px auto; - - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; - - color: #555555; - z-index: 2; - - -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); -} -.modal.static > hgroup, -.modal.static > .content { - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; -} diff --git a/src/ui/flat/nag.css b/src/ui/flat/nag.css deleted file mode 100755 index a0ec00db4..000000000 --- a/src/ui/flat/nag.css +++ /dev/null @@ -1,140 +0,0 @@ -.ui.nag { - display: none; - position: absolute; - top: 0px; - left: 10%; - z-index: 100; - - width: 80%; - min-height: 20px; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - - padding: 8px 20px; - - background-color: #272626; - background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - - -webkit-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - -moz-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - text-align: center; - font-size: 14px; - font-weight: bold; - color: #009FDA; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); - - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; - - -webkit-transition: 0.2s background; - -moz-transition: 0.2s background; - -o-transition: 0.2s background; - -ms-transition: 0.2s background; - transition: 0.2s background; -} -.ui.nag .close { - cursor: pointer; - opacity: 0.4; - - position: absolute; - top: 50%; - right: 15px; - - margin-top: -6px; - - font-size: 12px; - color: #FFFFFF; - - -webkit-transition: 0.1s opacity; - -moz-transition: 0.1s opacity; - -o-transition: 0.1s opacity; - -ms-transition: 0.1s opacity; - transition: 0.1s opacity; -} -.ui.nag .close.hover { - opacity: 1; -} -.ui.nag b { - font-weight: bold; - color: #EEEEEE; -} -/* Bottom Style */ -.ui.nag.bottom { - -webkit-border-radius: 5px 5px 0px 0px; - -moz-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; -} - -/* Fixed Style */ -.ui.nag.fixed { - position: fixed; -} -.ui.nag.bottom.fixed { - top: auto; - bottom: 0px; -} - - - -/* Link Style */ -.ui.nag.hover { - cursor: pointer; - background-color: #272626; - background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); -} -.ui.nag.hover b { - font-weight: bold; - color: #FFFFFF; -} - - -/* White Variation */ -.ui.nag.white { - background-color: #EEEEEE; - 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%); - - -webkit-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - -moz-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); - color: #888888; -} -.ui.nag.white .close, -.ui.nag.white b { - color: #000000; -} \ No newline at end of file diff --git a/src/ui/flat/panel.css b/src/ui/flat/panel.css index 114383f4a..4882e7195 100755 --- a/src/ui/flat/panel.css +++ b/src/ui/flat/panel.css @@ -14,7 +14,7 @@ -moz-border-radius: 4px; border-radius: 4px; - background-color: #FAFAFA; + background-color: #FFFFFF; } .ui.panel li { @@ -45,7 +45,7 @@ -1px 0px 0px rgba(0, 0, 0, 0.06) ; - background-color: #FAFAFA; + background-color: #FFFFFF; -webkit-user-select: none; -moz-user-select: none; diff --git a/src/ui/flat/table.css b/src/ui/flat/table.css index 7590808e7..1339e0008 100755 --- a/src/ui/flat/table.css +++ b/src/ui/flat/table.css @@ -62,6 +62,11 @@ /* Grid */ +.ui.grid.table { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} .ui.grid.table tbody tr, .ui.grid.table tfoot tr { border: none; diff --git a/src/ui/flat/text.css b/src/ui/flat/text.css deleted file mode 100755 index 63815402d..000000000 --- a/src/ui/flat/text.css +++ /dev/null @@ -1,273 +0,0 @@ -/******************************* - Headers & Text Blocks -*******************************/ - -/* Header Block */ -.ui.block, -.ui.header { - min-height: 18px; - margin: 15px 0px; - padding: 8px 13px; - - background-color: #FFFFFF; - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); - - line-height: 1.5; - font-size: 13px; - font-weight: bold; - text-shadow: 0px 1px 0px #FFFFFF; - - -webkit-border-radius: 4px 4px 4px 4px; - -moz-border-radius: 4px 4px 4px 4px; - border-radius: 4px 4px 4px 4px; -} - -.ui.block { - line-height: 1.33; - height: auto; - padding: 15px 15px; - color: #333333; - -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 - ; -} - - -/* Sub Header (De-emphasized) */ -.ui.sub.header { - margin: 0px; - - border: none; - border-bottom: 1px solid #DADADA; - border-radius: 0px; - - background-color: #FFFFFF; - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - - font-size: 14px; - padding: 6px 25px; - color: #55356A; -} - -/* Neutral Header */ -.ui.neutral.block, -.ui.neutral.header { - background-color: #E0E0E0; - background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - border-color: #CCCCCC; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); -} - -/* Attached Header */ -.ui.header.attached, -.ui.header.attached.top { - margin: 0px; - -webkit-border-radius: 4px 4px 0px 0px; - -moz-border-radius: 4px 4px 0px 0px; - border-radius: 4px 4px 0px 0px; -} -.ui.header.attached.bottom { - margin-top: 0px; - -webkit-border-radius: 0px 0px 4px 4px; - -moz-border-radius: 0px 0px 4px 4px; - border-radius: 0px 0px 4px 4px; -} -.ui.header.simple { - border-radius: 0px; - background-color: #FAFAFA; - background-image: none; -} - - - -/*-------------- - Content ----------------*/ - -/* block with headers */ -.ui.block > h2 { - font-size: 18px; - font-weight: bold; -} -.ui.block > h3 { - font-size: 16px; - font-weight: bold; -} -.ui.block > h4 { - font-size: 14px; - font-weight: bold; -} - -/* block with paragraphs */ -.ui.block > p { - margin: 5px 0px; -} -.ui.block > p:first-child { - margin: 0px; -} - -/* block with child list */ -.ui.block ul.list { - margin: 5px 0px 0px; -} -.ui.block ul.list li { - list-style-type: disc; - margin-top: 4px; -} -.ui.block ul.list li:first-child { - margin-top: 0px; -} - -/*-------------- - Resizes ----------------*/ -.ui.header { - font-size: 16px; -} -.ui.header.large { - padding-top: 8px; - padding-bottom: 8px; - font-size: 18px; -} -.ui.header.huge { - padding-top: 8px; - padding-bottom: 8px; - font-size: 22px; -} - -/******************************* - Page Segments -*******************************/ - -.ui.segment { - background-color: #FFFFFF; - border: 1px solid #E5E5E5; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; - border-radius: 5px 5px 5px 5px; - min-height: 50px; - overflow: hidden; -} - -.ui.segment.attached { - margin: -1px 0px; - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - border-radius: 0px; -} -.ui.top.attached.segment { - margin-bottom: -1px; - -moz-border-radius: 5px 5px 0px 0px; - -webkit-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; -} -.ui.segment.bottom.attached { - margin-top: -1px; - -moz-border-radius: 0px 0px 5px 5px; - -webkit-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; -} - -/* Common Views */ -.ui.segment .ui.list li { - padding: 10px 25px; -} - -/*-------------- - Themes ----------------*/ - -.ui.blue.block, -.ui.info.block { - border-color: #75C9E9; - background-image: -webkit-linear-gradient(#E9F9FF 0px, #D5E9F1 100%); - background-image: -moz-linear-gradient(#E9F9FF 0px, #D5E9F1 100%); - background-image: -o-linear-gradient(#E9F9FF 0px, #D5E9F1 100%); - background-image: -ms-linear-gradient(#E9F9FF 0px, #D5E9F1 100%); - background-image: linear-gradient(#E9F9FF 0px, #D5E9F1 100%); - color: #1D6582; -} -.ui.info.block h3, -.ui.blue.block h3 { - color: #045170; -} - -/* Success Text Block */ -.ui.green.block, -.ui.success.block, -.ui.positive.block { - background-image: -webkit-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); - background-image: -moz-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); - background-image: -o-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); - background-image: -ms-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); - background-image: linear-gradient(#EEFFE9 0px, #D5F3CD 100%); - - border-color: #2FCB05; - color: #119000; -} - -/* Warning Text Block */ -.ui.yellow.block, -.ui.warning.header, -.ui.warning.block { - background-color: #FBF7D5; - background-image: -webkit-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%); - background-image: -moz-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%); - background-image: -o-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%); - background-image: -ms-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%); - background-image: linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%); - - color: #8A6100; - border-color: #9C8800; -} -.ui.yellow.block h3, -.ui.warning.block h3 { - color: #635100; -} - -/* Error Text Block */ -.ui.red.block, -.ui.error.block, -.ui.negative.block { - background-color: #F8EBEB; - background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%); - - color: #AD0000; - border-color: #B06C6C; -} - -/*-------------- - States ----------------*/ - -.ui.block.show, -.ui.header.show { - display: block; -} -.ui.block.hide, -.ui.header.hide { - display: none; -} \ No newline at end of file diff --git a/src/ui/shaded/accordion.css b/src/ui/shaded/accordion.css deleted file mode 100755 index 46f0b93a7..000000000 --- a/src/ui/shaded/accordion.css +++ /dev/null @@ -1,92 +0,0 @@ -.ui.accordion { - -} - -.ui.accordion .title { - cursor: pointer; - font-size: 16px; - font-weight: bold; - color: #3E2151; - margin-top: 8px; - padding: 8px 8px; - border: 1px solid transparent; - border-top: 1px solid #E0E0E0; - - -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; - -moz-box-shadow: 0px 1px 0px #FFFFFF inset; - box-shadow: 0px 1px 0px #FFFFFF inset; - - transition: color 0.2s ease-out; -} -.ui.accordion .title:first-child { - margin-top: 0px; - border-top-color: transparent; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.ui.accordion .title:hover, -.ui.accordion .title.active { - color: #335687; -} -.ui.accordion .title.active { - background-color: #E0E0E0; - border: 1px solid #BBBBBB; - -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; - -moz-box-shadow: 0px 1px 0px #FFFFFF inset; - box-shadow: 0px 1px 0px #FFFFFF inset; - color: #335687; -} - -.ui.accordion .icon { - margin: 0px 4px 4px 2px; - display: inline-block; - text-indent: -9999px; - - vertical-align: middle; - - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 6px solid #3E2151; - border-right: 4px solid transparent; -} -.ui.accordion .title:hover .icon { - border-left-color: #335687; -} -.ui.accordion .title.active .icon { - border-left: 4px solid transparent; - border-top: 6px solid #335687; - margin-left: 0px; - margin-bottom: 0px; -} - -.ui.accordion .content { - display: none; - padding: 10px 20px; - margin: 0px; - font-size: 12px; - line-height: 2; -} -.ui.accordion .content p { - margin: 12px 0px; - font-size: 12px; -} -.ui.accordion .content.active { - display: block; - background-color: #EEEEEE; - - -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; - -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; -} - - -/* Connected Accordion */ -.ui.accordion.connected { - background-color: #FAFAFA; - border: 1px solid #DDDDDD; -} -.ui.accordion.connected .title { - margin-top: 0px; -} \ No newline at end of file diff --git a/src/ui/shaded/icons.css b/src/ui/shaded/icons.css index f09fbe00d..eb4455aba 100755 --- a/src/ui/shaded/icons.css +++ b/src/ui/shaded/icons.css @@ -108,7 +108,7 @@ i.icon.export:before { content: '\e715'; } /* '' */ i.icon.eye:before { content: '\e80f'; } /* '' */ i.icon.eye-off:before { content: '\e70b'; } /* '' */ i.icon.facebook-rect:before { content: '\f301'; } /* '' */ -i.icon.fast-fw-alt:before { content: '\e804'; } /* '' */ +i.icon.fast-fw:before { content: '\e804'; } /* '' */ i.icon.fire:before { content: '🔥'; } /* '\1f525' */ i.icon.flag:before { content: '\2691'; } /* '⚑' */ i.icon.flash:before { content: '\26a1'; } /* '⚡' */ @@ -147,11 +147,11 @@ i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ i.icon.minus:before { content: '\2d'; } /* '-' */ i.icon.money:before { content: '💰'; } /* '\1f4b0' */ i.icon.off:before { content: '\e78e'; } /* '' */ -i.icon.pause-alt:before { content: '\e808'; } /* '' */ +i.icon.pause:before { content: '\e808'; } /* '' */ i.icon.picture-alt:before { content: '\e812'; } /* '' */ i.icon.picture:before { content: '🌄'; } /* '\1f304' */ i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ -i.icon.play-alt:before { content: '\e809'; } /* '' */ +i.icon.play:before { content: '\e809'; } /* '' */ i.icon.plus-circle:before { content: '\2795'; } /* '➕' */ i.icon.plus:before { content: '\2b'; } /* '+' */ i.icon.print:before { content: '\e716'; } /* '' */ @@ -164,7 +164,7 @@ i.icon.right-open:before { content: '\e75e'; } /* '' */ i.icon.right:before { content: '\2192'; } /* '→' */ i.icon.rss:before { content: '\e73a'; } /* '' */ i.icon.search:before { content: '🔍'; } /* '\1f50d' */ -i.icon.shuffle-alt:before { content: '\e803'; } /* '' */ +i.icon.shuffle:before { content: '\e803'; } /* '' */ i.icon.star:before { content: '\e801'; } /* '' */ i.icon.star-empty:before { content: '\e800'; } /* '' */ i.icon.star-half:before { content: '\e701'; } /* '' */ @@ -178,9 +178,9 @@ i.icon.th-list:before { content: '\e80b'; } /* '' */ i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */ i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */ i.icon.tint:before { content: '\e794'; } /* '' */ -i.icon.to-end-alt:before { content: '\e762'; } /* '' */ +i.icon.to-end:before { content: '\e762'; } /* '' */ i.icon.to-end-alt:before { content: '\e806'; } /* '' */ -i.icon.to-start-alt:before { content: '\e763'; } /* '' */ +i.icon.to-start:before { content: '\e763'; } /* '' */ i.icon.to-start-alt:before { content: '\e805'; } /* '' */ i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */ i.icon.trash:before { content: '\e729'; } /* '' */ diff --git a/src/ui/shaded/modal.css b/src/ui/shaded/modal.css deleted file mode 100755 index 149a7bc98..000000000 --- a/src/ui/shaded/modal.css +++ /dev/null @@ -1,182 +0,0 @@ -/******************************* - Dimmer Styles - *******************************/ - - /* the one true page dimmer */ -#dimmer { - position: absolute; - visibility: hidden; - top: 0px; - left: 0px; - z-index: 999; - - margin: 0px; - width: 100%; - height: 100%; - padding: 0px; -} -#dimmer .content { - position: fixed; - top: 0px; - left: 0px; - - margin: 0px; - width: 100%; - height: 100%; - padding: 0px; - visibility: hidden; - - background-color: #000000; - opacity: 0.0; -} - -/* a generic dimmer */ -.dimmer { - display: none; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - opacity: 0; - background-color: #000000; - z-index: 999; -} -.white.dimmer { - background-color: #FFFFFF; -} -.loading .dimmer { - display: block; - opacity: 0.8; - - -webkit-transition: opacity 0.5s linear; - -moz-transition: opacity 0.5s linear; - -o-transition: opacity 0.5s linear; - -ms-transition: opacity 0.5s linear; - transition: opacity 0.5s linear; -} - - -/******************************* - Modal Styles -*******************************/ -.modal { - display: none; - position: fixed; - z-index: 1000; - - top: 50%; - left: 50%; - - margin-left: -400px; - width: 800px; - - -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.modal.absolute { - position: absolute; -} -.modal.fixed { - position: fixed; -} - -/*-------------- - Close Button ----------------*/ - -.modal > .close { - cursor: pointer; - position: absolute; - font-size: 14px; - color: #FFFFFF; - top: -18px; - right: -18px; - opacity: 0.8; -} -.modal > .close:hover { - opacity: 1; -} - -/*-------------- - Header ----------------*/ - -.modal > hgroup { - background-color: #442359; - padding: 15px 20px; - - -webkit-border-radius: 10px 10px 0px 0px; - -moz-border-radius: 10px 10px 0px 0px; - border-radius: 10px 10px 0px 0px; -} -.modal > hgroup h2 { - margin: 0px; - - font-size: 22px; - font-weight: bold; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75); -} -.modal > hgroup h3 { - font-size: 18px; - color: #FFF; -} - -.modal > .content { - position: relative; - overflow: hidden; - padding: 20px 20px 40px; - background-color: #FAFAFA; - - -webkit-border-radius: 0px 0px 10px 10px; - -moz-border-radius: 0px 0px 10px 10px; - border-radius: 0px 0px 10px 10px; -} - -.modal > .content .left { - float: left; - width: 50%; -} -.modal > .content .right { - float: right; - width: 50%; -} - -/* Static In-Page Modal */ -.modal.static { - display: block; - position: relative; - overflow: hidden; - top: 0px; - left: 0px; - - border: 1px solid #CCCCCC; - - width: auto; - height: auto; - margin: 0px auto; - - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; - - color: #555555; - z-index: 2; - - -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); -} -.modal.static > hgroup, -.modal.static > .content { - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; -} diff --git a/src/ui/shaded/nag.css b/src/ui/shaded/nag.css deleted file mode 100755 index a0ec00db4..000000000 --- a/src/ui/shaded/nag.css +++ /dev/null @@ -1,140 +0,0 @@ -.ui.nag { - display: none; - position: absolute; - top: 0px; - left: 10%; - z-index: 100; - - width: 80%; - min-height: 20px; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - - padding: 8px 20px; - - background-color: #272626; - background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); - - -webkit-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - -moz-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.4), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - text-align: center; - font-size: 14px; - font-weight: bold; - color: #009FDA; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); - - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; - - -webkit-transition: 0.2s background; - -moz-transition: 0.2s background; - -o-transition: 0.2s background; - -ms-transition: 0.2s background; - transition: 0.2s background; -} -.ui.nag .close { - cursor: pointer; - opacity: 0.4; - - position: absolute; - top: 50%; - right: 15px; - - margin-top: -6px; - - font-size: 12px; - color: #FFFFFF; - - -webkit-transition: 0.1s opacity; - -moz-transition: 0.1s opacity; - -o-transition: 0.1s opacity; - -ms-transition: 0.1s opacity; - transition: 0.1s opacity; -} -.ui.nag .close.hover { - opacity: 1; -} -.ui.nag b { - font-weight: bold; - color: #EEEEEE; -} -/* Bottom Style */ -.ui.nag.bottom { - -webkit-border-radius: 5px 5px 0px 0px; - -moz-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; -} - -/* Fixed Style */ -.ui.nag.fixed { - position: fixed; -} -.ui.nag.bottom.fixed { - top: auto; - bottom: 0px; -} - - - -/* Link Style */ -.ui.nag.hover { - cursor: pointer; - background-color: #272626; - background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); - background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); -} -.ui.nag.hover b { - font-weight: bold; - color: #FFFFFF; -} - - -/* White Variation */ -.ui.nag.white { - background-color: #EEEEEE; - 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%); - - -webkit-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - -moz-box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - box-shadow: - 0px 2px 3px rgba(0, 0, 0, 0.2), - 0px 1px 0px rgba(255, 255, 255, 0.1) inset - ; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); - color: #888888; -} -.ui.nag.white .close, -.ui.nag.white b { - color: #000000; -} \ No newline at end of file diff --git a/src/ui/shaded/text.css b/src/ui/shaded/text.css index 78fbff89d..9716b80c8 100755 --- a/src/ui/shaded/text.css +++ b/src/ui/shaded/text.css @@ -179,6 +179,8 @@ border-radius: 5px 5px 5px 5px; min-height: 50px; overflow: hidden; + + padding: 15px; } .ui.segment.attached {