github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/elements/list.variables (about)

     1  /*******************************
     2               List
     3  *******************************/
     4  
     5  /*-------------------
     6           View
     7  --------------------*/
     8  
     9  /* List */
    10  @listStyleType: none;
    11  @listStylePosition: outside;
    12  @margin: 1em 0em;
    13  @verticalPadding: 0em;
    14  @horizontalPadding: 0em;
    15  
    16  /* Sub List */
    17  @childListPadding: 0.75em 0em 0.25em 0.5em;
    18  @childListIndent: 1em;
    19  
    20  /* List Item */
    21  @itemVerticalPadding: 0.3em;
    22  @itemHorizontalPadding: 0em;
    23  @itemLineHeight: 1.2;
    24  
    25  /*-------------------
    26        Elements
    27  --------------------*/
    28  
    29  /* Icon */
    30  @iconDistance: 0.3em;
    31  @iconOffset: ((@itemLineHeight - 1rem) / 2);
    32  @iconTransition: color 0.2s ease;
    33  @iconVerticalAlign: top;
    34  @iconContentVerticalAlign: middle;
    35  
    36  /* Image */
    37  @imageDistance: 0.5em;
    38  @imageAlign: middle;
    39  
    40  /* Content */
    41  @contentDistance: 0.5em;
    42  @contentLineHeight: 1.2em;
    43  @contentLineHeightOffset: (@contentLineHeight - 1em) / 2;
    44  @contentVerticalAlign: middle;
    45  
    46  /* Link */
    47  @itemLinkColor: @textColor;
    48  @itemLinkHoverColor: @linkHoverColor;
    49  
    50  /* Linked Icon */
    51  @itemLinkIconColor: @lightTextColor;
    52  @itemLinkIconHoverColor: @textColor;
    53  @invertedIconLinkColor: @invertedLightTextColor;
    54  
    55  /* Header */
    56  @itemHeaderFontFamily: @headerFont;
    57  @itemHeaderFontWeight: bold;
    58  @itemHeaderColor: @textColor;
    59  
    60  /* Description */
    61  @itemDescriptionColor: @textColor;
    62  
    63  /*-------------------
    64          States
    65  --------------------*/
    66  
    67  @disabledColor: @disabledTextColor;
    68  @invertedDisabledColor: @invertedDisabledTextColor;
    69  
    70  /*-------------------
    71        Variations
    72  --------------------*/
    73  
    74  /* Float */
    75  @floatDistance: 1em;
    76  @leftFloatMargin: 0em @floatDistance 0em 0em;
    77  @rightFloatMargin: 0em 0em 0em @floatDistance;
    78  
    79  /* Horizontal */
    80  @horizontalSpacing: 1em;
    81  @horizontalIconDistance: 0.25em;
    82  
    83  /* Inverted */
    84  @invertedListIconColor: @invertedLightTextColor;
    85  @invertedHeaderColor: @invertedTextColor;
    86  @invertedDescriptionColor: @invertedLightTextColor;
    87  @invertedItemLinkColor: @invertedTextColor;
    88  @invertedItemLinkHoverColor: @linkHoverColor;
    89  
    90  /* Link List */
    91  @linkListItemColor: @unselectedTextColor;
    92  @linkListItemHoverColor: @hoveredTextColor;
    93  @linkListItemDownColor: @pressedTextColor;
    94  @linkListItemActiveColor: @selectedTextColor;
    95  @linkListTransition:
    96    0.2s color @defaultEasing
    97  ;
    98  
    99  /* Inverted Link List */
   100  @invertedLinkListItemColor: @invertedUnselectedTextColor;
   101  @invertedLinkListItemHoverColor: @invertedHoveredTextColor;
   102  @invertedLinkListItemDownColor: @invertedPressedTextColor;
   103  @invertedLinkListItemActiveColor: @invertedSelectedTextColor;
   104  
   105  /* Selection List */
   106  @selectionListItemMargin: 0em;
   107  @selectionListItemBorderRadius: 0.5em;
   108  @selectionListItemVerticalPadding: 0.5em;
   109  @selectionListItemHorizontalPadding: 0.5em;
   110  @selectionListTransition:
   111    0.2s color @defaultEasing,
   112    0.2s padding-left @defaultEasing,
   113    0.2s background-color @defaultEasing
   114  ;
   115  
   116  /* Selection List States */
   117  @selectionListBackground: transparent;
   118  @selectionListColor: @unselectedTextColor;
   119  @selectionListHoverBackground: @subtleTransparentBlack;
   120  @selectionListHoverColor: @hoveredTextColor;
   121  @selectionListDownBackground: @transparentBlack;
   122  @selectionListDownColor: @pressedTextColor;
   123  @selectionListActiveBackground: @transparentBlack;
   124  @selectionListActiveColor: @selectedTextColor;
   125  
   126  /* Inverted Selection List */
   127  @invertedSelectionListBackground: transparent;
   128  @invertedSelectionListColor: @invertedUnselectedTextColor;
   129  @invertedSelectionListHoverBackground: @subtleTransparentWhite;
   130  @invertedSelectionListHoverColor: @invertedHoveredTextColor;
   131  @invertedSelectionListDownBackground: @transparentWhite;
   132  @invertedSelectionListDownColor: @invertedPressedTextColor;
   133  @invertedSelectionListActiveBackground: @transparentWhite;
   134  @invertedSelectionListActiveColor: @invertedSelectedTextColor;
   135  
   136  /* Animated List */
   137  @animatedListTransition:
   138    0.2s color ease,
   139    0.2s padding-left ease,
   140    0.2s background-color ease
   141  ;
   142  @animatedListIndent: 1em;
   143  
   144  /* Bulleted */
   145  @bulletDistance: 1rem;
   146  @bulletOffset: -1rem;
   147  
   148  @bulletOpacity: 1;
   149  @bulletCharacter: '•';
   150  @bulletColor: @textColor;
   151  @bulletVerticalAlign: top;
   152  @bulletChildDistance: @bulletDistance;
   153  
   154  /* Horizontal Bullets */
   155  @horizontalBulletSpacing: 1.5rem;
   156  
   157  /* Ordered List */
   158  @orderedCountName: ordered;
   159  @orderedCountContent: counters(ordered, ".") " ";
   160  @orderedCountColor: @textColor;
   161  @orderedCountDistance: 1.25rem;
   162  @orderedCountOpacity: 0.8;
   163  @orderedCountTextAlign: right;
   164  @orderedCountVerticalAlign: middle;
   165  
   166  @orderedChildCountDistance: 1em;
   167  @orderedChildCountOffset: -2em;
   168  
   169  /* Horizontal Ordereded */
   170  @horizontalOrderedCountDistance: 0.5em;
   171  
   172  /* Divided */
   173  @dividedBorderWidth: 1px;
   174  @dividedBorder: @dividedBorderWidth solid @borderColor;
   175  @dividedInvertedBorderColor: @whiteBorderColor;
   176  @dividedChildListBorder: none;
   177  @dividedChildItemBorder: none;
   178  
   179  /* Divided Horizontal */
   180  @horizontalDividedSpacing: (@horizontalSpacing / 2);
   181  @horizontalDividedLineHeight: 0.6;
   182  
   183  /* Divided */
   184  @celledBorderWidth: 1px;
   185  @celledBorder: @celledBorderWidth solid @borderColor;
   186  @celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
   187  @celledHorizontalPadding: 0.5em;
   188  @celledChildListBorder: none;
   189  @celledChildItemBorder: none;
   190  
   191  /* Divided Horizontal */
   192  @horizontalCelledSpacing: (@horizontalSpacing / 2);
   193  @horizontalCelledLineHeight: 0.6;
   194  
   195  /* Relaxed */
   196  @relaxedVerticalPadding: 0.5rem;
   197  @relaxedHeaderMargin: 0.25rem;
   198  @relaxedHorizontalPadding: 1.25rem;
   199  
   200  /* Very Relaxed */
   201  @veryRelaxedVerticalPadding: 1rem;
   202  @veryRelaxedHeaderMargin: 0.5rem;
   203  @veryRelaxedHorizontalPadding: 2rem;
   204