|
|
/* * # Semantic - Input * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Theme*******************************/
/*------------------- Theme--------------------*/
/* To override a theme for an individual element specify theme name below*/
/* Theme to load global Variables */
/* Elements */
/* Collections */
/* Modules */
/* Views */
/* Import */
/******************************* Global Variables*******************************/
/*------------------- Paths--------------------*/
/*------------------- Page--------------------*/
/*------------------- Fonts--------------------*/
/*------------------- Icons--------------------*/
/* Width of largest icon */
/******************************* BG Colors*******************************/
/******************************* Colors*******************************/
/*------------------- Background--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Neutrals ---*/
/*------------------- Text Colors--------------------*/
/*------------------- Brand Colors--------------------*/
/*------------------- Borders--------------------*/
/*------------------- Sizes--------------------*/
/*------------------- Transitions--------------------*/
/******************************* States*******************************/
/*------------------- Disabled--------------------*/
/*------------------- Hover--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Neutrals ---*/
/*------------------- Down (:active)--------------------*/
/*--- Colors ---*/
/*--- Emotive ---*/
/*--- Neutrals ---*/
/*------------------- Active--------------------*/
/*--- Standard ---*/
/*--- Emotive ---*/
/*--- Neutrals ---*/
/*------------------- Globals Used--------------------*/
/*------------------- Element--------------------*/
/*------------------- Types--------------------*/
/* Icon */
/* Circular Icon Input */
/* Labeled */
/*------------------- States--------------------*/
/* Placeholder */
/* Down */
/* Focus */
/* Error */
/* Loading */
/*------------------- Variations--------------------*/
/* Sizing */
/******************************* User Global Variables*******************************/
/******************************* User Variable Overrides*******************************/
/******************************* Standard*******************************/
/*-------------------- Inputs---------------------*/
.ui.input { display: inline-block; position: relative; color: rgba(0, 0, 0, 0.7);}
.ui.input input { width: 100%; font-family: "Helvetica Neue", "Helvetica", Arial; margin: 0em; padding: 0.65em 1em; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); outline: none; color: rgba(0, 0, 0, 0.7); border-radius: 0.3125em; -webkit-transition: background-color 0.3s ease-out, -webkit-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; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
/*-------------------- Placeholder---------------------*/
/* browsers require these rules separate */
.ui.input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4);}
.ui.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.7); -webkit-box-shadow: none; box-shadow: none;}
/*-------------------- Loading---------------------*/
.ui.loading.input > .icon { background: url("../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(0, 0, 0, 0.2); background: ''; color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: none; 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.7);}
.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder { color: rgba(0, 0, 0, 0.7);}
/*-------------------- Error---------------------*/
.ui.input.error input { background-color: #fffafa; border-color: #e7bebe; color: #d95c5c; -webkit-box-shadow: none; 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: none; background-color: transparent; padding-right: 0em; padding-left: 0em;}
/*-------------------- Icon---------------------*/
.ui.icon.input > .icon { cursor: default; position: absolute; opacity: 0.5; top: 0px; left: 0px; margin: 0em; width: 2.8em; height: 100%; padding-top: 0.82em; text-align: center; border-radius: 0.3125em 0em 0em 0.3125em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;}
.ui.icon.input > .link.icon { cursor: pointer;}
.ui.icon.input input { padding-left: 2.75em !important;}
.ui.icon.input > .circular.icon { top: 0.35em; left: 0.5em;}
/* Left Icon Input */
.ui.left.icon.input > .icon { left: auto; right: 1px; border-radius: 0em 0.3125em 0.3125em 0em;}
.ui.left.icon.input > .circular.icon { left: auto; right: 0.5em;}
.ui.left.icon.input > input { padding-right: 2.75em !important; padding-left: 1em !important;}
/* Focus */
.ui.icon.input > input:focus ~ .icon { opacity: 1;}
/*-------------------- Labeled---------------------*/
.ui.labeled.input .corner.label { top: 1px; left: 1px; font-size: 0.55em; border-top-left-radius: 0.3125em;}
.ui.labeled.input .corner.label > .icon { margin: 0.4em 2em 0em 0em;}
.ui.labeled.input input { padding-left: 2.5em !important;}
/* Spacing with corner label */
.ui.labeled.icon.input:not(.left) > input { padding-left: 3.25em !important;}
.ui.labeled.icon.input:not(.left) > .icon { margin-left: 1.25em;}
/*-------------------- Action---------------------*/
.ui.action.input { display: table;}
.ui.action.input > input { display: table-cell; border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; border-left: none;}
.ui.action.input > .button,.ui.action.input > .buttons { display: table-cell; border-top-right-radius: 0px; border-bottom-right-radius: 0px; 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%;}
/*-------------------- 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;}
/******************************* Overrides*******************************/
/******************************* Overrides*******************************/
|
