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();