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

     1  /*******************************
     2              Dropdown
     3  *******************************/
     4  
     5  /*-------------------
     6         Element
     7  --------------------*/
     8  
     9  @transition:
    10    border-radius 0.1s ease,
    11    width 0.2s ease
    12  ;
    13  @borderRadius: @defaultBorderRadius;
    14  
    15  /*-------------------
    16         Content
    17  --------------------*/
    18  
    19  /* Icon */
    20  @dropdownIconMargin: 0em 0em 0em 1em;
    21  
    22  /* Current Text */
    23  @textTransition: color 0.2s @defaultEasing;
    24  
    25  /* Menu */
    26  @menuBackground: #FFFFFF;
    27  @menuMargin: 0em;
    28  @menuPadding: 0em 0em;
    29  @menuTop: 100%;
    30  @menuWrap: nowrap;
    31  @menuTextAlign: left;
    32  @menuTransition: none;
    33  
    34  @menuBorderWidth: 1px;
    35  @menuBorder: @menuBorderWidth solid @borderColor;
    36  @menuBoxShadow: 0px 1px 4px 0px @borderColor;
    37  @menuBorderRadius: 0em 0em @borderRadius @borderRadius;
    38  @menuTransition: opacity 0.2s ease;
    39  @menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")";
    40  @menuZIndex: 11;
    41  
    42  /* Text */
    43  @textLineHeight: 1em;
    44  @textLineHeightOffset: (@textLineHeight - 1em);
    45  
    46  /* Menu Item */
    47  @itemFontSize: 1rem;
    48  @itemBorder: none;
    49  @itemHeight: auto;
    50  @itemDivider: none;
    51  @itemColor: @textColor;
    52  @itemVerticalPadding: @relativeMini;
    53  @itemHorizontalPadding: @relativeLarge;
    54  @itemFontWeight: normal;
    55  @itemLineHeight: 1em;
    56  @itemLineHeightOffset: (@itemLineHeight - 1em);
    57  @itemTextTransform: none;
    58  @itemBoxShadow: none;
    59  
    60  /* Sub Menu */
    61  @subMenuTop: 0%;
    62  @subMenuLeft: 100%;
    63  @subMenuRight: auto;
    64  @subMenuDistanceAway: -0.5em;
    65  @subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
    66  @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
    67  @subMenuZIndex: 21;
    68  
    69  /* Menu Header */
    70  @menuHeaderColor: @darkTextColor;
    71  @menuHeaderFontSize: 0.7857rem;
    72  @menuHeaderFontWeight: bold;
    73  @menuHeaderTextTransform: uppercase;
    74  @menuHeaderMargin: 1rem 0rem 0.75rem;
    75  @menuHeaderPadding: 0em @itemHorizontalPadding;
    76  
    77  /* Menu Divider */
    78  @menuDividerMargin: 0.5em 0em;
    79  @menuDividerColor: rgba(0, 0, 0, 0.05);
    80  @menuDividerSize: 1px;
    81  @menuDividerBorder: @menuDividerSize solid @menuDividerColor;
    82  
    83  /* Menu Input */
    84  @menuInputMargin: 0.75rem @itemHorizontalPadding;
    85  @menuInputMinWidth: 200px;
    86  @menuInputVerticalPadding: 0.5em;
    87  @menuInputHorizontalPadding: 1em;
    88  @menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
    89  
    90  /* Menu Image */
    91  @menuImageMaxHeight: 2.5em;
    92  
    93  /* Item Sub-Element */
    94  @itemElementFloat: none;
    95  @itemElementDistance: 0.75em;
    96  
    97  /* Sub-Menu Dropdown Icon */
    98  @itemDropdownIconDistance: 1em;
    99  @itemDropdownIconFloat: right;
   100  @itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance;
   101  
   102  /* Description */
   103  @itemDescriptionMargin: 0em 0em 0em 1em;
   104  @itemDescriptionColor: @lightTextColor;
   105  
   106  /* Floated Content */
   107  @floatedDistance: 1em;
   108  
   109  /*-------------------
   110          Types
   111  --------------------*/
   112  
   113  /* Selection */
   114  @selectionMinWidth: 180px;
   115  @selectionBackground: @white;
   116  @selectionDisplay: inline-block;
   117  @selectionItemDivider: 1px solid rgba(0, 0, 0, 0.05);
   118  @selectionVerticalPadding: 0.8em;
   119  @selectionHorizontalPadding: 1.1em;
   120  @selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding;
   121  @selectionZIndex: 10;
   122  
   123  /* <select> */
   124  @selectBorder: 1px solid @borderColor;
   125  @selectPadding: 0.5em;
   126  @selectVisibility: visible;
   127  @selectHeight: 38px;
   128  
   129  @selectionTextIconDistance: 2em;
   130  @selectionTextColor: @textColor;
   131  
   132  @selectionBoxShadow: none;
   133  @selectionBorderColor: @borderColor;
   134  @selectionBorder: 1px solid @selectionBorderColor;
   135  @selectionBorderRadius: @borderRadius;
   136  
   137  @selectionIconOpacity: 0.8;
   138  @selectionIconHitbox: @selectionVerticalPadding;
   139  @selectionIconMargin: -@selectionIconHitbox;
   140  @selectionIconPadding: @selectionIconHitbox;
   141  @selectionIconTransition: opacity 0.2s ease;
   142  
   143  @selectionMenuBoxShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
   144  @selectionMenuItemBoxShadow: none;
   145  
   146  @selectionItemHorizontalPadding: @itemHorizontalPadding;
   147  @selectionItemVerticalPadding: @itemVerticalPadding;
   148  @selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding;
   149  
   150  @selectionTransition:
   151    @transition,
   152    box-shadow 0.2s @defaultEasing,
   153    border 0.2s @defaultEasing
   154  ;
   155  @selectionMenuTransition:
   156    box-shadow 0.2s @defaultEasing,
   157    border 0.2s @defaultEasing
   158  ;
   159  
   160  /* Responsive */
   161  @selectionMobileMaxItems: 3;
   162  @selectionTabletMaxItems: 4;
   163  @selectionComputerMaxItems: 6;
   164  @selectionWidescreenMaxItems: 8;
   165  
   166  /* Derived */
   167  @selectedBorderEMWidth: 0.0714em;
   168  @selectionItemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
   169  @selectionMobileMaxMenuHeight: (@selectionItemActualHeight * @selectionMobileMaxItems);
   170  @selectionTabletMaxMenuHeight: (@selectionItemActualHeight * @selectionTabletMaxItems);
   171  @selectionComputerMaxMenuHeight: (@selectionItemActualHeight * @selectionComputerMaxItems);
   172  @selectionWidescreenMaxMenuHeight: (@selectionItemActualHeight * @selectionWidescreenMaxItems);
   173  
   174  /* Hover */
   175  @selectionHoverBorderColor: @selectedBorderColor;
   176  @selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
   177  
   178  /* Visible */
   179  @selectionVisibleTextFontWeight: normal;
   180  @selectionVisibleTextColor: @hoveredTextColor;
   181  
   182  @selectionVisibleBorderColor: @selectedBorderColor;
   183  @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
   184  @selectionVisibleMenuBoxShadow: 0px 2px 6px 0px @borderColor;
   185  
   186  /* Visible Hover */
   187  @selectionVisibleHoverBorderColor: @selectedBorderColor;
   188  @selectionVisibleHoverBoxShadow: @selectionVisibleBoxShadow;
   189  @selectionVisibleHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
   190  
   191  @selectionVisibleConnectingBorder: 0em;
   192  @selectionVisibleIconOpacity: 1;
   193  
   194  /* Search */
   195  @searchMinWidth: '';
   196  
   197  /* Search Selection */
   198  @searchSelectionLineHeight: 1.2142em; /* browser default for webkit <input> */
   199  @searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
   200  @searchSelectionInputPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset) @selectionHorizontalPadding;
   201  
   202  @searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
   203  @searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
   204  @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
   205  @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
   206  
   207  /* Inline */
   208  @inlineIconMargin: 0em 0.5em 0em 0.25em;
   209  @inlineTextColor: inherit;
   210  @inlineTextFontWeight: bold;
   211  @inlineMenuDistance: 0.25em;
   212  @inlineMenuBorderRadius: @borderRadius;
   213  
   214  /*-------------------
   215         States
   216  --------------------*/
   217  
   218  /* Hovered */
   219  @hoveredItemBackground: @transparentBlack;
   220  @hoveredItemColor: @selectedTextColor;
   221  @hoveredZIndex: @menuZIndex + 2;
   222  
   223  /* Default Text */
   224  @defaultTextColor: rgba(179, 179, 179, 0.7);
   225  @defaultTextHoverColor: rgba(140, 140, 140, 0.7);
   226  
   227  /* Loading */
   228  @loadingZIndex: -1;
   229  
   230  /* Active Menu Item */
   231  @activeItemZIndex: @menuZIndex + 1;
   232  @activeItemBackground: transparent;
   233  @activeItemBoxShadow: none;
   234  @activeItemFontWeight: bold;
   235  @activeItemColor: @selectedTextColor;
   236  
   237  /* Selected */
   238  @selectedBackground: @subtleTransparentBlack;
   239  @selectedColor: @selectedTextColor;
   240  
   241  /* Error */
   242  @errorItemTextColor: #D95C5C;
   243  @errorItemHoverBackground: #FFF2F2;
   244  @errorItemActiveBackground: #FDCFCF;
   245  
   246  /*-------------------
   247        Variations
   248  --------------------*/
   249  
   250  /* Upward */
   251  @upwardMenuBoxShadow: 0px 0px 4px 0px @borderColor;
   252  @upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;
   253  @upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
   254  @upwardSelectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
   255  @upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
   256  @upwardSelectionVisibleHoverMenuBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
   257  @upwardSelectionVisibleBorderRadius:  @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
   258  
   259  /* Flyout Direction */
   260  @leftMenuDropdownIconFloat: left;
   261  @leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em;
   262  
   263  /* Simple */
   264  @simpleTransitionDuration: 0.2s;
   265  @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
   266  
   267  /* Floating */
   268  @floatingMenuDistance: 0.5em;
   269  @floatingMenuBoxShadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
   270  @floatingMenuBorderRadius: @borderRadius;
   271  
   272  /* Pointing */
   273  @pointingArrowOffset: -0.25em;
   274  @pointingArrowDistanceFromEdge: 1em;
   275  
   276  @pointingArrowBackground: @white;
   277  @pointingArrowZIndex: 2;
   278  @pointingArrowBoxShadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1);
   279  @pointingArrowSize: 0.5em;
   280  
   281  @pointingMenuDistance: 0.75em;
   282  @pointingMenuBorderRadius: @borderRadius;