├── README.md ├── RELEASE-NOTES.md ├── bower.json ├── composer.json ├── menu.css ├── menu.min.css ├── package.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Semantic Menu 2 | 3 | This repository contains pre-compiled menu files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum. 4 | 5 | For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-Menu/blob/master/RELEASE-NOTES.md) 6 | 7 | **Special Note** 8 | An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816). 9 | 10 | If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0) 11 | 12 | #### To install with Bower 13 | ``` 14 | bower install semantic-ui-menu 15 | ``` 16 | 17 | #### To install with NPM 18 | ``` 19 | npm install semantic-ui-menu 20 | ``` 21 | 22 | #### To install with Meteor 23 | ``` 24 | meteor add semantic:ui-menu 25 | ``` 26 | 27 | 28 | ## Addendum 29 | 30 | This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com) 31 | 32 | Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases. 33 | -------------------------------------------------------------------------------- /RELEASE-NOTES.md: -------------------------------------------------------------------------------- 1 | ### Version 2.5.0 - Oct 6, 2022 2 | 3 | - **Dropdown** - Fix issue where dropdown menu could not open to right when in `right menu` inside a `ui menu` (See examples/sticky.html) for use-case 4 | 5 | ### Version 2.4.0 - Sep 17, 2018 6 | 7 | - **Menu/Dropdown** - Fixed `left menu` inside `ui menu` would display horizontally as `flex` [#6359](https://github.com/Semantic-Org/Semantic-UI/issues/6359) 8 | - **Menu/Dropdown** - Fixes dropdown item margin not obeyed inside `labeled icon menu` [#6557](https://github.com/Semantic-Org/Semantic-UI/issues/6557) 9 | 10 | ### Version 2.3.1 - Mar 18, 2018 11 | 12 | - **Menu** - Fixes `disabled item` showing hover style for `secondary menu` **Thanks @tcmal** [#6268](https://github.com/Semantic-Org/Semantic-UI/issues/6268) 13 | 14 | ### Version 2.3.0 - Feb 20, 2018 15 | 16 | To preserve functionality `movePopup` default has remained as `true` (moving the popup to the same offset context), however now setting `movePopup: false` should now always position correctly. Be sure to use `movePopup: true` to avoid issues with `ui popup` inside `menu`, `input` or other places where it may inherit rules from its activating element or its context. 17 | 18 | - **Menu** - Fixes `big` and `huge` sizes being swapped in menu **Thanks @jeremy091** [#5902](https://github.com/Semantic-Org/Semantic-UI/issues/5902) [#5899](https://github.com/Semantic-Org/Semantic-UI/issues/5899) 19 | 20 | ### Version 2.2.14 - Jan 29, 2018 21 | 22 | - **Dropdown** - Fixed issue where using `ui input` in a dropdown menu could cause the input to be too wide in some cases **Thanks @banandrew** [#5085](https://github.com/Semantic-Org/Semantic-UI/issues/5085) 23 | - **Menu / Popup** - Fixed issue where `inverted menu` rules would cause popup inside a menu to have incorrect link styling in `link list` **Thanks @banandrew** [#5585](https://github.com/Semantic-Org/Semantic-UI/issues/5585) [#5603](https://github.com/Semantic-Org/Semantic-UI/issues/5603) 24 | 25 | ### Version 2.2.12 - Aug 07, 2017 26 | 27 | - **Dropdown** - Fixed regression that caused sub menu `dropdown` inside `ui menu` to always appear on left edge of dropdown introduced `2.2.11` [#5542](https://github.com/Semantic-Org/Semantic-UI/issues/5542) 28 | 29 | ### Version 2.2.11 - July 11, 2017 30 | 31 | - **Dropdown** - Improved spacing on `image` inside `menu item` and for selected `text` 32 | - **Menu** - Fixed issue where `left menu` and `right menu` did not display correctly in `stackable menu` on mobile **Thanks @BleuDiamant @Traverse** [#3604](https://github.com/Semantic-Org/Semantic-UI/issues/3604) [#5116](https://github.com/Semantic-Org/Semantic-UI/issues/5116) 33 | - **Menu** - Fixed issue where `(x) item attached menu` was off by 1 pixel due to a css inheritance issue [#4248](https://github.com/Semantic-Org/Semantic-UI/issues/4248) 34 | 35 | ### Version 2.2.10 - March 28, 2017 36 | 37 | - **Dropdown** - Fix search input inside dropdown menu causing dropdown to close before selection when selecting an item #5113 38 | - **Dropdown** - (IE11 Only) Fixed issue where dropdown re-opens immediately after closing when using a `search` inside menu. #4237 39 | 40 | #### Dropdown 41 | 42 | - **Dropdown** - Dropdown using search input inside of menu are now tabbable [#4490](https://github.com/Semantic-Org/Semantic-UI/pull/4490) 43 | - **Dropdown** - Fixed bug where clicking on a dropdown's `dropdown icon` when using remote data would not open menu [#4041](https://github.com/Semantic-Org/Semantic-UI/pull/4041) 44 | - **Dropdown** - Fix bug where `scrolling menu` or `scrolling dropdown` would have excessive right padding by removing scrollbar width from calculation (no longer necessary in modern browsers) 45 | 46 | ### Version 2.2.3 - August 21, 2016 47 | 48 | - **Menu** - Fixed issue where `dropdown` in `vertical menu` would not correctly open `upward` when no space below **Thanks @gdaunton** [#4150 [#4156](https://github.com/Semantic-Org/Semantic-UI/issues/4156) 49 | - **Popup/Menu** - Fixed issue where popup would not appear correctly when nested in menu in some ways. 50 | - **Popup** - Fixed popup in menu example 51 | 52 | ### Version 2.2.0 - June 26, 2016 53 | 54 | - **Dropdown** - All dropdowns, not just `selection dropdown`, will now select the first `menu item` that starts with a pressed keyboard key, for example "N" will select "New" 55 | - **Dropdown** - Dropdown will now automatically focus on `search` inside of a dropdown menu after it is opened. 56 | - **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state `empty` which will format an active dropdown with empty results. [#3791](https://github.com/Semantic-Org/Semantic-UI/issues/3791) 57 | - **Search** - Fixed an issue where `onResult` returning `false` would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results. [#3856](https://github.com/Semantic-Org/Semantic-UI/issues/3856) [#3870](https://github.com/Semantic-Org/Semantic-UI/issues/3870) 58 | - **Dropdown** - Dropdowns with sub-menus would not properly activate on mobile [#3183](https://github.com/Semantic-Org/Semantic-UI/issues/3183) 59 | - **Menu** - `stackable` menu with `left/right` `menu` or `item` would incorrectly be floated when stacked. [#3604](https://github.com/Semantic-Org/Semantic-UI/issues/3604) 60 | - **Menu** - `tabular menu` now has correct bottom margin [#4167](https://github.com/Semantic-Org/Semantic-UI/issues/4167) 61 | - **Menu** - `@dividerSize` was not being used in `vertical menu` [#3781](https://github.com/Semantic-Org/Semantic-UI/issues/3781) 62 | - **Menu** - `vertical text menu` no longer includes `left` or `right` padding, but will now sit flush with content. 63 | 64 | ### Version 2.1.7 - Dec 19, 2015 65 | 66 | - **Menu** - Fixed `1px` offset when `attached segment` follows `tabular menu` (max of 2 consecutive segments) [#3479](https://github.com/Semantic-Org/Semantic-UI/issues/3479) 67 | - **Search** - Search now correctly hides menu when an error message inside results is clicked. [#3039](https://github.com/Semantic-Org/Semantic-UI/issues/3039) 68 | 69 | ### Version 2.1.5 - Nov 1, 2015 70 | 71 | - **Dropdown** - Fixed condition where focusing on dropdown would show a blank menu when "no results" was reached and the dropdown was refocused 72 | - **Dropdown** - `search dropdown` will now initialize with `autocomplete="off"` to avoid triggering native autocomplete menu 73 | 74 | ### Version 2.1.4 - Sep 13, 2015 75 | 76 | - **Menu** - Fixed issue where `right menu` was not floating correctly inside a `menu > container` on mobile [#2969](https://github.com/Semantic-Org/Semantic-UI/issues/2969) 77 | 78 | #### Features 79 | 80 | - **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing 81 | - **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before. 82 | - **Menu** - `inverted menu` now support `colored` individual items **Thanks @maturano** [#2850](https://github.com/Semantic-Org/Semantic-UI/issues/2850) 83 | - **Menu** - `text menu` now uses padding for hitboxes to make target area for links larger 84 | 85 | #### Bugs 86 | 87 | - **Dropdown** - Fix `left menu` inside `ui menu` appearing horizontally [#2778](https://github.com/Semantic-Org/Semantic-UI/issues/2778) 88 | - **Dropdown** - Fixed error where menu would disappear when entering spaced words using `allowAdditions: true` caused by value matching its own whitespace-trimed value [#2853](https://github.com/Semantic-Org/Semantic-UI/issues/2853) 89 | - **Menu** - Fixed `(x) column` nested grid with alignment stacking vertically (wrong flex-direction) [#2810](https://github.com/Semantic-Org/Semantic-UI/issues/2810) 90 | - **Menu** - Sub menus now work correctly and are correctly spaced inside `secondary menu` and text menu` [#2862](https://github.com/Semantic-Org/Semantic-UI/issues/2862) 91 | - **Menu** - Fixes tabular menu missing variable for background. **Thanks @frontdevde** 92 | - **Icons** - Fixed issue where `active icon` or `emphasized icon` would not adjust opacity inside menus 93 | - **Menu** - `@pressedItemColor` has been renamed to `@pressedItemTextColor` to match naming conventions of other variables 94 | - **Menu** - Added `flex: 0 0 auto` to menu item to make sure menu do not collapse text content to reduce space 95 | - **Menu** - Fix text align on `dropdown item` inside `icon menu` 96 | - **Menu** - Fixed hybrid initialization not creating `menu` correctly. Fixed docs example of hybrid `` values after initialization, and will automatically update dropdown menu when changed 199 | - **Dropdown** - Dropdown no longer will not show menu when no `item` are present in menu. Dropdown will now only filter results for `ui search dropdown` #1632 **Thanks PSyton**. 200 | - **Dropdown** - Fixed bug where link items would not open in sub-menus due to `event.preventDefault` 201 | - **Label** - Fixed `ui corner label` appearing on-top of `ui dropdown` menu due to issue in z-index hierarchy 202 | - **List** - `relaxed list` and `very relaxed list` no longer add padding to child menu items 203 | 204 | ### Version 1.7.0 - January 14, 2015 205 | 206 | - **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction 207 | - **Dropdown** - Fixed bug where sub menus may sometimes have dropdown icon overlap text 208 | - **Dropdown** - Fixes dropdown search input from filtering text values when input is inside menu, i.e "In-Menu Search" 209 | - **Segment** - ``ui tabular menu`` now correctly aligns with attached segment when using fluid variation *Thanks @MohammadYounes* 210 | - **List** - Fix some styling issues with `ui list` inside `ui menu` 211 | 212 | ### Version 1.6.2 - January 06, 2015 213 | 214 | - **Menu** - Fixes ``fluid text menu`` to have correct margins 215 | 216 | ### Version 1.6.0 - January 05, 2015 217 | 218 | - **Menu** - Fixes ``ui fluid labeled icon menu`` to not have `min-width` 219 | 220 | ### Version 1.5.0 - December 30, 2014 221 | 222 | - **Dropdown** - New setting ``allowCategorySelection`` lets menu items with sub menus be selected. Added example in docs. 223 | - **Menu** - ``ui fixed menu`` now defaults to ``ui top fixed menu`` 224 | 225 | ### Version 1.4.0 - December 22, 2014 226 | 227 | - **Menu** - Fix border radius of dropdown menu inside `ui vertical menu` 228 | - **Menu** - Fix formatting of ``ui selection dropdown`` inside ``menu`` 229 | 230 | ### Version 1.3.0 - December 17, 2014 231 | 232 | - **Dropdown** - Dropdown can now specify which direction a menu should appear left/right, dropdown icons can also appear on the left 233 | - **Dropdown** - Dropdown now always scrolls to active element on menu open, calculates position with new ``loading`` class 234 | - **Dropdown** - Fix bug in position of sub menus with ``floating dropdown`` 235 | 236 | ### Version 1.1.0 - December 02, 2014 237 | 238 | - **Menu/Segment** Fixes double border on pointing menu with attached segment **Thanks davialexandre** 239 | 240 | ### Version 1.0.1 - November 28, 2014 241 | 242 | - **Menu** - Removes missing image loader variable **Thanks ryan-mahoney** 243 | 244 | ### Version 1.0.0 - November 24, 2014 245 | 246 | - **Dropdown** - Sub menus inside dropdowns now need a wrapping div **text** around sub-menu descriptions 247 | 248 | ### Version 0.19.0 - July 3, 2014 249 | 250 | - **Accordion** - Fixes incompatibilities with ``ui list`` when used inside a ``ui accordion``, fixes issues with menu accordion display in some circumstances 251 | - **Menu** - Fixes ``ui inverted secondary pointing menu`` to have correct pointer color for all color variations **Thanks AdamMaras** 252 | - **Docs** - Language clarified for menu/rating definition **Thanks jnbt/ewiner** 253 | 254 | ### Version 0.18.0 - June 6, 2014 255 | 256 | - **Menu** - Fixes bug where pointing menu would sometimes appear below content **Thanks Skysplit** 257 | 258 | ### Version 0.15.2 - Mar 28, 2014 259 | 260 | - **Menu** - Fixes formatting of attached segments with menus 261 | 262 | ### Version 0.13.0 - Feb 20, 2014 263 | 264 | - **Menu** - Fixes 2px border on last element in horizontal menus 265 | - **Menu** - Fixes dropdown formatting when used **inside* a menu item 266 | - **Menu** - Fixes formatting of grouped icon buttons inside menus 267 | 268 | ### Version 0.12.2 - Jan 21, 2014 269 | 270 | - **Menu** - Slightly updates input sizes inside menus 271 | 272 | ### Version 0.12.1 - Jan 15, 2014 273 | 274 | - **Menu** - Fixes buttons using ```` tag from inheriting link styles. **thanks joltmode** 275 | - **Menu** - Fixes ``action input`` to work inside menus **thanks joltmode** 276 | 277 | ### Version 0.12.0 - Jan 06, 2014 278 | 279 | - **Menu** - Fixed menu now adds padding on the next element if it is a grid 280 | - **Menu** - Fixes z-index on fixed menu to exist just below modals 281 | 282 | ### Version 0.9.0 - Nov 5, 2013 283 | 284 | - **Menu** - Dropdown position inside secondary menus should be more precise 285 | - **Menu** - Floating dropdown menus now work inside menus 286 | - **Menu** - Fixes some inverted menu stylings not applying correctly in some instances 287 | 288 | ### Version 0.8.6 - Nov 2, 2013 289 | 290 | - Fixes bug in jquery waypoint 2.0.3 causing menus to be lame 291 | 292 | ### Version 0.8.2 - Oct 28, 2013 293 | 294 | - **Menu** - Fixes arrow direction on vertical menu dropdown 295 | 296 | ### Version 0.7.0 - Oct 22, 2013 297 | 298 | - **Dropdown** - Fixes pointing dropdown to appear correctly in menu 299 | - **Menu** - Fixes border radius on tabular menu, fixes one pixel jump on active state 300 | - **Menu** - Removes vertical label width missing units in menu 301 | 302 | ### Version 0.6.3 - Oct 15, 2013 303 | 304 | - Dropdown hide no longer selects current item as active (useful for menus) 305 | 306 | ### Version 0.6.2 - Oct 15, 2013 307 | 308 | - Fixes input position inside menus with no other content 309 | - Fixes input sizing on small/large menus 310 | 311 | ### Version 0.6.1 - Oct 15, 2013 312 | 313 | - Adds automatic menu formatting for buttons inside menus 314 | - Dropdowns in vertical menu automatically receive proper triangle pointer direction 315 | - Fixes right menu formatting in secondary menus 316 | - Fixed shadow overlap on dropdown in menus 317 | 318 | ### Version 0.3.2 - Oct 2, 2013 319 | 320 | - Dropdown now formats top and right arrow icons automatically with icon coupling with sub menus 321 | - Fixes position of menu dropdowns in some cases 322 | - Fixes icon input inside a menu placement issues 323 | 324 | ### Version 0.1.0 - Sep 25, 2013 325 | 326 | - Adds horizontally padded, vertically padded menu item variations to allow menu items to remove padding 327 | - Added fixes to tabular menu especially with attached content -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic-ui-menu", 3 | "description": "Menu - Semantic UI", 4 | "homepage": "http://www.semantic-ui.com", 5 | "author": { 6 | "name": "Jack Lukic", 7 | "web": "http://www.jacklukic.com" 8 | }, 9 | "ignore": ["docs", "node", "server", "spec", "src", "test"], 10 | "keywords": ["semantic", "ui", "css3", "framework"], 11 | "license": ["http://semantic-ui.mit-license.org/"], 12 | "main": ["menu.css"] 13 | } -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic/menu", 3 | "description": "Single component release of menu", 4 | "homepage": "http://www.semantic-ui.com", 5 | "authors": [{ 6 | "name": "Jack Lukic", 7 | "email": "jacklukic@gmail.com", 8 | "homepage": "http://www.jacklukic.com", 9 | "role": "Creator" 10 | }], 11 | "keywords": ["semantic", "ui", "css", "framework"], 12 | "license": "MIT", 13 | "version": "2.5.0" 14 | } -------------------------------------------------------------------------------- /menu.css: -------------------------------------------------------------------------------- 1 | /* 2 | * # Semantic - Menu 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Copyright 2015 Contributor 7 | * Released under the MIT license 8 | * http://opensource.org/licenses/MIT 9 | * 10 | */ 11 | 12 | 13 | /******************************* 14 | Standard 15 | *******************************/ 16 | 17 | 18 | /*-------------- 19 | Menu 20 | ---------------*/ 21 | 22 | .ui.menu { 23 | display: flex; 24 | margin: 1rem 0em; 25 | font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; 26 | background: #FFFFFF; 27 | font-weight: normal; 28 | border: 1px solid rgba(34, 36, 38, 0.15); 29 | box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); 30 | border-radius: 0.28571429rem; 31 | min-height: 2.85714286em; 32 | } 33 | .ui.menu:after { 34 | content: ''; 35 | display: block; 36 | height: 0px; 37 | clear: both; 38 | visibility: hidden; 39 | } 40 | .ui.menu:first-child { 41 | margin-top: 0rem; 42 | } 43 | .ui.menu:last-child { 44 | margin-bottom: 0rem; 45 | } 46 | 47 | /*-------------- 48 | Sub-Menu 49 | ---------------*/ 50 | 51 | .ui.menu .menu { 52 | margin: 0em; 53 | } 54 | .ui.menu:not(.vertical) > .menu { 55 | display: flex; 56 | } 57 | 58 | /*-------------- 59 | Item 60 | ---------------*/ 61 | 62 | .ui.menu:not(.vertical) .item { 63 | display: flex; 64 | align-items: center; 65 | } 66 | .ui.menu .item { 67 | position: relative; 68 | vertical-align: middle; 69 | line-height: 1; 70 | text-decoration: none; 71 | -webkit-tap-highlight-color: transparent; 72 | flex: 0 0 auto; 73 | -webkit-user-select: none; 74 | -moz-user-select: none; 75 | -ms-user-select: none; 76 | user-select: none; 77 | background: none; 78 | padding: 0.92857143em 1.14285714em; 79 | text-transform: none; 80 | color: rgba(0, 0, 0, 0.87); 81 | font-weight: normal; 82 | transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; 83 | } 84 | .ui.menu > .item:first-child { 85 | border-radius: 0.28571429rem 0px 0px 0.28571429rem; 86 | } 87 | 88 | /* Border */ 89 | .ui.menu .item:before { 90 | position: absolute; 91 | content: ''; 92 | top: 0%; 93 | right: 0px; 94 | height: 100%; 95 | width: 1px; 96 | background: rgba(34, 36, 38, 0.1); 97 | } 98 | 99 | /*-------------- 100 | Text Content 101 | ---------------*/ 102 | 103 | .ui.menu .text.item > *, 104 | .ui.menu .item > a:not(.ui), 105 | .ui.menu .item > p:only-child { 106 | -webkit-user-select: text; 107 | -moz-user-select: text; 108 | -ms-user-select: text; 109 | user-select: text; 110 | line-height: 1.3; 111 | } 112 | .ui.menu .item > p:first-child { 113 | margin-top: 0; 114 | } 115 | .ui.menu .item > p:last-child { 116 | margin-bottom: 0; 117 | } 118 | 119 | /*-------------- 120 | Icons 121 | ---------------*/ 122 | 123 | .ui.menu .item > i.icon { 124 | opacity: 0.9; 125 | float: none; 126 | margin: 0em 0.35714286em 0em 0em; 127 | } 128 | 129 | /*-------------- 130 | Button 131 | ---------------*/ 132 | 133 | .ui.menu:not(.vertical) .item > .button { 134 | position: relative; 135 | top: 0em; 136 | margin: -0.5em 0em; 137 | padding-bottom: 0.78571429em; 138 | padding-top: 0.78571429em; 139 | font-size: 1em; 140 | } 141 | 142 | /*---------------- 143 | Grid / Container 144 | -----------------*/ 145 | 146 | .ui.menu > .grid, 147 | .ui.menu > .container { 148 | display: flex; 149 | align-items: inherit; 150 | flex-direction: inherit; 151 | } 152 | 153 | /*-------------- 154 | Inputs 155 | ---------------*/ 156 | 157 | .ui.menu .item > .input { 158 | width: 100%; 159 | } 160 | .ui.menu:not(.vertical) .item > .input { 161 | position: relative; 162 | top: 0em; 163 | margin: -0.5em 0em; 164 | } 165 | .ui.menu .item > .input input { 166 | font-size: 1em; 167 | padding-top: 0.57142857em; 168 | padding-bottom: 0.57142857em; 169 | } 170 | 171 | /*-------------- 172 | Header 173 | ---------------*/ 174 | 175 | .ui.menu .header.item, 176 | .ui.vertical.menu .header.item { 177 | margin: 0em; 178 | background: ''; 179 | text-transform: normal; 180 | font-weight: bold; 181 | } 182 | .ui.vertical.menu .item > .header:not(.ui) { 183 | margin: 0em 0em 0.5em; 184 | font-size: 1em; 185 | font-weight: bold; 186 | } 187 | 188 | /*-------------- 189 | Dropdowns 190 | ---------------*/ 191 | 192 | 193 | /* Dropdown Icon */ 194 | .ui.menu .item > i.dropdown.icon { 195 | padding: 0em; 196 | float: right; 197 | margin: 0em 0em 0em 1em; 198 | } 199 | 200 | /* Menu */ 201 | .ui.menu .dropdown.item .menu { 202 | min-width: calc(100% - 1px); 203 | border-radius: 0em 0em 0.28571429rem 0.28571429rem; 204 | background: #FFFFFF; 205 | margin: 0em 0px 0px; 206 | box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); 207 | flex-direction: column !important; 208 | } 209 | 210 | /* Menu Items */ 211 | .ui.menu .ui.dropdown .menu > .item { 212 | margin: 0; 213 | text-align: left; 214 | font-size: 1em !important; 215 | padding: 0.78571429em 1.14285714em !important; 216 | background: transparent !important; 217 | color: rgba(0, 0, 0, 0.87) !important; 218 | text-transform: none !important; 219 | font-weight: normal !important; 220 | box-shadow: none !important; 221 | transition: none !important; 222 | } 223 | .ui.menu .ui.dropdown .menu > .item:hover { 224 | background: rgba(0, 0, 0, 0.05) !important; 225 | color: rgba(0, 0, 0, 0.95) !important; 226 | } 227 | .ui.menu .ui.dropdown .menu > .selected.item { 228 | background: rgba(0, 0, 0, 0.05) !important; 229 | color: rgba(0, 0, 0, 0.95) !important; 230 | } 231 | .ui.menu .ui.dropdown .menu > .active.item { 232 | background: rgba(0, 0, 0, 0.03) !important; 233 | font-weight: bold !important; 234 | color: rgba(0, 0, 0, 0.95) !important; 235 | } 236 | .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { 237 | display: block; 238 | } 239 | .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { 240 | display: inline-block; 241 | font-size: 1em !important; 242 | float: none; 243 | margin: 0em 0.75em 0em 0em !important; 244 | } 245 | 246 | /* Secondary */ 247 | .ui.secondary.menu .dropdown.item > .menu, 248 | .ui.text.menu .dropdown.item > .menu { 249 | border-radius: 0.28571429rem; 250 | margin-top: 0.35714286em; 251 | } 252 | 253 | /* Pointing */ 254 | .ui.menu .pointing.dropdown.item .menu { 255 | margin-top: 0.75em; 256 | } 257 | 258 | /* Inverted */ 259 | .ui.inverted.menu .search.dropdown.item > .search, 260 | .ui.inverted.menu .search.dropdown.item > .text { 261 | color: rgba(255, 255, 255, 0.9); 262 | } 263 | 264 | /* Vertical */ 265 | .ui.vertical.menu .dropdown.item > .icon { 266 | float: right; 267 | content: "\f0da"; 268 | margin-left: 1em; 269 | } 270 | .ui.vertical.menu .dropdown.item .menu { 271 | left: 100%; 272 | min-width: 0; 273 | margin: 0em 0em 0em 0em; 274 | box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); 275 | border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem; 276 | } 277 | .ui.vertical.menu .dropdown.item.upward .menu { 278 | bottom: 0; 279 | } 280 | .ui.vertical.menu .dropdown.item:not(.upward) .menu { 281 | top: 0; 282 | } 283 | .ui.vertical.menu .active.dropdown.item { 284 | border-top-right-radius: 0em; 285 | border-bottom-right-radius: 0em; 286 | } 287 | .ui.vertical.menu .dropdown.active.item { 288 | box-shadow: none; 289 | } 290 | 291 | /* Evenly Divided */ 292 | .ui.item.menu .dropdown .menu .item { 293 | width: 100%; 294 | } 295 | 296 | /*-------------- 297 | Labels 298 | ---------------*/ 299 | 300 | .ui.menu .item > .label { 301 | background: #999999; 302 | color: #FFFFFF; 303 | margin-left: 1em; 304 | padding: 0.3em 0.78571429em; 305 | } 306 | .ui.vertical.menu .item > .label { 307 | background: #999999; 308 | color: #FFFFFF; 309 | margin-top: -0.15em; 310 | margin-bottom: -0.15em; 311 | padding: 0.3em 0.78571429em; 312 | } 313 | .ui.menu .item > .floating.label { 314 | padding: 0.3em 0.78571429em; 315 | } 316 | 317 | /*-------------- 318 | Images 319 | ---------------*/ 320 | 321 | .ui.menu .item > img:not(.ui) { 322 | display: inline-block; 323 | vertical-align: middle; 324 | margin: -0.3em 0em; 325 | width: 2.5em; 326 | } 327 | .ui.vertical.menu .item > img:not(.ui):only-child { 328 | display: block; 329 | max-width: 100%; 330 | width: auto; 331 | } 332 | 333 | 334 | /******************************* 335 | Coupling 336 | *******************************/ 337 | 338 | 339 | /*-------------- 340 | List 341 | ---------------*/ 342 | 343 | 344 | /* Menu divider shouldnt apply */ 345 | .ui.menu .list .item:before { 346 | background: none !important; 347 | } 348 | 349 | /*-------------- 350 | Sidebar 351 | ---------------*/ 352 | 353 | 354 | /* Show vertical dividers below last */ 355 | .ui.vertical.sidebar.menu > .item:first-child:before { 356 | display: block !important; 357 | } 358 | .ui.vertical.sidebar.menu > .item::before { 359 | top: auto; 360 | bottom: 0px; 361 | } 362 | 363 | /*-------------- 364 | Container 365 | ---------------*/ 366 | 367 | @media only screen and (max-width: 767px) { 368 | .ui.menu > .ui.container { 369 | width: 100% !important; 370 | margin-left: 0em !important; 371 | margin-right: 0em !important; 372 | } 373 | } 374 | @media only screen and (min-width: 768px) { 375 | .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { 376 | border-left: 1px solid rgba(34, 36, 38, 0.1); 377 | } 378 | } 379 | 380 | 381 | /******************************* 382 | States 383 | *******************************/ 384 | 385 | 386 | /*-------------- 387 | Hover 388 | ---------------*/ 389 | 390 | .ui.link.menu .item:hover, 391 | .ui.menu .dropdown.item:hover, 392 | .ui.menu .link.item:hover, 393 | .ui.menu a.item:hover { 394 | cursor: pointer; 395 | background: rgba(0, 0, 0, 0.03); 396 | color: rgba(0, 0, 0, 0.95); 397 | } 398 | 399 | /*-------------- 400 | Pressed 401 | ---------------*/ 402 | 403 | .ui.link.menu .item:active, 404 | .ui.menu .link.item:active, 405 | .ui.menu a.item:active { 406 | background: rgba(0, 0, 0, 0.03); 407 | color: rgba(0, 0, 0, 0.95); 408 | } 409 | 410 | /*-------------- 411 | Active 412 | ---------------*/ 413 | 414 | .ui.menu .active.item { 415 | background: rgba(0, 0, 0, 0.05); 416 | color: rgba(0, 0, 0, 0.95); 417 | font-weight: normal; 418 | box-shadow: none; 419 | } 420 | .ui.menu .active.item > i.icon { 421 | opacity: 1; 422 | } 423 | 424 | /*-------------- 425 | Active Hover 426 | ---------------*/ 427 | 428 | .ui.menu .active.item:hover, 429 | .ui.vertical.menu .active.item:hover { 430 | background-color: rgba(0, 0, 0, 0.05); 431 | color: rgba(0, 0, 0, 0.95); 432 | } 433 | 434 | /*-------------- 435 | Disabled 436 | ---------------*/ 437 | 438 | .ui.menu .item.disabled, 439 | .ui.menu .item.disabled:hover { 440 | cursor: default !important; 441 | background-color: transparent !important; 442 | color: rgba(40, 40, 40, 0.3) !important; 443 | } 444 | 445 | 446 | /******************************* 447 | Types 448 | *******************************/ 449 | 450 | 451 | /*------------------ 452 | Floated Menu / Item 453 | -------------------*/ 454 | 455 | 456 | /* Left Floated */ 457 | .ui.menu:not(.vertical) .left.item, 458 | .ui.menu:not(.vertical) :not(.dropdown) > .left.menu { 459 | display: flex; 460 | margin-right: auto !important; 461 | } 462 | 463 | /* Right Floated */ 464 | .ui.menu:not(.vertical) .right.item, 465 | .ui.menu:not(.vertical) .right.menu { 466 | display: flex; 467 | margin-left: auto !important; 468 | } 469 | 470 | /* Swapped Borders */ 471 | .ui.menu .right.item::before, 472 | .ui.menu .right.menu > .item::before { 473 | right: auto; 474 | left: 0; 475 | } 476 | 477 | /*-------------- 478 | Vertical 479 | ---------------*/ 480 | 481 | .ui.vertical.menu { 482 | display: block; 483 | flex-direction: column; 484 | background: #FFFFFF; 485 | box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); 486 | } 487 | 488 | /*--- Item ---*/ 489 | 490 | .ui.vertical.menu .item { 491 | display: block; 492 | background: none; 493 | border-top: none; 494 | border-right: none; 495 | } 496 | .ui.vertical.menu > .item:first-child { 497 | border-radius: 0.28571429rem 0.28571429rem 0px 0px; 498 | } 499 | .ui.vertical.menu > .item:last-child { 500 | border-radius: 0px 0px 0.28571429rem 0.28571429rem; 501 | } 502 | 503 | /*--- Label ---*/ 504 | 505 | .ui.vertical.menu .item > .label { 506 | float: right; 507 | text-align: center; 508 | } 509 | 510 | /*--- Icon ---*/ 511 | 512 | .ui.vertical.menu .item > i.icon { 513 | width: 1.18em; 514 | float: right; 515 | margin: 0em 0em 0em 0.5em; 516 | } 517 | .ui.vertical.menu .item > .label + i.icon { 518 | float: none; 519 | margin: 0em 0.5em 0em 0em; 520 | } 521 | 522 | /*--- Border ---*/ 523 | 524 | .ui.vertical.menu .item:before { 525 | position: absolute; 526 | content: ''; 527 | top: 0%; 528 | left: 0px; 529 | width: 100%; 530 | height: 1px; 531 | background: rgba(34, 36, 38, 0.1); 532 | } 533 | .ui.vertical.menu .item:first-child:before { 534 | display: none !important; 535 | } 536 | 537 | /*--- Sub Menu ---*/ 538 | 539 | .ui.vertical.menu .item > .menu { 540 | margin: 0.5em -1.14285714em 0em; 541 | } 542 | .ui.vertical.menu .menu .item { 543 | background: none; 544 | padding: 0.5em 1.33333333em; 545 | font-size: 0.85714286em; 546 | color: rgba(0, 0, 0, 0.5); 547 | } 548 | .ui.vertical.menu .item .menu a.item:hover, 549 | .ui.vertical.menu .item .menu .link.item:hover { 550 | color: rgba(0, 0, 0, 0.85); 551 | } 552 | .ui.vertical.menu .menu .item:before { 553 | display: none; 554 | } 555 | 556 | /* Vertical Active */ 557 | .ui.vertical.menu .active.item { 558 | background: rgba(0, 0, 0, 0.05); 559 | border-radius: 0em; 560 | box-shadow: none; 561 | } 562 | .ui.vertical.menu > .active.item:first-child { 563 | border-radius: 0.28571429rem 0.28571429rem 0em 0em; 564 | } 565 | .ui.vertical.menu > .active.item:last-child { 566 | border-radius: 0em 0em 0.28571429rem 0.28571429rem; 567 | } 568 | .ui.vertical.menu > .active.item:only-child { 569 | border-radius: 0.28571429rem; 570 | } 571 | .ui.vertical.menu .active.item .menu .active.item { 572 | border-left: none; 573 | } 574 | .ui.vertical.menu .item .menu .active.item { 575 | background-color: transparent; 576 | font-weight: bold; 577 | color: rgba(0, 0, 0, 0.95); 578 | } 579 | 580 | /*-------------- 581 | Tabular 582 | ---------------*/ 583 | 584 | .ui.tabular.menu { 585 | border-radius: 0em; 586 | box-shadow: none !important; 587 | border: none; 588 | background: none transparent; 589 | border-bottom: 1px solid #D4D4D5; 590 | } 591 | .ui.tabular.fluid.menu { 592 | width: calc(100% + (1px * 2)) !important; 593 | } 594 | .ui.tabular.menu .item { 595 | background: transparent; 596 | border-bottom: none; 597 | border-left: 1px solid transparent; 598 | border-right: 1px solid transparent; 599 | border-top: 2px solid transparent; 600 | padding: 0.92857143em 1.42857143em; 601 | color: rgba(0, 0, 0, 0.87); 602 | } 603 | .ui.tabular.menu .item:before { 604 | display: none; 605 | } 606 | 607 | /* Hover */ 608 | .ui.tabular.menu .item:hover { 609 | background-color: transparent; 610 | color: rgba(0, 0, 0, 0.8); 611 | } 612 | 613 | /* Active */ 614 | .ui.tabular.menu .active.item { 615 | background: none #FFFFFF; 616 | color: rgba(0, 0, 0, 0.95); 617 | border-top-width: 1px; 618 | border-color: #D4D4D5; 619 | font-weight: bold; 620 | margin-bottom: -1px; 621 | box-shadow: none; 622 | border-radius: 0.28571429rem 0.28571429rem 0px 0px !important; 623 | } 624 | 625 | /* Coupling with segment for attachment */ 626 | .ui.tabular.menu + .attached:not(.top).segment, 627 | .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { 628 | border-top: none; 629 | margin-left: 0px; 630 | margin-top: 0px; 631 | margin-right: 0px; 632 | width: 100%; 633 | } 634 | .top.attached.segment + .ui.bottom.tabular.menu { 635 | position: relative; 636 | width: calc(100% + (1px * 2)); 637 | left: -1px; 638 | } 639 | 640 | /* Bottom Vertical Tabular */ 641 | .ui.bottom.tabular.menu { 642 | background: none transparent; 643 | border-radius: 0em; 644 | box-shadow: none !important; 645 | border-bottom: none; 646 | border-top: 1px solid #D4D4D5; 647 | } 648 | .ui.bottom.tabular.menu .item { 649 | background: none; 650 | border-left: 1px solid transparent; 651 | border-right: 1px solid transparent; 652 | border-bottom: 1px solid transparent; 653 | border-top: none; 654 | } 655 | .ui.bottom.tabular.menu .active.item { 656 | background: none #FFFFFF; 657 | color: rgba(0, 0, 0, 0.95); 658 | border-color: #D4D4D5; 659 | margin: -1px 0px 0px 0px; 660 | border-radius: 0px 0px 0.28571429rem 0.28571429rem !important; 661 | } 662 | 663 | /* Vertical Tabular (Left) */ 664 | .ui.vertical.tabular.menu { 665 | background: none transparent; 666 | border-radius: 0em; 667 | box-shadow: none !important; 668 | border-bottom: none; 669 | border-right: 1px solid #D4D4D5; 670 | } 671 | .ui.vertical.tabular.menu .item { 672 | background: none; 673 | border-left: 1px solid transparent; 674 | border-bottom: 1px solid transparent; 675 | border-top: 1px solid transparent; 676 | border-right: none; 677 | } 678 | .ui.vertical.tabular.menu .active.item { 679 | background: none #FFFFFF; 680 | color: rgba(0, 0, 0, 0.95); 681 | border-color: #D4D4D5; 682 | margin: 0px -1px 0px 0px; 683 | border-radius: 0.28571429rem 0px 0px 0.28571429rem !important; 684 | } 685 | 686 | /* Vertical Right Tabular */ 687 | .ui.vertical.right.tabular.menu { 688 | background: none transparent; 689 | border-radius: 0em; 690 | box-shadow: none !important; 691 | border-bottom: none; 692 | border-right: none; 693 | border-left: 1px solid #D4D4D5; 694 | } 695 | .ui.vertical.right.tabular.menu .item { 696 | background: none; 697 | border-right: 1px solid transparent; 698 | border-bottom: 1px solid transparent; 699 | border-top: 1px solid transparent; 700 | border-left: none; 701 | } 702 | .ui.vertical.right.tabular.menu .active.item { 703 | background: none #FFFFFF; 704 | color: rgba(0, 0, 0, 0.95); 705 | border-color: #D4D4D5; 706 | margin: 0px 0px 0px -1px; 707 | border-radius: 0px 0.28571429rem 0.28571429rem 0px !important; 708 | } 709 | 710 | /* Dropdown */ 711 | .ui.tabular.menu .active.dropdown.item { 712 | margin-bottom: 0px; 713 | border-left: 1px solid transparent; 714 | border-right: 1px solid transparent; 715 | border-top: 2px solid transparent; 716 | border-bottom: none; 717 | } 718 | 719 | /*-------------- 720 | Pagination 721 | ---------------*/ 722 | 723 | .ui.pagination.menu { 724 | margin: 0em; 725 | display: inline-flex; 726 | vertical-align: middle; 727 | } 728 | .ui.pagination.menu .item:last-child { 729 | border-radius: 0em 0.28571429rem 0.28571429rem 0em; 730 | } 731 | .ui.compact.menu .item:last-child { 732 | border-radius: 0em 0.28571429rem 0.28571429rem 0em; 733 | } 734 | .ui.pagination.menu .item:last-child:before { 735 | display: none; 736 | } 737 | .ui.pagination.menu .item { 738 | min-width: 3em; 739 | text-align: center; 740 | } 741 | .ui.pagination.menu .icon.item i.icon { 742 | vertical-align: top; 743 | } 744 | 745 | /* Active */ 746 | .ui.pagination.menu .active.item { 747 | border-top: none; 748 | padding-top: 0.92857143em; 749 | background-color: rgba(0, 0, 0, 0.05); 750 | color: rgba(0, 0, 0, 0.95); 751 | box-shadow: none; 752 | } 753 | 754 | /*-------------- 755 | Secondary 756 | ---------------*/ 757 | 758 | .ui.secondary.menu { 759 | background: none; 760 | margin-left: -0.35714286em; 761 | margin-right: -0.35714286em; 762 | border-radius: 0em; 763 | border: none; 764 | box-shadow: none; 765 | } 766 | 767 | /* Item */ 768 | .ui.secondary.menu .item { 769 | align-self: center; 770 | box-shadow: none; 771 | border: none; 772 | padding: 0.78571429em 0.92857143em; 773 | margin: 0em 0.35714286em; 774 | background: none; 775 | transition: color 0.1s ease; 776 | border-radius: 0.28571429rem; 777 | } 778 | 779 | /* No Divider */ 780 | .ui.secondary.menu .item:before { 781 | display: none !important; 782 | } 783 | 784 | /* Header */ 785 | .ui.secondary.menu .header.item { 786 | border-radius: 0em; 787 | border-right: none; 788 | background: none transparent; 789 | } 790 | 791 | /* Image */ 792 | .ui.secondary.menu .item > img:not(.ui) { 793 | margin: 0em; 794 | } 795 | 796 | /* Hover */ 797 | .ui.secondary.menu .dropdown.item:hover, 798 | .ui.secondary.menu .link.item:hover, 799 | .ui.secondary.menu a.item:hover { 800 | background: rgba(0, 0, 0, 0.05); 801 | color: rgba(0, 0, 0, 0.95); 802 | } 803 | 804 | /* Active */ 805 | .ui.secondary.menu .active.item { 806 | box-shadow: none; 807 | background: rgba(0, 0, 0, 0.05); 808 | color: rgba(0, 0, 0, 0.95); 809 | border-radius: 0.28571429rem; 810 | } 811 | 812 | /* Active Hover */ 813 | .ui.secondary.menu .active.item:hover { 814 | box-shadow: none; 815 | background: rgba(0, 0, 0, 0.05); 816 | color: rgba(0, 0, 0, 0.95); 817 | } 818 | 819 | /* Inverted */ 820 | .ui.secondary.inverted.menu .link.item, 821 | .ui.secondary.inverted.menu a.item { 822 | color: rgba(255, 255, 255, 0.7) !important; 823 | } 824 | .ui.secondary.inverted.menu .dropdown.item:hover, 825 | .ui.secondary.inverted.menu .link.item:hover, 826 | .ui.secondary.inverted.menu a.item:hover { 827 | background: rgba(255, 255, 255, 0.08); 828 | color: #ffffff !important; 829 | } 830 | .ui.secondary.inverted.menu .active.item { 831 | background: rgba(255, 255, 255, 0.15); 832 | color: #ffffff !important; 833 | } 834 | 835 | /* Fix item margins */ 836 | .ui.secondary.item.menu { 837 | margin-left: 0em; 838 | margin-right: 0em; 839 | } 840 | .ui.secondary.item.menu .item:last-child { 841 | margin-right: 0em; 842 | } 843 | .ui.secondary.attached.menu { 844 | box-shadow: none; 845 | } 846 | 847 | /* Sub Menu */ 848 | .ui.vertical.secondary.menu .item:not(.dropdown) > .menu { 849 | margin: 0em -0.92857143em; 850 | } 851 | .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { 852 | margin: 0em; 853 | padding: 0.5em 1.33333333em; 854 | } 855 | 856 | /*--------------------- 857 | Secondary Vertical 858 | -----------------------*/ 859 | 860 | .ui.secondary.vertical.menu > .item { 861 | border: none; 862 | margin: 0em 0em 0.35714286em; 863 | border-radius: 0.28571429rem !important; 864 | } 865 | .ui.secondary.vertical.menu > .header.item { 866 | border-radius: 0em; 867 | } 868 | 869 | /* Sub Menu */ 870 | .ui.vertical.secondary.menu .item > .menu .item { 871 | background-color: transparent; 872 | } 873 | 874 | /* Inverted */ 875 | .ui.secondary.inverted.menu { 876 | background-color: transparent; 877 | } 878 | 879 | /*--------------------- 880 | Secondary Pointing 881 | -----------------------*/ 882 | 883 | .ui.secondary.pointing.menu { 884 | margin-left: 0em; 885 | margin-right: 0em; 886 | border-bottom: 2px solid rgba(34, 36, 38, 0.15); 887 | } 888 | .ui.secondary.pointing.menu .item { 889 | border-bottom-color: transparent; 890 | border-bottom-style: solid; 891 | border-radius: 0em; 892 | align-self: flex-end; 893 | margin: 0em 0em -2px; 894 | padding: 0.85714286em 1.14285714em; 895 | border-bottom-width: 2px; 896 | transition: color 0.1s ease; 897 | } 898 | 899 | /* Item Types */ 900 | .ui.secondary.pointing.menu .header.item { 901 | color: rgba(0, 0, 0, 0.85) !important; 902 | } 903 | .ui.secondary.pointing.menu .text.item { 904 | box-shadow: none !important; 905 | } 906 | .ui.secondary.pointing.menu .item:after { 907 | display: none; 908 | } 909 | 910 | /* Hover */ 911 | .ui.secondary.pointing.menu .dropdown.item:hover, 912 | .ui.secondary.pointing.menu .link.item:hover, 913 | .ui.secondary.pointing.menu a.item:hover { 914 | background-color: transparent; 915 | color: rgba(0, 0, 0, 0.87); 916 | } 917 | 918 | /* Pressed */ 919 | .ui.secondary.pointing.menu .dropdown.item:active, 920 | .ui.secondary.pointing.menu .link.item:active, 921 | .ui.secondary.pointing.menu a.item:active { 922 | background-color: transparent; 923 | border-color: rgba(34, 36, 38, 0.15); 924 | } 925 | 926 | /* Active */ 927 | .ui.secondary.pointing.menu .active.item { 928 | background-color: transparent; 929 | box-shadow: none; 930 | border-color: #1B1C1D; 931 | font-weight: bold; 932 | color: rgba(0, 0, 0, 0.95); 933 | } 934 | 935 | /* Active Hover */ 936 | .ui.secondary.pointing.menu .active.item:hover { 937 | border-color: #1B1C1D; 938 | color: rgba(0, 0, 0, 0.95); 939 | } 940 | 941 | /* Active Dropdown */ 942 | .ui.secondary.pointing.menu .active.dropdown.item { 943 | border-color: transparent; 944 | } 945 | 946 | /* Vertical Pointing */ 947 | .ui.secondary.vertical.pointing.menu { 948 | border-bottom-width: 0px; 949 | border-right-width: 2px; 950 | border-right-style: solid; 951 | border-right-color: rgba(34, 36, 38, 0.15); 952 | } 953 | .ui.secondary.vertical.pointing.menu .item { 954 | border-bottom: none; 955 | border-right-style: solid; 956 | border-right-color: transparent; 957 | border-radius: 0em !important; 958 | margin: 0em -2px 0em 0em; 959 | border-right-width: 2px; 960 | } 961 | 962 | /* Vertical Active */ 963 | .ui.secondary.vertical.pointing.menu .active.item { 964 | border-color: #1B1C1D; 965 | } 966 | 967 | /* Inverted */ 968 | .ui.secondary.inverted.pointing.menu { 969 | border-color: rgba(255, 255, 255, 0.1); 970 | } 971 | .ui.secondary.inverted.pointing.menu { 972 | border-width: 2px; 973 | border-color: rgba(34, 36, 38, 0.15); 974 | } 975 | .ui.secondary.inverted.pointing.menu .item { 976 | color: rgba(255, 255, 255, 0.9); 977 | } 978 | .ui.secondary.inverted.pointing.menu .header.item { 979 | color: #FFFFFF !important; 980 | } 981 | 982 | /* Hover */ 983 | .ui.secondary.inverted.pointing.menu .link.item:hover, 984 | .ui.secondary.inverted.pointing.menu a.item:hover { 985 | color: rgba(0, 0, 0, 0.95); 986 | } 987 | 988 | /* Active */ 989 | .ui.secondary.inverted.pointing.menu .active.item { 990 | border-color: #FFFFFF; 991 | color: #ffffff; 992 | } 993 | 994 | /*-------------- 995 | Text Menu 996 | ---------------*/ 997 | 998 | .ui.text.menu { 999 | background: none transparent; 1000 | border-radius: 0px; 1001 | box-shadow: none; 1002 | border: none; 1003 | margin: 1em -0.5em; 1004 | } 1005 | .ui.text.menu .item { 1006 | border-radius: 0px; 1007 | box-shadow: none; 1008 | align-self: center; 1009 | margin: 0em 0em; 1010 | padding: 0.35714286em 0.5em; 1011 | font-weight: normal; 1012 | color: rgba(0, 0, 0, 0.6); 1013 | transition: opacity 0.1s ease; 1014 | } 1015 | 1016 | /* Border */ 1017 | .ui.text.menu .item:before, 1018 | .ui.text.menu .menu .item:before { 1019 | display: none !important; 1020 | } 1021 | 1022 | /* Header */ 1023 | .ui.text.menu .header.item { 1024 | background-color: transparent; 1025 | opacity: 1; 1026 | color: rgba(0, 0, 0, 0.85); 1027 | font-size: 0.92857143em; 1028 | text-transform: uppercase; 1029 | font-weight: bold; 1030 | } 1031 | 1032 | /* Image */ 1033 | .ui.text.menu .item > img:not(.ui) { 1034 | margin: 0em; 1035 | } 1036 | 1037 | /*--- fluid text ---*/ 1038 | 1039 | .ui.text.item.menu .item { 1040 | margin: 0em; 1041 | } 1042 | 1043 | /*--- vertical text ---*/ 1044 | 1045 | .ui.vertical.text.menu { 1046 | margin: 1em 0em; 1047 | } 1048 | .ui.vertical.text.menu:first-child { 1049 | margin-top: 0rem; 1050 | } 1051 | .ui.vertical.text.menu:last-child { 1052 | margin-bottom: 0rem; 1053 | } 1054 | .ui.vertical.text.menu .item { 1055 | margin: 0.57142857em 0em; 1056 | padding-left: 0em; 1057 | padding-right: 0em; 1058 | } 1059 | .ui.vertical.text.menu .item > i.icon { 1060 | float: none; 1061 | margin: 0em 0.35714286em 0em 0em; 1062 | } 1063 | .ui.vertical.text.menu .header.item { 1064 | margin: 0.57142857em 0em 0.71428571em; 1065 | } 1066 | 1067 | /* Vertical Sub Menu */ 1068 | .ui.vertical.text.menu .item:not(.dropdown) > .menu { 1069 | margin: 0em; 1070 | } 1071 | .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { 1072 | margin: 0em; 1073 | padding: 0.5em 0em; 1074 | } 1075 | 1076 | /*--- hover ---*/ 1077 | 1078 | .ui.text.menu .item:hover { 1079 | opacity: 1; 1080 | background-color: transparent; 1081 | } 1082 | 1083 | /*--- active ---*/ 1084 | 1085 | .ui.text.menu .active.item { 1086 | background-color: transparent; 1087 | border: none; 1088 | box-shadow: none; 1089 | font-weight: normal; 1090 | color: rgba(0, 0, 0, 0.95); 1091 | } 1092 | 1093 | /*--- active hover ---*/ 1094 | 1095 | .ui.text.menu .active.item:hover { 1096 | background-color: transparent; 1097 | } 1098 | 1099 | /* Disable Bariations */ 1100 | .ui.text.pointing.menu .active.item:after { 1101 | box-shadow: none; 1102 | } 1103 | .ui.text.attached.menu { 1104 | box-shadow: none; 1105 | } 1106 | 1107 | /* Inverted */ 1108 | .ui.inverted.text.menu, 1109 | .ui.inverted.text.menu .item, 1110 | .ui.inverted.text.menu .item:hover, 1111 | .ui.inverted.text.menu .active.item { 1112 | background-color: transparent !important; 1113 | } 1114 | 1115 | /* Fluid */ 1116 | .ui.fluid.text.menu { 1117 | margin-left: 0em; 1118 | margin-right: 0em; 1119 | } 1120 | 1121 | /*-------------- 1122 | Icon Only 1123 | ---------------*/ 1124 | 1125 | 1126 | /* Vertical Menu */ 1127 | .ui.vertical.icon.menu { 1128 | display: inline-block; 1129 | width: auto; 1130 | } 1131 | 1132 | /* Item */ 1133 | .ui.icon.menu .item { 1134 | height: auto; 1135 | text-align: center; 1136 | color: #1B1C1D; 1137 | } 1138 | 1139 | /* Icon */ 1140 | .ui.icon.menu .item > .icon:not(.dropdown) { 1141 | margin: 0; 1142 | opacity: 1; 1143 | } 1144 | 1145 | /* Icon Gylph */ 1146 | .ui.icon.menu .icon:before { 1147 | opacity: 1; 1148 | } 1149 | 1150 | /* (x) Item Icon */ 1151 | .ui.menu .icon.item > .icon { 1152 | width: auto; 1153 | margin: 0em auto; 1154 | } 1155 | 1156 | /* Vertical Icon */ 1157 | .ui.vertical.icon.menu .item > .icon:not(.dropdown) { 1158 | display: block; 1159 | opacity: 1; 1160 | margin: 0em auto; 1161 | float: none; 1162 | } 1163 | 1164 | /* Inverted */ 1165 | .ui.inverted.icon.menu .item { 1166 | color: #FFFFFF; 1167 | } 1168 | 1169 | /*-------------- 1170 | Labeled Icon 1171 | ---------------*/ 1172 | 1173 | 1174 | /* Menu */ 1175 | .ui.labeled.icon.menu { 1176 | text-align: center; 1177 | } 1178 | 1179 | /* Item */ 1180 | .ui.labeled.icon.menu .item { 1181 | min-width: 6em; 1182 | flex-direction: column; 1183 | } 1184 | 1185 | /* Icon */ 1186 | .ui.labeled.icon.menu .item > .icon:not(.dropdown) { 1187 | height: 1em; 1188 | display: block; 1189 | font-size: 1.71428571em !important; 1190 | margin: 0em auto 0.5rem !important; 1191 | } 1192 | 1193 | /* Fluid */ 1194 | .ui.fluid.labeled.icon.menu > .item { 1195 | min-width: 0em; 1196 | } 1197 | 1198 | 1199 | /******************************* 1200 | Variations 1201 | *******************************/ 1202 | 1203 | 1204 | /*-------------- 1205 | Stackable 1206 | ---------------*/ 1207 | 1208 | @media only screen and (max-width: 767px) { 1209 | .ui.stackable.menu { 1210 | flex-direction: column; 1211 | } 1212 | .ui.stackable.menu .item { 1213 | width: 100% !important; 1214 | } 1215 | .ui.stackable.menu .item:before { 1216 | position: absolute; 1217 | content: ''; 1218 | top: auto; 1219 | bottom: 0px; 1220 | left: 0px; 1221 | width: 100%; 1222 | height: 1px; 1223 | background: rgba(34, 36, 38, 0.1); 1224 | } 1225 | .ui.stackable.menu .left.menu, 1226 | .ui.stackable.menu .left.item { 1227 | margin-right: 0 !important; 1228 | } 1229 | .ui.stackable.menu .right.menu, 1230 | .ui.stackable.menu .right.item { 1231 | margin-left: 0 !important; 1232 | } 1233 | .ui.stackable.menu .right.menu, 1234 | .ui.stackable.menu .left.menu { 1235 | flex-direction: column; 1236 | } 1237 | } 1238 | 1239 | /*-------------- 1240 | Colors 1241 | ---------------*/ 1242 | 1243 | 1244 | /*--- Standard Colors ---*/ 1245 | 1246 | .ui.menu .red.active.item, 1247 | .ui.red.menu .active.item { 1248 | border-color: #DB2828 !important; 1249 | color: #DB2828 !important; 1250 | } 1251 | .ui.menu .orange.active.item, 1252 | .ui.orange.menu .active.item { 1253 | border-color: #F2711C !important; 1254 | color: #F2711C !important; 1255 | } 1256 | .ui.menu .yellow.active.item, 1257 | .ui.yellow.menu .active.item { 1258 | border-color: #FBBD08 !important; 1259 | color: #FBBD08 !important; 1260 | } 1261 | .ui.menu .olive.active.item, 1262 | .ui.olive.menu .active.item { 1263 | border-color: #B5CC18 !important; 1264 | color: #B5CC18 !important; 1265 | } 1266 | .ui.menu .green.active.item, 1267 | .ui.green.menu .active.item { 1268 | border-color: #21BA45 !important; 1269 | color: #21BA45 !important; 1270 | } 1271 | .ui.menu .teal.active.item, 1272 | .ui.teal.menu .active.item { 1273 | border-color: #00B5AD !important; 1274 | color: #00B5AD !important; 1275 | } 1276 | .ui.menu .blue.active.item, 1277 | .ui.blue.menu .active.item { 1278 | border-color: #2185D0 !important; 1279 | color: #2185D0 !important; 1280 | } 1281 | .ui.menu .violet.active.item, 1282 | .ui.violet.menu .active.item { 1283 | border-color: #6435C9 !important; 1284 | color: #6435C9 !important; 1285 | } 1286 | .ui.menu .purple.active.item, 1287 | .ui.purple.menu .active.item { 1288 | border-color: #A333C8 !important; 1289 | color: #A333C8 !important; 1290 | } 1291 | .ui.menu .pink.active.item, 1292 | .ui.pink.menu .active.item { 1293 | border-color: #E03997 !important; 1294 | color: #E03997 !important; 1295 | } 1296 | .ui.menu .brown.active.item, 1297 | .ui.brown.menu .active.item { 1298 | border-color: #A5673F !important; 1299 | color: #A5673F !important; 1300 | } 1301 | .ui.menu .grey.active.item, 1302 | .ui.grey.menu .active.item { 1303 | border-color: #767676 !important; 1304 | color: #767676 !important; 1305 | } 1306 | 1307 | /*-------------- 1308 | Inverted 1309 | ---------------*/ 1310 | 1311 | .ui.inverted.menu { 1312 | border: 0px solid transparent; 1313 | background: #1B1C1D; 1314 | box-shadow: none; 1315 | } 1316 | 1317 | /* Menu Item */ 1318 | .ui.inverted.menu .item, 1319 | .ui.inverted.menu .item > a:not(.ui) { 1320 | background: transparent; 1321 | color: rgba(255, 255, 255, 0.9); 1322 | } 1323 | .ui.inverted.menu .item.menu { 1324 | background: transparent; 1325 | } 1326 | 1327 | /*--- Border ---*/ 1328 | 1329 | .ui.inverted.menu .item:before { 1330 | background: rgba(255, 255, 255, 0.08); 1331 | } 1332 | .ui.vertical.inverted.menu .item:before { 1333 | background: rgba(255, 255, 255, 0.08); 1334 | } 1335 | 1336 | /* Sub Menu */ 1337 | .ui.vertical.inverted.menu .menu .item, 1338 | .ui.vertical.inverted.menu .menu .item a:not(.ui) { 1339 | color: rgba(255, 255, 255, 0.5); 1340 | } 1341 | 1342 | /* Header */ 1343 | .ui.inverted.menu .header.item { 1344 | margin: 0em; 1345 | background: transparent; 1346 | box-shadow: none; 1347 | } 1348 | 1349 | /* Disabled */ 1350 | .ui.inverted.menu .item.disabled, 1351 | .ui.inverted.menu .item.disabled:hover { 1352 | color: rgba(225, 225, 225, 0.3); 1353 | } 1354 | 1355 | /*--- Hover ---*/ 1356 | 1357 | .ui.link.inverted.menu .item:hover, 1358 | .ui.inverted.menu .dropdown.item:hover, 1359 | .ui.inverted.menu .link.item:hover, 1360 | .ui.inverted.menu a.item:hover { 1361 | background: rgba(255, 255, 255, 0.08); 1362 | color: #ffffff; 1363 | } 1364 | .ui.vertical.inverted.menu .item .menu a.item:hover, 1365 | .ui.vertical.inverted.menu .item .menu .link.item:hover { 1366 | background: transparent; 1367 | color: #ffffff; 1368 | } 1369 | 1370 | /*--- Pressed ---*/ 1371 | 1372 | .ui.inverted.menu a.item:active, 1373 | .ui.inverted.menu .link.item:active { 1374 | background: rgba(255, 255, 255, 0.08); 1375 | color: #ffffff; 1376 | } 1377 | 1378 | /*--- Active ---*/ 1379 | 1380 | .ui.inverted.menu .active.item { 1381 | background: rgba(255, 255, 255, 0.15); 1382 | color: #ffffff !important; 1383 | } 1384 | .ui.inverted.vertical.menu .item .menu .active.item { 1385 | background: transparent; 1386 | color: #FFFFFF; 1387 | } 1388 | .ui.inverted.pointing.menu .active.item:after { 1389 | background: #3D3E3F !important; 1390 | margin: 0em !important; 1391 | box-shadow: none !important; 1392 | border: none !important; 1393 | } 1394 | 1395 | /*--- Active Hover ---*/ 1396 | 1397 | .ui.inverted.menu .active.item:hover { 1398 | background: rgba(255, 255, 255, 0.15); 1399 | color: #FFFFFF !important; 1400 | } 1401 | .ui.inverted.pointing.menu .active.item:hover:after { 1402 | background: #3D3E3F !important; 1403 | } 1404 | 1405 | /*-------------- 1406 | Floated 1407 | ---------------*/ 1408 | 1409 | .ui.floated.menu { 1410 | float: left; 1411 | margin: 0rem 0.5rem 0rem 0rem; 1412 | } 1413 | .ui.floated.menu .item:last-child:before { 1414 | display: none; 1415 | } 1416 | .ui.right.floated.menu { 1417 | float: right; 1418 | margin: 0rem 0rem 0rem 0.5rem; 1419 | } 1420 | 1421 | /*-------------- 1422 | Inverted 1423 | ---------------*/ 1424 | 1425 | 1426 | /* Red */ 1427 | .ui.inverted.menu .red.active.item, 1428 | .ui.inverted.red.menu { 1429 | background-color: #DB2828; 1430 | } 1431 | .ui.inverted.red.menu .item:before { 1432 | background-color: rgba(34, 36, 38, 0.1); 1433 | } 1434 | .ui.inverted.red.menu .active.item { 1435 | background-color: rgba(0, 0, 0, 0.1) !important; 1436 | } 1437 | 1438 | /* Orange */ 1439 | .ui.inverted.menu .orange.active.item, 1440 | .ui.inverted.orange.menu { 1441 | background-color: #F2711C; 1442 | } 1443 | .ui.inverted.orange.menu .item:before { 1444 | background-color: rgba(34, 36, 38, 0.1); 1445 | } 1446 | .ui.inverted.orange.menu .active.item { 1447 | background-color: rgba(0, 0, 0, 0.1) !important; 1448 | } 1449 | 1450 | /* Yellow */ 1451 | .ui.inverted.menu .yellow.active.item, 1452 | .ui.inverted.yellow.menu { 1453 | background-color: #FBBD08; 1454 | } 1455 | .ui.inverted.yellow.menu .item:before { 1456 | background-color: rgba(34, 36, 38, 0.1); 1457 | } 1458 | .ui.inverted.yellow.menu .active.item { 1459 | background-color: rgba(0, 0, 0, 0.1) !important; 1460 | } 1461 | 1462 | /* Olive */ 1463 | .ui.inverted.menu .olive.active.item, 1464 | .ui.inverted.olive.menu { 1465 | background-color: #B5CC18; 1466 | } 1467 | .ui.inverted.olive.menu .item:before { 1468 | background-color: rgba(34, 36, 38, 0.1); 1469 | } 1470 | .ui.inverted.olive.menu .active.item { 1471 | background-color: rgba(0, 0, 0, 0.1) !important; 1472 | } 1473 | 1474 | /* Green */ 1475 | .ui.inverted.menu .green.active.item, 1476 | .ui.inverted.green.menu { 1477 | background-color: #21BA45; 1478 | } 1479 | .ui.inverted.green.menu .item:before { 1480 | background-color: rgba(34, 36, 38, 0.1); 1481 | } 1482 | .ui.inverted.green.menu .active.item { 1483 | background-color: rgba(0, 0, 0, 0.1) !important; 1484 | } 1485 | 1486 | /* Teal */ 1487 | .ui.inverted.menu .teal.active.item, 1488 | .ui.inverted.teal.menu { 1489 | background-color: #00B5AD; 1490 | } 1491 | .ui.inverted.teal.menu .item:before { 1492 | background-color: rgba(34, 36, 38, 0.1); 1493 | } 1494 | .ui.inverted.teal.menu .active.item { 1495 | background-color: rgba(0, 0, 0, 0.1) !important; 1496 | } 1497 | 1498 | /* Blue */ 1499 | .ui.inverted.menu .blue.active.item, 1500 | .ui.inverted.blue.menu { 1501 | background-color: #2185D0; 1502 | } 1503 | .ui.inverted.blue.menu .item:before { 1504 | background-color: rgba(34, 36, 38, 0.1); 1505 | } 1506 | .ui.inverted.blue.menu .active.item { 1507 | background-color: rgba(0, 0, 0, 0.1) !important; 1508 | } 1509 | 1510 | /* Violet */ 1511 | .ui.inverted.menu .violet.active.item, 1512 | .ui.inverted.violet.menu { 1513 | background-color: #6435C9; 1514 | } 1515 | .ui.inverted.violet.menu .item:before { 1516 | background-color: rgba(34, 36, 38, 0.1); 1517 | } 1518 | .ui.inverted.violet.menu .active.item { 1519 | background-color: rgba(0, 0, 0, 0.1) !important; 1520 | } 1521 | 1522 | /* Purple */ 1523 | .ui.inverted.menu .purple.active.item, 1524 | .ui.inverted.purple.menu { 1525 | background-color: #A333C8; 1526 | } 1527 | .ui.inverted.purple.menu .item:before { 1528 | background-color: rgba(34, 36, 38, 0.1); 1529 | } 1530 | .ui.inverted.purple.menu .active.item { 1531 | background-color: rgba(0, 0, 0, 0.1) !important; 1532 | } 1533 | 1534 | /* Pink */ 1535 | .ui.inverted.menu .pink.active.item, 1536 | .ui.inverted.pink.menu { 1537 | background-color: #E03997; 1538 | } 1539 | .ui.inverted.pink.menu .item:before { 1540 | background-color: rgba(34, 36, 38, 0.1); 1541 | } 1542 | .ui.inverted.pink.menu .active.item { 1543 | background-color: rgba(0, 0, 0, 0.1) !important; 1544 | } 1545 | 1546 | /* Brown */ 1547 | .ui.inverted.menu .brown.active.item, 1548 | .ui.inverted.brown.menu { 1549 | background-color: #A5673F; 1550 | } 1551 | .ui.inverted.brown.menu .item:before { 1552 | background-color: rgba(34, 36, 38, 0.1); 1553 | } 1554 | .ui.inverted.brown.menu .active.item { 1555 | background-color: rgba(0, 0, 0, 0.1) !important; 1556 | } 1557 | 1558 | /* Grey */ 1559 | .ui.inverted.menu .grey.active.item, 1560 | .ui.inverted.grey.menu { 1561 | background-color: #767676; 1562 | } 1563 | .ui.inverted.grey.menu .item:before { 1564 | background-color: rgba(34, 36, 38, 0.1); 1565 | } 1566 | .ui.inverted.grey.menu .active.item { 1567 | background-color: rgba(0, 0, 0, 0.1) !important; 1568 | } 1569 | 1570 | /*-------------- 1571 | Fitted 1572 | ---------------*/ 1573 | 1574 | .ui.fitted.menu .item, 1575 | .ui.fitted.menu .item .menu .item, 1576 | .ui.menu .fitted.item { 1577 | padding: 0em; 1578 | } 1579 | .ui.horizontally.fitted.menu .item, 1580 | .ui.horizontally.fitted.menu .item .menu .item, 1581 | .ui.menu .horizontally.fitted.item { 1582 | padding-top: 0.92857143em; 1583 | padding-bottom: 0.92857143em; 1584 | } 1585 | .ui.vertically.fitted.menu .item, 1586 | .ui.vertically.fitted.menu .item .menu .item, 1587 | .ui.menu .vertically.fitted.item { 1588 | padding-left: 1.14285714em; 1589 | padding-right: 1.14285714em; 1590 | } 1591 | 1592 | /*-------------- 1593 | Borderless 1594 | ---------------*/ 1595 | 1596 | .ui.borderless.menu .item:before, 1597 | .ui.borderless.menu .item .menu .item:before, 1598 | .ui.menu .borderless.item:before { 1599 | background: none !important; 1600 | } 1601 | 1602 | /*------------------- 1603 | Compact 1604 | --------------------*/ 1605 | 1606 | .ui.compact.menu { 1607 | display: inline-flex; 1608 | margin: 0em; 1609 | vertical-align: middle; 1610 | } 1611 | .ui.compact.vertical.menu { 1612 | display: inline-block; 1613 | } 1614 | .ui.compact.menu .item:last-child { 1615 | border-radius: 0em 0.28571429rem 0.28571429rem 0em; 1616 | } 1617 | .ui.compact.menu .item:last-child:before { 1618 | display: none; 1619 | } 1620 | .ui.compact.vertical.menu { 1621 | width: auto !important; 1622 | } 1623 | .ui.compact.vertical.menu .item:last-child::before { 1624 | display: block; 1625 | } 1626 | 1627 | /*------------------- 1628 | Fluid 1629 | --------------------*/ 1630 | 1631 | .ui.menu.fluid, 1632 | .ui.vertical.menu.fluid { 1633 | width: 100% !important; 1634 | } 1635 | 1636 | /*------------------- 1637 | Evenly Sized 1638 | --------------------*/ 1639 | 1640 | .ui.item.menu, 1641 | .ui.item.menu .item { 1642 | width: 100%; 1643 | padding-left: 0em !important; 1644 | padding-right: 0em !important; 1645 | margin-left: 0em !important; 1646 | margin-right: 0em !important; 1647 | text-align: center; 1648 | justify-content: center; 1649 | } 1650 | .ui.attached.item.menu { 1651 | margin: 0em -1px !important; 1652 | } 1653 | .ui.item.menu .item:last-child:before { 1654 | display: none; 1655 | } 1656 | .ui.menu.two.item .item { 1657 | width: 50%; 1658 | } 1659 | .ui.menu.three.item .item { 1660 | width: 33.333%; 1661 | } 1662 | .ui.menu.four.item .item { 1663 | width: 25%; 1664 | } 1665 | .ui.menu.five.item .item { 1666 | width: 20%; 1667 | } 1668 | .ui.menu.six.item .item { 1669 | width: 16.666%; 1670 | } 1671 | .ui.menu.seven.item .item { 1672 | width: 14.285%; 1673 | } 1674 | .ui.menu.eight.item .item { 1675 | width: 12.5%; 1676 | } 1677 | .ui.menu.nine.item .item { 1678 | width: 11.11%; 1679 | } 1680 | .ui.menu.ten.item .item { 1681 | width: 10%; 1682 | } 1683 | .ui.menu.eleven.item .item { 1684 | width: 9.09%; 1685 | } 1686 | .ui.menu.twelve.item .item { 1687 | width: 8.333%; 1688 | } 1689 | 1690 | /*-------------- 1691 | Fixed 1692 | ---------------*/ 1693 | 1694 | .ui.menu.fixed { 1695 | position: fixed; 1696 | z-index: 101; 1697 | margin: 0em; 1698 | width: 100%; 1699 | } 1700 | .ui.menu.fixed, 1701 | .ui.menu.fixed .item:first-child, 1702 | .ui.menu.fixed .item:last-child { 1703 | border-radius: 0px !important; 1704 | } 1705 | .ui.fixed.menu, 1706 | .ui[class*="top fixed"].menu { 1707 | top: 0px; 1708 | left: 0px; 1709 | right: auto; 1710 | bottom: auto; 1711 | } 1712 | .ui[class*="top fixed"].menu { 1713 | border-top: none; 1714 | border-left: none; 1715 | border-right: none; 1716 | } 1717 | .ui[class*="right fixed"].menu { 1718 | border-top: none; 1719 | border-bottom: none; 1720 | border-right: none; 1721 | top: 0px; 1722 | right: 0px; 1723 | left: auto; 1724 | bottom: auto; 1725 | width: auto; 1726 | height: 100%; 1727 | } 1728 | .ui[class*="bottom fixed"].menu { 1729 | border-bottom: none; 1730 | border-left: none; 1731 | border-right: none; 1732 | bottom: 0px; 1733 | left: 0px; 1734 | top: auto; 1735 | right: auto; 1736 | } 1737 | .ui[class*="left fixed"].menu { 1738 | border-top: none; 1739 | border-bottom: none; 1740 | border-left: none; 1741 | top: 0px; 1742 | left: 0px; 1743 | right: auto; 1744 | bottom: auto; 1745 | width: auto; 1746 | height: 100%; 1747 | } 1748 | 1749 | /* Coupling with Grid */ 1750 | .ui.fixed.menu + .ui.grid { 1751 | padding-top: 2.75rem; 1752 | } 1753 | 1754 | /*------------------- 1755 | Pointing 1756 | --------------------*/ 1757 | 1758 | .ui.pointing.menu .item:after { 1759 | visibility: hidden; 1760 | position: absolute; 1761 | content: ''; 1762 | top: 100%; 1763 | left: 50%; 1764 | transform: translateX(-50%) translateY(-50%) rotate(45deg); 1765 | background: none; 1766 | margin: 0.5px 0em 0em; 1767 | width: 0.57142857em; 1768 | height: 0.57142857em; 1769 | border: none; 1770 | border-bottom: 1px solid #D4D4D5; 1771 | border-right: 1px solid #D4D4D5; 1772 | z-index: 2; 1773 | transition: background 0.1s ease; 1774 | } 1775 | .ui.vertical.pointing.menu .item:after { 1776 | position: absolute; 1777 | top: 50%; 1778 | right: 0%; 1779 | bottom: auto; 1780 | left: auto; 1781 | transform: translateX(50%) translateY(-50%) rotate(45deg); 1782 | margin: 0em -0.5px 0em 0em; 1783 | border: none; 1784 | border-top: 1px solid #D4D4D5; 1785 | border-right: 1px solid #D4D4D5; 1786 | } 1787 | 1788 | /* Active */ 1789 | .ui.pointing.menu .active.item:after { 1790 | visibility: visible; 1791 | } 1792 | .ui.pointing.menu .active.dropdown.item:after { 1793 | visibility: hidden; 1794 | } 1795 | 1796 | /* Don't double up pointers */ 1797 | .ui.pointing.menu .dropdown.active.item:after, 1798 | .ui.pointing.menu .active.item .menu .active.item:after { 1799 | display: none; 1800 | } 1801 | 1802 | /* Colors */ 1803 | .ui.pointing.menu .active.item:hover:after { 1804 | background-color: #F2F2F2; 1805 | } 1806 | .ui.pointing.menu .active.item:after { 1807 | background-color: #F2F2F2; 1808 | } 1809 | .ui.pointing.menu .active.item:hover:after { 1810 | background-color: #F2F2F2; 1811 | } 1812 | .ui.vertical.pointing.menu .active.item:hover:after { 1813 | background-color: #F2F2F2; 1814 | } 1815 | .ui.vertical.pointing.menu .active.item:after { 1816 | background-color: #F2F2F2; 1817 | } 1818 | .ui.vertical.pointing.menu .menu .active.item:after { 1819 | background-color: #FFFFFF; 1820 | } 1821 | 1822 | /*-------------- 1823 | Attached 1824 | ---------------*/ 1825 | 1826 | 1827 | /* Middle */ 1828 | .ui.attached.menu { 1829 | top: 0px; 1830 | bottom: 0px; 1831 | border-radius: 0px; 1832 | margin: 0em -1px; 1833 | width: calc(100% - (-1px * 2)); 1834 | max-width: calc(100% - (-1px * 2)); 1835 | box-shadow: none; 1836 | } 1837 | .ui.attached + .ui.attached.menu:not(.top) { 1838 | border-top: none; 1839 | } 1840 | 1841 | /* Top */ 1842 | .ui[class*="top attached"].menu { 1843 | bottom: 0px; 1844 | margin-bottom: 0em; 1845 | top: 0px; 1846 | margin-top: 1rem; 1847 | border-radius: 0.28571429rem 0.28571429rem 0em 0em; 1848 | } 1849 | .ui.menu[class*="top attached"]:first-child { 1850 | margin-top: 0em; 1851 | } 1852 | 1853 | /* Bottom */ 1854 | .ui[class*="bottom attached"].menu { 1855 | bottom: 0px; 1856 | margin-top: 0em; 1857 | top: 0px; 1858 | margin-bottom: 1rem; 1859 | box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; 1860 | border-radius: 0em 0em 0.28571429rem 0.28571429rem; 1861 | } 1862 | .ui[class*="bottom attached"].menu:last-child { 1863 | margin-bottom: 0em; 1864 | } 1865 | 1866 | /* Attached Menu Item */ 1867 | .ui.top.attached.menu > .item:first-child { 1868 | border-radius: 0.28571429rem 0em 0em 0em; 1869 | } 1870 | .ui.bottom.attached.menu > .item:first-child { 1871 | border-radius: 0em 0em 0em 0.28571429rem; 1872 | } 1873 | 1874 | /* Tabular Attached */ 1875 | .ui.attached.menu:not(.tabular) { 1876 | border: 1px solid #D4D4D5; 1877 | } 1878 | .ui.attached.inverted.menu { 1879 | border: none; 1880 | } 1881 | .ui.attached.tabular.menu { 1882 | margin-left: 0; 1883 | margin-right: 0; 1884 | width: 100%; 1885 | } 1886 | 1887 | /*-------------- 1888 | Sizes 1889 | ---------------*/ 1890 | 1891 | 1892 | /* Mini */ 1893 | .ui.mini.menu { 1894 | font-size: 0.78571429rem; 1895 | } 1896 | .ui.mini.vertical.menu { 1897 | width: 9rem; 1898 | } 1899 | 1900 | /* Tiny */ 1901 | .ui.tiny.menu { 1902 | font-size: 0.85714286rem; 1903 | } 1904 | .ui.tiny.vertical.menu { 1905 | width: 11rem; 1906 | } 1907 | 1908 | /* Small */ 1909 | .ui.small.menu { 1910 | font-size: 0.92857143rem; 1911 | } 1912 | .ui.small.vertical.menu { 1913 | width: 13rem; 1914 | } 1915 | 1916 | /* Medium */ 1917 | .ui.menu { 1918 | font-size: 1rem; 1919 | } 1920 | .ui.vertical.menu { 1921 | width: 15rem; 1922 | } 1923 | 1924 | /* Large */ 1925 | .ui.large.menu { 1926 | font-size: 1.07142857rem; 1927 | } 1928 | .ui.large.vertical.menu { 1929 | width: 18rem; 1930 | } 1931 | 1932 | /* Huge */ 1933 | .ui.huge.menu { 1934 | font-size: 1.21428571rem; 1935 | } 1936 | .ui.huge.vertical.menu { 1937 | width: 22rem; 1938 | } 1939 | 1940 | /* Big */ 1941 | .ui.big.menu { 1942 | font-size: 1.14285714rem; 1943 | } 1944 | .ui.big.vertical.menu { 1945 | width: 20rem; 1946 | } 1947 | 1948 | /* Massive */ 1949 | .ui.massive.menu { 1950 | font-size: 1.28571429rem; 1951 | } 1952 | .ui.massive.vertical.menu { 1953 | width: 25rem; 1954 | } 1955 | 1956 | 1957 | /******************************* 1958 | Theme Overrides 1959 | *******************************/ 1960 | 1961 | 1962 | 1963 | /******************************* 1964 | Site Overrides 1965 | *******************************/ 1966 | 1967 | -------------------------------------------------------------------------------- /menu.min.css: -------------------------------------------------------------------------------- 1 | .ui.menu{display:flex;margin:1rem 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;font-weight:400;border:1px solid rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.28571429rem;min-height:2.85714286em}.ui.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.menu:first-child{margin-top:0}.ui.menu:last-child{margin-bottom:0}.ui.menu .menu{margin:0}.ui.menu:not(.vertical)>.menu{display:flex}.ui.menu:not(.vertical) .item{display:flex;align-items:center}.ui.menu .item{position:relative;vertical-align:middle;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;flex:0 0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;padding:.92857143em 1.14285714em;text-transform:none;color:rgba(0,0,0,.87);font-weight:400;transition:background .1s ease,box-shadow .1s ease,color .1s ease}.ui.menu>.item:first-child{border-radius:.28571429rem 0 0 .28571429rem}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;height:100%;width:1px;background:rgba(34,36,38,.1)}.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child,.ui.menu .text.item>*{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;line-height:1.3}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:last-child{margin-bottom:0}.ui.menu .item>i.icon{opacity:.9;float:none;margin:0 .35714286em 0 0}.ui.menu:not(.vertical) .item>.button{position:relative;top:0;margin:-.5em 0;padding-bottom:.78571429em;padding-top:.78571429em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:flex;align-items:inherit;flex-direction:inherit}.ui.menu .item>.input{width:100%}.ui.menu:not(.vertical) .item>.input{position:relative;top:0;margin:-.5em 0}.ui.menu .item>.input input{font-size:1em;padding-top:.57142857em;padding-bottom:.57142857em}.ui.menu .header.item,.ui.vertical.menu .header.item{margin:0;background:'';text-transform:normal;font-weight:700}.ui.vertical.menu .item>.header:not(.ui){margin:0 0 .5em;font-size:1em;font-weight:700}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{min-width:calc(100% - 1px);border-radius:0 0 .28571429rem .28571429rem;background:#fff;margin:0 0 0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);flex-direction:column!important}.ui.menu .ui.dropdown .menu>.item{margin:0;text-align:left;font-size:1em!important;padding:.78571429em 1.14285714em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;box-shadow:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.selected.item{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.active.item{background:rgba(0,0,0,.03)!important;font-weight:700!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown.item .menu .item:not(.filtered){display:block}.ui.menu .ui.dropdown .menu>.item .icon:not(.dropdown){display:inline-block;font-size:1em!important;float:none;margin:0 .75em 0 0!important}.ui.secondary.menu .dropdown.item>.menu,.ui.text.menu .dropdown.item>.menu{border-radius:.28571429rem;margin-top:.35714286em}.ui.menu .pointing.dropdown.item .menu{margin-top:.75em}.ui.inverted.menu .search.dropdown.item>.search,.ui.inverted.menu .search.dropdown.item>.text{color:rgba(255,255,255,.9)}.ui.vertical.menu .dropdown.item>.icon{float:right;content:"\f0da";margin-left:1em}.ui.vertical.menu .dropdown.item .menu{left:100%;min-width:0;margin:0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .28571429rem .28571429rem .28571429rem}.ui.vertical.menu .dropdown.item.upward .menu{bottom:0}.ui.vertical.menu .dropdown.item:not(.upward) .menu{top:0}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label{background:#999;color:#fff;margin-left:1em;padding:.3em .78571429em}.ui.vertical.menu .item>.label{background:#999;color:#fff;margin-top:-.15em;margin-bottom:-.15em;padding:.3em .78571429em}.ui.menu .item>.floating.label{padding:.3em .78571429em}.ui.menu .item>img:not(.ui){display:inline-block;vertical-align:middle;margin:-.3em 0;width:2.5em}.ui.vertical.menu .item>img:not(.ui):only-child{display:block;max-width:100%;width:auto}.ui.menu .list .item:before{background:0 0!important}.ui.vertical.sidebar.menu>.item:first-child:before{display:block!important}.ui.vertical.sidebar.menu>.item::before{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.menu>.ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media only screen and (min-width:768px){.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(34,36,38,.1)}}.ui.link.menu .item:hover,.ui.menu .dropdown.item:hover,.ui.menu .link.item:hover,.ui.menu a.item:hover{cursor:pointer;background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.link.menu .item:active,.ui.menu .link.item:active,.ui.menu a.item:active{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.menu .active.item{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);font-weight:400;box-shadow:none}.ui.menu .active.item>i.icon{opacity:1}.ui.menu .active.item:hover,.ui.vertical.menu .active.item:hover{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.menu .item.disabled,.ui.menu .item.disabled:hover{cursor:default!important;background-color:transparent!important;color:rgba(40,40,40,.3)!important}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) :not(.dropdown)>.left.menu{display:flex;margin-right:auto!important}.ui.menu:not(.vertical) .right.item,.ui.menu:not(.vertical) .right.menu{display:flex;margin-left:auto!important}.ui.menu .right.item::before,.ui.menu .right.menu>.item::before{right:auto;left:0}.ui.vertical.menu{display:block;flex-direction:column;background:#fff;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui.vertical.menu .item{display:block;background:0 0;border-top:none;border-right:none}.ui.vertical.menu>.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu .item>.label{float:right;text-align:center}.ui.vertical.menu .item>i.icon{width:1.18em;float:right;margin:0 0 0 .5em}.ui.vertical.menu .item>.label+i.icon{float:none;margin:0 .5em 0 0}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.vertical.menu .item:first-child:before{display:none!important}.ui.vertical.menu .item>.menu{margin:.5em -1.14285714em 0}.ui.vertical.menu .menu .item{background:0 0;padding:.5em 1.33333333em;font-size:.85714286em;color:rgba(0,0,0,.5)}.ui.vertical.menu .item .menu .link.item:hover,.ui.vertical.menu .item .menu a.item:hover{color:rgba(0,0,0,.85)}.ui.vertical.menu .menu .item:before{display:none}.ui.vertical.menu .active.item{background:rgba(0,0,0,.05);border-radius:0;box-shadow:none}.ui.vertical.menu>.active.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.active.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu>.active.item:only-child{border-radius:.28571429rem}.ui.vertical.menu .active.item .menu .active.item{border-left:none}.ui.vertical.menu .item .menu .active.item{background-color:transparent;font-weight:700;color:rgba(0,0,0,.95)}.ui.tabular.menu{border-radius:0;box-shadow:none!important;border:none;background:none transparent;border-bottom:1px solid #d4d4d5}.ui.tabular.fluid.menu{width:calc(100% + (1px * 2))!important}.ui.tabular.menu .item{background:0 0;border-bottom:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;padding:.92857143em 1.42857143em;color:rgba(0,0,0,.87)}.ui.tabular.menu .item:before{display:none}.ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)}.ui.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#d4d4d5;font-weight:700;margin-bottom:-1px;box-shadow:none;border-radius:.28571429rem .28571429rem 0 0!important}.ui.tabular.menu+.attached:not(.top).segment,.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment{border-top:none;margin-left:0;margin-top:0;margin-right:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + (1px * 2));left:-1px}.ui.bottom.tabular.menu{background:none transparent;border-radius:0;box-shadow:none!important;border-bottom:none;border-top:1px solid #d4d4d5}.ui.bottom.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:none}.ui.bottom.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:-1px 0 0 0;border-radius:0 0 .28571429rem .28571429rem!important}.ui.vertical.tabular.menu{background:none transparent;border-radius:0;box-shadow:none!important;border-bottom:none;border-right:1px solid #d4d4d5}.ui.vertical.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-right:none}.ui.vertical.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 -1px 0 0;border-radius:.28571429rem 0 0 .28571429rem!important}.ui.vertical.right.tabular.menu{background:none transparent;border-radius:0;box-shadow:none!important;border-bottom:none;border-right:none;border-left:1px solid #d4d4d5}.ui.vertical.right.tabular.menu .item{background:0 0;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-left:none}.ui.vertical.right.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 0 0 -1px;border-radius:0 .28571429rem .28571429rem 0!important}.ui.tabular.menu .active.dropdown.item{margin-bottom:0;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;border-bottom:none}.ui.pagination.menu{margin:0;display:inline-flex;vertical-align:middle}.ui.pagination.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.compact.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.pagination.menu .item:last-child:before{display:none}.ui.pagination.menu .item{min-width:3em;text-align:center}.ui.pagination.menu .icon.item i.icon{vertical-align:top}.ui.pagination.menu .active.item{border-top:none;padding-top:.92857143em;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95);box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.35714286em;margin-right:-.35714286em;border-radius:0;border:none;box-shadow:none}.ui.secondary.menu .item{align-self:center;box-shadow:none;border:none;padding:.78571429em .92857143em;margin:0 .35714286em;background:0 0;transition:color .1s ease;border-radius:.28571429rem}.ui.secondary.menu .item:before{display:none!important}.ui.secondary.menu .header.item{border-radius:0;border-right:none;background:none transparent}.ui.secondary.menu .item>img:not(.ui){margin:0}.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.menu .active.item{box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.28571429rem}.ui.secondary.menu .active.item:hover{box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.inverted.menu .link.item,.ui.secondary.inverted.menu a.item{color:rgba(255,255,255,.7)!important}.ui.secondary.inverted.menu .dropdown.item:hover,.ui.secondary.inverted.menu .link.item:hover,.ui.secondary.inverted.menu a.item:hover{background:rgba(255,255,255,.08);color:#fff!important}.ui.secondary.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.secondary.item.menu{margin-left:0;margin-right:0}.ui.secondary.item.menu .item:last-child{margin-right:0}.ui.secondary.attached.menu{box-shadow:none}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu{margin:0 -.92857143em}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 1.33333333em}.ui.secondary.vertical.menu>.item{border:none;margin:0 0 .35714286em;border-radius:.28571429rem!important}.ui.secondary.vertical.menu>.header.item{border-radius:0}.ui.vertical.secondary.menu .item>.menu .item{background-color:transparent}.ui.secondary.inverted.menu{background-color:transparent}.ui.secondary.pointing.menu{margin-left:0;margin-right:0;border-bottom:2px solid rgba(34,36,38,.15)}.ui.secondary.pointing.menu .item{border-bottom-color:transparent;border-bottom-style:solid;border-radius:0;align-self:flex-end;margin:0 0 -2px;padding:.85714286em 1.14285714em;border-bottom-width:2px;transition:color .1s ease}.ui.secondary.pointing.menu .header.item{color:rgba(0,0,0,.85)!important}.ui.secondary.pointing.menu .text.item{box-shadow:none!important}.ui.secondary.pointing.menu .item:after{display:none}.ui.secondary.pointing.menu .dropdown.item:hover,.ui.secondary.pointing.menu .link.item:hover,.ui.secondary.pointing.menu a.item:hover{background-color:transparent;color:rgba(0,0,0,.87)}.ui.secondary.pointing.menu .dropdown.item:active,.ui.secondary.pointing.menu .link.item:active,.ui.secondary.pointing.menu a.item:active{background-color:transparent;border-color:rgba(34,36,38,.15)}.ui.secondary.pointing.menu .active.item{background-color:transparent;box-shadow:none;border-color:#1b1c1d;font-weight:700;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.item:hover{border-color:#1b1c1d;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent}.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right-width:2px;border-right-style:solid;border-right-color:rgba(34,36,38,.15)}.ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-right-style:solid;border-right-color:transparent;border-radius:0!important;margin:0 -2px 0 0;border-right-width:2px}.ui.secondary.vertical.pointing.menu .active.item{border-color:#1b1c1d}.ui.secondary.inverted.pointing.menu{border-color:rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu{border-width:2px;border-color:rgba(34,36,38,.15)}.ui.secondary.inverted.pointing.menu .item{color:rgba(255,255,255,.9)}.ui.secondary.inverted.pointing.menu .header.item{color:#fff!important}.ui.secondary.inverted.pointing.menu .link.item:hover,.ui.secondary.inverted.pointing.menu a.item:hover{color:rgba(0,0,0,.95)}.ui.secondary.inverted.pointing.menu .active.item{border-color:#fff;color:#fff}.ui.text.menu{background:none transparent;border-radius:0;box-shadow:none;border:none;margin:1em -.5em}.ui.text.menu .item{border-radius:0;box-shadow:none;align-self:center;margin:0 0;padding:.35714286em .5em;font-weight:400;color:rgba(0,0,0,.6);transition:opacity .1s ease}.ui.text.menu .item:before,.ui.text.menu .menu .item:before{display:none!important}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(0,0,0,.85);font-size:.92857143em;text-transform:uppercase;font-weight:700}.ui.text.menu .item>img:not(.ui){margin:0}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1em 0}.ui.vertical.text.menu:first-child{margin-top:0}.ui.vertical.text.menu:last-child{margin-bottom:0}.ui.vertical.text.menu .item{margin:.57142857em 0;padding-left:0;padding-right:0}.ui.vertical.text.menu .item>i.icon{float:none;margin:0 .35714286em 0 0}.ui.vertical.text.menu .header.item{margin:.57142857em 0 .71428571em}.ui.vertical.text.menu .item:not(.dropdown)>.menu{margin:0}.ui.vertical.text.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 0}.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;border:none;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.pointing.menu .active.item:after{box-shadow:none}.ui.text.attached.menu{box-shadow:none}.ui.inverted.text.menu,.ui.inverted.text.menu .active.item,.ui.inverted.text.menu .item,.ui.inverted.text.menu .item:hover{background-color:transparent!important}.ui.fluid.text.menu{margin-left:0;margin-right:0}.ui.vertical.icon.menu{display:inline-block;width:auto}.ui.icon.menu .item{height:auto;text-align:center;color:#1b1c1d}.ui.icon.menu .item>.icon:not(.dropdown){margin:0;opacity:1}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item>.icon{width:auto;margin:0 auto}.ui.vertical.icon.menu .item>.icon:not(.dropdown){display:block;opacity:1;margin:0 auto;float:none}.ui.inverted.icon.menu .item{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .item{min-width:6em;flex-direction:column}.ui.labeled.icon.menu .item>.icon:not(.dropdown){height:1em;display:block;font-size:1.71428571em!important;margin:0 auto .5rem!important}.ui.fluid.labeled.icon.menu>.item{min-width:0}@media only screen and (max-width:767px){.ui.stackable.menu{flex-direction:column}.ui.stackable.menu .item{width:100%!important}.ui.stackable.menu .item:before{position:absolute;content:'';top:auto;bottom:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.stackable.menu .left.item,.ui.stackable.menu .left.menu{margin-right:0!important}.ui.stackable.menu .right.item,.ui.stackable.menu .right.menu{margin-left:0!important}.ui.stackable.menu .left.menu,.ui.stackable.menu .right.menu{flex-direction:column}}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#db2828!important;color:#db2828!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#f2711c!important;color:#f2711c!important}.ui.menu .yellow.active.item,.ui.yellow.menu .active.item{border-color:#fbbd08!important;color:#fbbd08!important}.ui.menu .olive.active.item,.ui.olive.menu .active.item{border-color:#b5cc18!important;color:#b5cc18!important}.ui.green.menu .active.item,.ui.menu .green.active.item{border-color:#21ba45!important;color:#21ba45!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00b5ad!important;color:#00b5ad!important}.ui.blue.menu .active.item,.ui.menu .blue.active.item{border-color:#2185d0!important;color:#2185d0!important}.ui.menu .violet.active.item,.ui.violet.menu .active.item{border-color:#6435c9!important;color:#6435c9!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#a333c8!important;color:#a333c8!important}.ui.menu .pink.active.item,.ui.pink.menu .active.item{border-color:#e03997!important;color:#e03997!important}.ui.brown.menu .active.item,.ui.menu .brown.active.item{border-color:#a5673f!important;color:#a5673f!important}.ui.grey.menu .active.item,.ui.menu .grey.active.item{border-color:#767676!important;color:#767676!important}.ui.inverted.menu{border:0 solid transparent;background:#1b1c1d;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a:not(.ui){background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.menu .item.menu{background:0 0}.ui.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .menu .item,.ui.vertical.inverted.menu .menu .item a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.menu .header.item{margin:0;background:0 0;box-shadow:none}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover{color:rgba(225,225,225,.3)}.ui.inverted.menu .dropdown.item:hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.link.inverted.menu .item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.vertical.inverted.menu .item .menu .link.item:hover,.ui.vertical.inverted.menu .item .menu a.item:hover{background:0 0;color:#fff}.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.vertical.menu .item .menu .active.item{background:0 0;color:#fff}.ui.inverted.pointing.menu .active.item:after{background:#3d3e3f!important;margin:0!important;box-shadow:none!important;border:none!important}.ui.inverted.menu .active.item:hover{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.pointing.menu .active.item:hover:after{background:#3d3e3f!important}.ui.floated.menu{float:left;margin:0 .5rem 0 0}.ui.floated.menu .item:last-child:before{display:none}.ui.right.floated.menu{float:right;margin:0 0 0 .5rem}.ui.inverted.menu .red.active.item,.ui.inverted.red.menu{background-color:#db2828}.ui.inverted.red.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.red.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .orange.active.item,.ui.inverted.orange.menu{background-color:#f2711c}.ui.inverted.orange.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.orange.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .yellow.active.item,.ui.inverted.yellow.menu{background-color:#fbbd08}.ui.inverted.yellow.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.yellow.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .olive.active.item,.ui.inverted.olive.menu{background-color:#b5cc18}.ui.inverted.olive.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.olive.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.green.menu,.ui.inverted.menu .green.active.item{background-color:#21ba45}.ui.inverted.green.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.green.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .teal.active.item,.ui.inverted.teal.menu{background-color:#00b5ad}.ui.inverted.teal.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.teal.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.blue.menu,.ui.inverted.menu .blue.active.item{background-color:#2185d0}.ui.inverted.blue.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.blue.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .violet.active.item,.ui.inverted.violet.menu{background-color:#6435c9}.ui.inverted.violet.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.violet.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .purple.active.item,.ui.inverted.purple.menu{background-color:#a333c8}.ui.inverted.purple.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.purple.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .pink.active.item,.ui.inverted.pink.menu{background-color:#e03997}.ui.inverted.pink.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.pink.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.brown.menu,.ui.inverted.menu .brown.active.item{background-color:#a5673f}.ui.inverted.brown.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.brown.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.grey.menu,.ui.inverted.menu .grey.active.item{background-color:#767676}.ui.inverted.grey.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.grey.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.fitted.menu .item,.ui.fitted.menu .item .menu .item,.ui.menu .fitted.item{padding:0}.ui.horizontally.fitted.menu .item,.ui.horizontally.fitted.menu .item .menu .item,.ui.menu .horizontally.fitted.item{padding-top:.92857143em;padding-bottom:.92857143em}.ui.menu .vertically.fitted.item,.ui.vertically.fitted.menu .item,.ui.vertically.fitted.menu .item .menu .item{padding-left:1.14285714em;padding-right:1.14285714em}.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item:before,.ui.menu .borderless.item:before{background:0 0!important}.ui.compact.menu{display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:inline-block}.ui.compact.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.compact.menu .item:last-child:before{display:none}.ui.compact.vertical.menu{width:auto!important}.ui.compact.vertical.menu .item:last-child::before{display:block}.ui.menu.fluid,.ui.vertical.menu.fluid{width:100%!important}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;text-align:center;justify-content:center}.ui.attached.item.menu{margin:0 -1px!important}.ui.item.menu .item:last-child:before{display:none}.ui.menu.two.item .item{width:50%}.ui.menu.three.item .item{width:33.333%}.ui.menu.four.item .item{width:25%}.ui.menu.five.item .item{width:20%}.ui.menu.six.item .item{width:16.666%}.ui.menu.seven.item .item{width:14.285%}.ui.menu.eight.item .item{width:12.5%}.ui.menu.nine.item .item{width:11.11%}.ui.menu.ten.item .item{width:10%}.ui.menu.eleven.item .item{width:9.09%}.ui.menu.twelve.item .item{width:8.333%}.ui.menu.fixed{position:fixed;z-index:101;margin:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{border-radius:0!important}.ui.fixed.menu,.ui[class*="top fixed"].menu{top:0;left:0;right:auto;bottom:auto}.ui[class*="top fixed"].menu{border-top:none;border-left:none;border-right:none}.ui[class*="right fixed"].menu{border-top:none;border-bottom:none;border-right:none;top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui[class*="bottom fixed"].menu{border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;top:auto;right:auto}.ui[class*="left fixed"].menu{border-top:none;border-bottom:none;border-left:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.fixed.menu+.ui.grid{padding-top:2.75rem}.ui.pointing.menu .item:after{visibility:hidden;position:absolute;content:'';top:100%;left:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg);background:0 0;margin:.5px 0 0;width:.57142857em;height:.57142857em;border:none;border-bottom:1px solid #d4d4d5;border-right:1px solid #d4d4d5;z-index:2;transition:background .1s ease}.ui.vertical.pointing.menu .item:after{position:absolute;top:50%;right:0;bottom:auto;left:auto;transform:translateX(50%) translateY(-50%) rotate(45deg);margin:0 -.5px 0 0;border:none;border-top:1px solid #d4d4d5;border-right:1px solid #d4d4d5}.ui.pointing.menu .active.item:after{visibility:visible}.ui.pointing.menu .active.dropdown.item:after{visibility:hidden}.ui.pointing.menu .active.item .menu .active.item:after,.ui.pointing.menu .dropdown.active.item:after{display:none}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#fff}.ui.attached.menu{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% - (-1px * 2));max-width:calc(100% - (-1px * 2));box-shadow:none}.ui.attached+.ui.attached.menu:not(.top){border-top:none}.ui[class*="top attached"].menu{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.28571429rem .28571429rem 0 0}.ui.menu[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].menu{bottom:0;margin-top:0;top:0;margin-bottom:1rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui[class*="bottom attached"].menu:last-child{margin-bottom:0}.ui.top.attached.menu>.item:first-child{border-radius:.28571429rem 0 0 0}.ui.bottom.attached.menu>.item:first-child{border-radius:0 0 0 .28571429rem}.ui.attached.menu:not(.tabular){border:1px solid #d4d4d5}.ui.attached.inverted.menu{border:none}.ui.attached.tabular.menu{margin-left:0;margin-right:0;width:100%}.ui.mini.menu{font-size:.78571429rem}.ui.mini.vertical.menu{width:9rem}.ui.tiny.menu{font-size:.85714286rem}.ui.tiny.vertical.menu{width:11rem}.ui.small.menu{font-size:.92857143rem}.ui.small.vertical.menu{width:13rem}.ui.menu{font-size:1rem}.ui.vertical.menu{width:15rem}.ui.large.menu{font-size:1.07142857rem}.ui.large.vertical.menu{width:18rem}.ui.huge.menu{font-size:1.21428571rem}.ui.huge.vertical.menu{width:22rem}.ui.big.menu{font-size:1.14285714rem}.ui.big.vertical.menu{width:20rem}.ui.massive.menu{font-size:1.28571429rem}.ui.massive.vertical.menu{width:25rem} -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | 2 | Package.describe({ 3 | name : 'semantic:ui-menu', 4 | summary : 'Semantic UI - Menu: Single component release', 5 | version : '2.2.10', 6 | git : 'git://github.com/Semantic-Org/UI-Menu.git', 7 | }); 8 | 9 | Package.onUse(function(api) { 10 | api.versionsFrom('1.0'); 11 | api.addFiles([ 12 | 'menu.css' 13 | ], 'client'); 14 | }); 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic-ui-menu", 3 | "version": "2.5.0", 4 | "title": "Semantic UI - Menu", 5 | "description": "Single component release of menu", 6 | "homepage": "http://www.semantic-ui.com", 7 | "author": "Jack Lukic ", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/Semantic-Org/UI-Menu.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/Semantic-Org/Semantic-UI/issues" 15 | }, 16 | "devDependencies": {} 17 | } --------------------------------------------------------------------------------