github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/collections/form.less (about)

     1  /*!
     2   * # Semantic UI - Form
     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    : 'collection';
    17  @element : 'form';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  
    22  /*******************************
    23              Elements
    24  *******************************/
    25  
    26  /*--------------------
    27          Form
    28  ---------------------*/
    29  
    30  .ui.form {
    31    position: relative;
    32    max-width: 100%;
    33  }
    34  
    35  /*--------------------
    36          Content
    37  ---------------------*/
    38  
    39  .ui.form > p {
    40    margin: @paragraphMargin;
    41  }
    42  
    43  /*--------------------
    44          Field
    45  ---------------------*/
    46  
    47  .ui.form .fields .field,
    48  .ui.form .field {
    49    clear: both;
    50    margin: @fieldMargin;
    51  }
    52  .ui.form .fields:last-child,
    53  .ui.form .field:last-child {
    54    margin-bottom: 0em;
    55  }
    56  
    57  /*--------------------
    58          Labels
    59  ---------------------*/
    60  
    61  .ui.form .field > label {
    62    display: block;
    63    margin: @labelMargin;
    64    color: @labelColor;
    65    font-size: @labelFontSize;
    66    font-weight: @labelFontWeight;
    67    text-transform: @labelTextTransform;
    68  }
    69  .ui.form .grouped.fields > label {
    70    margin: @groupedLabelMargin;
    71    color: @groupedLabelColor;
    72    font-size: @groupedLabelFontSize;
    73    font-weight: @groupedLabelFontWeight;
    74    text-transform: @groupedLabelTextTransform;
    75  }
    76  .ui.form .inline.fields > label {
    77    display: inline-block;
    78    vertical-align: middle;
    79  
    80    margin: @inlineLabelMargin;
    81    color: @inlineLabelColor;
    82    font-size: @inlineLabelFontSize;
    83    font-weight: @inlineLabelFontWeight;
    84    text-transform: @inlineLabelTextTransform;
    85  }
    86  
    87  /*--------------------
    88      Standard Inputs
    89  ---------------------*/
    90  
    91  
    92  .ui.form textarea,
    93  .ui.form input:not([type]),
    94  .ui.form input[type="date"],
    95  .ui.form input[type="datetime-local"],
    96  .ui.form input[type="email"],
    97  .ui.form input[type="number"],
    98  .ui.form input[type="password"],
    99  .ui.form input[type="search"],
   100  .ui.form input[type="tel"],
   101  .ui.form input[type="time"],
   102  .ui.form input[type="text"],
   103  .ui.form input[type="url"],
   104  .ui.form .ui.input {
   105    width: 100%;
   106    vertical-align: top;
   107  }
   108  
   109  .ui.form input:not([type]),
   110  .ui.form input[type="date"],
   111  .ui.form input[type="datetime-local"],
   112  .ui.form input[type="email"],
   113  .ui.form input[type="number"],
   114  .ui.form input[type="password"],
   115  .ui.form input[type="search"],
   116  .ui.form input[type="tel"],
   117  .ui.form input[type="time"],
   118  .ui.form input[type="text"],
   119  .ui.form input[type="url"] {
   120    font-family: @inputFont;
   121    margin: 0em;
   122    outline: none;
   123    -webkit-appearance: none;
   124    tap-highlight-color:  rgba(255, 255, 255, 0);
   125  
   126    line-height: @inputLineHeight;
   127    padding: @inputPadding;
   128    font-size: @inputFontSize;
   129  
   130    background: @inputBackground;
   131    border: @inputBorder;
   132    color: @inputColor;
   133    border-radius: @inputBorderRadius;
   134    box-shadow: @inputBoxShadow;
   135    transition: @inputTransition;
   136  }
   137  
   138  
   139  .ui.textarea,
   140  .ui.form textarea {
   141    margin: 0em;
   142    -webkit-appearance: none;
   143    tap-highlight-color:  rgba(255, 255, 255, 0);
   144  
   145    padding: @textAreaPadding;
   146    font-size: @textAreaFontSize;
   147    background: @textAreaBackground;
   148    border: @textAreaBorder;
   149    outline: none;
   150    color: @inputColor;
   151    border-radius: @inputBorderRadius;
   152    box-shadow: @inputBoxShadow;
   153    transition: @textAreaTransition;
   154    font-size: @textAreaFontSize;
   155    height: @textAreaHeight;
   156    min-height: @textAreaMinHeight;
   157    max-height: @textAreaMaxHeight;
   158    line-height: @textAreaLineHeight;
   159    resize: @textAreaResize;
   160  }
   161  
   162  .ui.form textarea,
   163  .ui.form input[type="checkbox"] {
   164    vertical-align: @checkboxVerticalAlign;
   165  }
   166  
   167  /*--------------------------
   168    Input w/ attached Button
   169  ---------------------------*/
   170  
   171  .ui.form input.attached {
   172    width: auto;
   173  }
   174  
   175  
   176  /*--------------------
   177       Basic Select
   178  ---------------------*/
   179  
   180  .ui.form select {
   181    display: block;
   182    height: auto;
   183    width: 100%;
   184    background: @selectBackground;
   185    border: @selectBorder;
   186    border-radius: @selectBorderRadius;
   187    box-shadow: @selectBoxShadow;
   188    padding: @selectPadding;
   189    color: @selectColor;
   190    transition: @selectTransition;
   191  }
   192  
   193  /*--------------------
   194         Dropdown
   195  ---------------------*/
   196  
   197  .ui.form .field > .selection.dropdown {
   198    width: 100%;
   199  }
   200  .ui.form .field > .selection.dropdown > .dropdown.icon {
   201    float: right;
   202  }
   203  
   204  .ui.form .inline.field > .selection.dropdown {
   205    width: auto;
   206  }
   207  .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
   208    float: none;
   209  }
   210  
   211  
   212  /*--------------------
   213         Dividers
   214  ---------------------*/
   215  
   216  .ui.form .divider {
   217    clear: both;
   218    margin: @dividerMargin;
   219  }
   220  
   221  
   222  /*--------------------
   223     Types of Messages
   224  ---------------------*/
   225  
   226  .ui.form .success.message,
   227  .ui.form .warning.message,
   228  .ui.form .error.message {
   229    display: none;
   230  }
   231  
   232  /* Assumptions */
   233  .ui.form .message:first-child {
   234    margin-top: 0px;
   235  }
   236  
   237  /*--------------------
   238     Validation Prompt
   239  ---------------------*/
   240  
   241  .ui.form .field .prompt.label {
   242    white-space: nowrap;
   243  }
   244  .ui.form .inline.field .prompt {
   245    margin: @inlineValidationMargin;
   246  }
   247  .ui.form .inline.field .prompt:before {
   248    margin-top: @inlineValidationArrowOffset;
   249    bottom: auto;
   250    right: auto;
   251    top: 50%;
   252    left: 0em;
   253  }
   254  
   255  
   256  /*******************************
   257              States
   258  *******************************/
   259  
   260  
   261  /*--------------------
   262        Placeholder
   263  ---------------------*/
   264  
   265  /* browsers require these rules separate */
   266  .ui.form ::-webkit-input-placeholder {
   267    color: @inputPlaceholderColor;
   268  }
   269  .ui.form ::-moz-placeholder {
   270    color: @inputPlaceholderColor;
   271  }
   272  .ui.form :focus::-webkit-input-placeholder {
   273    color: @inputPlaceholderFocusColor;
   274  }
   275  .ui.form :focus::-moz-placeholder {
   276    color: @inputPlaceholderFocusColor;
   277  }
   278  
   279  /* Error Placeholder */
   280  .ui.form .error ::-webkit-input-placeholder {
   281    color: @inputErrorPlaceholderColor;
   282  }
   283  .ui.form .error ::-moz-placeholder {
   284    color: @inputErrorPlaceholderColor;
   285  }
   286  .ui.form .error :focus::-webkit-input-placeholder {
   287    color: @inputErrorPlaceholderFocusColor;
   288  }
   289  .ui.form .error :focus::-moz-placeholder {
   290    color: @inputErrorPlaceholderFocusColor;
   291  }
   292  
   293  /*--------------------
   294          Focus
   295  ---------------------*/
   296  
   297  .ui.form input:not([type]):focus,
   298  .ui.form input[type="date"]:focus,
   299  .ui.form input[type="datetime-local"]:focus,
   300  .ui.form input[type="email"]:focus,
   301  .ui.form input[type="number"]:focus,
   302  .ui.form input[type="password"]:focus,
   303  .ui.form input[type="search"]:focus,
   304  .ui.form input[type="tel"]:focus,
   305  .ui.form input[type="time"]:focus,
   306  .ui.form input[type="text"]:focus,
   307  .ui.form input[type="url"]:focus {
   308    color: @inputFocusColor;
   309    border-color: @inputFocusBorderColor;
   310    border-radius: @inputFocusBorderRadius;
   311    background: @inputFocusBackground;
   312    box-shadow: @inputFocusBoxShadow;
   313  }
   314  .ui.form textarea:focus {
   315    color: @textAreaFocusColor;
   316    border-color: @textAreaFocusBorderColor;
   317    border-radius: @textAreaFocusBorderRadius;
   318    background: @textAreaFocusBackground;
   319    box-shadow: @textAreaFocusBoxShadow;
   320    -webkit-appearance: none;
   321  }
   322  
   323  /*--------------------
   324          Success
   325  ---------------------*/
   326  
   327  /* On Form */
   328  .ui.form.success .success.message {
   329    display: block;
   330  }
   331  
   332  /*--------------------
   333          Error
   334  ---------------------*/
   335  
   336  /* On Form */
   337  .ui.form.warning .warning.message {
   338    display: block;
   339  }
   340  
   341  /*--------------------
   342          Warning
   343  ---------------------*/
   344  
   345  /* On Form */
   346  .ui.form.error .error.message {
   347    display: block;
   348  }
   349  
   350  /* On Field(s) */
   351  .ui.form .fields.error .field label,
   352  .ui.form .field.error label,
   353  .ui.form .fields.error .field .input,
   354  .ui.form .field.error .input {
   355    color: @formErrorColor;
   356  }
   357  
   358  .ui.form .fields.error .field .corner.label,
   359  .ui.form .field.error .corner.label {
   360    border-color: @formErrorColor;
   361    color: @white;
   362  }
   363  
   364  .ui.form .fields.error .field textarea,
   365  .ui.form .fields.error .field select,
   366  .ui.form .fields.error .field input:not([type]),
   367  .ui.form .fields.error .field input[type="date"],
   368  .ui.form .fields.error .field input[type="datetime-local"],
   369  .ui.form .fields.error .field input[type="email"],
   370  .ui.form .fields.error .field input[type="number"],
   371  .ui.form .fields.error .field input[type="password"],
   372  .ui.form .fields.error .field input[type="search"],
   373  .ui.form .fields.error .field input[type="tel"],
   374  .ui.form .fields.error .field input[type="time"],
   375  .ui.form .fields.error .field input[type="text"],
   376  .ui.form .fields.error .field input[type="url"],
   377  .ui.form .field.error textarea,
   378  .ui.form .field.error select,
   379  .ui.form .field.error input:not([type]),
   380  .ui.form .field.error input[type="date"],
   381  .ui.form .field.error input[type="datetime-local"],
   382  .ui.form .field.error input[type="email"],
   383  .ui.form .field.error input[type="number"],
   384  .ui.form .field.error input[type="password"],
   385  .ui.form .field.error input[type="search"],
   386  .ui.form .field.error input[type="tel"],
   387  .ui.form .field.error input[type="time"],
   388  .ui.form .field.error input[type="text"],
   389  .ui.form .field.error input[type="url"] {
   390    background: @formErrorBackground;
   391    border-color: @formErrorBorder;
   392    color: @formErrorColor;
   393    border-radius: @inputErrorBorderRadius;
   394    box-shadow: @inputErrorBoxShadow;
   395  }
   396  .ui.form .field.error textarea:focus,
   397  .ui.form .field.error select:focus,
   398  .ui.form .field.error input:not([type]):focus,
   399  .ui.form .field.error input[type="date"]:focus,
   400  .ui.form .field.error input[type="datetime-local"]:focus,
   401  .ui.form .field.error input[type="email"]:focus,
   402  .ui.form .field.error input[type="number"]:focus,
   403  .ui.form .field.error input[type="password"]:focus,
   404  .ui.form .field.error input[type="search"]:focus,
   405  .ui.form .field.error input[type="tel"]:focus,
   406  .ui.form .field.error input[type="time"]:focus,
   407  .ui.form .field.error input[type="text"]:focus,
   408  .ui.form .field.error input[type="url"]:focus {
   409    background: @inputErrorFocusBackground;
   410    border-color: @inputErrorFocusBorder;
   411    color: @inputErrorFocusColor;
   412  
   413    -webkit-appearance: none;
   414    box-shadow: @inputErrorFocusBoxShadow;
   415  }
   416  
   417  /* Preserve Native Select Stylings */
   418  .ui.form .field.error select {
   419    -webkit-appearance: menulist-button;
   420  }
   421  
   422  /*------------------
   423      Dropdown Error
   424  --------------------*/
   425  
   426  .ui.form .fields.error .field .ui.dropdown,
   427  .ui.form .fields.error .field .ui.dropdown .item,
   428  .ui.form .field.error .ui.dropdown,
   429  .ui.form .field.error .ui.dropdown .text,
   430  .ui.form .field.error .ui.dropdown .item {
   431    background: @formErrorBackground;
   432    color: @formErrorColor;
   433  }
   434  .ui.form .fields.error .field .ui.dropdown,
   435  .ui.form .field.error .ui.dropdown {
   436    border-color: @formErrorBorder !important;
   437  }
   438  .ui.form .fields.error .field .ui.dropdown:hover,
   439  .ui.form .field.error .ui.dropdown:hover {
   440    border-color: @formErrorBorder !important;
   441  }
   442  .ui.form .fields.error .field .ui.dropdown:hover .menu,
   443  .ui.form .field.error .ui.dropdown:hover .menu {
   444    border-color: @formErrorBorder;
   445  }
   446  /* Hover */
   447  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
   448  .ui.form .field.error .ui.dropdown .menu .item:hover {
   449    background-color: @dropdownErrorHoverBackground;
   450  }
   451  /* Active */
   452  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
   453  .ui.form .field.error .ui.dropdown .menu .active.item {
   454    background-color: @dropdownErrorActiveBackground !important;
   455  }
   456  
   457  /*--------------------
   458      Checkbox Error
   459  ---------------------*/
   460  
   461  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
   462  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
   463  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
   464  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
   465    color: @formErrorColor;
   466  }
   467  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
   468  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
   469  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
   470  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
   471    background: @formErrorBackground;
   472    border-color: @formErrorBorder;
   473  }
   474  .ui.form .fields.error .field .checkbox label:after,
   475  .ui.form .field.error .checkbox label:after,
   476  .ui.form .fields.error .field .checkbox .box:after,
   477  .ui.form .field.error .checkbox .box:after {
   478    color: @formErrorColor;
   479  }
   480  
   481  /*--------------------
   482         Disabled
   483  ---------------------*/
   484  
   485  .ui.form .field :disabled,
   486  .ui.form .field.disabled {
   487    opacity: 0.5;
   488  }
   489  .ui.form .field.disabled label {
   490    opacity: 0.5;
   491  }
   492  .ui.form .field.disabled :disabled {
   493    opacity: 1;
   494  }
   495  
   496  
   497  /*--------------
   498      Loading
   499  ---------------*/
   500  
   501  .ui.loading.form {
   502    position: relative;
   503    cursor: default;
   504    point-events: none;
   505    text-shadow: none !important;
   506    color: transparent !important;
   507    transition: all 0s linear;
   508    z-index: 100;
   509  }
   510  .ui.loading.form:before {
   511    position: absolute;
   512    content: '';
   513    top: 0%;
   514    left: 0%;
   515    background: @loaderDimmerColor;
   516    width: 100%;
   517    height: 100%;
   518    z-index: @loaderDimmerZIndex;
   519  }
   520  .ui.loading.form:after {
   521    position: absolute;
   522    content: '';
   523    top: 50%;
   524    left: 50%;
   525  
   526    margin: @loaderMargin;
   527    width: @loaderSize;
   528    height: @loaderSize;
   529  
   530    animation: form-spin @loaderSpeed linear;
   531    animation-iteration-count: infinite;
   532  
   533    border-radius: @circularRadius;
   534  
   535    border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
   536    border-style: solid;
   537    border-width: @loaderLineWidth;
   538  
   539    box-shadow: 0px 0px 0px 1px transparent;
   540    visibility: visible;
   541    z-index: @loaderLineZIndex;
   542  }
   543  
   544  @keyframes form-spin {
   545    from {
   546      transform: rotate(0deg);
   547    }
   548    to {
   549      transform: rotate(360deg);
   550    }
   551  }
   552  
   553  
   554  /*******************************
   555           Element Types
   556  *******************************/
   557  
   558  /*--------------------
   559       Required Field
   560  ---------------------*/
   561  
   562  .ui.form .required.fields:not(.grouped) > .field > label:after,
   563  .ui.form .required.fields.grouped > label:after,
   564  .ui.form .required.field > label:after,
   565  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
   566  .ui.form .required.field > .checkbox:after {
   567    margin: @requiredMargin;
   568    content: @requiredContent;
   569    color: @requiredColor;
   570  }
   571  
   572  .ui.form .required.fields:not(.grouped) > .field > label:after,
   573  .ui.form .required.fields.grouped > label:after,
   574  .ui.form .required.field > label:after {
   575    display: inline-block;
   576    vertical-align: top;
   577  }
   578  
   579  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
   580  .ui.form .required.field > .checkbox:after {
   581    position: absolute;
   582    top: 0%;
   583    left: 100%;
   584  }
   585  
   586  
   587  /*******************************
   588             Variations
   589  *******************************/
   590  
   591  
   592  /*--------------------
   593      Inverted Colors
   594  ---------------------*/
   595  
   596  .ui.inverted.form label,
   597  .ui.form .inverted.segment label,
   598  .ui.form .inverted.segment .ui.checkbox label,
   599  .ui.form .inverted.segment .ui.checkbox .box,
   600  .ui.inverted.form .ui.checkbox label,
   601  .ui.inverted.form .ui.checkbox .box {
   602    color: @invertedLabelColor;
   603  }
   604  
   605  /*--------------------
   606       Field Groups
   607  ---------------------*/
   608  
   609  /* Grouped Vertically */
   610  .ui.form .grouped.fields {
   611    margin: @groupedMargin;
   612  }
   613  .ui.form .grouped.fields:last-child {
   614    margin-bottom: 0em;
   615  }
   616  .ui.form .grouped.fields > label {
   617    font-size: @groupedLabelFontSize;
   618  }
   619  .ui.form .grouped.fields .field {
   620    display: block;
   621    float: none;
   622    margin: @groupedFieldMargin;
   623    padding: 0em;
   624  }
   625  
   626  /*--------------------
   627          Fields
   628  ---------------------*/
   629  
   630  /* Split fields */
   631  .ui.form .fields {
   632    clear: both;
   633  }
   634  .ui.form .fields:after {
   635    content: ' ';
   636    display: block;
   637    clear: both;
   638    visibility: hidden;
   639    line-height: 0;
   640    height: 0;
   641  }
   642  .ui.form .fields > .field {
   643    clear: none;
   644    float: left;
   645    padding-left: (@gutterWidth / 2);
   646    padding-right: (@gutterWidth / 2);
   647  }
   648  .ui.form .fields > .field:first-child {
   649    border-left: none;
   650    box-shadow: none;
   651  }
   652  
   653  /* Other Combinations */
   654  .ui.form .two.fields > .fields,
   655  .ui.form .two.fields > .field {
   656    width: @twoColumn;
   657  }
   658  .ui.form .three.fields > .fields,
   659  .ui.form .three.fields > .field {
   660    width: @threeColumn;
   661  }
   662  .ui.form .four.fields > .fields,
   663  .ui.form .four.fields > .field {
   664    width: @fourColumn;
   665  }
   666  .ui.form .five.fields > .fields,
   667  .ui.form .five.fields > .field {
   668    width: @fiveColumn;
   669  }
   670  .ui.form .six.fields > .fields,
   671  .ui.form .six.fields > .field {
   672    width: @sixColumn;
   673  }
   674  .ui.form .seven.fields > .fields,
   675  .ui.form .seven.fields > .field {
   676    width: @sevenColumn;
   677  }
   678  .ui.form .eight.fields > .fields,
   679  .ui.form .eight.fields > .field {
   680    width: @eightColumn;
   681  }
   682  .ui.form .nine.fields > .fields,
   683  .ui.form .nine.fields > .field {
   684    width: @nineColumn;
   685  }
   686  .ui.form .ten.fields > .fields,
   687  .ui.form .ten.fields > .field {
   688    width: @tenColumn;
   689  }
   690  
   691  /* Swap to full width on mobile */
   692  @media only screen and (max-width : @largestMobileScreen) {
   693    .ui.form .two.fields > .fields,
   694    .ui.form .two.fields > .field,
   695    .ui.form .three.fields > .fields,
   696    .ui.form .three.fields > .field,
   697    .ui.form .four.fields > .fields,
   698    .ui.form .four.fields > .field,
   699    .ui.form .five.fields > .fields,
   700    .ui.form .five.fields > .field,
   701    .ui.form .six.fields > .fields,
   702    .ui.form .six.fields > .field,
   703    .ui.form .seven.fields > .fields,
   704    .ui.form .seven.fields > .field,
   705    .ui.form .eight.fields > .fields,
   706    .ui.form .eight.fields > .field,
   707    .ui.form .nine.fields > .fields,
   708    .ui.form .nine.fields > .field,
   709    .ui.form .ten.fields > .fields,
   710    .ui.form .ten.fields > .field {
   711      width: @oneColumn !important;
   712      margin: @fieldMargin;
   713      padding-left: 0%;
   714      padding-right: 0%;
   715    }
   716  }
   717  
   718  .ui.form .fields .field:first-child {
   719    padding-left: 0%;
   720  }
   721  .ui.form .fields .field:last-child {
   722    padding-right: 0%;
   723  }
   724  
   725  
   726  /* Sizing Combinations */
   727  
   728  .ui.form .fields .wide.field {
   729    width: @oneWide;
   730    padding-left: (@gutterWidth / 2);
   731    padding-right: (@gutterWidth / 2);
   732  }
   733  .ui.form .fields .wide.field:first-child {
   734    padding-left: 0%;
   735  }
   736  .ui.form .fields .wide.field:last-child {
   737    padding-right: 0%;
   738  }
   739  
   740  .ui.form .one.wide.field {
   741    width: @oneWide !important;
   742  }
   743  .ui.form .two.wide.field {
   744    width: @twoWide !important;
   745  }
   746  .ui.form .three.wide.field {
   747    width: @threeWide !important;
   748  }
   749  .ui.form .four.wide.field {
   750    width: @fourWide !important;
   751  }
   752  .ui.form .five.wide.field {
   753    width: @fiveWide !important;
   754  }
   755  .ui.form .six.wide.field {
   756    width: @sixWide !important;
   757  }
   758  .ui.form .seven.wide.field {
   759    width: @sevenWide !important;
   760  }
   761  .ui.form .eight.wide.field {
   762    width: @eightWide !important;
   763  }
   764  .ui.form .nine.wide.field {
   765    width: @nineWide !important;
   766  }
   767  .ui.form .ten.wide.field {
   768    width: @tenWide !important;
   769  }
   770  .ui.form .eleven.wide.field {
   771    width: @elevenWide !important;
   772  }
   773  .ui.form .twelve.wide.field {
   774    width: @twelveWide !important;
   775  }
   776  .ui.form .thirteen.wide.field {
   777    width: @thirteenWide !important;
   778  }
   779  .ui.form .fourteen.wide.field {
   780    width: @fourteenWide !important;
   781  }
   782  .ui.form .fifteen.wide.field {
   783    width: @fifteenWide !important;
   784  }
   785  .ui.form .sixteen.wide.field {
   786    width: @sixteenWide !important;
   787  }
   788  
   789  /* Swap to full width on mobile */
   790  @media only screen and (max-width : @largestMobileScreen) {
   791    .ui.form .two.fields > .fields,
   792    .ui.form .two.fields > .field,
   793    .ui.form .three.fields > .fields,
   794    .ui.form .three.fields > .field,
   795    .ui.form .four.fields > .fields,
   796    .ui.form .four.fields > .field,
   797    .ui.form .five.fields > .fields,
   798    .ui.form .five.fields > .field,
   799    .ui.form .fields > .two.wide.field,
   800    .ui.form .fields > .three.wide.field,
   801    .ui.form .fields > .four.wide.field,
   802    .ui.form .fields > .five.wide.field,
   803    .ui.form .fields > .six.wide.field,
   804    .ui.form .fields > .seven.wide.field,
   805    .ui.form .fields > .eight.wide.field,
   806    .ui.form .fields > .nine.wide.field,
   807    .ui.form .fields > .ten.wide.field,
   808    .ui.form .fields > .eleven.wide.field,
   809    .ui.form .fields > .twelve.wide.field,
   810    .ui.form .fields > .thirteen.wide.field,
   811    .ui.form .fields > .fourteen.wide.field,
   812    .ui.form .fields > .fifteen.wide.field,
   813    .ui.form .fields > .sixteen.wide.field {
   814      width: @oneColumn !important;
   815      margin: @fieldMargin;
   816      padding-left: 0%;
   817      padding-right: 0%;
   818    }
   819  }
   820  
   821  /*--------------------
   822      Inline Fields
   823  ---------------------*/
   824  
   825  .ui.form .inline.fields {
   826    margin: @fieldMargin;
   827  }
   828  .ui.form .inline.fields .field {
   829    display: inline-block;
   830    float: none;
   831    margin: @inlineFieldsMargin;
   832    padding: 0em;
   833  }
   834  .ui.form .inline.fields .field > label,
   835  .ui.form .inline.fields .field > p,
   836  .ui.form .inline.fields .field > input,
   837  .ui.form .inline.fields .field > .ui.input,
   838  .ui.form .inline.field > label,
   839  .ui.form .inline.field > p,
   840  .ui.form .inline.field > input,
   841  .ui.form .inline.field > .ui.input {
   842    display: inline-block;
   843    width: auto;
   844  
   845    margin-top: 0em;
   846    margin-bottom: 0em;
   847  
   848    vertical-align: @inlineLabelVerticalAlign;
   849    font-size: @inlineLabelFontSize;
   850  }
   851  .ui.form .inline.fields .field > input,
   852  .ui.form .inline.fields .field > .ui.input,
   853  .ui.form .inline.field > input,
   854  .ui.form .inline.field > .ui.input {
   855    font-size: @inlineLabelFontSize;
   856  }
   857  .ui.form .inline.fields .field > .ui.checkbox label {
   858    padding-left: @inlineCheckboxLabelDistance;
   859  }
   860  
   861  /* Label */
   862  .ui.form .inline.fields .field > :first-child,
   863  .ui.form .inline.field > :first-child {
   864    margin: 0em @labelDistance 0em 0em;
   865  }
   866  .ui.form .inline.fields .field > :only-child,
   867  .ui.form .inline.field > :only-child {
   868    margin: 0em;
   869  }
   870  
   871  
   872  /*--------------------
   873          Sizes
   874  ---------------------*/
   875  
   876  /* Standard */
   877  .ui.small.form {
   878    font-size: @small;
   879  }
   880  
   881  /* Medium */
   882  .ui.form {
   883    font-size: @medium;
   884  }
   885  
   886  /* Large */
   887  .ui.large.form {
   888    font-size: @large;
   889  }
   890  
   891  /* Huge */
   892  .ui.huge.form {
   893    font-size: @huge;
   894  }
   895  
   896  .loadUIOverrides();