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

     1  /*******************************
     2               Menu
     3  *******************************/
     4  
     5  
     6  /*-------------------
     7      Globals Used
     8  --------------------*/
     9  
    10  // @textColor
    11  // @borderColor
    12  // @invertedUnselectedTextColor
    13  
    14  /*-------------------
    15        Collection
    16  --------------------*/
    17  
    18  @margin: 1rem 0rem;
    19  @verticalPadding: 0.78571em;
    20  @horizontalPadding: 0.95em;
    21  
    22  @background: #FFFFFF;
    23  @itemBackground: none;
    24  
    25  @fontWeight: normal;
    26  @boxShadow:
    27    0px 0px 0px 1px @borderColor,
    28    @subtleShadow
    29  ;
    30  
    31  @borderSize: 0em;
    32  
    33  @transition:
    34    opacity 0.2s ease,
    35    background 0.2s ease,
    36    box-shadow 0.2s ease
    37  ;
    38  @borderRadius: @defaultBorderRadius;
    39  
    40  @dividerSize: 1px;
    41  @dividerBackground: linear-gradient(
    42    rgba(0, 0, 0, 0.05) 0%,
    43    rgba(0, 0, 0, 0.1) 50%,
    44    rgba(0, 0, 0, 0.05) 100%)
    45  ;
    46  
    47  @headerBackground: rgba(0, 0, 0, 0.04);
    48  @headerWeight: bold;
    49  
    50  @textLineHeight: 1.3;
    51  
    52  @transition:
    53    opacity 0.2s ease,
    54    background 0.2s ease,
    55    box-shadow 0.2s ease
    56  ;
    57  
    58  @menuTextColor: @textColor;
    59  
    60  /* Sub Menu */
    61  @subMenuMargin: 0.5em;
    62  @subMenuFontSize: 0.875rem;
    63  @subMenuTextColor: rgba(0, 0, 0, 0.5);
    64  
    65  @subMenuHorizontalPadding: 0.5rem;
    66  @subMenuVerticalPadding: 1.5rem;
    67  
    68  /*--------------
    69      Elements
    70  ---------------*/
    71  
    72  /* Icon */
    73  @iconFloat: none;
    74  @iconMargin: 0em 0.25em 0em 0em;
    75  @iconOpacity: 0.75;
    76  
    77  @dropdownIconFloat: right;
    78  @dropdownIconDistance: 1em;
    79  
    80  @verticalIconFloat: right;
    81  @verticalIconMargin: 0em 0em 0em 0.5em;
    82  
    83  /* Header */
    84  @headerBackground: rgba(0, 0, 0, 0.04);
    85  @headerWeight: bold;
    86  @headerTextTransform: normal;
    87  
    88  /*--------------
    89      Couplings
    90  ---------------*/
    91  
    92  /* Button */
    93  @buttonOffset: -0.05em;
    94  @buttonVerticalPadding: 0.55em;
    95  @buttonSize: 0.875em;
    96  
    97  /* Input */
    98  @inputSize: 1em;
    99  @inputVerticalMargin: -0.6em;
   100  @inputOffset: 0em;
   101  @inputVerticalPadding: 0.4em;
   102  
   103  @smallInputOffset: 0em;
   104  @smallInputVerticalPadding: 0.4em;
   105  
   106  @largeInputOffset: -0.125em;
   107  @largeInputVerticalPadding: 0.6em;
   108  
   109  /* Label */
   110  @labelOffset: -0.15em;
   111  @labelBackground: rgba(0, 0, 0, 0.35);
   112  @labelTextColor: #FFFFFF;
   113  
   114  @labelTextMargin: 0.5em;
   115  @labelVerticalPadding: 0.3em;
   116  @labelHorizontalPadding: 0.8em;
   117  
   118  @labelAndIconFloat: none;
   119  @labelAndIconMargin: 0em 0.5em 0em 0em;
   120  
   121  /* Dropdown */
   122  @dropdownBackground: #FFFFFF;
   123  @dropdownMenuOffset: 0px;
   124  @dropdownPointingDistance: 0px;
   125  
   126  @dropdownTextColor: @textColor;
   127  @dropdownBackgroundHover: @transparentBlack;
   128  @dropdownTextColorHover: @darkTextColor;
   129  @dropdownIconMargin: 0em 0em 0em 1em;
   130  
   131  @dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
   132  @dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
   133  
   134  /* Pointing Arrow */
   135  @arrowSize: 0.6em;
   136  @arrowBorderSize: 1px;
   137  @arrowBorder: @arrowBorderSize solid @solidBorderColor;
   138  @arrowTransition: background @transitionDuration @transitionEasing;
   139  @arrowZIndex: 11;
   140  
   141  @arrowHoverColor: #FAFAFA;
   142  @arrowActiveColor: #F7F7F7;
   143  
   144  @arrowVerticalHoverColor: @arrowHoverColor;
   145  @arrowVerticalActiveColor: @arrowActiveColor;
   146  @arrowVerticalSubMenuColor: @white;
   147  
   148  /*--------------
   149       States
   150  ---------------*/
   151  
   152  @hoverBackground: @subtleTransparentBlack;
   153  @hoverColor: @textColor;
   154  
   155  @pressedBackground: @subtleTransparentBlack;
   156  @pressedColor: @pressedTextColor;
   157  
   158  @activeBackground: @subtleTransparentBlack;
   159  @activeColor: @darkTextColor;
   160  @activeBorderSize: 2px;
   161  @activeFontWeight: normal;
   162  @activeIconOpacity: 1;
   163  
   164  @activeHoverBackground: @hoverBackground;
   165  @subMenuActiveBackground: transparent;
   166  
   167  @loadingBackgroundColor: rgba(255, 255, 255, 0.8);
   168  @loadingImage: "@{imagePath}/loader-large.gif";
   169  @loadingPosition: 50% 50%;
   170  
   171  
   172  /*--------------
   173       Types
   174  ---------------*/
   175  
   176  /* Vertical */
   177  @verticalBackground: #FFFFFF;
   178  @verticalItemBackground: none;
   179  @verticalDividerBackground: linear-gradient(to right,
   180    rgba(0, 0, 0, 0.03) 0%,
   181    rgba(0, 0, 0, 0.1) 1.5em,
   182    rgba(0, 0, 0, 0.03) 100%)
   183  ;
   184  
   185  
   186  /* Secondary */
   187  @secondaryBackground: none;
   188  @secondaryItemBackground: none;
   189  
   190  @secondaryTransition: color 0.2s ease;
   191  
   192  @secondaryBorderRadius: @defaultBorderRadius;
   193  
   194  @secondaryMargin: 0.25em;
   195  @secondaryVerticalMargin: 0.3em;
   196  @secondaryVerticalPadding: 0.5em;
   197  @secondaryHorizontalPadding: 0.8em;
   198  
   199  @secondaryLinkOpacity: 0.8;
   200  
   201  @secondaryHeaderBackground: none transparent;
   202  @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
   203  
   204  @secondaryActiveBackground: @transparentBlack;
   205  @secondaryInvertedActiveBackground: @transparentWhite;
   206  
   207  
   208  /* Pointing */
   209  @secondaryPointingBorderWidth: 3px;
   210  @secondaryPointingVerticalPadding: 0.6em;
   211  @secondaryPointingHorizontalPadding: 0.95em;
   212  
   213  @secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
   214  @secondaryPointingHoverTextColor: @textColor;
   215  
   216  @secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
   217  @secondaryPointingActiveTextColor: @selectedTextColor;
   218  
   219  @secondaryPointingHeaderColor: @darkTextColor;
   220  
   221  /* Tiered */
   222  @tieredActiveItemBackground: #FCFCFC;
   223  @tieredActiveMenuBackground: #FCFCFC;
   224  
   225  @tieredSubMenuTextTransform: normal;
   226  @tieredSubMenuFontWeight: normal;
   227  
   228  @tieredSubMenuColor: @lightTextColor;
   229  
   230  @tieredSubMenuHoverBackground: none transparent;
   231  @tieredSubMenuHoverColor: @hoveredTextColor;
   232  
   233  @tieredSubMenuActiveBackground: none transparent;
   234  @tieredSubMenuActiveColor: @selectedTextColor;
   235  
   236  @tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
   237  
   238  /* Icon */
   239  @iconMenuTextAlign: center;
   240  @iconMenuItemColor: rgba(0, 0, 0, 0.6);
   241  
   242  /* Tabular */
   243  @tabularBorderColor: @solidBorderColor;
   244  @tabularBackgroundColor: #FFFFFF;
   245  @tabularBorderWidth: 1px;
   246  @tabularHorizontalPadding: 1.4em;
   247  @tabularMenuTextColor: @menuTextColor;
   248  
   249  @tabularFluidOffset: 1px;
   250  @tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
   251  
   252  @tabularActiveColor: @selectedTextColor;
   253  @tabularActiveBoxShadow: none;
   254  
   255  @tabularMenuActiveBackground: #FFFFFF;
   256  @tabularActiveWeight: bold;
   257  @tabularBorderRadius: 5px;
   258  
   259  /* Pagination */
   260  @paginationMinWidth: 3em;
   261  @paginationActiveBackground: rgba(0, 0, 0, 0.03);
   262  
   263  /* Labeled Icon */
   264  @labeledIconSize: 1.5em;
   265  @labeledIconMinWidth: 6em;
   266  @labeledIconTextMargin: 0.5em;
   267  
   268  /* Text */
   269  @textMenuTransition: opacity 0.2s ease;
   270  
   271  /*--------------
   272     Variations
   273  ---------------*/
   274  
   275  /* Inverted */
   276  @invertedBackground: @black;
   277  @invertedBoxShadow: none;
   278  @invertedHeaderBackground: rgba(0, 0, 0, 0.3);
   279  
   280  /* Inverted Sub Menu */
   281  @invertedSubMenuBackground: transparent;
   282  @invertedSubMenuColor: @invertedUnselectedTextColor;
   283  
   284  /* Inverted Hover */
   285  @invertedHoverBackground: rgba(255, 255, 255, 0.1);
   286  @invertedHoverColor: @white;
   287  @invertedSubMenuHoverBackground: transparent;
   288  @invertedSubMenuHoverColor: @white;
   289  
   290  /* Pressed */
   291  @invertedMenuPressedBackground: rgba(255, 255, 255, 0.15);
   292  @invertedMenuPressedColor: @white;
   293  
   294  /* Inverted Active */
   295  @invertedActiveBackground: rgba(255, 255, 255, 0.2);
   296  @invertedActiveColor: @white;
   297  @invertedSubMenuActiveBackground: transparent;
   298  @invertedSubMenuActiveColor: @white;
   299  
   300  /* Inverted Secondary */
   301  @secondaryInvertedColor: @invertedLightTextColor;
   302  @secondaryInvertedHoverColor: @invertedSelectedTextColor;
   303  
   304  /* Inverted Menu Divider */
   305  @invertedDividerBackground: linear-gradient(
   306    rgba(255, 255, 255, 0.03) 0%,
   307    rgba(255, 255, 255, 0.1) 50%,
   308    rgba(255, 255, 255, 0.03) 100%)
   309  ;
   310  @invertedVerticalDividerBackground: linear-gradient(to right,
   311    rgba(255, 255, 255, 0.03) 0%,
   312    rgba(255, 255, 255, 0.1) 50%,
   313    rgba(255, 255, 255, 0.03) 100%)
   314  ;
   315  
   316  /* Fixed */
   317  @fixedGridMargin: 2.75rem;
   318  
   319  /* Attached */
   320  @attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
   321  
   322  /* Sizes */
   323  @small: 0.875rem;
   324  @smallSubMenu: 0.875rem;
   325  @smallWidth: 13rem;
   326  
   327  @medium: 1rem;
   328  @mediumWidth: 15rem;
   329  
   330  @large: 1.125rem;
   331  @largeSubMenu: 0.875rem;
   332  @largeDropdown: 1rem;
   333  @largeWidth: 18rem;