123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710 |
- /*!
- * # Fomantic-UI - Input
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
- /*******************************
- Standard
- *******************************/
- /*--------------------
- Inputs
- ---------------------*/
- .ui.input {
- position: relative;
- font-weight: normal;
- font-style: normal;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- color: rgba(0, 0, 0, 0.87);
- }
- .ui.input > input {
- margin: 0;
- max-width: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 auto;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.21428571em;
- font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
- padding: 0.67857143em 1em;
- background: #FFFFFF;
- border: 1px solid rgba(34, 36, 38, 0.15);
- color: rgba(0, 0, 0, 0.87);
- border-radius: 0.28571429rem;
- -webkit-transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
- transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
- transition: box-shadow 0.1s ease, border-color 0.1s ease;
- transition: box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /*--------------------
- Placeholder
- ---------------------*/
- /* browsers require these rules separate */
- .ui.input > input::-webkit-input-placeholder {
- color: rgba(191, 191, 191, 0.87);
- }
- .ui.input > input::-moz-placeholder {
- color: rgba(191, 191, 191, 0.87);
- }
- .ui.input > input:-ms-input-placeholder {
- color: rgba(191, 191, 191, 0.87);
- }
- /*******************************
- States
- *******************************/
- /*--------------------
- Disabled
- ---------------------*/
- .ui.disabled.input,
- .ui.input:not(.disabled) input[disabled] {
- opacity: 0.45;
- }
- .ui.disabled.input > input,
- .ui.input:not(.disabled) input[disabled] {
- pointer-events: none;
- }
- /*--------------------
- Active
- ---------------------*/
- .ui.input > input:active,
- .ui.input.down input {
- border-color: rgba(0, 0, 0, 0.3);
- background: #FAFAFA;
- color: rgba(0, 0, 0, 0.87);
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /*--------------------
- Loading
- ---------------------*/
- .ui.loading.loading.input > i.icon:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
- margin: -0.64285714em 0 0 -0.64285714em;
- width: 1.28571429em;
- height: 1.28571429em;
- border-radius: 500rem;
- border: 0.2em solid rgba(0, 0, 0, 0.1);
- }
- .ui.loading.loading.input > i.icon:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
- margin: -0.64285714em 0 0 -0.64285714em;
- width: 1.28571429em;
- height: 1.28571429em;
- -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;
- }
- /*--------------------
- Focus
- ---------------------*/
- .ui.input.focus > input,
- .ui.input > input:focus {
- border-color: #85B7D9;
- background: #FFFFFF;
- color: rgba(0, 0, 0, 0.8);
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- .ui.input.focus > input::-webkit-input-placeholder,
- .ui.input > input:focus::-webkit-input-placeholder {
- color: rgba(115, 115, 115, 0.87);
- }
- .ui.input.focus > input::-moz-placeholder,
- .ui.input > input:focus::-moz-placeholder {
- color: rgba(115, 115, 115, 0.87);
- }
- .ui.input.focus > input:-ms-input-placeholder,
- .ui.input > input:focus:-ms-input-placeholder {
- color: rgba(115, 115, 115, 0.87);
- }
- /*--------------------
- States
- ---------------------*/
- .ui.input.error > input {
- background-color: #FFF6F6;
- border-color: #E0B4B4;
- color: #9F3A38;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /* Placeholder */
- .ui.input.error > input::-webkit-input-placeholder {
- color: #e7bdbc;
- }
- .ui.input.error > input::-moz-placeholder {
- color: #e7bdbc;
- }
- .ui.input.error > input:-ms-input-placeholder {
- color: #e7bdbc !important;
- }
- /* Focused Placeholder */
- .ui.input.error > input:focus::-webkit-input-placeholder {
- color: #da9796;
- }
- .ui.input.error > input:focus::-moz-placeholder {
- color: #da9796;
- }
- .ui.input.error > input:focus:-ms-input-placeholder {
- color: #da9796 !important;
- }
- .ui.input.info > input {
- background-color: #F8FFFF;
- border-color: #A9D5DE;
- color: #276F86;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /* Placeholder */
- .ui.input.info > input::-webkit-input-placeholder {
- color: #98cfe1;
- }
- .ui.input.info > input::-moz-placeholder {
- color: #98cfe1;
- }
- .ui.input.info > input:-ms-input-placeholder {
- color: #98cfe1 !important;
- }
- /* Focused Placeholder */
- .ui.input.info > input:focus::-webkit-input-placeholder {
- color: #70bdd6;
- }
- .ui.input.info > input:focus::-moz-placeholder {
- color: #70bdd6;
- }
- .ui.input.info > input:focus:-ms-input-placeholder {
- color: #70bdd6 !important;
- }
- .ui.input.success > input {
- background-color: #FCFFF5;
- border-color: #A3C293;
- color: #2C662D;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /* Placeholder */
- .ui.input.success > input::-webkit-input-placeholder {
- color: #8fcf90;
- }
- .ui.input.success > input::-moz-placeholder {
- color: #8fcf90;
- }
- .ui.input.success > input:-ms-input-placeholder {
- color: #8fcf90 !important;
- }
- /* Focused Placeholder */
- .ui.input.success > input:focus::-webkit-input-placeholder {
- color: #6cbf6d;
- }
- .ui.input.success > input:focus::-moz-placeholder {
- color: #6cbf6d;
- }
- .ui.input.success > input:focus:-ms-input-placeholder {
- color: #6cbf6d !important;
- }
- .ui.input.warning > input {
- background-color: #FFFAF3;
- border-color: #C9BA9B;
- color: #573A08;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- /* Placeholder */
- .ui.input.warning > input::-webkit-input-placeholder {
- color: #edad3e;
- }
- .ui.input.warning > input::-moz-placeholder {
- color: #edad3e;
- }
- .ui.input.warning > input:-ms-input-placeholder {
- color: #edad3e !important;
- }
- /* Focused Placeholder */
- .ui.input.warning > input:focus::-webkit-input-placeholder {
- color: #e39715;
- }
- .ui.input.warning > input:focus::-moz-placeholder {
- color: #e39715;
- }
- .ui.input.warning > input:focus:-ms-input-placeholder {
- color: #e39715 !important;
- }
- /*******************************
- Variations
- *******************************/
- /*--------------------
- Transparent
- ---------------------*/
- .ui.transparent.input > textarea,
- .ui.transparent.input > input {
- border-color: transparent !important;
- background-color: transparent !important;
- padding: 0;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- border-radius: 0 !important;
- }
- .field .ui.transparent.input > textarea {
- padding: 0.67857143em 1em;
- }
- /* Transparent Icon */
- :not(.field) > .ui.transparent.icon.input > i.icon {
- width: 1.1em;
- }
- :not(.field) > .ui.ui.ui.transparent.icon.input > input {
- padding-left: 0;
- padding-right: 2em;
- }
- :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
- padding-left: 2em;
- padding-right: 0;
- }
- /* Transparent Inverted */
- .ui.transparent.inverted.input {
- color: #FFFFFF;
- }
- .ui.ui.transparent.inverted.input > textarea,
- .ui.ui.transparent.inverted.input > input {
- color: inherit;
- }
- .ui.transparent.inverted.input > input::-webkit-input-placeholder {
- color: rgba(255, 255, 255, 0.5);
- }
- .ui.transparent.inverted.input > input::-moz-placeholder {
- color: rgba(255, 255, 255, 0.5);
- }
- .ui.transparent.inverted.input > input:-ms-input-placeholder {
- color: rgba(255, 255, 255, 0.5);
- }
- /*--------------------
- Icon
- ---------------------*/
- .ui.icon.input > i.icon {
- cursor: default;
- position: absolute;
- line-height: 1;
- text-align: center;
- top: 0;
- right: 0;
- margin: 0;
- height: 100%;
- width: 2.67142857em;
- opacity: 0.5;
- border-radius: 0 0.28571429rem 0.28571429rem 0;
- -webkit-transition: opacity 0.3s ease;
- transition: opacity 0.3s ease;
- }
- .ui.icon.input > i.icon:not(.link) {
- pointer-events: none;
- }
- .ui.ui.ui.ui.icon.input > textarea,
- .ui.ui.ui.ui.icon.input > input {
- padding-right: 2.67142857em;
- }
- .ui.icon.input > i.icon:before,
- .ui.icon.input > i.icon:after {
- left: 0;
- position: absolute;
- text-align: center;
- top: 50%;
- width: 100%;
- margin-top: -0.5em;
- }
- .ui.icon.input > i.link.icon {
- cursor: pointer;
- }
- .ui.icon.input > i.circular.icon {
- top: 0.35em;
- right: 0.5em;
- }
- /* Left Icon Input */
- .ui[class*="left icon"].input > i.icon {
- right: auto;
- left: 1px;
- border-radius: 0.28571429rem 0 0 0.28571429rem;
- }
- .ui[class*="left icon"].input > i.circular.icon {
- right: auto;
- left: 0.5em;
- }
- .ui.ui.ui.ui[class*="left icon"].input > textarea,
- .ui.ui.ui.ui[class*="left icon"].input > input {
- padding-left: 2.67142857em;
- padding-right: 1em;
- }
- /* Focus */
- .ui.icon.input > textarea:focus ~ i.icon,
- .ui.icon.input > input:focus ~ i.icon {
- opacity: 1;
- }
- /*--------------------
- Labeled
- ---------------------*/
- /* Adjacent Label */
- .ui.labeled.input > .label {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin: 0;
- font-size: 1em;
- }
- .ui.labeled.input > .label:not(.corner) {
- padding-top: 0.78571429em;
- padding-bottom: 0.78571429em;
- }
- /* Regular Label on Left */
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
- border-left-color: #85B7D9;
- }
- /* Regular Label on Right */
- .ui[class*="right labeled"].input > input {
- border-top-right-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
- border-right-color: transparent !important;
- }
- .ui[class*="right labeled"].input > input + .label {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .ui[class*="right labeled"].input > input:focus {
- border-right-color: #85B7D9 !important;
- }
- /* Corner Label */
- .ui.labeled.input .corner.label {
- top: 1px;
- right: 1px;
- font-size: 0.64285714em;
- border-radius: 0 0.28571429rem 0 0;
- }
- /* Spacing with corner label */
- .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
- .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
- padding-right: 2.5em !important;
- }
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
- padding-right: 3.25em !important;
- }
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
- margin-right: 1.25em;
- }
- /* Left Labeled */
- .ui[class*="left corner labeled"].labeled.input > textarea,
- .ui[class*="left corner labeled"].labeled.input > input {
- padding-left: 2.5em !important;
- }
- .ui[class*="left corner labeled"].icon.input > textarea,
- .ui[class*="left corner labeled"].icon.input > input {
- padding-left: 3.25em !important;
- }
- .ui[class*="left corner labeled"].icon.input > .icon {
- margin-left: 1.25em;
- }
- .ui.icon.input > textarea ~ .icon {
- height: 3em;
- }
- :not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
- height: 1.3em;
- }
- /* Corner Label Position */
- .ui.input > .ui.corner.label {
- top: 1px;
- right: 1px;
- }
- .ui.input > .ui.left.corner.label {
- right: auto;
- left: 1px;
- }
- /* Labeled and action input states */
- .ui.form > .field.error > .ui.action.input > .ui.button,
- .ui.form > .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
- .ui.action.input.error > .ui.button,
- .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label {
- border-top: 1px solid #E0B4B4;
- border-bottom: 1px solid #E0B4B4;
- }
- .ui.form > .field.error > .ui.left.action.input > .ui.button,
- .ui.form > .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
- .ui.left.action.input.error > .ui.button,
- .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label {
- border-left: 1px solid #E0B4B4;
- }
- .ui.form > .field.error > .ui.action.input:not(.left) > input + .ui.button,
- .ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
- .ui.action.input.error:not(.left) > input + .ui.button,
- .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label {
- border-right: 1px solid #E0B4B4;
- }
- .ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
- .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child {
- border-left: 1px solid #E0B4B4;
- }
- .ui.form > .field.info > .ui.action.input > .ui.button,
- .ui.form > .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
- .ui.action.input.info > .ui.button,
- .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label {
- border-top: 1px solid #A9D5DE;
- border-bottom: 1px solid #A9D5DE;
- }
- .ui.form > .field.info > .ui.left.action.input > .ui.button,
- .ui.form > .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
- .ui.left.action.input.info > .ui.button,
- .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label {
- border-left: 1px solid #A9D5DE;
- }
- .ui.form > .field.info > .ui.action.input:not(.left) > input + .ui.button,
- .ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
- .ui.action.input.info:not(.left) > input + .ui.button,
- .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label {
- border-right: 1px solid #A9D5DE;
- }
- .ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
- .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child {
- border-left: 1px solid #A9D5DE;
- }
- .ui.form > .field.success > .ui.action.input > .ui.button,
- .ui.form > .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
- .ui.action.input.success > .ui.button,
- .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label {
- border-top: 1px solid #A3C293;
- border-bottom: 1px solid #A3C293;
- }
- .ui.form > .field.success > .ui.left.action.input > .ui.button,
- .ui.form > .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
- .ui.left.action.input.success > .ui.button,
- .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label {
- border-left: 1px solid #A3C293;
- }
- .ui.form > .field.success > .ui.action.input:not(.left) > input + .ui.button,
- .ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
- .ui.action.input.success:not(.left) > input + .ui.button,
- .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label {
- border-right: 1px solid #A3C293;
- }
- .ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
- .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child {
- border-left: 1px solid #A3C293;
- }
- .ui.form > .field.warning > .ui.action.input > .ui.button,
- .ui.form > .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
- .ui.action.input.warning > .ui.button,
- .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label {
- border-top: 1px solid #C9BA9B;
- border-bottom: 1px solid #C9BA9B;
- }
- .ui.form > .field.warning > .ui.left.action.input > .ui.button,
- .ui.form > .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
- .ui.left.action.input.warning > .ui.button,
- .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label {
- border-left: 1px solid #C9BA9B;
- }
- .ui.form > .field.warning > .ui.action.input:not(.left) > input + .ui.button,
- .ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
- .ui.action.input.warning:not(.left) > input + .ui.button,
- .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label {
- border-right: 1px solid #C9BA9B;
- }
- .ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
- .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child {
- border-left: 1px solid #C9BA9B;
- }
- /*--------------------
- Action
- ---------------------*/
- .ui.action.input > .button,
- .ui.action.input > .buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
- .ui.action.input > .button,
- .ui.action.input > .buttons > .button {
- padding-top: 0.78571429em;
- padding-bottom: 0.78571429em;
- margin: 0;
- }
- /* Input when ui Left*/
- .ui[class*="left action"].input > input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- /* Input when ui Right*/
- .ui.action.input:not([class*="left action"]) > input {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-right-color: transparent;
- }
- /* Button and Dropdown */
- .ui.action.input > .dropdown:first-child,
- .ui.action.input > .button:first-child,
- .ui.action.input > .buttons:first-child > .button {
- border-radius: 0.28571429rem 0 0 0.28571429rem;
- }
- .ui.action.input > .dropdown:not(:first-child),
- .ui.action.input > .button:not(:first-child),
- .ui.action.input > .buttons:not(:first-child) > .button {
- border-radius: 0;
- }
- .ui.action.input > .dropdown:last-child,
- .ui.action.input > .button:last-child,
- .ui.action.input > .buttons:last-child > .button {
- border-radius: 0 0.28571429rem 0.28571429rem 0;
- }
- /* Input Focus */
- .ui.action.input:not([class*="left action"]) > input:focus {
- border-right-color: #85B7D9;
- }
- .ui.ui[class*="left action"].input > input:focus {
- border-left-color: #85B7D9;
- }
- /*--------------------
- Inverted
- ---------------------*/
- /* Standard */
- .ui.inverted.input > input {
- border: none;
- }
- /*--------------------
- Fluid
- ---------------------*/
- .ui.fluid.input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- }
- .ui.fluid.input > input {
- width: 0 !important;
- }
- /*--------------------
- Size
- ---------------------*/
- .ui.input {
- font-size: 1em;
- }
- .ui.mini.input {
- font-size: 0.78571429em;
- }
- .ui.tiny.input {
- font-size: 0.85714286em;
- }
- .ui.small.input {
- font-size: 0.92857143em;
- }
- .ui.large.input {
- font-size: 1.14285714em;
- }
- .ui.big.input {
- font-size: 1.28571429em;
- }
- .ui.huge.input {
- font-size: 1.42857143em;
- }
- .ui.massive.input {
- font-size: 1.71428571em;
- }
- /*******************************
- Theme Overrides
- *******************************/
- /*******************************
- Site Overrides
- *******************************/
|