From 3f4c0720e1e3421431e7baa20882a4a4512a7fab Mon Sep 17 00:00:00 2001 From: ivar Date: Sun, 19 Oct 2025 23:41:23 +0200 Subject: Initial --- .../libraries/fomantic/dist/components/form.css | 1801 ++++++++++++++++++++ 1 file changed, 1801 insertions(+) create mode 100644 src/wwwroot/libraries/fomantic/dist/components/form.css (limited to 'src/wwwroot/libraries/fomantic/dist/components/form.css') diff --git a/src/wwwroot/libraries/fomantic/dist/components/form.css b/src/wwwroot/libraries/fomantic/dist/components/form.css new file mode 100644 index 0000000..6da0909 --- /dev/null +++ b/src/wwwroot/libraries/fomantic/dist/components/form.css @@ -0,0 +1,1801 @@ +/*! + * # Fomantic-UI - Form + * http://github.com/fomantic/Fomantic-UI/ + * + * + * 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 0; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: 0 0 1em; +} +.ui.form .fields .fields, +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0; +} +.ui.form .fields .field { + clear: both; + margin: 0; +} + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: 0 0 0.28571429rem 0; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + 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="file"], +.ui.form input[type="url"] { + width: 100%; + vertical-align: top; +} + +/* Set max height on unusual input */ +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: 1.21428571em; +} +.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="file"], +.ui.form input[type="url"] { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + margin: 0; + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + line-height: 1.21428571em; + padding: 0.67857143em 1em; + font-size: 1em; + background: #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0 0 0 0 transparent inset; + box-shadow: 0 0 0 0 transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/* Text Area */ +.ui.input textarea, +.ui.form textarea { + margin: 0; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + padding: 0.78571429em 1em; + background: #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0 0 0 0 transparent inset; + box-shadow: 0 0 0 0 transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; + font-size: 1em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + line-height: 1.2857; + resize: vertical; +} +.ui.form textarea:not([rows]) { + height: 12em; + min-height: 8em; + max-height: 24em; +} +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} + +/*-------------------- + Checkbox margin +---------------------*/ + +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { + margin-top: 0.7em; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { + margin-top: 2.41428571em; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { + margin-top: 2.21428571em; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { + margin-top: 2.61428571em; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { + margin-top: 0.6em; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { + margin-top: 0.5em; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { + margin-top: 0.7em; +} + +/*-------------------- + Transparent + ---------------------*/ + +.ui.form .field .transparent.input:not(.icon) input, +.ui.form .field input.transparent, +.ui.form .field textarea.transparent { + padding: 0.67857143em 1em; +} +.ui.form .field input.transparent, +.ui.form .field textarea.transparent { + border-color: transparent !important; + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/*-------------------------- + 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.28571429rem; + -webkit-box-shadow: 0 0 0 0 transparent inset; + box-shadow: 0 0 0 0 transparent inset; + padding: 0.62em 1em; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/*-------------------- + Dropdown +---------------------*/ + + +/* Block */ +.ui.form .field > .selection.dropdown { + min-width: auto; + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + + +/* Block */ +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.fields .ui.input input, +.ui.form .three.fields .ui.input input, +.ui.form .two.fields .ui.input input, +.ui.form .wide.field .ui.input input { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + width: 0; +} + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .error.message, +.ui.form .error.message:empty { + display: none; +} +.ui.form .info.message, +.ui.form .info.message:empty { + display: none; +} +.ui.form .success.message, +.ui.form .success.message:empty { + display: none; +} +.ui.form .warning.message, +.ui.form .warning.message:empty { + display: none; +} + +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: #FFFFFF !important; + border: 1px solid #E0B4B4 !important; + color: #9F3A38 !important; +} +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: -0.25em 0 -0.5em 0.5em; +} +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0 0 1px 1px; + bottom: auto; + right: auto; + top: 50%; + left: 0; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important; + box-shadow: 0 0 0 100px #FFFFF0 inset !important; + border-color: #E5DFA1 !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 100px #FFFFF0 inset !important; + box-shadow: 0 0 0 100px #FFFFF0 inset !important; + border-color: #D5C315 !important; +} + +/*-------------------- + Placeholder +---------------------*/ + + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: rgba(191, 191, 191, 0.87); +} +.ui.form :-ms-input-placeholder { + color: rgba(191, 191, 191, 0.87) !important; +} +.ui.form ::-moz-placeholder { + color: rgba(191, 191, 191, 0.87); +} +.ui.form :focus::-webkit-input-placeholder { + color: rgba(115, 115, 115, 0.87); +} +.ui.form :focus:-ms-input-placeholder { + color: rgba(115, 115, 115, 0.87) !important; +} +.ui.form :focus::-moz-placeholder { + color: rgba(115, 115, 115, 0.87); +} + +/*-------------------- + 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="file"]:focus, +.ui.form input[type="url"]:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85B7D9; + border-radius: 0.28571429rem; + background: #FFFFFF; + -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; + box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; +} +.ui.form .ui.action.input:not(.left) input:not([type]):focus, +.ui.form .ui.action.input:not(.left) input[type="date"]:focus, +.ui.form .ui.action.input:not(.left) input[type="datetime-local"]:focus, +.ui.form .ui.action.input:not(.left) input[type="email"]:focus, +.ui.form .ui.action.input:not(.left) input[type="number"]:focus, +.ui.form .ui.action.input:not(.left) input[type="password"]:focus, +.ui.form .ui.action.input:not(.left) input[type="search"]:focus, +.ui.form .ui.action.input:not(.left) input[type="tel"]:focus, +.ui.form .ui.action.input:not(.left) input[type="time"]:focus, +.ui.form .ui.action.input:not(.left) input[type="text"]:focus, +.ui.form .ui.action.input:not(.left) input[type="file"]:focus, +.ui.form .ui.action.input:not(.left) input[type="url"]:focus { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.ui.form .ui.action.input.left input:not([type]), +.ui.form .ui.action.input.left input[type="date"], +.ui.form .ui.action.input.left input[type="datetime-local"], +.ui.form .ui.action.input.left input[type="email"], +.ui.form .ui.action.input.left input[type="number"], +.ui.form .ui.action.input.left input[type="password"], +.ui.form .ui.action.input.left input[type="search"], +.ui.form .ui.action.input.left input[type="tel"], +.ui.form .ui.action.input.left input[type="time"], +.ui.form .ui.action.input.left input[type="text"], +.ui.form .ui.action.input.left input[type="file"], +.ui.form .ui.action.input.left input[type="url"] { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85B7D9; + border-radius: 0.28571429rem; + background: #FFFFFF; + -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; + box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; + -webkit-appearance: none; +} + +/*-------------------- + States + ---------------------*/ + + +/* On Form */ +.ui.form.error .error.message:not(:empty) { + display: block; +} +.ui.form.error .compact.error.message:not(:empty) { + display: inline-block; +} +.ui.form.error .icon.error.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.error .error.message:not(:empty), +.ui.form .field.error .error.message:not(:empty) { + display: block; +} +.ui.form .fields.error .compact.error.message:not(:empty), +.ui.form .field.error .compact.error.message:not(:empty) { + display: inline-block; +} +.ui.form .fields.error .icon.error.message:not(:empty), +.ui.form .field.error .icon.error.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui.ui.form .fields.error .field label, +.ui.ui.form .field.error label, +.ui.ui.form .fields.error .field .input, +.ui.ui.form .field.error .input { + color: #9F3A38; +} +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: #9F3A38; + 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="file"], +.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="file"], +.ui.form .field.error input[type="url"] { + color: #9F3A38; + background: #FFF6F6; + border-color: #E0B4B4; + border-radius: ''; + -webkit-box-shadow: none; + 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="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: #FFF6F6; + border-color: #E0B4B4; + color: #9F3A38; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Input State + --------------------*/ + + +/* Transparent */ +.ui.form .field.error .transparent.input input, +.ui.form .field.error .transparent.input textarea, +.ui.form .field.error input.transparent, +.ui.form .field.error textarea.transparent { + background-color: #FFF6F6; + color: #9F3A38; +} + +/* Autofilled */ +.ui.form .error.error input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 100px #FFFAF0 inset !important; + box-shadow: 0 0 0 100px #FFFAF0 inset !important; + border-color: #E0B4B4; +} + +/* Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: #e7bdbc; +} +.ui.form .error :-ms-input-placeholder { + color: #e7bdbc; +} +.ui.form .error ::-moz-placeholder { + color: #e7bdbc; +} +.ui.form .error :focus::-webkit-input-placeholder { + color: #da9796; +} +.ui.form .error :focus:-ms-input-placeholder { + color: #da9796; +} +.ui.form .error :focus::-moz-placeholder { + color: #da9796; +} + +/*------------------ + Dropdown State + --------------------*/ + +.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: #FFF6F6; + color: #9F3A38; +} +.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: #9F3A38; +} + +/* Hover */ +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: #FBE7E7; +} + +/* Selected */ +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + 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; +} + +/*-------------------- + Checkbox State + ---------------------*/ + +.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: #9F3A38; +} +.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: #FFF6F6; + 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: #9F3A38; +} + +/* On Form */ +.ui.form.info .info.message:not(:empty) { + display: block; +} +.ui.form.info .compact.info.message:not(:empty) { + display: inline-block; +} +.ui.form.info .icon.info.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.info .info.message:not(:empty), +.ui.form .field.info .info.message:not(:empty) { + display: block; +} +.ui.form .fields.info .compact.info.message:not(:empty), +.ui.form .field.info .compact.info.message:not(:empty) { + display: inline-block; +} +.ui.form .fields.info .icon.info.message:not(:empty), +.ui.form .field.info .icon.info.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui.ui.form .fields.info .field label, +.ui.ui.form .field.info label, +.ui.ui.form .fields.info .field .input, +.ui.ui.form .field.info .input { + color: #276F86; +} +.ui.form .fields.info .field .corner.label, +.ui.form .field.info .corner.label { + border-color: #276F86; + color: #FFFFFF; +} +.ui.form .fields.info .field textarea, +.ui.form .fields.info .field select, +.ui.form .fields.info .field input:not([type]), +.ui.form .fields.info .field input[type="date"], +.ui.form .fields.info .field input[type="datetime-local"], +.ui.form .fields.info .field input[type="email"], +.ui.form .fields.info .field input[type="number"], +.ui.form .fields.info .field input[type="password"], +.ui.form .fields.info .field input[type="search"], +.ui.form .fields.info .field input[type="tel"], +.ui.form .fields.info .field input[type="time"], +.ui.form .fields.info .field input[type="text"], +.ui.form .fields.info .field input[type="file"], +.ui.form .fields.info .field input[type="url"], +.ui.form .field.info textarea, +.ui.form .field.info select, +.ui.form .field.info input:not([type]), +.ui.form .field.info input[type="date"], +.ui.form .field.info input[type="datetime-local"], +.ui.form .field.info input[type="email"], +.ui.form .field.info input[type="number"], +.ui.form .field.info input[type="password"], +.ui.form .field.info input[type="search"], +.ui.form .field.info input[type="tel"], +.ui.form .field.info input[type="time"], +.ui.form .field.info input[type="text"], +.ui.form .field.info input[type="file"], +.ui.form .field.info input[type="url"] { + color: #276F86; + background: #F8FFFF; + border-color: #A9D5DE; + border-radius: ''; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.form .field.info textarea:focus, +.ui.form .field.info select:focus, +.ui.form .field.info input:not([type]):focus, +.ui.form .field.info input[type="date"]:focus, +.ui.form .field.info input[type="datetime-local"]:focus, +.ui.form .field.info input[type="email"]:focus, +.ui.form .field.info input[type="number"]:focus, +.ui.form .field.info input[type="password"]:focus, +.ui.form .field.info input[type="search"]:focus, +.ui.form .field.info input[type="tel"]:focus, +.ui.form .field.info input[type="time"]:focus, +.ui.form .field.info input[type="text"]:focus, +.ui.form .field.info input[type="file"]:focus, +.ui.form .field.info input[type="url"]:focus { + background: #F8FFFF; + border-color: #A9D5DE; + color: #276F86; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.info select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Input State + --------------------*/ + + +/* Transparent */ +.ui.form .field.info .transparent.input input, +.ui.form .field.info .transparent.input textarea, +.ui.form .field.info input.transparent, +.ui.form .field.info textarea.transparent { + background-color: #F8FFFF; + color: #276F86; +} + +/* Autofilled */ +.ui.form .info.info input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 100px #F0FAFF inset !important; + box-shadow: 0 0 0 100px #F0FAFF inset !important; + border-color: #b3e0e0; +} + +/* Placeholder */ +.ui.form .info ::-webkit-input-placeholder { + color: #98cfe1; +} +.ui.form .info :-ms-input-placeholder { + color: #98cfe1; +} +.ui.form .info ::-moz-placeholder { + color: #98cfe1; +} +.ui.form .info :focus::-webkit-input-placeholder { + color: #70bdd6; +} +.ui.form .info :focus:-ms-input-placeholder { + color: #70bdd6; +} +.ui.form .info :focus::-moz-placeholder { + color: #70bdd6; +} + +/*------------------ + Dropdown State + --------------------*/ + +.ui.form .fields.info .field .ui.dropdown, +.ui.form .fields.info .field .ui.dropdown .item, +.ui.form .field.info .ui.dropdown, +.ui.form .field.info .ui.dropdown .text, +.ui.form .field.info .ui.dropdown .item { + background: #F8FFFF; + color: #276F86; +} +.ui.form .fields.info .field .ui.dropdown, +.ui.form .field.info .ui.dropdown { + border-color: #A9D5DE !important; +} +.ui.form .fields.info .field .ui.dropdown:hover, +.ui.form .field.info .ui.dropdown:hover { + border-color: #A9D5DE !important; +} +.ui.form .fields.info .field .ui.dropdown:hover .menu, +.ui.form .field.info .ui.dropdown:hover .menu { + border-color: #A9D5DE; +} +.ui.form .fields.info .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.info .ui.multiple.selection.dropdown > .label { + background-color: #cce3ea; + color: #276F86; +} + +/* Hover */ +.ui.form .fields.info .field .ui.dropdown .menu .item:hover, +.ui.form .field.info .ui.dropdown .menu .item:hover { + background-color: #e9f2fb; +} + +/* Selected */ +.ui.form .fields.info .field .ui.dropdown .menu .selected.item, +.ui.form .field.info .ui.dropdown .menu .selected.item { + background-color: #e9f2fb; +} + +/* Active */ +.ui.form .fields.info .field .ui.dropdown .menu .active.item, +.ui.form .field.info .ui.dropdown .menu .active.item { + background-color: #cef1fd; +} + +/*-------------------- + Checkbox State + ---------------------*/ + +.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.info .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box { + color: #276F86; +} +.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before { + background: #F8FFFF; + border-color: #A9D5DE; +} +.ui.form .fields.info .field .checkbox label:after, +.ui.form .field.info .checkbox label:after, +.ui.form .fields.info .field .checkbox .box:after, +.ui.form .field.info .checkbox .box:after { + color: #276F86; +} + +/* On Form */ +.ui.form.success .success.message:not(:empty) { + display: block; +} +.ui.form.success .compact.success.message:not(:empty) { + display: inline-block; +} +.ui.form.success .icon.success.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.success .success.message:not(:empty), +.ui.form .field.success .success.message:not(:empty) { + display: block; +} +.ui.form .fields.success .compact.success.message:not(:empty), +.ui.form .field.success .compact.success.message:not(:empty) { + display: inline-block; +} +.ui.form .fields.success .icon.success.message:not(:empty), +.ui.form .field.success .icon.success.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui.ui.form .fields.success .field label, +.ui.ui.form .field.success label, +.ui.ui.form .fields.success .field .input, +.ui.ui.form .field.success .input { + color: #2C662D; +} +.ui.form .fields.success .field .corner.label, +.ui.form .field.success .corner.label { + border-color: #2C662D; + color: #FFFFFF; +} +.ui.form .fields.success .field textarea, +.ui.form .fields.success .field select, +.ui.form .fields.success .field input:not([type]), +.ui.form .fields.success .field input[type="date"], +.ui.form .fields.success .field input[type="datetime-local"], +.ui.form .fields.success .field input[type="email"], +.ui.form .fields.success .field input[type="number"], +.ui.form .fields.success .field input[type="password"], +.ui.form .fields.success .field input[type="search"], +.ui.form .fields.success .field input[type="tel"], +.ui.form .fields.success .field input[type="time"], +.ui.form .fields.success .field input[type="text"], +.ui.form .fields.success .field input[type="file"], +.ui.form .fields.success .field input[type="url"], +.ui.form .field.success textarea, +.ui.form .field.success select, +.ui.form .field.success input:not([type]), +.ui.form .field.success input[type="date"], +.ui.form .field.success input[type="datetime-local"], +.ui.form .field.success input[type="email"], +.ui.form .field.success input[type="number"], +.ui.form .field.success input[type="password"], +.ui.form .field.success input[type="search"], +.ui.form .field.success input[type="tel"], +.ui.form .field.success input[type="time"], +.ui.form .field.success input[type="text"], +.ui.form .field.success input[type="file"], +.ui.form .field.success input[type="url"] { + color: #2C662D; + background: #FCFFF5; + border-color: #A3C293; + border-radius: ''; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.form .field.success textarea:focus, +.ui.form .field.success select:focus, +.ui.form .field.success input:not([type]):focus, +.ui.form .field.success input[type="date"]:focus, +.ui.form .field.success input[type="datetime-local"]:focus, +.ui.form .field.success input[type="email"]:focus, +.ui.form .field.success input[type="number"]:focus, +.ui.form .field.success input[type="password"]:focus, +.ui.form .field.success input[type="search"]:focus, +.ui.form .field.success input[type="tel"]:focus, +.ui.form .field.success input[type="time"]:focus, +.ui.form .field.success input[type="text"]:focus, +.ui.form .field.success input[type="file"]:focus, +.ui.form .field.success input[type="url"]:focus { + background: #FCFFF5; + border-color: #A3C293; + color: #2C662D; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.success select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Input State + --------------------*/ + + +/* Transparent */ +.ui.form .field.success .transparent.input input, +.ui.form .field.success .transparent.input textarea, +.ui.form .field.success input.transparent, +.ui.form .field.success textarea.transparent { + background-color: #FCFFF5; + color: #2C662D; +} + +/* Autofilled */ +.ui.form .success.success input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 100px #F0FFF0 inset !important; + box-shadow: 0 0 0 100px #F0FFF0 inset !important; + border-color: #bee0b3; +} + +/* Placeholder */ +.ui.form .success ::-webkit-input-placeholder { + color: #8fcf90; +} +.ui.form .success :-ms-input-placeholder { + color: #8fcf90; +} +.ui.form .success ::-moz-placeholder { + color: #8fcf90; +} +.ui.form .success :focus::-webkit-input-placeholder { + color: #6cbf6d; +} +.ui.form .success :focus:-ms-input-placeholder { + color: #6cbf6d; +} +.ui.form .success :focus::-moz-placeholder { + color: #6cbf6d; +} + +/*------------------ + Dropdown State + --------------------*/ + +.ui.form .fields.success .field .ui.dropdown, +.ui.form .fields.success .field .ui.dropdown .item, +.ui.form .field.success .ui.dropdown, +.ui.form .field.success .ui.dropdown .text, +.ui.form .field.success .ui.dropdown .item { + background: #FCFFF5; + color: #2C662D; +} +.ui.form .fields.success .field .ui.dropdown, +.ui.form .field.success .ui.dropdown { + border-color: #A3C293 !important; +} +.ui.form .fields.success .field .ui.dropdown:hover, +.ui.form .field.success .ui.dropdown:hover { + border-color: #A3C293 !important; +} +.ui.form .fields.success .field .ui.dropdown:hover .menu, +.ui.form .field.success .ui.dropdown:hover .menu { + border-color: #A3C293; +} +.ui.form .fields.success .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.success .ui.multiple.selection.dropdown > .label { + background-color: #cceacc; + color: #2C662D; +} + +/* Hover */ +.ui.form .fields.success .field .ui.dropdown .menu .item:hover, +.ui.form .field.success .ui.dropdown .menu .item:hover { + background-color: #e9fbe9; +} + +/* Selected */ +.ui.form .fields.success .field .ui.dropdown .menu .selected.item, +.ui.form .field.success .ui.dropdown .menu .selected.item { + background-color: #e9fbe9; +} + +/* Active */ +.ui.form .fields.success .field .ui.dropdown .menu .active.item, +.ui.form .field.success .ui.dropdown .menu .active.item { + background-color: #dafdce; +} + +/*-------------------- + Checkbox State + ---------------------*/ + +.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.success .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box { + color: #2C662D; +} +.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before { + background: #FCFFF5; + border-color: #A3C293; +} +.ui.form .fields.success .field .checkbox label:after, +.ui.form .field.success .checkbox label:after, +.ui.form .fields.success .field .checkbox .box:after, +.ui.form .field.success .checkbox .box:after { + color: #2C662D; +} + +/* On Form */ +.ui.form.warning .warning.message:not(:empty) { + display: block; +} +.ui.form.warning .compact.warning.message:not(:empty) { + display: inline-block; +} +.ui.form.warning .icon.warning.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.warning .warning.message:not(:empty), +.ui.form .field.warning .warning.message:not(:empty) { + display: block; +} +.ui.form .fields.warning .compact.warning.message:not(:empty), +.ui.form .field.warning .compact.warning.message:not(:empty) { + display: inline-block; +} +.ui.form .fields.warning .icon.warning.message:not(:empty), +.ui.form .field.warning .icon.warning.message:not(:empty) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui.ui.form .fields.warning .field label, +.ui.ui.form .field.warning label, +.ui.ui.form .fields.warning .field .input, +.ui.ui.form .field.warning .input { + color: #573A08; +} +.ui.form .fields.warning .field .corner.label, +.ui.form .field.warning .corner.label { + border-color: #573A08; + color: #FFFFFF; +} +.ui.form .fields.warning .field textarea, +.ui.form .fields.warning .field select, +.ui.form .fields.warning .field input:not([type]), +.ui.form .fields.warning .field input[type="date"], +.ui.form .fields.warning .field input[type="datetime-local"], +.ui.form .fields.warning .field input[type="email"], +.ui.form .fields.warning .field input[type="number"], +.ui.form .fields.warning .field input[type="password"], +.ui.form .fields.warning .field input[type="search"], +.ui.form .fields.warning .field input[type="tel"], +.ui.form .fields.warning .field input[type="time"], +.ui.form .fields.warning .field input[type="text"], +.ui.form .fields.warning .field input[type="file"], +.ui.form .fields.warning .field input[type="url"], +.ui.form .field.warning textarea, +.ui.form .field.warning select, +.ui.form .field.warning input:not([type]), +.ui.form .field.warning input[type="date"], +.ui.form .field.warning input[type="datetime-local"], +.ui.form .field.warning input[type="email"], +.ui.form .field.warning input[type="number"], +.ui.form .field.warning input[type="password"], +.ui.form .field.warning input[type="search"], +.ui.form .field.warning input[type="tel"], +.ui.form .field.warning input[type="time"], +.ui.form .field.warning input[type="text"], +.ui.form .field.warning input[type="file"], +.ui.form .field.warning input[type="url"] { + color: #573A08; + background: #FFFAF3; + border-color: #C9BA9B; + border-radius: ''; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.form .field.warning textarea:focus, +.ui.form .field.warning select:focus, +.ui.form .field.warning input:not([type]):focus, +.ui.form .field.warning input[type="date"]:focus, +.ui.form .field.warning input[type="datetime-local"]:focus, +.ui.form .field.warning input[type="email"]:focus, +.ui.form .field.warning input[type="number"]:focus, +.ui.form .field.warning input[type="password"]:focus, +.ui.form .field.warning input[type="search"]:focus, +.ui.form .field.warning input[type="tel"]:focus, +.ui.form .field.warning input[type="time"]:focus, +.ui.form .field.warning input[type="text"]:focus, +.ui.form .field.warning input[type="file"]:focus, +.ui.form .field.warning input[type="url"]:focus { + background: #FFFAF3; + border-color: #C9BA9B; + color: #573A08; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.warning select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Input State + --------------------*/ + + +/* Transparent */ +.ui.form .field.warning .transparent.input input, +.ui.form .field.warning .transparent.input textarea, +.ui.form .field.warning input.transparent, +.ui.form .field.warning textarea.transparent { + background-color: #FFFAF3; + color: #573A08; +} + +/* Autofilled */ +.ui.form .warning.warning input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 100px #FFFFe0 inset !important; + box-shadow: 0 0 0 100px #FFFFe0 inset !important; + border-color: #e0e0b3; +} + +/* Placeholder */ +.ui.form .warning ::-webkit-input-placeholder { + color: #edad3e; +} +.ui.form .warning :-ms-input-placeholder { + color: #edad3e; +} +.ui.form .warning ::-moz-placeholder { + color: #edad3e; +} +.ui.form .warning :focus::-webkit-input-placeholder { + color: #e39715; +} +.ui.form .warning :focus:-ms-input-placeholder { + color: #e39715; +} +.ui.form .warning :focus::-moz-placeholder { + color: #e39715; +} + +/*------------------ + Dropdown State + --------------------*/ + +.ui.form .fields.warning .field .ui.dropdown, +.ui.form .fields.warning .field .ui.dropdown .item, +.ui.form .field.warning .ui.dropdown, +.ui.form .field.warning .ui.dropdown .text, +.ui.form .field.warning .ui.dropdown .item { + background: #FFFAF3; + color: #573A08; +} +.ui.form .fields.warning .field .ui.dropdown, +.ui.form .field.warning .ui.dropdown { + border-color: #C9BA9B !important; +} +.ui.form .fields.warning .field .ui.dropdown:hover, +.ui.form .field.warning .ui.dropdown:hover { + border-color: #C9BA9B !important; +} +.ui.form .fields.warning .field .ui.dropdown:hover .menu, +.ui.form .field.warning .ui.dropdown:hover .menu { + border-color: #C9BA9B; +} +.ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.warning .ui.multiple.selection.dropdown > .label { + background-color: #eaeacc; + color: #573A08; +} + +/* Hover */ +.ui.form .fields.warning .field .ui.dropdown .menu .item:hover, +.ui.form .field.warning .ui.dropdown .menu .item:hover { + background-color: #fbfbe9; +} + +/* Selected */ +.ui.form .fields.warning .field .ui.dropdown .menu .selected.item, +.ui.form .field.warning .ui.dropdown .menu .selected.item { + background-color: #fbfbe9; +} + +/* Active */ +.ui.form .fields.warning .field .ui.dropdown .menu .active.item, +.ui.form .field.warning .ui.dropdown .menu .active.item { + background-color: #fdfdce; +} + +/*-------------------- + Checkbox State + ---------------------*/ + +.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box { + color: #573A08; +} +.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before { + background: #FFFAF3; + border-color: #C9BA9B; +} +.ui.form .fields.warning .field .checkbox label:after, +.ui.form .field.warning .checkbox label:after, +.ui.form .fields.warning .field .checkbox .box:after, +.ui.form .field.warning .checkbox .box:after { + color: #573A08; +} + +/*-------------------- + Disabled + ---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: 0.45; +} +.ui.form .field.disabled > label, +.ui.form .fields.disabled > label { + opacity: 0.45; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} + +/*-------------- + Loading + ---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + pointer-events: none; +} +.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.segments:before { + border-radius: 0.28571429rem; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -1.5em 0 0 -1.5em; + width: 3em; + height: 3em; + -webkit-animation: loader 0.6s infinite linear; + animation: loader 0.6s infinite linear; + border: 0.2em solid #767676; + border-radius: 500rem; + -webkit-box-shadow: 0 0 0 1px transparent; + box-shadow: 0 0 0 1px transparent; + visibility: visible; + z-index: 101; +} + + +/******************************* + 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, +.ui.form label.required:after { + margin: -0.2em 0 0 0.2em; + content: '*'; + color: #DB2828; +} +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form label.required: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, +.ui.inverted.form .inline.fields > label, +.ui.inverted.form .inline.fields .field > label, +.ui.inverted.form .inline.fields .field > p, +.ui.inverted.form .inline.field > label, +.ui.inverted.form .inline.field > p { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.loading.form { + color: #FFFFFF; +} +.ui.inverted.loading.form:before { + background: rgba(0, 0, 0, 0.85); +} + +/* Inverted Field */ +.ui.inverted.form input:not([type]), +.ui.inverted.form input[type="date"], +.ui.inverted.form input[type="datetime-local"], +.ui.inverted.form input[type="email"], +.ui.inverted.form input[type="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="file"], +.ui.inverted.form input[type="url"] { + background: #FFFFFF; + border-color: rgba(255, 255, 255, 0.1); + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------------- + Field Groups + ---------------------*/ + + +/* Grouped Vertically */ +.ui.form .grouped.fields { + display: block; + margin: 0 0 1em; +} +.ui.form .grouped.fields:last-child { + margin-bottom: 0; +} +.ui.form .grouped.fields > label { + margin: 0 0 0.28571429rem 0; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: bold; + text-transform: none; +} +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: 0.5em 0; + padding: 0; +} + +/*-------------------- + Fields +---------------------*/ + + +/* Split fields */ +.ui.form .fields { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + margin: 0 -0.5em 1em; +} +.ui.form .fields > .field { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.form .fields > .field:first-child { + border-left: none; + -webkit-box-shadow: 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: 767.98px) { + .ui.form .fields { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .ui[class*="equal width"].form:not(.unstackable) .fields > .field, + .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { + width: 100% !important; + margin: 0 0 1em; + } +} + +/* Sizing Combinations */ +.ui.form .fields .wide.field { + width: 6.25%; + padding-left: 0.5em; + padding-right: 0.5em; +} +.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: 767.98px) { + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { + width: 100% !important; + } + .ui.form .fields { + margin-bottom: 0; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields + ---------------------*/ + +.ui.form .inline.fields { + margin: 0 0 1em; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.ui.form .inline.fields .field { + margin: 0; + padding: 0 1em 0 0; +} + +/* Inline Label */ +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0; + margin-bottom: 0; + vertical-align: baseline; + font-size: 0.92857143em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); + text-transform: none; +} + +/* Grouped Inline Label */ +.ui.form .inline.fields > label { + margin: 0.035714em 1em 0 0; +} + +/* Inline Input */ +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + font-size: 1em; +} + +/* Label */ +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0 0.85714286em 0 0; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0; +} + +/* Wide */ +.ui.form .inline.fields .wide.field { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + +/*-------------------- + Sizes +---------------------*/ + +.ui.form, +.ui.form .field .dropdown, +.ui.form .field .dropdown .menu > .item { + font-size: 1rem; +} +.ui.mini.form, +.ui.mini.form .field .dropdown, +.ui.mini.form .field .dropdown .menu > .item { + font-size: 0.78571429rem; +} +.ui.tiny.form, +.ui.tiny.form .field .dropdown, +.ui.tiny.form .field .dropdown .menu > .item { + font-size: 0.85714286rem; +} +.ui.small.form, +.ui.small.form .field .dropdown, +.ui.small.form .field .dropdown .menu > .item { + font-size: 0.92857143rem; +} +.ui.large.form, +.ui.large.form .field .dropdown, +.ui.large.form .field .dropdown .menu > .item { + font-size: 1.14285714rem; +} +.ui.big.form, +.ui.big.form .field .dropdown, +.ui.big.form .field .dropdown .menu > .item { + font-size: 1.28571429rem; +} +.ui.huge.form, +.ui.huge.form .field .dropdown, +.ui.huge.form .field .dropdown .menu > .item { + font-size: 1.42857143rem; +} +.ui.massive.form, +.ui.massive.form .field .dropdown, +.ui.massive.form .field .dropdown .menu > .item { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + -- cgit v1.3