github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/elements/input.less (about) 1 /*! 2 * # Semantic UI - Input 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 /******************************* 13 Theme 14 *******************************/ 15 16 @type : 'element'; 17 @element : 'input'; 18 19 @import (multiple) '../../theme.config'; 20 21 22 /******************************* 23 Standard 24 *******************************/ 25 26 27 /*-------------------- 28 Inputs 29 ---------------------*/ 30 31 .ui.input { 32 position: relative; 33 display: inline-flex; 34 color: @inputColor; 35 } 36 .ui.input input { 37 margin: 0em; 38 flex-grow: 1; 39 outline: none; 40 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 41 text-align: @textAlign; 42 line-height: @lineHeight; 43 44 font-family: @inputFont; 45 padding: @padding; 46 47 background: @background; 48 border: @border; 49 color: @inputColor; 50 border-radius: @borderRadius; 51 transition: @transition; 52 53 box-shadow: @boxShadow; 54 } 55 56 57 /*-------------------- 58 Placeholder 59 ---------------------*/ 60 61 /* browsers require these rules separate */ 62 .ui.input input::-webkit-input-placeholder { 63 color: @placeholderColor; 64 } 65 .ui.input input::-moz-placeholder { 66 color: @placeholderColor; 67 } 68 69 70 /******************************* 71 States 72 *******************************/ 73 74 /*-------------------- 75 Active 76 ---------------------*/ 77 78 .ui.input input:active, 79 .ui.input.down input { 80 border-color: @downBorderColor; 81 background: @downBackground; 82 color: @downColor; 83 box-shadow: @downBoxShadow; 84 } 85 86 /*-------------------- 87 Loading 88 ---------------------*/ 89 90 .ui.loading.loading.input > i.icon:before { 91 position: absolute; 92 content: ''; 93 top: 50%; 94 left: 50%; 95 96 margin: @loaderMargin; 97 width: @loaderSize; 98 height: @loaderSize; 99 100 border-radius: @circularRadius; 101 border: @loaderLineWidth solid @loaderFillColor; 102 } 103 .ui.loading.loading.input > i.icon:after { 104 position: absolute; 105 content: ''; 106 top: 50%; 107 left: 50%; 108 109 margin: @loaderMargin; 110 width: @loaderSize; 111 height: @loaderSize; 112 113 animation: button-spin @loaderSpeed linear; 114 animation-iteration-count: infinite; 115 116 border-radius: @circularRadius; 117 118 border-color: @loaderLineColor transparent transparent; 119 border-style: solid; 120 border-width: @loaderLineWidth; 121 122 box-shadow: 0px 0px 0px 1px transparent; 123 } 124 125 126 /*-------------------- 127 Focus 128 ---------------------*/ 129 130 .ui.input.focus input, 131 .ui.input input:focus { 132 border-color: @focusBorderColor; 133 background: @focusBackground; 134 color: @focusColor; 135 box-shadow: @focusBoxShadow; 136 } 137 .ui.input.focus input input::-webkit-input-placeholder, 138 .ui.input input:focus input::-webkit-input-placeholder { 139 color: @placeholderFocusColor; 140 } 141 .ui.input.focus input input::-moz-placeholder, 142 .ui.input input:focus input::-moz-placeholder { 143 color: @placeholderFocusColor; 144 } 145 146 147 /*-------------------- 148 Error 149 ---------------------*/ 150 151 .ui.input.error input { 152 background-color: @errorBackground; 153 border-color: @errorBorder; 154 color: @errorColor; 155 box-shadow: @errorBoxShadow; 156 } 157 158 /* Error Placeholder */ 159 .ui.input.error input ::-webkit-input-placeholder { 160 color: @placeholderErrorColor; 161 } 162 .ui.input.error input ::-moz-placeholder { 163 color: @placeholderErrorColor; 164 } 165 166 /* Focused Error Placeholder */ 167 .ui.input.error input :focus::-webkit-input-placeholder { 168 color: @placeholderErrorFocusColor; 169 } 170 .ui.input.error input :focus::-moz-placeholder { 171 color: @placeholderErrorFocusColor; 172 } 173 174 /******************************* 175 Variations 176 *******************************/ 177 178 /*-------------------- 179 Transparent 180 ---------------------*/ 181 182 .ui.transparent.input input { 183 border-color: transparent; 184 background-color: transparent; 185 padding: 0em; 186 } 187 188 /* Transparent Icon */ 189 .ui.transparent.icon.input > i.icon { 190 width: @transparentIconWidth; 191 } 192 .ui.transparent.icon.input > input { 193 padding-left: 0em !important; 194 padding-right: @transparentIconMargin !important; 195 } 196 .ui.transparent[class*="left icon"].input > input { 197 padding-left: 0em !important; 198 padding-left: @transparentIconMargin !important; 199 } 200 201 /* Transparent Inverted */ 202 .ui.transparent.inverted.input input::-moz-placeholder { 203 color: @transparentInvertedPlaceholderColor; 204 } 205 .ui.transparent.inverted.input { 206 color: @transparentInvertedColor; 207 } 208 .ui.transparent.inverted.input input { 209 color: inherit; 210 } 211 212 213 /*-------------------- 214 Icon 215 ---------------------*/ 216 217 .ui.icon.input > i.icon { 218 cursor: default; 219 position: absolute; 220 text-align: center; 221 top: 0px; 222 right: 0px; 223 margin: 0em; 224 height: 100%; 225 226 width: @iconWidth; 227 opacity: @iconOpacity; 228 border-radius: 0em @borderRadius @borderRadius 0em; 229 transition: @iconTransition; 230 } 231 .ui.icon.input input { 232 padding-right: @iconMargin !important; 233 } 234 235 .ui.icon.input > i.icon:before, 236 .ui.icon.input > i.icon:after { 237 left: 0; 238 position: absolute; 239 text-align: center; 240 top: 50%; 241 width: 100%; 242 margin-top: @iconOffset; 243 } 244 .ui.icon.input > i.link.icon { 245 cursor: pointer; 246 } 247 .ui.icon.input > i.circular.icon { 248 top: @circularIconVerticalOffset; 249 right: @circularIconHorizontalOffset; 250 } 251 252 /* Left Icon Input */ 253 .ui[class*="left icon"].input > i.icon { 254 right: auto; 255 left: @borderWidth; 256 border-radius: @borderRadius 0em 0em @borderRadius; 257 } 258 .ui[class*="left icon"].input > i.circular.icon { 259 right: auto; 260 left: @circularIconHorizontalOffset; 261 } 262 .ui[class*="left icon"].input > input { 263 padding-left: @iconMargin !important; 264 padding-right: @horizontalPadding !important; 265 } 266 267 /* Focus */ 268 .ui.icon.input > input:focus ~ i.icon { 269 opacity: 1; 270 } 271 272 /*-------------------- 273 Labeled 274 ---------------------*/ 275 276 /* Adjacent Label */ 277 .ui.labeled.input { 278 display: inline-flex; 279 } 280 .ui.labeled.input > .label { 281 flex-grow: 0; 282 margin: 0; 283 font-size: 1em; 284 } 285 .ui.labeled.input > .label:not(.corner) { 286 padding-top: @verticalPadding; 287 padding-bottom: @verticalPadding; 288 } 289 290 /* Fluid Labeled */ 291 .ui.fluid.labeled.input { 292 display: flex; 293 } 294 295 /* Label on Left */ 296 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input { 297 border-left: none; 298 border-top-left-radius: 0px; 299 border-bottom-left-radius: 0px; 300 } 301 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label { 302 border-top-right-radius: 0px; 303 border-bottom-right-radius: 0px; 304 } 305 306 /* Label on Right */ 307 .ui[class*="right labeled"].input > input { 308 border-right: none; 309 border-top-right-radius: 0px !important; 310 border-bottom-right-radius: 0px !important; 311 } 312 .ui[class*="right labeled"].input > .label { 313 border-top-left-radius: 0px; 314 border-bottom-left-radius: 0px; 315 } 316 317 318 /* Corner Label */ 319 .ui.labeled.input .corner.label { 320 top: @labelCornerTop; 321 right: @labelCornerRight; 322 font-size: @labelCornerSize; 323 border-radius: 0em @borderRadius 0em 0em; 324 } 325 .ui.labeled.input input { 326 padding-right: @labeledMargin !important; 327 } 328 329 /* Spacing with corner label */ 330 .ui[class*="corner labeled"].icon.input:not(.left) > input { 331 padding-right: @labeledIconInputMargin !important; 332 } 333 .ui[class*="corner labeled"].icon.input:not(.left) > .icon { 334 margin-right: @labeledIconMargin; 335 } 336 337 /*-------------------- 338 Action 339 ---------------------*/ 340 341 .ui.action.input { 342 display: inline-flex; 343 } 344 345 .ui.action.input > .button, 346 .ui.action.input > .buttons { 347 flex-grow: 0; 348 } 349 .ui.action.input > .button, 350 .ui.action.input > .buttons > .button { 351 padding-top: @verticalPadding; 352 padding-bottom: @verticalPadding; 353 margin: 0; 354 } 355 356 /* Fluid */ 357 .ui.fluid.action.input { 358 display: flex; 359 } 360 361 /* Button on Right */ 362 .ui.action.input:not([class*="left action"]) > input { 363 border-right: none; 364 border-top-right-radius: 0px !important; 365 border-bottom-right-radius: 0px !important; 366 } 367 .ui.action.input:not([class*="left action"]) > .button, 368 .ui.action.input:not([class*="left action"]) > .buttons > .button { 369 border-top-left-radius: 0px; 370 border-bottom-left-radius: 0px; 371 } 372 373 /* Button on Left */ 374 .ui[class*="left action"].input > .button, 375 .ui[class*="left action"].input > .buttons > .button { 376 border-top-right-radius: 0px; 377 border-bottom-right-radius: 0px; 378 } 379 .ui[class*="left action"].input > input { 380 border-left: none; 381 border-top-left-radius: 0px; 382 border-bottom-left-radius: 0px; 383 } 384 385 /*-------------------- 386 Inverted 387 ---------------------*/ 388 389 /* Standard */ 390 .ui.inverted.input input { 391 border: none; 392 } 393 394 395 /*-------------------- 396 Fluid 397 ---------------------*/ 398 399 .ui.fluid.input { 400 display: block; 401 } 402 403 /*-------------------- 404 Size 405 ---------------------*/ 406 407 .ui.mini.input { 408 font-size: @mini; 409 } 410 .ui.small.input { 411 font-size: @small; 412 } 413 .ui.input { 414 font-size: @medium; 415 } 416 .ui.large.input { 417 font-size: @large; 418 } 419 .ui.big.input { 420 font-size: @big; 421 } 422 .ui.huge.input { 423 font-size: @huge; 424 } 425 .ui.massive.input { 426 font-size: @massive; 427 } 428 429 .loadUIOverrides();