diff options
Diffstat (limited to 'src/wwwroot/libraries/fomantic/dist/components/input.css')
| -rw-r--r-- | src/wwwroot/libraries/fomantic/dist/components/input.css | 710 |
1 files changed, 710 insertions, 0 deletions
diff --git a/src/wwwroot/libraries/fomantic/dist/components/input.css b/src/wwwroot/libraries/fomantic/dist/components/input.css new file mode 100644 index 0000000..85afc58 --- /dev/null +++ b/src/wwwroot/libraries/fomantic/dist/components/input.css @@ -0,0 +1,710 @@ +/*! + * # 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; +} + +/* 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; +} +.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; +} + +/* 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; +} +.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; +} + +/* 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; +} +.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; +} + +/* 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; +} + + +/******************************* + 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 +*******************************/ + |