github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/input.css (about)

     1  /*!
     2   * # Semantic UI x.x - 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  /*******************************
    14             Standard
    15  *******************************/
    16  
    17  
    18  /*--------------------
    19          Inputs
    20  ---------------------*/
    21  
    22  .ui.input {
    23    position: relative;
    24    display: -webkit-inline-box;
    25    display: -webkit-inline-flex;
    26    display: -ms-inline-flexbox;
    27    display: inline-flex;
    28    color: rgba(0, 0, 0, 0.8);
    29  }
    30  .ui.input input {
    31    margin: 0em;
    32    -webkit-box-flex: 1;
    33    -webkit-flex-grow: 1;
    34        -ms-flex-positive: 1;
    35            flex-grow: 1;
    36    outline: none;
    37    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    38    text-align: left;
    39    line-height: 1.2142em;
    40    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    41    padding: 0.67861em 1em;
    42    background: #ffffff;
    43    border: 1px solid rgba(0, 0, 0, 0.15);
    44    color: rgba(0, 0, 0, 0.8);
    45    border-radius: 0.2857rem;
    46    -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    47            transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    48    box-shadow: none;
    49  }
    50  
    51  /*--------------------
    52        Placeholder
    53  ---------------------*/
    54  
    55  
    56  /* browsers require these rules separate */
    57  .ui.input input::-webkit-input-placeholder {
    58    color: rgba(0, 0, 0, 0.4);
    59  }
    60  .ui.input input::-moz-placeholder {
    61    color: rgba(0, 0, 0, 0.4);
    62  }
    63  
    64  
    65  /*******************************
    66              States
    67  *******************************/
    68  
    69  
    70  /*--------------------
    71          Active
    72  ---------------------*/
    73  
    74  .ui.input input:active,
    75  .ui.input.down input {
    76    border-color: rgba(0, 0, 0, 0.3);
    77    background: #fafafa;
    78    color: rgba(0, 0, 0, 0.8);
    79    box-shadow: none;
    80  }
    81  
    82  /*--------------------
    83         Loading
    84  ---------------------*/
    85  
    86  .ui.loading.loading.input > i.icon:before {
    87    position: absolute;
    88    content: '';
    89    top: 50%;
    90    left: 50%;
    91    margin: -0.64285em 0em 0em -0.64285em;
    92    width: 1.2857em;
    93    height: 1.2857em;
    94    border-radius: 500rem;
    95    border: 0.2em solid rgba(0, 0, 0, 0.1);
    96  }
    97  .ui.loading.loading.input > i.icon:after {
    98    position: absolute;
    99    content: '';
   100    top: 50%;
   101    left: 50%;
   102    margin: -0.64285em 0em 0em -0.64285em;
   103    width: 1.2857em;
   104    height: 1.2857em;
   105    -webkit-animation: button-spin 0.6s linear;
   106            animation: button-spin 0.6s linear;
   107    -webkit-animation-iteration-count: infinite;
   108            animation-iteration-count: infinite;
   109    border-radius: 500rem;
   110    border-color: #aaaaaa transparent transparent;
   111    border-style: solid;
   112    border-width: 0.2em;
   113    box-shadow: 0px 0px 0px 1px transparent;
   114  }
   115  
   116  /*--------------------
   117          Focus
   118  ---------------------*/
   119  
   120  .ui.input.focus input,
   121  .ui.input input:focus {
   122    border-color: rgba(39, 41, 43, 0.3);
   123    background: #ffffff;
   124    color: rgba(0, 0, 0, 0.8);
   125    box-shadow: none;
   126  }
   127  .ui.input.focus input input::-webkit-input-placeholder,
   128  .ui.input input:focus input::-webkit-input-placeholder {
   129    color: rgba(0, 0, 0, 0.8);
   130  }
   131  .ui.input.focus input input::-moz-placeholder,
   132  .ui.input input:focus input::-moz-placeholder {
   133    color: rgba(0, 0, 0, 0.8);
   134  }
   135  
   136  /*--------------------
   137          Error
   138  ---------------------*/
   139  
   140  .ui.input.error input {
   141    background-color: #fff0f0;
   142    border-color: #dbb1b1;
   143    color: #d95c5c;
   144    box-shadow: none;
   145  }
   146  
   147  /* Error Placeholder */
   148  .ui.input.error input ::-webkit-input-placeholder {
   149    color: rgba(255, 80, 80, 0.4);
   150  }
   151  .ui.input.error input ::-moz-placeholder {
   152    color: rgba(255, 80, 80, 0.4);
   153  }
   154  
   155  /* Focused Error Placeholder */
   156  .ui.input.error input :focus::-webkit-input-placeholder {
   157    color: rgba(255, 80, 80, 0.7);
   158  }
   159  .ui.input.error input :focus::-moz-placeholder {
   160    color: rgba(255, 80, 80, 0.7);
   161  }
   162  
   163  
   164  /*******************************
   165             Variations
   166  *******************************/
   167  
   168  
   169  /*--------------------
   170        Transparent
   171  ---------------------*/
   172  
   173  .ui.transparent.input input {
   174    border-color: transparent;
   175    background-color: transparent;
   176    padding: 0em;
   177  }
   178  
   179  /* Transparent Icon */
   180  .ui.transparent.icon.input > i.icon {
   181    width: 1.25em;
   182  }
   183  .ui.transparent.icon.input > input {
   184    padding-left: 0em !important;
   185    padding-right: 2em !important;
   186  }
   187  .ui.transparent[class*="left icon"].input > input {
   188    padding-left: 0em !important;
   189    padding-left: 2em !important;
   190  }
   191  
   192  /* Transparent Inverted */
   193  .ui.transparent.inverted.input input::-moz-placeholder {
   194    color: rgba(255, 255, 255, 0.5);
   195  }
   196  .ui.transparent.inverted.input {
   197    color: #ffffff;
   198  }
   199  .ui.transparent.inverted.input input {
   200    color: inherit;
   201  }
   202  
   203  /*--------------------
   204           Icon
   205  ---------------------*/
   206  
   207  .ui.icon.input > i.icon {
   208    cursor: default;
   209    position: absolute;
   210    text-align: center;
   211    top: 0px;
   212    right: 0px;
   213    margin: 0em;
   214    height: 100%;
   215    width: 2.82142em;
   216    opacity: 0.5;
   217    border-radius: 0em 0.2857rem 0.2857rem 0em;
   218    -webkit-transition: opacity 0.3s ease;
   219            transition: opacity 0.3s ease;
   220  }
   221  .ui.icon.input input {
   222    padding-right: 2.82142em !important;
   223  }
   224  .ui.icon.input > i.icon:before,
   225  .ui.icon.input > i.icon:after {
   226    left: 0;
   227    position: absolute;
   228    text-align: center;
   229    top: 50%;
   230    width: 100%;
   231    margin-top: -0.5em;
   232  }
   233  .ui.icon.input > i.link.icon {
   234    cursor: pointer;
   235  }
   236  .ui.icon.input > i.circular.icon {
   237    top: 0.35em;
   238    right: 0.5em;
   239  }
   240  
   241  /* Left Icon Input */
   242  .ui[class*="left icon"].input > i.icon {
   243    right: auto;
   244    left: 1px;
   245    border-radius: 0.2857rem 0em 0em 0.2857rem;
   246  }
   247  .ui[class*="left icon"].input > i.circular.icon {
   248    right: auto;
   249    left: 0.5em;
   250  }
   251  .ui[class*="left icon"].input > input {
   252    padding-left: 2.82142em !important;
   253    padding-right: 1em !important;
   254  }
   255  
   256  /* Focus */
   257  .ui.icon.input > input:focus ~ i.icon {
   258    opacity: 1;
   259  }
   260  
   261  /*--------------------
   262          Labeled
   263  ---------------------*/
   264  
   265  
   266  /* Adjacent Label */
   267  .ui.labeled.input {
   268    display: -webkit-inline-box;
   269    display: -webkit-inline-flex;
   270    display: -ms-inline-flexbox;
   271    display: inline-flex;
   272  }
   273  .ui.labeled.input > .label {
   274    -webkit-box-flex: 0;
   275    -webkit-flex-grow: 0;
   276        -ms-flex-positive: 0;
   277            flex-grow: 0;
   278    margin: 0;
   279    font-size: 1em;
   280  }
   281  .ui.labeled.input > .label:not(.corner) {
   282    padding-top: 0.78571em;
   283    padding-bottom: 0.78571em;
   284  }
   285  
   286  /* Fluid Labeled */
   287  .ui.fluid.labeled.input {
   288    display: -webkit-box;
   289    display: -webkit-flex;
   290    display: -ms-flexbox;
   291    display: flex;
   292  }
   293  
   294  /* Label on Left */
   295  .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
   296    border-left: none;
   297    border-top-left-radius: 0px;
   298    border-bottom-left-radius: 0px;
   299  }
   300  .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
   301    border-top-right-radius: 0px;
   302    border-bottom-right-radius: 0px;
   303  }
   304  
   305  /* Label on Right */
   306  .ui[class*="right labeled"].input > input {
   307    border-right: none;
   308    border-top-right-radius: 0px !important;
   309    border-bottom-right-radius: 0px !important;
   310  }
   311  .ui[class*="right labeled"].input > .label {
   312    border-top-left-radius: 0px;
   313    border-bottom-left-radius: 0px;
   314  }
   315  
   316  /* Corner Label */
   317  .ui.labeled.input .corner.label {
   318    top: 1px;
   319    right: 1px;
   320    font-size: 0.75em;
   321    border-radius: 0em 0.2857rem 0em 0em;
   322  }
   323  .ui.labeled.input input {
   324    padding-right: 2.5em !important;
   325  }
   326  
   327  /* Spacing with corner label */
   328  .ui[class*="corner labeled"].icon.input:not(.left) > input {
   329    padding-right: 3.25em !important;
   330  }
   331  .ui[class*="corner labeled"].icon.input:not(.left) > .icon {
   332    margin-right: 1.25em;
   333  }
   334  
   335  /*--------------------
   336          Action
   337  ---------------------*/
   338  
   339  .ui.action.input {
   340    display: -webkit-inline-box;
   341    display: -webkit-inline-flex;
   342    display: -ms-inline-flexbox;
   343    display: inline-flex;
   344  }
   345  .ui.action.input > .button,
   346  .ui.action.input > .buttons {
   347    -webkit-box-flex: 0;
   348    -webkit-flex-grow: 0;
   349        -ms-flex-positive: 0;
   350            flex-grow: 0;
   351  }
   352  .ui.action.input > .button,
   353  .ui.action.input > .buttons > .button {
   354    padding-top: 0.78571em;
   355    padding-bottom: 0.78571em;
   356    margin: 0;
   357  }
   358  
   359  /* Fluid */
   360  .ui.fluid.action.input {
   361    display: -webkit-box;
   362    display: -webkit-flex;
   363    display: -ms-flexbox;
   364    display: flex;
   365  }
   366  
   367  /* Button on Right */
   368  .ui.action.input:not([class*="left action"]) > input {
   369    border-right: none;
   370    border-top-right-radius: 0px !important;
   371    border-bottom-right-radius: 0px !important;
   372  }
   373  .ui.action.input:not([class*="left action"]) > .button,
   374  .ui.action.input:not([class*="left action"]) > .buttons > .button {
   375    border-top-left-radius: 0px;
   376    border-bottom-left-radius: 0px;
   377  }
   378  
   379  /* Button on Left */
   380  .ui[class*="left action"].input > .button,
   381  .ui[class*="left action"].input > .buttons > .button {
   382    border-top-right-radius: 0px;
   383    border-bottom-right-radius: 0px;
   384  }
   385  .ui[class*="left action"].input > input {
   386    border-left: none;
   387    border-top-left-radius: 0px;
   388    border-bottom-left-radius: 0px;
   389  }
   390  
   391  /*--------------------
   392         Inverted
   393  ---------------------*/
   394  
   395  
   396  /* Standard */
   397  .ui.inverted.input input {
   398    border: none;
   399  }
   400  
   401  /*--------------------
   402          Fluid
   403  ---------------------*/
   404  
   405  .ui.fluid.input {
   406    display: block;
   407  }
   408  
   409  /*--------------------
   410          Size
   411  ---------------------*/
   412  
   413  .ui.mini.input {
   414    font-size: 0.8125rem;
   415  }
   416  .ui.small.input {
   417    font-size: 0.875rem;
   418  }
   419  .ui.input {
   420    font-size: 1rem;
   421  }
   422  .ui.large.input {
   423    font-size: 1.125rem;
   424  }
   425  .ui.big.input {
   426    font-size: 1.25rem;
   427  }
   428  .ui.huge.input {
   429    font-size: 1.375rem;
   430  }
   431  .ui.massive.input {
   432    font-size: 1.5rem;
   433  }
   434  
   435  
   436  /*******************************
   437           Theme Overrides
   438  *******************************/
   439  
   440  
   441  
   442  /*******************************
   443           Site Overrides
   444  *******************************/
   445