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

     1  /*!
     2   * # Semantic UI - Accordion
     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    : 'module';
    17  @element : 'accordion';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22              Accordion
    23  *******************************/
    24  
    25  .ui.accordion,
    26  .ui.accordion .accordion {
    27    max-width: 100%;
    28    font-size: @fontSize;
    29  }
    30  .ui.accordion .accordion {
    31    margin: @childAccordionMargin;
    32    padding: @childAccordionPadding;
    33  }
    34  
    35  /* Title */
    36  .ui.accordion .title,
    37  .ui.accordion .accordion .title {
    38    cursor: pointer;
    39  }
    40  
    41  /* Default Styling */
    42  .ui.accordion .title:not(.ui) {
    43    padding: @titlePadding;
    44    font-family: @titleFont;
    45    font-size: @titleFontSize;
    46    color: @titleColor;
    47  }
    48  
    49  /* Content */
    50  .ui.accordion .title ~ .content,
    51  .ui.accordion .accordion .title ~ .content {
    52    display: none;
    53  }
    54  
    55  /* Default Styling */
    56  .ui.accordion:not(.styled) .title ~ .content:not(.ui),
    57  .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
    58    margin: @contentMargin;
    59    padding: @contentPadding;
    60  }
    61  .ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
    62    padding-bottom: 0em;
    63  }
    64  
    65  /* Arrow */
    66  .ui.accordion .title .dropdown.icon,
    67  .ui.accordion .accordion .title .dropdown.icon {
    68    display: @iconDisplay;
    69    float: @iconFloat;
    70    opacity: @iconOpacity;
    71    width: @iconWidth;
    72    height: @iconHeight;
    73    margin: @iconMargin;
    74    padding: @iconPadding;
    75    font-size: @iconFontSize;
    76    transition: @iconTransition;
    77    vertical-align: @iconVerticalAlign;
    78    transform: @iconTransform;
    79  }
    80  
    81  /*--------------
    82      Coupling
    83  ---------------*/
    84  
    85  /* Menu */
    86  .ui.accordion.menu .item .title {
    87    display: block;
    88    padding: @menuTitlePadding;
    89  }
    90  .ui.accordion.menu .item .title > .dropdown.icon {
    91    float: @menuIconFloat;
    92    margin: @menuIconMargin;
    93    transform: @menuIconTransform;
    94  }
    95  
    96  /* Header */
    97  .ui.accordion .ui.header .dropdown.icon {
    98    font-size: @iconFontSize;
    99    margin: @iconMargin;
   100  }
   101  
   102  /*******************************
   103              States
   104  *******************************/
   105  
   106  .ui.accordion .active.title .dropdown.icon,
   107  .ui.accordion .accordion .active.title .dropdown.icon {
   108    transform: @activeIconTransform;
   109  }
   110  
   111  .ui.accordion.menu .item .active.title > .dropdown.icon {
   112    transform: @activeIconTransform;
   113  }
   114  
   115  /*******************************
   116              Types
   117  *******************************/
   118  
   119  /*--------------
   120       Styled
   121  ---------------*/
   122  
   123  .ui.styled.accordion {
   124    width: @styledWidth;
   125  }
   126  
   127  .ui.styled.accordion,
   128  .ui.styled.accordion .accordion {
   129    border-radius: @styledBorderRadius;
   130    background: @styledBackground;
   131    box-shadow: @styledBoxShadow;
   132  }
   133  .ui.styled.accordion .title,
   134  .ui.styled.accordion .accordion .title {
   135    margin: @styledTitleMargin;
   136    padding: @styledTitlePadding;
   137    color: @styledTitleColor;
   138    font-weight: @styledTitleFontWeight;
   139    border-top: @styledTitleBorder;
   140    transition: @styledTitleTransition;
   141  }
   142  .ui.styled.accordion > .title:first-child,
   143  .ui.styled.accordion .accordion .title:first-child {
   144    border-top: none;
   145  }
   146  
   147  
   148  /* Content */
   149  .ui.styled.accordion .content,
   150  .ui.styled.accordion .accordion .content {
   151    margin: @styledContentMargin;
   152    padding: @styledContentPadding;
   153  }
   154  .ui.styled.accordion .accordion .content {
   155    padding: @styledChildContentMargin;
   156    padding: @styledChildContentPadding;
   157  }
   158  
   159  
   160  /* Hover */
   161  .ui.styled.accordion .title:hover,
   162  .ui.styled.accordion .active.title,
   163  .ui.styled.accordion .accordion .title:hover,
   164  .ui.styled.accordion .accordion .active.title {
   165    background: @styledTitleHoverBackground;
   166    color: @styledTitleHoverColor;
   167  }
   168  .ui.styled.accordion .accordion .title:hover,
   169  .ui.styled.accordion .accordion .active.title {
   170    background: @styledHoverChildTitleBackground;
   171    color: @styledHoverChildTitleColor;
   172  }
   173  
   174  
   175  /* Active */
   176  .ui.styled.accordion .active.title {
   177    background: @styledActiveTitleBackground;
   178    color: @styledActiveTitleColor;
   179  }
   180  .ui.styled.accordion .accordion .active.title {
   181    background: @styledActiveChildTitleBackground;
   182    color: @styledActiveChildTitleColor;
   183  }
   184  
   185  
   186  /*******************************
   187              States
   188  *******************************/
   189  
   190  /*--------------
   191       Active
   192  ---------------*/
   193  
   194  .ui.accordion .active.content,
   195  .ui.accordion .accordion .active.content {
   196    display: block;
   197  }
   198  
   199  /*******************************
   200             Variations
   201  *******************************/
   202  
   203  /*--------------
   204       Fluid
   205  ---------------*/
   206  
   207  .ui.fluid.accordion,
   208  .ui.fluid.accordion .accordion {
   209    width: 100%;
   210  }
   211  
   212  /*--------------
   213       Inverted
   214  ---------------*/
   215  
   216  .ui.inverted.accordion .title:not(.ui) {
   217    color: @invertedTitleColor;
   218  }
   219  
   220  .loadUIOverrides();