diff --git a/docs/form.html b/docs/form.html new file mode 100755 index 000000000..b416c2db9 --- /dev/null +++ b/docs/form.html @@ -0,0 +1,260 @@ + + + + + UI Form - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Semantic UI: Button +
+ +
+ 1 of 14 +
+
1. Button
+
2. Text
+
3. Headers
+
4. Columns
+
5. Elements
+
6. Tags
+
7. Items
+
8. Panels
+
+
+ +
+ + + + + + +
+ +
+
Change Theme
+
About Semantic
+
Choice 3
+
+
+
+
+
+
+
Menu
+
+
+
+

Form

+

Forms are a useful grouping of related elements requiring user input.

+

+ Forms always include fields, and fields always contain form elements. Fields themselves may also include: + standard form fields, like labels, inputs and textareas, as well as: + checkboxes, + sliders, and + message blocks. +

+

Message blocks are ui text blocks which are formatted for use inside forms.

+
+
+
+ +
+
+
  • Standard
    • +
  • States
    • +
  • Variations
    • +
  • Group
    • +
    +
    +

    Standard

    + +

    All Together (Form):

    +
    +
    +
    We had some issues
    +
      +
    • Please enter your first name
      • +
    • Please enter your last name
      • +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    + +
    +
    Submit
    +
    + +

    Types of Content

    + +

    Field:

    +
    +
    + + +
    +
    + +

    Text Area:

    +
    +
    + + +
    +
    + +

    Checkbox:

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

    Messages:

    +
    +
    +
    We had some issues
    +
      +
    • Please enter your first name
      • +
    • Please enter your last name
      • +
    +
    +
    + +

    States

    + +

    If form is in state state, it will automatically show any error message block:

    +
    +
    +
    Action Forbidden
    +

    Don't try to do that you're crazy!

    +
    +
    + +

    If form is in warning state, it will automatically show any warning message block:

    +
    +
    +
    We had some issues
    +
      +
    • Please enter your first name
      • +
    • Please enter your last name
      • +
    +
    +
    + + +

    Variations

    + + + +

    Fields (Group)

    + + + +
    + + + \ No newline at end of file diff --git a/src/modules/ui/accordion.css b/src/modules/ui/accordion.css new file mode 100755 index 000000000..46f0b93a7 --- /dev/null +++ b/src/modules/ui/accordion.css @@ -0,0 +1,92 @@ +.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/modules/ui/modal.css b/src/modules/ui/modal.css new file mode 100755 index 000000000..149a7bc98 --- /dev/null +++ b/src/modules/ui/modal.css @@ -0,0 +1,182 @@ +/******************************* + 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/modules/ui/nag.css b/src/modules/ui/nag.css new file mode 100755 index 000000000..a0ec00db4 --- /dev/null +++ b/src/modules/ui/nag.css @@ -0,0 +1,140 @@ +.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/block.css b/src/ui/flat/block.css new file mode 100755 index 000000000..5aa36f162 --- /dev/null +++ b/src/ui/flat/block.css @@ -0,0 +1,122 @@ +.ui.block { + min-height: 18px; + margin: 15px 0px; + + background-color: rgba(0, 0, 0, 0.04); + + font-size: 16px; + + line-height: 1.33; + height: auto; + padding: 1em; + color: #333333; + + -webkit-border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + + -webkit-box-shadow: + 0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset + ; + -moz-box-shadow: + 0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset + ; + box-shadow: + 0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset + ; +} + + +/*-------------- + Content +---------------*/ + +/* block with headers */ +.ui.block > .header { + font-size: 1.33em; + 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 { + list-style-position: inside; + margin: 5px 0px 0px; + padding: 0px; +} +.ui.block ul.list li { + position: relative; + list-style-type: none; + margin: 0px 0px 0px 10px; + padding: 0px; +} +.ui.block ul.list li:before { + position: absolute; + content: '\2022'; + top: -0.05em; + left: -10px; + + height: 100%; + vertical-align: baseline; + + color: rgba(0, 0, 0, 0.3); +} +.ui.block ul.list li:first-child { + margin-top: 0px; +} + +/*-------------- + Colors +---------------*/ + +.ui.blue.block, +.ui.info.block { + border-color: #75C9E9; + background-color: #E9F9FF; + color: #1D6582; +} + +/* Success Text Block */ +.ui.green.block, +.ui.success.block, +.ui.positive.block { + background-color: #EEFFE9; + color: #119000; +} + +/* Warning Text Block */ +.ui.yellow.block, +.ui.warning.header, +.ui.warning.block { + background-color: #F6F3D5; + color: #AF9801; +} +/* Error Text Block */ +.ui.red.block, +.ui.error.block, +.ui.negative.block { + background-color: #F1D7D7; + + color: #AD0000; + border-color: #B06C6C; +} + +/*-------------- + States +---------------*/ + +.ui.block.show, +.ui.header.show { + display: block; +} +.ui.block.hide, +.ui.header.hide { + display: none; +} diff --git a/src/ui/flat/header.css b/src/ui/flat/header.css new file mode 100755 index 000000000..e485953f4 --- /dev/null +++ b/src/ui/flat/header.css @@ -0,0 +1,98 @@ +/******************************* + Headers & Text Blocks +*******************************/ + +/* Header 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; +} + +/* 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; +} + + +/*-------------- + 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; +} diff --git a/src/ui/flat/segment.css b/src/ui/flat/segment.css new file mode 100755 index 000000000..f28aa3fcd --- /dev/null +++ b/src/ui/flat/segment.css @@ -0,0 +1,44 @@ +/******************************* + Page Segments +*******************************/ + +.ui.segment { + background-color: #FFFFFF; + + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + + padding: 15px; + + -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 .list li { + padding: 10px 25px; +} \ No newline at end of file