/* * # Semantic UI - 1.7.0 * 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 * */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input { position: relative; display: inline-block; color: rgba(0, 0, 0, 0.8); } .ui.input input { margin: 0em; width: 100%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.2142em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; padding: 0.67861em 1em; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.8); border-radius: 0.2857rem; -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: none; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.input input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); } .ui.input input::-moz-placeholder { color: rgba(0, 0, 0, 0.4); } /******************************* States *******************************/ /*-------------------- 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.8); box-shadow: none; } /*-------------------- Loading ---------------------*/ .ui.loading.loading.input > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285em 0em 0em -0.64285em; width: 1.2857em; height: 1.2857em; 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.64285em 0em 0em -0.64285em; width: 1.2857em; height: 1.2857em; -webkit-animation: button-spin 0.6s linear; animation: button-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #aaaaaa transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /*-------------------- Focus ---------------------*/ .ui.input.focus input, .ui.input input:focus { border-color: rgba(39, 41, 43, 0.3); background: #ffffff; color: rgba(0, 0, 0, 0.8); box-shadow: none; } .ui.input.focus input input::-webkit-input-placeholder, .ui.input input:focus input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.8); } .ui.input.focus input input::-moz-placeholder, .ui.input input:focus input::-moz-placeholder { color: rgba(0, 0, 0, 0.8); } /*-------------------- Error ---------------------*/ .ui.input.error input { background-color: #fff0f0; border-color: #dbb1b1; color: #d95c5c; box-shadow: none; } /* Error Placeholder */ .ui.input.error input ::-webkit-input-placeholder { color: rgba(255, 80, 80, 0.4); } .ui.input.error input ::-moz-placeholder { color: rgba(255, 80, 80, 0.4); } /* Focused Error Placeholder */ .ui.input.error input :focus::-webkit-input-placeholder { color: rgba(255, 80, 80, 0.7); } .ui.input.error input :focus::-moz-placeholder { color: rgba(255, 80, 80, 0.7); } /******************************* Variations *******************************/ /*-------------------- Transparent ---------------------*/ .ui.transparent.input input { border-color: transparent; background-color: transparent; padding: 0em; } /* Transparent Icon */ .ui.transparent.icon.input > i.icon { width: 1.25em; } .ui.transparent.icon.input > input { padding-left: 0em !important; padding-right: 2em !important; } .ui.transparent[class*="left icon"].input > input { padding-left: 0em !important; padding-left: 2em !important; } /* Transparent Inverted */ .ui.transparent.inverted.input input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input { color: #ffffff; } .ui.transparent.inverted.input input { color: inherit; } /*-------------------- Icon ---------------------*/ .ui.icon.input > i.icon { cursor: default; position: absolute; text-align: center; top: 0px; right: 0px; margin: 0em; height: 100%; width: 2.82142em; opacity: 0.5; border-radius: 0em 0.2857rem 0.2857rem 0em; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .ui.icon.input input { padding-right: 2.82142em !important; } .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.2857rem 0em 0em 0.2857rem; } .ui[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui[class*="left icon"].input > input { padding-left: 2.82142em !important; padding-right: 1em !important; } /* Focus */ .ui.icon.input > input:focus ~ i.icon { opacity: 1; } /*-------------------- Labeled ---------------------*/ /* Adjacent Label */ .ui.labeled.input { display: table; } .ui.labeled.input > input { display: table-cell; vertical-align: top; } .ui.labeled.input > .label { display: table-cell; vertical-align: middle; white-space: nowrap; font-size: 1em; } .ui.labeled.input > .label > .icon { display: inline; vertical-align: top; } /* Fluid Labeled */ .ui.fluid.labeled.input { display: table; width: 100%; } .ui.fluid.labeled.input > .label { width: 0.01%; } /* Label on Left */ .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input { border-left: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } /* Label on Right */ .ui[class*="right labeled"].input > input { border-right: none; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } .ui[class*="right labeled"].input > .label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Corner Label */ .ui.labeled.input .corner.label { top: 1px; right: 1px; font-size: 0.75em; border-radius: 0em 0.2857rem 0em 0em; } .ui.labeled.input input { padding-right: 2.5em !important; } /* Spacing with corner label */ .ui[class*="corner labeled"].input { display: inline-block; } .ui[class*="corner labeled"].input > input { display: block; } .ui[class*="corner labeled"].icon.input:not(.left) > input { padding-right: 3.25em !important; } .ui[class*="corner labeled"].icon.input:not(.left) > .icon { margin-right: 1.25em; } /*-------------------- Action ---------------------*/ .ui.action.input { display: table; } .ui.action.input > input { display: table-cell; vertical-align: top; } .ui.action.input > .button, .ui.action.input > .buttons { display: table-cell; vertical-align: middle; white-space: nowrap; padding-top: 0.78571em; padding-bottom: 0.78571em; } .ui.action.input > .button > .icon, .ui.action.input > .buttons > .button > .icon { display: inline; vertical-align: top; } .ui.fluid.action.input { display: table; width: 100%; } .ui.fluid.action.input > .button { width: 0.01%; } /* Button on Right */ .ui.action.input:not([class*="left action"]) > input { border-right: none; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } .ui.action.input:not([class*="left action"]) > .button, .ui.action.input:not([class*="left action"]) > .buttons { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Button on Left */ .ui[class*="left action"].input > .button, .ui[class*="left action"].input > .buttons { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui[class*="left action"].input > input { border-left: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /*-------------------- Inverted ---------------------*/ /* Standard */ .ui.inverted.input input { border: none; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input { display: block; } /*-------------------- Size ---------------------*/ .ui.mini.input { font-size: 0.8125rem; } .ui.small.input { font-size: 0.875rem; } .ui.input { font-size: 1rem; } .ui.large.input { font-size: 1.125rem; } .ui.big.input { font-size: 1.25rem; } .ui.huge.input { font-size: 1.375rem; } .ui.massive.input { font-size: 1.5rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/