/*! * # Semantic UI 2.0.0 - Form * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Elements *******************************/ /*-------------------- Form ---------------------*/ .ui.form { position: relative; max-width: 100%; } /*-------------------- Content ---------------------*/ .ui.form > p { margin: 1em 0em; } /*-------------------- Field ---------------------*/ .ui.form .fields .field, .ui.form .field { clear: both; margin: 0em 0em 1em; } .ui.form .fields:last-child, .ui.form .field:last-child { margin-bottom: 0em; } /*-------------------- Labels ---------------------*/ .ui.form .field > label { display: block; margin: 0em 0em 0.2857rem 0em; color: rgba(0, 0, 0, 0.8); font-size: 0.9285em; font-weight: bold; text-transform: none; } .ui.form .grouped.fields > label { margin: 0em 0em 0.2857rem 0em; color: rgba(0, 0, 0, 0.8); font-size: 0.9285em; font-weight: bold; text-transform: none; } .ui.form .inline.fields > label { display: inline-block; vertical-align: middle; margin: 0em 1em 0em 0em; color: rgba(0, 0, 0, 0.8); font-size: 0.9285em; font-weight: bold; text-transform: none; } /*-------------------- Standard Inputs ---------------------*/ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="url"], .ui.form .ui.input { width: 100%; vertical-align: top; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="url"] { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.2142em; padding: 0.67861em 1em; font-size: 1em; background: #ffffff; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.8); border-radius: 0.2857rem; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .ui.textarea, .ui.form textarea { margin: 0em; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571em 1em; background: #ffffff; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: rgba(0, 0, 0, 0.8); border-radius: 0.2857rem; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; font-size: 1em; height: 12em; min-height: 8em; max-height: 24em; line-height: 1.2857; resize: vertical; } .ui.form textarea, .ui.form input[type="checkbox"] { vertical-align: top; } /*-------------------------- Input w/ attached Button ---------------------------*/ .ui.form input.attached { width: auto; } /*-------------------- Basic Select ---------------------*/ .ui.form select { display: block; height: auto; width: 100%; background: #ffffff; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.2857rem; box-shadow: 0em 0em 0em 0em transparent inset; padding: 0.62em 1em; color: rgba(0, 0, 0, 0.8); -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /*-------------------- Dropdown ---------------------*/ .ui.form .field > .selection.dropdown { width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { float: right; } .ui.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.field > .selection.dropdown > .dropdown.icon { float: none; } /*-------------------- Dividers ---------------------*/ .ui.form .divider { clear: both; margin: 1em 0em; } /*-------------------- Types of Messages ---------------------*/ .ui.form .success.message, .ui.form .warning.message, .ui.form .error.message { display: none; } /* Assumptions */ .ui.form .message:first-child { margin-top: 0px; } /*-------------------- Validation Prompt ---------------------*/ .ui.form .field .prompt.label { white-space: nowrap; } .ui.form .inline.field .prompt { margin: -0.5em 0em -0.5em 1em; } .ui.form .inline.field .prompt:before { margin-top: -0.3em; bottom: auto; right: auto; top: 50%; left: 0em; } /******************************* States *******************************/ /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder { color: rgba(140, 140, 140, 0.8); } .ui.form ::-moz-placeholder { color: rgba(140, 140, 140, 0.8); } .ui.form :focus::-webkit-input-placeholder { color: rgba(89, 89, 89, 0.8); } .ui.form :focus::-moz-placeholder { color: rgba(89, 89, 89, 0.8); } /* Error Placeholder */ .ui.form .error ::-webkit-input-placeholder { color: #be3f3c; } .ui.form .error ::-moz-placeholder { color: #be3f3c; } .ui.form .error :focus::-webkit-input-placeholder { color: #aa3836; } .ui.form .error :focus::-moz-placeholder { color: #aa3836; } /*-------------------- Focus ---------------------*/ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.85); border-color: rgba(34, 36, 38, 0.3); border-radius: 0.2857rem; background: #ffffff; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.3) inset; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.85); border-color: rgba(34, 36, 38, 0.3); border-radius: 0.2857rem; background: #ffffff; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.3) inset; -webkit-appearance: none; } /*-------------------- Success ---------------------*/ /* On Form */ .ui.form.success .success.message { display: block; } /*-------------------- Error ---------------------*/ /* On Form */ .ui.form.warning .warning.message { display: block; } /*-------------------- Warning ---------------------*/ /* On Form */ .ui.form.error .error.message { display: block; } /* On Field(s) */ .ui.form .fields.error .field label, .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .field.error .input { color: #973230; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { border-color: #973230; color: #ffffff; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="datetime-local"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="number"], .ui.form .fields.error .field input[type="password"], .ui.form .fields.error .field input[type="search"], .ui.form .fields.error .field input[type="tel"], .ui.form .fields.error .field input[type="time"], .ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="url"], .ui.form .field.error textarea, .ui.form .field.error select, .ui.form .field.error input:not([type]), .ui.form .field.error input[type="date"], .ui.form .field.error input[type="datetime-local"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="number"], .ui.form .field.error input[type="password"], .ui.form .field.error input[type="search"], .ui.form .field.error input[type="tel"], .ui.form .field.error input[type="time"], .ui.form .field.error input[type="text"], .ui.form .field.error input[type="url"] { background: #fff0f0; border-color: #e0b4b4; color: #973230; border-radius: 0.2857rem; box-shadow: none; } .ui.form .field.error textarea:focus, .ui.form .field.error select:focus, .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="datetime-local"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="password"]:focus, .ui.form .field.error input[type="search"]:focus, .ui.form .field.error input[type="tel"]:focus, .ui.form .field.error input[type="time"]:focus, .ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="url"]:focus { background: #fff0f0; border-color: #e0b4b4; color: #973230; -webkit-appearance: none; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Dropdown Error --------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item { background: #fff0f0; color: #973230; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { border-color: #e0b4b4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { border-color: #e0b4b4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu { border-color: #e0b4b4; } .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, .ui.form .field.error .ui.multiple.selection.dropdown > .label { background-color: #eacbcb; color: #973230; } /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { background-color: #fbe7e7; } /* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item { background-color: #fdcfcf !important; } /*-------------------- Checkbox Error ---------------------*/ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: #973230; } .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { background: #fff0f0; border-color: #e0b4b4; } .ui.form .fields.error .field .checkbox label:after, .ui.form .field.error .checkbox label:after, .ui.form .fields.error .field .checkbox .box:after, .ui.form .field.error .checkbox .box:after { color: #973230; } /*-------------------- Disabled ---------------------*/ .ui.form .field :disabled, .ui.form .field.disabled { opacity: 0.5; } .ui.form .field.disabled label { opacity: 0.5; } .ui.form .field.disabled :disabled { opacity: 1; } /*-------------- Loading ---------------*/ .ui.loading.form { position: relative; cursor: default; point-events: none; text-shadow: none !important; color: transparent !important; -webkit-transition: all 0s linear; transition: all 0s linear; z-index: 100; } .ui.loading.form:before { position: absolute; content: ''; top: 0%; left: 0%; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; z-index: 100; } .ui.loading.form:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0em 0em -1.5em; width: 3em; height: 3em; -webkit-animation: form-spin 0.6s linear; animation: form-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; visibility: visible; z-index: 101; } @-webkit-keyframes form-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes form-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /******************************* Element Types *******************************/ /*-------------------- Required Field ---------------------*/ .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { margin: -0.2em 0em 0em 0.2em; content: '*'; color: #d95c5c; } .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after { display: inline-block; vertical-align: top; } .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { position: absolute; top: 0%; left: 100%; } /******************************* Variations *******************************/ /*-------------------- Inverted Colors ---------------------*/ .ui.inverted.form label, .ui.form .inverted.segment label, .ui.form .inverted.segment .ui.checkbox label, .ui.form .inverted.segment .ui.checkbox .box, .ui.inverted.form .ui.checkbox label, .ui.inverted.form .ui.checkbox .box { color: #ffffff; } /*-------------------- Field Groups ---------------------*/ /* Grouped Vertically */ .ui.form .grouped.fields { margin: 0em 0em 1em; } .ui.form .grouped.fields:last-child { margin-bottom: 0em; } .ui.form .grouped.fields > label { font-size: 0.9285em; } .ui.form .grouped.fields .field { display: block; float: none; margin: 0.5em 0em; padding: 0em; } /*-------------------- Fields ---------------------*/ /* Split fields */ .ui.form .fields { clear: both; } .ui.form .fields:after { content: ' '; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .ui.form .fields > .field { clear: none; float: left; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child { border-left: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field { width: 12.5%; } .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field { width: 11.11111111%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form .two.fields > .fields, .ui.form .two.fields > .field, .ui.form .three.fields > .fields, .ui.form .three.fields > .field, .ui.form .four.fields > .fields, .ui.form .four.fields > .field, .ui.form .five.fields > .fields, .ui.form .five.fields > .field, .ui.form .six.fields > .fields, .ui.form .six.fields > .field, .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field, .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field, .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field, .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 100% !important; margin: 0em 0em 1em; padding-left: 0%; padding-right: 0%; } } .ui.form .fields .field:first-child { padding-left: 0%; } .ui.form .fields .field:last-child { padding-right: 0%; } /* Sizing Combinations */ .ui.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields .wide.field:first-child { padding-left: 0%; } .ui.form .fields .wide.field:last-child { padding-right: 0%; } .ui.form .one.wide.field { width: 6.25% !important; } .ui.form .two.wide.field { width: 12.5% !important; } .ui.form .three.wide.field { width: 18.75% !important; } .ui.form .four.wide.field { width: 25% !important; } .ui.form .five.wide.field { width: 31.25% !important; } .ui.form .six.wide.field { width: 37.5% !important; } .ui.form .seven.wide.field { width: 43.75% !important; } .ui.form .eight.wide.field { width: 50% !important; } .ui.form .nine.wide.field { width: 56.25% !important; } .ui.form .ten.wide.field { width: 62.5% !important; } .ui.form .eleven.wide.field { width: 68.75% !important; } .ui.form .twelve.wide.field { width: 75% !important; } .ui.form .thirteen.wide.field { width: 81.25% !important; } .ui.form .fourteen.wide.field { width: 87.5% !important; } .ui.form .fifteen.wide.field { width: 93.75% !important; } .ui.form .sixteen.wide.field { width: 100% !important; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form .two.fields > .fields, .ui.form .two.fields > .field, .ui.form .three.fields > .fields, .ui.form .three.fields > .field, .ui.form .four.fields > .fields, .ui.form .four.fields > .field, .ui.form .five.fields > .fields, .ui.form .five.fields > .field, .ui.form .fields > .two.wide.field, .ui.form .fields > .three.wide.field, .ui.form .fields > .four.wide.field, .ui.form .fields > .five.wide.field, .ui.form .fields > .six.wide.field, .ui.form .fields > .seven.wide.field, .ui.form .fields > .eight.wide.field, .ui.form .fields > .nine.wide.field, .ui.form .fields > .ten.wide.field, .ui.form .fields > .eleven.wide.field, .ui.form .fields > .twelve.wide.field, .ui.form .fields > .thirteen.wide.field, .ui.form .fields > .fourteen.wide.field, .ui.form .fields > .fifteen.wide.field, .ui.form .fields > .sixteen.wide.field { width: 100% !important; margin: 0em 0em 1em; padding-left: 0%; padding-right: 0%; } } /*-------------------- Inline Fields ---------------------*/ .ui.form .inline.fields { margin: 0em 0em 1em; } .ui.form .inline.fields .field { display: inline-block; float: none; margin: 0em 1em 0em 0em; padding: 0em; } .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.fields .field > .ui.input, .ui.form .inline.field > label, .ui.form .inline.field > p, .ui.form .inline.field > input, .ui.form .inline.field > select, .ui.form .inline.field > .ui.input { display: inline-block; width: auto; margin-top: 0em; margin-bottom: 0em; vertical-align: middle; font-size: 0.9285em; } .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > .ui.input, .ui.form .inline.field > input, .ui.form .inline.field > .ui.input { font-size: 0.9285em; } .ui.form .inline.fields .field > .ui.checkbox label { padding-left: 1.75em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child { margin: 0em 0.2857rem 0em 0em; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child { margin: 0em; } /*-------------------- Sizes ---------------------*/ /* Standard */ .ui.small.form { font-size: 0.92857143rem; } /* Medium */ .ui.form { font-size: 1rem; } /* Large */ .ui.large.form { font-size: 1.14285714rem; } /* Huge */ .ui.huge.form { font-size: 1.42857143rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/