/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * * 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(), .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form .ui.input {
width: 100%; vertical-align: top;
} .ui.form input:not(), .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input, .ui.form input {
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; -webkit-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(39, 41, 43, 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; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571em 1em; background: #ffffff; border: 1px solid rgba(39, 41, 43, 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 {
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(39, 41, 43, 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 .info.message, .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: 0em 0em 0em 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: #e38585;
} .ui.form .error ::-moz-placeholder {
color: #e38585;
} .ui.form .error :focus::-webkit-input-placeholder {
color: #de7171;
} .ui.form .error :focus::-moz-placeholder {
color: #de7171;
}
/*——————–
Focus
———————*/
.ui.form input:not():focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus, .ui.form input:focus {
color: rgba(0, 0, 0, 0.85); border-color: rgba(39, 41, 43, 0.3); border-radius: 0em 0.2857rem 0.2857rem 0em; background: #ffffff; box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
} .ui.form textarea:focus {
color: rgba(0, 0, 0, 0.85); border-color: rgba(39, 41, 43, 0.3); border-radius: 0em 0.2857rem 0.2857rem 0em; background: #ffffff; box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 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: #d95c5c;
} .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label {
border-color: #d95c5c; color: #ffffff;
} .ui.form .fields.error .field textarea, .ui.form .fields.error .field input:not(), .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .fields.error .field input, .ui.form .field.error textarea, .ui.form .field.error input:not(), .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input, .ui.form .field.error input {
background: #fff0f0; border-color: #dbb1b1; color: #d95c5c; border-radius: 0em 0.2857rem 0.2857rem 0em; box-shadow: 2px 0em 0em 0em #d95c5c inset;
} .ui.form .field.error textarea:focus, .ui.form .field.error input:not():focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus, .ui.form .field.error input:focus {
background: #fff0f0; border-color: #dbb1b1; color: #dc6868; -webkit-appearance: none; box-shadow: 2px 0em 0em 0em #dc6868 inset;
}
/*——————
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: #d95c5c;
} .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown {
border-color: #dbb1b1 !important;
} .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover {
border-color: #dbb1b1 !important;
} .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu {
border-color: #dbb1b1;
}
/* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover {
background-color: #fff2f2;
}
/* 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: #d95c5c;
} .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: #dbb1b1;
} .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: #d95c5c;
}
/*——————–
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 > .field > label:after, .ui.form .required.field > label:after, .ui.form .required.fields > .field > .checkbox:after, .ui.form .required.field > .checkbox:after {
margin: -0.2em 0em 0em 0.2em; content: '*'; color: #d95c5c;
} .ui.form .required.fields > .field > label:after, .ui.form .required.field > label:after {
display: inline-block; vertical-align: top;
} .ui.form .required.fields > .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 > .ui.input, .ui.form .inline.field > label, .ui.form .inline.field > p, .ui.form .inline.field > input, .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.875em;
}
/* Medium */ .ui.form {
font-size: auto;
}
/* Large */ .ui.large.form {
font-size: 1.125em;
}
/* Huge */ .ui.huge.form {
font-size: 1.2em;
}
/*******************************
Theme Overrides
*******************************/
/*******************************
Site Overrides
*******************************/