/* * # Semantic UI * git://github.com/Semantic-Org/Semantic-UI.git#1.0 * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input { display: inline-block; position: relative; color: rgba(0, 0, 0, 0.8); } .ui.input input { margin: 0em; width: 100%; outline: none; text-align: left; line-height: 1.2em; font-family: "Helvetica Neue", "Helvetica", Arial; padding: 0.7em 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.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } /*-------------------- 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.input > .icon { background: url("../themes/default/assets/images/loader-mini.gif") no-repeat 50% 50%; } .ui.loading.input > .icon:before, .ui.loading.input > .icon:after { display: none; } /*-------------------- Focus ---------------------*/ .ui.input.focus input, .ui.input input:focus { border-color: rgba(39, 41, 43, 0.3); background: ''; 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: #fffafa; border-color: #e7bebe; 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; } /*-------------------- Icon ---------------------*/ .ui.icon.input > .icon { cursor: default; position: absolute; opacity: 0.5; top: 0px; right: 0px; margin: 0em; width: 2.85em; height: 100%; text-align: center; border-radius: 0em 0.2857rem 0.2857rem 0em; box-sizing: border-box; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .ui.icon.input > .icon:before, .ui.icon.input > .icon:after { left: 0; position: absolute; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .ui.icon.input > .link.icon { cursor: pointer; } .ui.icon.input input { padding-right: 2.85em !important; } .ui.icon.input > .circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > .icon { right: auto; left: 1px; border-radius: 0.2857rem 0em 0em 0.2857rem; } .ui[class*="left icon"].input > .circular.icon { right: auto; left: 0.5em; } .ui[class*="left icon"].input > input { padding-left: 2.85em !important; padding-right: 1em !important; } /* Transparent Icon */ .ui.transparent.icon.input > .icon { width: 1.25em; } .ui.transparent.icon.input > input { padding-left: 0em !important; padding-right: 1.75em !important; } .ui.transparent[class*="left icon"].input > input { padding-left: 0em !important; padding-left: 1.75em !important; } /* Focus */ .ui.icon.input > input:focus ~ .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; } .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; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input { display: block; } /*-------------------- Size ---------------------*/ .ui.mini.input { font-size: 0.8125em; } .ui.small.input { font-size: 0.875em; } .ui.input { font-size: 1em; } .ui.large.input { font-size: 1.125em; } .ui.big.input { font-size: 1.25em; } .ui.huge.input { font-size: 1.375em; } .ui.massive.input { font-size: 1.5rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/