diff --git a/docs/javascript/semantic.js b/docs/javascript/semantic.js index 34b45e3dc..be0167263 100755 --- a/docs/javascript/semantic.js +++ b/docs/javascript/semantic.js @@ -10,14 +10,14 @@ semantic.ready = function() { var $ui = $('.ui').not('.hover, .down'), $swap = $('.theme.menu .item'), - $menu = $('.menu.button'), + $menu = $('.sidebar.button'), $demo = $('.demo'), $waypoints = $('h2'), $example = $('.example'), $peek = $('.peek'), - $peekMenu = $peek.find('li'), + $peekMenu = $peek.find('.item'), $code = $('div.code'), // alias diff --git a/docs/library/sidr.js b/docs/library/sidr.js old mode 100644 new mode 100755 index 74c3cd4b3..a2aa07473 --- a/docs/library/sidr.js +++ b/docs/library/sidr.js @@ -1,4 +1,260 @@ -/*! Sidr - v1.1.1 - 2013-03-14 +/* + * Sidr * https://github.com/artberri/sidr - * Copyright (c) 2013 Alberto Varela; Licensed MIT */ -(function(e){var t=!1,i=!1,o={isUrl:function(e){var t=RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i");return t.test(e)?!0:!1},loadContent:function(e,t){e.html(t)},addPrefix:function(e){var t=e.attr("id"),i=e.attr("class");"string"==typeof t&&""!==t&&e.attr("id",t.replace(/([A-Za-z0-9_.\-]+)/g,"sidr-id-$1")),"string"==typeof i&&""!==i&&"sidr-inner"!==i&&e.attr("class",i.replace(/([A-Za-z0-9_.\-]+)/g,"sidr-class-$1")),e.removeAttr("style")},execute:function(o,n,s){"function"==typeof n?(s=n,n="sidr"):n||(n="sidr");var a,d,l,c=e("#"+n),f=e(c.data("body")),u=e("html"),p=c.outerWidth(!0),y=c.data("speed"),v=c.data("side");if("open"===o||"toogle"===o&&!c.is(":visible")){if(c.is(":visible")||t)return;if(i!==!1)return r.close(i,function(){r.open(n)}),void 0;t=!0,"left"===v?(a={left:p+"px"},d={left:"0px"}):(a={right:p+"px"},d={right:"0px"}),l=u.scrollTop(),u.css("overflow-x","hidden").scrollTop(l),f.css({width:f.width(),position:"absolute"}).animate(a,y),c.css("display","block").animate(d,y,function(){t=!1,i=n,"function"==typeof s&&s(n)})}else{if(!c.is(":visible")||t)return;t=!0,"left"===v?(a={left:0},d={left:"-"+p+"px"}):(a={right:0},d={right:"-"+p+"px"}),l=u.scrollTop(),u.removeAttr("style").scrollTop(l),f.animate(a,y),c.animate(d,y,function(){c.removeAttr("style"),f.removeAttr("style"),e("html").removeAttr("style"),t=!1,i=!1,"function"==typeof s&&s(n)})}}},r={open:function(e,t){o.execute("open",e,t)},close:function(e,t){o.execute("close",e,t)},toogle:function(e,t){o.execute("toogle",e,t)}};e.sidr=function(t){return r[t]?r[t].apply(this,Array.prototype.slice.call(arguments,1)):"function"!=typeof t&&"string"!=typeof t&&t?(e.error("Method "+t+" does not exist on jQuery.sidr"),void 0):r.toogle.apply(this,arguments)},e.fn.sidr=function(t){var i=e.extend({name:"sidr",speed:200,side:"left",source:null,renaming:!0,body:"body"},t),n=i.name,s=e("#"+n);if(0===s.length&&(s=e("
").attr("id",n).appendTo(e("body"))),s.addClass("sidr").addClass(i.side).data({speed:i.speed,side:i.side,body:i.body}),"function"==typeof i.source){var a=i.source(n);o.loadContent(s,a)}else if("string"==typeof i.source&&o.isUrl(i.source))e.get(i.source,function(e){o.loadContent(s,e)});else if("string"==typeof i.source){var d="",l=i.source.split(",");if(e.each(l,function(t,i){d+='
'+e(i).html()+"
"}),i.renaming){var c=e("
").html(d);c.find("*").each(function(t,i){var r=e(i);o.addPrefix(r)}),d=c.html()}o.loadContent(s,d)}else null!==i.source&&e.error("Invalid Sidr Source");return this.each(function(){var t=e(this),i=t.data("sidr");i||(t.data("sidr",n),t.click(function(e){e.preventDefault(),r.toogle(n)}))})}})(jQuery); \ No newline at end of file + * + * Copyright (c) 2013 Alberto Varela + * Licensed under the MIT license. + */ + +;(function( $ ){ + + var sidrMoving = false, + sidrOpened = false; + + // Private methods + var privateMethods = { + // Check for valids urls + // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url + isUrl: function (str) { + var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path + '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string + '(\\#[-a-z\\d_]*)?$','i'); // fragment locator + if(!pattern.test(str)) { + return false; + } else { + return true; + } + }, + // Loads the content into the menu bar + loadContent: function($menu, content) { + $menu.html(content); + }, + // Add sidr prefixes + addPrefix: function($element) { + var elementId = $element.attr('id'), + elementClass = $element.attr('class'); + + if(typeof elementId === 'string' && '' !== elementId) { + $element.attr('id', elementId.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-id-$1')); + } + if(typeof elementClass === 'string' && '' !== elementClass && 'sidr-inner' !== elementClass) { + $element.attr('class', elementClass.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-class-$1')); + } + $element.removeAttr('style'); + }, + execute: function(action, name, callback) { + // Check arguments + if(typeof name === 'function') { + callback = name; + name = 'sidr'; + } + else if(!name) { + name = 'sidr'; + } + + // Declaring + var $menu = $('#' + name), + $body = $($menu.data('body')), + $html = $('html'), + menuWidth = $menu.outerWidth(true), + speed = $menu.data('speed'), + side = $menu.data('side'), + bodyAnimation, + menuAnimation, + scrollTop; + + // Open Sidr + if('open' === action || ('toogle' === action && !$menu.is(':visible'))) { + // Check if we can open it + if( $menu.is(':visible') || sidrMoving ) { + return; + } + + // If another menu opened close first + if(sidrOpened !== false) { + methods.close(sidrOpened, function() { + methods.open(name); + }); + + return; + } + + // Lock sidr + sidrMoving = true; + + // Left or right? + if(side === 'left') { + bodyAnimation = {left: menuWidth + 'px'}; + menuAnimation = {left: '0px'}; + } + else { + bodyAnimation = {right: menuWidth + 'px'}; + menuAnimation = {right: '0px'}; + } + + // Prepare page + scrollTop = $html.scrollTop(); + $html.css('overflow-x', 'hidden').scrollTop(scrollTop); + + // Open menu + $body.css({ + width: $body.width(), + position: 'absolute' + }).animate(bodyAnimation, speed); + $menu.css('display', 'block').animate(menuAnimation, speed, function() { + sidrMoving = false; + sidrOpened = name; + // Callback + if(typeof callback === 'function') { + callback(name); + } + }); + } + // Close Sidr + else { + // Check if we can close it + if( !$menu.is(':visible') || sidrMoving ) { + return; + } + + // Lock sidr + sidrMoving = true; + + // Right or left menu? + if(side === 'left') { + bodyAnimation = {left: 0}; + menuAnimation = {left: '-' + menuWidth + 'px'}; + } + else { + bodyAnimation = {right: 0}; + menuAnimation = {right: '-' + menuWidth + 'px'}; + } + + // Close menu + scrollTop = $html.scrollTop(); + $html.removeAttr('style').scrollTop(scrollTop); + $body.animate(bodyAnimation, speed); + $menu.animate(menuAnimation, speed, function() { + $menu.removeAttr('style'); + $body.removeAttr('style'); + $('html').removeAttr('style'); + sidrMoving = false; + sidrOpened = false; + // Callback + if(typeof callback === 'function') { + callback(name); + } + }); + } + } + }; + + // Sidr public methods + var methods = { + open: function(name, callback) { + privateMethods.execute('open', name, callback); + }, + close: function(name, callback) { + privateMethods.execute('close', name, callback); + }, + toogle: function(name, callback) { + privateMethods.execute('toogle', name, callback); + } + }; + + $.sidr = function( method ) { + + if ( methods[method] ) { + return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'function' || typeof method === 'string' || ! method ) { + return methods.toogle.apply( this, arguments ); + } else { + $.error( 'Method ' + method + ' does not exist on jQuery.sidr' ); + } + + }; + + $.fn.sidr = function( options ) { + + var settings = $.extend( { + name : 'sidr', // Name for the 'sidr' + speed : 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds) + side : 'left', // Accepts 'left' or 'right' + source : null, // Override the source of the content. + renaming : true, // The ids and classes will be prepended with a prefix when loading existent content + body : 'body' // Page container selector, + }, options); + + var name = settings.name, + $sideMenu = $('#' + name); + + // If the side menu do not exist create it + if( $sideMenu.length === 0 ) { + $sideMenu = $('
') + .attr('id', name) + .appendTo($('body')); + } + + // Adding styles and options + $sideMenu + .addClass('sidr') + .addClass(settings.side) + .data({ + speed : settings.speed, + side : settings.side, + body : settings.body + }); + + // The menu content + if(typeof settings.source === 'function') { + var newContent = settings.source(name); + privateMethods.loadContent($sideMenu, newContent); + } + else if(typeof settings.source === 'string' && privateMethods.isUrl(settings.source)) { + $.get(settings.source, function(data) { + privateMethods.loadContent($sideMenu, data); + }); + } + else if(typeof settings.source === 'string') { + var htmlContent = '', + selectors = settings.source.split(','); + + $.each(selectors, function(index, element) { + htmlContent += '
' + $(element).html() + '
'; + }); + + // Renaming ids and classes + if(settings.renaming) { + var $htmlContent = $('
').html(htmlContent); + $htmlContent.find('*').each(function(index, element) { + var $element = $(element); + privateMethods.addPrefix($element); + }); + htmlContent = $htmlContent.html(); + } + privateMethods.loadContent($sideMenu, htmlContent); + } + else if(settings.source !== null) { + $.error('Invalid Sidr Source'); + } + + return this.each(function(){ + + var $this = $(this), + data = $this.data('sidr'); + + // If the plugin hasn't been initialized yet + if ( ! data ) { + $this.data('sidr', name); + $this.click(function(e) { + e.preventDefault(); + methods.toogle(name); + }); + } + }); + }; + +})( jQuery ); \ No newline at end of file diff --git a/docs/menu.html b/docs/menu.html index 214a18d48..f01ed982f 100755 --- a/docs/menu.html +++ b/docs/menu.html @@ -143,7 +143,7 @@
-
Menu
+
Menu
@@ -155,9 +155,10 @@
-
+
Collection
Elements
+
States
Variations
@@ -202,7 +203,7 @@

Vertical Menu

This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group

-
A vertical menus width must typically be defined. An alternative is to use the fluid variation in conjunction with ui grid.
+
A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
Site Title @@ -213,7 +214,7 @@
Grouped Section
- Current Section + Current Section Subsection 2 Subsection 3
@@ -304,27 +305,37 @@

Hover

-

A menu may have other colors defined

-
-
- Site Title +

A menu item can be hovered

+
Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.
+
+
+ Link
-
- Current section +
+
+ + +
+

Down

+

A menu item can be pressed in

+
+
+ Link
-
-
- Dropdown -
-
Choice 1
-
Choice 2
-
Choice 3
-
-
+
+
+ +
+

Down

+

A menu item can be active in

+
+
+ Link
+

Variations

Menu

@@ -350,6 +361,36 @@
+ +
+

Fluid

+

A menu may take the size of its container, and be divided evenly.

+
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+ +
+

Compact

+

A horizontal menu may compact itself to only fit content

+
+
+ Previous +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ Next +
+
+
+

Pointing (Horizontal)

@@ -431,7 +472,7 @@

Horizontal Sizes

-

A vertical menu can vary in size

+

A horizontal menu can vary in size

Site Title @@ -452,7 +493,7 @@ Current section
- Dropdown + Dropdown
Choice 1
Choice 2
@@ -535,10 +576,16 @@

A menu item or menu might might have no dividers

- A -
+ Previous +
+
1
+
2
+
3
+
4
+
5
+
6
- B + Next
diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index 5e68d1b0d..da93ea4af 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -392,6 +392,9 @@ a:hover { /* some demo formatting */ +.ui.menu p:only-child { + margin: 0px; +} .ui.menu a { cursor: pointer; } diff --git a/docs/table.html b/docs/table.html index 2170063f4..612e43449 100755 --- a/docs/table.html +++ b/docs/table.html @@ -118,7 +118,7 @@
diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css index 3fe2aa98f..7616e1f5f 100755 --- a/src/ui/flat/menu.css +++ b/src/ui/flat/menu.css @@ -169,6 +169,15 @@ } +/*-------------- + Content +---------------*/ + +.ui.menu .item > p:only-child { + margin: 0px; +} + + /*-------------- Icons ---------------*/ @@ -196,9 +205,9 @@ background-color: #FFFFFF; opacity: 0; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + -moz-border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; @@ -210,6 +219,7 @@ .ui.menu .dropdown.item .menu .item { border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); + font-size: 0.9em; display: block; color: rgba(0, 0, 0, 0.75); @@ -272,6 +282,7 @@ ---------------*/ /* Pseudo states cautiously used for convenience */ +.ui.link.menu .item:hover, .ui.menu .item.hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, @@ -304,6 +315,7 @@ Down ---------------*/ +.ui.link.menu .item:active, .ui.menu .item.down, .ui.menu .link.item:active, .ui.menu a.item:active, @@ -565,7 +577,6 @@ } /*--- Dropdown ---*/ - .ui.vertical.menu .dropdown.item > i { float: right; } @@ -573,8 +584,14 @@ top: 0%; left: 100%; margin: 0px; + + -moz-border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 5px 5px 0px; + border-radius: 0px 5px 5px 0px; + border-left: none; border: 1px solid rgba(0, 0, 0, 0.1); + font-size: 1em; } .ui.vertical.menu .dropdown.item .menu .item { @@ -640,7 +657,13 @@ background-image: none; } +/*------------------- + Compact +--------------------*/ +.ui.compact.menu { + display: inline-block; +} /*------------------- Fluid @@ -780,7 +803,7 @@ .ui.vertical.pointing.menu .item.active:after { position: absolute; top: 50%; - right: -0.22em; + right: -0.3em; bottom: auto; left: auto; diff --git a/src/ui/shaded/menu.css b/src/ui/shaded/menu.css index 5f2d4d928..15a5687bd 100755 --- a/src/ui/shaded/menu.css +++ b/src/ui/shaded/menu.css @@ -1,5 +1,5 @@ /* - * # Semantic Menu - Shaded + * # Semantic Menu - Flat * http://github.com/quirkyinc/semantic * * @@ -18,7 +18,6 @@ /*-------------- Menu ---------------*/ - .ui.menu { background-color: #FFFFFF; font-size: 0px; @@ -53,6 +52,9 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + vertical-align: middle; + min-height: 1.25em; + -webkit-transition: opacity 0.1s linear, background 0.1s linear, @@ -205,9 +207,9 @@ background-color: #FFFFFF; opacity: 0; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + -moz-border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; @@ -219,6 +221,7 @@ .ui.menu .dropdown.item .menu .item { border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); + font-size: 0.9em; display: block; color: rgba(0, 0, 0, 0.75); @@ -239,44 +242,34 @@ } /*-------------- - Notification + Badges ---------------*/ -.ui.menu .item .alert { - position: absolute; - top: -8px; - left: 75%; - background-color: #EEEEEE; - padding: 3px 5px; +.ui.menu .item .badge { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin-left: -1.5em; - background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); - background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); - background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); - background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); - background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + min-width: 1em; + border: 1px solid rgba(0, 0, 0, 0.1); + background: #AAAAAA; + padding: 0.3em 0.5em 0.4em; - border: 1px solid #E5E5E5; + font-size: 0.9em; + font-weight: bold; + line-height: 1; + text-align: center; + color: #FFFFFF; - border-radius: 5px; + -moz-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; - -webkit-box-shadow: - 0px 1px 0px rgba(0, 0, 0, 0.3), - 0px 1px 0px rgba(255, 255, 255, 0.6) inset - ; - -moz-box-shadow: - 0px 1px 0px rgba(0, 0, 0, 0.3), - 0px 1px 0px rgba(255, 255, 255, 0.6) inset - ; - box-shadow: - 0px 1px 0px rgba(0, 0, 0, 0.3), - 0px 1px 0px rgba(255, 255, 255, 0.6) inset - ; - - font-size: 11px; - line-height: 1; - text-transform: uppercase; - color: #555555; - z-index: 100; + -moz-box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset; } @@ -291,10 +284,13 @@ ---------------*/ /* Pseudo states cautiously used for convenience */ +.ui.link.menu .item:hover, .ui.menu .item.hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, +.ui.menu .dropdown.item.hover, .ui.menu .dropdown.item:hover, +.ui.menu .dropdown.item .menu .item.hover, .ui.menu .dropdown.item .menu .item:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.05); @@ -321,16 +317,18 @@ Down ---------------*/ +.ui.link.menu .item:active, .ui.menu .item.down, .ui.menu .link.item:active, .ui.menu a.item:active, .ui.menu .item > a:active, +.ui.menu .dropdown.item .menu .item.down, .ui.menu .dropdown.item .menu .item:active { background-color: rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset; + -moz-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset; + box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset; } /*-------------- @@ -359,9 +357,15 @@ ; } .ui.vertical.menu .item.active { + border-top: none; border-left: 0.2em solid #999999; + padding-top: 0.75em; padding-left: 0.75em; } +.ui.vertical.menu .item .menu .item.active { + padding-left: 1.35em; + padding-top: 0.5em; +} /*-------------- Disabled @@ -464,9 +468,9 @@ /*--- Hover ---*/ -.ui.black.menu .item.hover, +.ui.black.menu .link.item.hover, .ui.black.menu .link.item:hover, -.ui.menu .dropdown.item:hover, +.ui.black.menu .dropdown.item:hover, .ui.black.menu a.item:hover { cursor: pointer; background-color: rgba(255, 255, 255, .15); @@ -475,7 +479,7 @@ /*--- Down ---*/ .ui.black.menu .item.down, -.ui.menu .dropdown.item:active, +.ui.black.menu .dropdown.item:active, .ui.black.menu .link.item:active, .ui.black.menu a.item:active { background-color: rgba(255, 255, 255, .1); @@ -488,6 +492,7 @@ /*--- Active ---*/ .ui.black.menu .item.active { + border-color: transparent; background-color: rgba(255, 255, 255, 0.05); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); @@ -525,7 +530,7 @@ ---------------*/ .ui.vertical.menu { - width: 280px; + width: 200px; } .ui.vertical.menu .item { display: block; @@ -574,7 +579,6 @@ } /*--- Dropdown ---*/ - .ui.vertical.menu .dropdown.item > i { float: right; } @@ -582,8 +586,14 @@ top: 0%; left: 100%; margin: 0px; + + -moz-border-radius: 0px 5px 5px 0px; + -webkit-border-radius: 0px 5px 5px 0px; + border-radius: 0px 5px 5px 0px; + border-left: none; border: 1px solid rgba(0, 0, 0, 0.1); + font-size: 1em; } .ui.vertical.menu .dropdown.item .menu .item { @@ -594,7 +604,7 @@ /*--- Sub Menu ---*/ .ui.vertical.menu .item > .menu { - margin: 0.5em -1em -0.75em; + margin: 0.5em -1em 0em; } .ui.vertical.menu .item > .menu > .item { padding: 0.5em 1.5em; @@ -622,6 +632,20 @@ padding-bottom: 0em; } +/*-------------- + Tight +---------------*/ + +.ui.tight.menu .item, +.ui.tight.menu .item > a, +.ui.tight.menu .item .menu .item, +.ui.tight.menu .item .menu .item > a, +.ui.menu .tight.item, +.ui.menu .tight.item > a { + padding: 0em; +} + + /*-------------- Borderless ---------------*/ @@ -636,20 +660,69 @@ } -/*-------------- - Tight ----------------*/ +/*------------------- + Compact +--------------------*/ -.ui.tight.menu .item, -.ui.tight.menu .item > a, -.ui.tight.menu .item .menu .item, -.ui.tight.menu .item .menu .item > a, -.ui.menu .tight.item, -.ui.menu .tight.item > a { - padding: 0em; +.ui.compact.menu { + display: inline-block; } +/*------------------- + Fluid +--------------------*/ + +.ui.menu.fluid { + width: 100%; + height: 43px; +} +.ui.menu.fluid, +.ui.menu.fluid .item { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + text-align: center; +} +.ui.menu.fluid .item { + padding-left: 0px !important; + padding-right: 0px !important; +} +.ui.menu.two.fluid .item { + width: 50%; +} +.ui.menu.three.fluid .item { + width: 33.333%; +} +.ui.menu.four.fluid .item { + width: 25%; +} +.ui.menu.five.fluid .item { + width: 20%; +} +.ui.menu.six.fluid .item { + width: 16.666%; +} +.ui.menu.seven.fluid .item { + width: 14.285%; +} +.ui.menu.eight.fluid .item { + width: 12.500%; +} +.ui.menu.nine.fluid .item { + width: 11.11%; +} +.ui.menu.ten.fluid .item { + width: 10.0%; +} +.ui.menu.eleven.fluid .item { + width: 9.09%; +} +.ui.menu.twelve.fluid .item { + width: 8.333%; +} + /*-------------- Fixed ---------------*/ @@ -695,13 +768,13 @@ .ui.pointing.menu .item.active:after { position: absolute; - bottom: -6px; + bottom: -0.3em; left: 50%; content: ""; - margin-left: -5px; - width: 12px; - height: 12px; + margin-left: -0.3em; + width: 0.6em; + height: 0.6em; -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -734,7 +807,7 @@ .ui.vertical.pointing.menu .item.active:after { position: absolute; top: 50%; - right: -6px; + right: -0.3em; bottom: auto; left: auto; @@ -742,9 +815,7 @@ -moz-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15); box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15); - margin-top: -7px; - width: 12px; - height: 12px; + margin-top: -0.3em; } /* Colors */