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

     1  /*!
     2   * # Semantic UI - Search
     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              Theme
    15  *******************************/
    16  
    17  @type    : 'module';
    18  @element : 'search';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23               Search
    24  *******************************/
    25  
    26  .ui.search {
    27    position: relative;
    28  }
    29  
    30  .ui.search > .prompt {
    31    margin: 0em;
    32    outline: none;
    33    -webkit-appearance: none;
    34    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    35  
    36    text-shadow: none;
    37    font-style: normal;
    38    font-weight: normal;
    39  
    40    line-height: @promptLineHeight;
    41    padding: @promptPadding;
    42    font-size: @promptFontSize;
    43  
    44    background: @promptBackground;
    45    border: @promptBorder;
    46    color: @promptColor;
    47    box-shadow: @promptBoxShadow;
    48    transition: @promptTransition;
    49  }
    50  
    51  .ui.search .prompt {
    52    border-radius: @promptBorderRadius;
    53  }
    54  
    55  
    56  /*--------------
    57       Icon
    58  ---------------*/
    59  
    60  .ui.search .prompt ~ .search.icon {
    61    cursor: pointer;
    62  }
    63  
    64  /*--------------
    65      Results
    66  ---------------*/
    67  
    68  .ui.search > .results {
    69    display: none;
    70  
    71    position: absolute;
    72    top: 100%;
    73    left: 0%;
    74  
    75    background: @resultsBackground;
    76  
    77    margin-top: @resultsDistance;
    78    width: @resultsWidth;
    79  
    80    border-radius: @resultsBorderRadius;
    81    box-shadow: @resultsBoxShadow;
    82    z-index: @resultsZIndex;
    83  }
    84  
    85  /*--------------
    86      Result
    87  ---------------*/
    88  
    89  .ui.search > .results .result {
    90    cursor: pointer;
    91    display: block;
    92    overflow: hidden;
    93    font-size: @resultFontSize;
    94    padding: @resultVerticalPadding @resultHorizontalPadding;
    95    color: @resultTextColor;
    96    line-height: @resultLineHeight;
    97    border-bottom: @resultDivider;
    98  }
    99  .ui.search > .results .result:last-child {
   100    border-bottom: @resultLastDivider;
   101  }
   102  
   103  /* Image */
   104  .ui.search > .results .result .image {
   105    float: @resultImageFloat;
   106    overflow: hidden;
   107    background: @resultImageBackground;
   108    width: @resultImageWidth;
   109    height: @resultImageHeight;
   110    border-radius: @resultImageBorderRadius;
   111  }
   112  .ui.search > .results .result .image img {
   113    display: block;
   114    width: auto;
   115    height: 100%;
   116  }
   117  
   118  /*--------------
   119        Info
   120  ---------------*/
   121  
   122  .ui.search > .results .result .image + .content {
   123    margin: @resultImageMargin;
   124  }
   125  
   126  .ui.search > .results .result .title {
   127    font-family: @resultTitleFont;
   128    font-weight: @resultTitleFontWeight;
   129    font-size: @resultTitleFontSize;
   130    color: @resultTitleColor;
   131  }
   132  .ui.search > .results .result .description {
   133    margin-top: @resultDescriptionDistance;
   134    font-size: @resultDescriptionFontSize;
   135    color: @resultDescriptionColor;
   136  }
   137  .ui.search > .results .result .price {
   138    float: @resultPriceFloat;
   139    color: @resultPriceColor;
   140  }
   141  
   142  /*--------------
   143      Message
   144  ---------------*/
   145  
   146  .ui.search > .results > .message {
   147    padding: @messageVerticalPadding @messageHorizontalPadding;
   148  }
   149  .ui.search > .results > .message .header {
   150    font-family: @headerFont;
   151    font-size: @messageHeaderFontSize;
   152    font-weight: @messageHeaderFontWeight;
   153    color: @messageHeaderColor;
   154  }
   155  .ui.search > .results > .message .description {
   156    margin-top: @messageDescriptionDistance;
   157    font-size: @messageDescriptionFontSize;
   158    color: @messageDescriptionColor;
   159  }
   160  
   161  /* View All Results */
   162  .ui.search > .results > .action {
   163    display: block;
   164    border-top: @actionBorder;
   165    background: @actionBackground;
   166    padding: @actionPadding;
   167    color: @actionColor;
   168    font-weight: @actionFontWeight;
   169    text-align: @actionAlign;
   170  }
   171  
   172  
   173  /*******************************
   174              States
   175  *******************************/
   176  
   177  /*--------------------
   178         Loading
   179  ---------------------*/
   180  
   181  .ui.loading.search .input > .icon:before {
   182    position: absolute;
   183    content: '';
   184    top: 50%;
   185    left: 50%;
   186  
   187    margin: @loaderMargin;
   188    width: @loaderSize;
   189    height: @loaderSize;
   190  
   191    border-radius: @circularRadius;
   192    border: @loaderLineWidth solid @loaderFillColor;
   193  }
   194  .ui.loading.search .input > .icon:after {
   195    position: absolute;
   196    content: '';
   197    top: 50%;
   198    left: 50%;
   199  
   200    margin: @loaderMargin;
   201    width: @loaderSize;
   202    height: @loaderSize;
   203  
   204    animation: button-spin @loaderSpeed linear;
   205    animation-iteration-count: infinite;
   206  
   207    border-radius: @circularRadius;
   208  
   209    border-color: @loaderLineColor transparent transparent;
   210    border-style: solid;
   211    border-width: @loaderLineWidth;
   212  
   213    box-shadow: 0px 0px 0px 1px transparent;
   214  }
   215  
   216  
   217  /*--------------
   218        Hover
   219  ---------------*/
   220  
   221  .ui.search > .results .result:hover,
   222  .ui.category.search > .results .category .result:hover {
   223    background: @resultHoverBackground;
   224  }
   225  .ui.search .action:hover {
   226    background: @actionHoverBackground;
   227  }
   228  
   229  /*--------------
   230        Active
   231  ---------------*/
   232  
   233  .ui.search > .results .category.active {
   234    background: @categoryActiveBackground;
   235  }
   236  .ui.search > .results .category.active > .name {
   237    color: @categoryNameActiveColor;
   238  }
   239  
   240  .ui.search > .results .result.active,
   241  .ui.category.search > .results .category .result.active {
   242    position: relative;
   243    border-left-color: @resultActiveBorderLeft;
   244    background: @resultActiveBackground;
   245    box-shadow: @resultActiveBoxShadow;
   246  }
   247  .ui.search > .results .result.active .title {
   248    color: @resultActiveTitleColor;
   249  }
   250  .ui.search > .results .result.active .description {
   251    color: @resultActiveDescriptionColor;
   252  }
   253  
   254  /*******************************
   255             Types
   256  *******************************/
   257  
   258  /*--------------
   259      Categories
   260  ---------------*/
   261  
   262  .ui.category.search .results {
   263    width: @categoryResultsWidth;
   264  }
   265  
   266  /* Category */
   267  .ui.category.search > .results .category {
   268    background: @categoryBackground;
   269    box-shadow: @categoryBoxShadow;
   270    border-bottom: @categoryDivider;
   271    transition: @categoryTransition;
   272  }
   273  .ui.category.search > .results .category:last-child {
   274    border-bottom: none;
   275  }
   276  
   277  /* Category Result */
   278  .ui.category.search > .results .category .result {
   279    background: @categoryResultBackground;
   280    margin-left: @categoryNameWidth;
   281    border-left: @categoryResultLeftBorder;
   282    border-bottom: @categoryResultDivider;
   283    transition: @categoryResultTransition;
   284  }
   285  .ui.category.search > .results .category .result:last-child {
   286    border-bottom: @categoryResultLastDivider;
   287  }
   288  
   289  /* Category Result Name */
   290  .ui.category.search > .results .category > .name {
   291    width: @categoryNameWidth;
   292    background: @categoryNameBackground;
   293    font-family: @categoryNameFont;
   294    font-size: @categoryNameFontSize;
   295    float: @categoryNameFontSize;
   296    float: @categoryNameFloat;
   297    padding: @categoryNamePadding;
   298    font-weight: @categoryNameFontWeight;
   299    color: @categoryNameColor;
   300  }
   301  
   302  /*******************************
   303             Variations
   304  *******************************/
   305  
   306  /*-------------------
   307       Left / Right
   308  --------------------*/
   309  
   310  .ui[class*="left aligned"].search > .results {
   311    right: auto;
   312    left: 0%;
   313  }
   314  .ui[class*="right aligned"].search > .results {
   315    right: 0%;
   316    left: auto;
   317  }
   318  
   319  /*--------------
   320      Fluid
   321  ---------------*/
   322  
   323  .ui.fluid.search .results {
   324    width: 100%;
   325  }
   326  
   327  
   328  /*--------------
   329        Sizes
   330  ---------------*/
   331  
   332  .ui.search {
   333    font-size: @medium;
   334  }
   335  .ui.large.search {
   336    font-size: @large;
   337  }
   338  
   339  .loadUIOverrides();