Browse Source
ui: wrote a first pass at a menu, created an all new layout for docs with top fixed nav. wired in some spying menus that follow you around
ui: wrote a first pass at a menu, created an all new layout for docs with top fixed nav. wired in some spying menus that follow you around
Former-commit-id:pull/258/head7a38665a98Former-commit-id:277f138fc3
Jack Lukic
12 years ago
16 changed files with 1437 additions and 528 deletions
Split View
Diff Options
-
343docs/button.html
-
64docs/javascript/example.js
-
555docs/library/waypoints.js
-
76docs/module.html
-
2docs/shape.html
-
58docs/stylesheets/example.css
-
2src/spec/multiple.js
-
555src/ui/flat/button.css
-
10src/ui/flat/icons.css
-
246src/ui/flat/menu.css
-
50src/ui/flat/panel.css
-
1src/ui/fonts/icons.eot.REMOVED.git-id
-
1src/ui/fonts/icons.svg.REMOVED.git-id
-
1src/ui/fonts/icons.ttf.REMOVED.git-id
-
BINsrc/ui/fonts/icons.woff
-
1src/ui/shaded/panel.css
@ -0,0 +1,555 @@ |
|||
// Generated by CoffeeScript 1.4.0
|
|||
|
|||
/* |
|||
jQuery Waypoints - v2.0.2 |
|||
Copyright (c) 2011-2013 Caleb Troughton |
|||
Dual licensed under the MIT license and GPL license. |
|||
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
|
|||
*/ |
|||
|
|||
|
|||
(function() { |
|||
var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }, |
|||
__slice = [].slice; |
|||
|
|||
(function(root, factory) { |
|||
if (typeof define === 'function' && define.amd) { |
|||
return define('waypoints', ['jquery'], function($) { |
|||
return factory($, root); |
|||
}); |
|||
} else { |
|||
return factory(root.jQuery, root); |
|||
} |
|||
})(this, function($, window) { |
|||
var $w, Context, Waypoint, allWaypoints, contextCounter, contextKey, contexts, isTouch, jQMethods, methods, resizeEvent, scrollEvent, waypointCounter, waypointKey, wp, wps; |
|||
$w = $(window); |
|||
isTouch = __indexOf.call(window, 'ontouchstart') >= 0; |
|||
allWaypoints = { |
|||
horizontal: {}, |
|||
vertical: {} |
|||
}; |
|||
contextCounter = 1; |
|||
contexts = {}; |
|||
contextKey = 'waypoints-context-id'; |
|||
resizeEvent = 'resize.waypoints'; |
|||
scrollEvent = 'scroll.waypoints'; |
|||
waypointCounter = 1; |
|||
waypointKey = 'waypoints-waypoint-ids'; |
|||
wp = 'waypoint'; |
|||
wps = 'waypoints'; |
|||
Context = (function() { |
|||
|
|||
function Context($element) { |
|||
var _this = this; |
|||
this.$element = $element; |
|||
this.element = $element[0]; |
|||
this.didResize = false; |
|||
this.didScroll = false; |
|||
this.id = 'context' + contextCounter++; |
|||
this.oldScroll = { |
|||
x: $element.scrollLeft(), |
|||
y: $element.scrollTop() |
|||
}; |
|||
this.waypoints = { |
|||
horizontal: {}, |
|||
vertical: {} |
|||
}; |
|||
$element.data(contextKey, this.id); |
|||
contexts[this.id] = this; |
|||
$element.bind(scrollEvent, function() { |
|||
var scrollHandler; |
|||
if (!(_this.didScroll || isTouch)) { |
|||
_this.didScroll = true; |
|||
scrollHandler = function() { |
|||
_this.doScroll(); |
|||
return _this.didScroll = false; |
|||
}; |
|||
return window.setTimeout(scrollHandler, $[wps].settings.scrollThrottle); |
|||
} |
|||
}); |
|||
$element.bind(resizeEvent, function() { |
|||
var resizeHandler; |
|||
if (!_this.didResize) { |
|||
_this.didResize = true; |
|||
resizeHandler = function() { |
|||
$[wps]('refresh'); |
|||
return _this.didResize = false; |
|||
}; |
|||
return window.setTimeout(resizeHandler, $[wps].settings.resizeThrottle); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
Context.prototype.doScroll = function() { |
|||
var axes, |
|||
_this = this; |
|||
axes = { |
|||
horizontal: { |
|||
newScroll: this.$element.scrollLeft(), |
|||
oldScroll: this.oldScroll.x, |
|||
forward: 'right', |
|||
backward: 'left' |
|||
}, |
|||
vertical: { |
|||
newScroll: this.$element.scrollTop(), |
|||
oldScroll: this.oldScroll.y, |
|||
forward: 'down', |
|||
backward: 'up' |
|||
} |
|||
}; |
|||
if (isTouch && (!axes.vertical.oldScroll || !axes.vertical.newScroll)) { |
|||
$[wps]('refresh'); |
|||
} |
|||
$.each(axes, function(aKey, axis) { |
|||
var direction, isForward, triggered; |
|||
triggered = []; |
|||
isForward = axis.newScroll > axis.oldScroll; |
|||
direction = isForward ? axis.forward : axis.backward; |
|||
$.each(_this.waypoints[aKey], function(wKey, waypoint) { |
|||
var _ref, _ref1; |
|||
if ((axis.oldScroll < (_ref = waypoint.offset) && _ref <= axis.newScroll)) { |
|||
return triggered.push(waypoint); |
|||
} else if ((axis.newScroll < (_ref1 = waypoint.offset) && _ref1 <= axis.oldScroll)) { |
|||
return triggered.push(waypoint); |
|||
} |
|||
}); |
|||
triggered.sort(function(a, b) { |
|||
return a.offset - b.offset; |
|||
}); |
|||
if (!isForward) { |
|||
triggered.reverse(); |
|||
} |
|||
return $.each(triggered, function(i, waypoint) { |
|||
if (waypoint.options.continuous || i === triggered.length - 1) { |
|||
return waypoint.trigger([direction]); |
|||
} |
|||
}); |
|||
}); |
|||
return this.oldScroll = { |
|||
x: axes.horizontal.newScroll, |
|||
y: axes.vertical.newScroll |
|||
}; |
|||
}; |
|||
|
|||
Context.prototype.refresh = function() { |
|||
var axes, cOffset, isWin, |
|||
_this = this; |
|||
isWin = $.isWindow(this.element); |
|||
cOffset = this.$element.offset(); |
|||
this.doScroll(); |
|||
axes = { |
|||
horizontal: { |
|||
contextOffset: isWin ? 0 : cOffset.left, |
|||
contextScroll: isWin ? 0 : this.oldScroll.x, |
|||
contextDimension: this.$element.width(), |
|||
oldScroll: this.oldScroll.x, |
|||
forward: 'right', |
|||
backward: 'left', |
|||
offsetProp: 'left' |
|||
}, |
|||
vertical: { |
|||
contextOffset: isWin ? 0 : cOffset.top, |
|||
contextScroll: isWin ? 0 : this.oldScroll.y, |
|||
contextDimension: isWin ? $[wps]('viewportHeight') : this.$element.height(), |
|||
oldScroll: this.oldScroll.y, |
|||
forward: 'down', |
|||
backward: 'up', |
|||
offsetProp: 'top' |
|||
} |
|||
}; |
|||
return $.each(axes, function(aKey, axis) { |
|||
return $.each(_this.waypoints[aKey], function(i, waypoint) { |
|||
var adjustment, elementOffset, oldOffset, _ref, _ref1; |
|||
adjustment = waypoint.options.offset; |
|||
oldOffset = waypoint.offset; |
|||
elementOffset = $.isWindow(waypoint.element) ? 0 : waypoint.$element.offset()[axis.offsetProp]; |
|||
if ($.isFunction(adjustment)) { |
|||
adjustment = adjustment.apply(waypoint.element); |
|||
} else if (typeof adjustment === 'string') { |
|||
adjustment = parseFloat(adjustment); |
|||
if (waypoint.options.offset.indexOf('%') > -1) { |
|||
adjustment = Math.ceil(axis.contextDimension * adjustment / 100); |
|||
} |
|||
} |
|||
waypoint.offset = elementOffset - axis.contextOffset + axis.contextScroll - adjustment; |
|||
if ((waypoint.options.onlyOnScroll && (oldOffset != null)) || !waypoint.enabled) { |
|||
return; |
|||
} |
|||
if (oldOffset !== null && (oldOffset < (_ref = axis.oldScroll) && _ref <= waypoint.offset)) { |
|||
return waypoint.trigger([axis.backward]); |
|||
} else if (oldOffset !== null && (oldOffset > (_ref1 = axis.oldScroll) && _ref1 >= waypoint.offset)) { |
|||
return waypoint.trigger([axis.forward]); |
|||
} else if (oldOffset === null && axis.oldScroll >= waypoint.offset) { |
|||
return waypoint.trigger([axis.forward]); |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
Context.prototype.checkEmpty = function() { |
|||
if ($.isEmptyObject(this.waypoints.horizontal) && $.isEmptyObject(this.waypoints.vertical)) { |
|||
this.$element.unbind([resizeEvent, scrollEvent].join(' ')); |
|||
return delete contexts[this.id]; |
|||
} |
|||
}; |
|||
|
|||
return Context; |
|||
|
|||
})(); |
|||
Waypoint = (function() { |
|||
|
|||
function Waypoint($element, context, options) { |
|||
var idList, _ref; |
|||
options = $.extend({}, $.fn[wp].defaults, options); |
|||
if (options.offset === 'bottom-in-view') { |
|||
options.offset = function() { |
|||
var contextHeight; |
|||
contextHeight = $[wps]('viewportHeight'); |
|||
if (!$.isWindow(context.element)) { |
|||
contextHeight = context.$element.height(); |
|||
} |
|||
return contextHeight - $(this).outerHeight(); |
|||
}; |
|||
} |
|||
this.$element = $element; |
|||
this.element = $element[0]; |
|||
this.axis = options.horizontal ? 'horizontal' : 'vertical'; |
|||
this.callback = options.handler; |
|||
this.context = context; |
|||
this.enabled = options.enabled; |
|||
this.id = 'waypoints' + waypointCounter++; |
|||
this.offset = null; |
|||
this.options = options; |
|||
context.waypoints[this.axis][this.id] = this; |
|||
allWaypoints[this.axis][this.id] = this; |
|||
idList = (_ref = $element.data(waypointKey)) != null ? _ref : []; |
|||
idList.push(this.id); |
|||
$element.data(waypointKey, idList); |
|||
} |
|||
|
|||
Waypoint.prototype.trigger = function(args) { |
|||
if (!this.enabled) { |
|||
return; |
|||
} |
|||
if (this.callback != null) { |
|||
this.callback.apply(this.element, args); |
|||
} |
|||
if (this.options.triggerOnce) { |
|||
return this.destroy(); |
|||
} |
|||
}; |
|||
|
|||
Waypoint.prototype.disable = function() { |
|||
return this.enabled = false; |
|||
}; |
|||
|
|||
Waypoint.prototype.enable = function() { |
|||
this.context.refresh(); |
|||
return this.enabled = true; |
|||
}; |
|||
|
|||
Waypoint.prototype.destroy = function() { |
|||
delete allWaypoints[this.axis][this.id]; |
|||
delete this.context.waypoints[this.axis][this.id]; |
|||
return this.context.checkEmpty(); |
|||
}; |
|||
|
|||
Waypoint.getWaypointsByElement = function(element) { |
|||
var all, ids; |
|||
ids = $(element).data(waypointKey); |
|||
if (!ids) { |
|||
return []; |
|||
} |
|||
all = $.extend({}, allWaypoints.horizontal, allWaypoints.vertical); |
|||
return $.map(ids, function(id) { |
|||
return all[id]; |
|||
}); |
|||
}; |
|||
|
|||
return Waypoint; |
|||
|
|||
})(); |
|||
methods = { |
|||
init: function(f, options) { |
|||
var _ref; |
|||
if (options == null) { |
|||
options = {}; |
|||
} |
|||
if ((_ref = options.handler) == null) { |
|||
options.handler = f; |
|||
} |
|||
this.each(function() { |
|||
var $this, context, contextElement, _ref1; |
|||
$this = $(this); |
|||
contextElement = (_ref1 = options.context) != null ? _ref1 : $.fn[wp].defaults.context; |
|||
if (!$.isWindow(contextElement)) { |
|||
contextElement = $this.closest(contextElement); |
|||
} |
|||
contextElement = $(contextElement); |
|||
context = contexts[contextElement.data(contextKey)]; |
|||
if (!context) { |
|||
context = new Context(contextElement); |
|||
} |
|||
return new Waypoint($this, context, options); |
|||
}); |
|||
$[wps]('refresh'); |
|||
return this; |
|||
}, |
|||
disable: function() { |
|||
return methods._invoke(this, 'disable'); |
|||
}, |
|||
enable: function() { |
|||
return methods._invoke(this, 'enable'); |
|||
}, |
|||
destroy: function() { |
|||
return methods._invoke(this, 'destroy'); |
|||
}, |
|||
prev: function(axis, selector) { |
|||
return methods._traverse.call(this, axis, selector, function(stack, index, waypoints) { |
|||
if (index > 0) { |
|||
return stack.push(waypoints[index - 1]); |
|||
} |
|||
}); |
|||
}, |
|||
next: function(axis, selector) { |
|||
return methods._traverse.call(this, axis, selector, function(stack, index, waypoints) { |
|||
if (index < waypoints.length - 1) { |
|||
return stack.push(waypoints[index + 1]); |
|||
} |
|||
}); |
|||
}, |
|||
_traverse: function(axis, selector, push) { |
|||
var stack, waypoints; |
|||
if (axis == null) { |
|||
axis = 'vertical'; |
|||
} |
|||
if (selector == null) { |
|||
selector = window; |
|||
} |
|||
waypoints = jQMethods.aggregate(selector); |
|||
stack = []; |
|||
this.each(function() { |
|||
var index; |
|||
index = $.inArray(this, waypoints[axis]); |
|||
return push(stack, index, waypoints[axis]); |
|||
}); |
|||
return this.pushStack(stack); |
|||
}, |
|||
_invoke: function($elements, method) { |
|||
$elements.each(function() { |
|||
var waypoints; |
|||
waypoints = Waypoint.getWaypointsByElement(this); |
|||
return $.each(waypoints, function(i, waypoint) { |
|||
waypoint[method](); |
|||
return true; |
|||
}); |
|||
}); |
|||
return this; |
|||
} |
|||
}; |
|||
$.fn[wp] = function() { |
|||
var args, method; |
|||
method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; |
|||
if (methods[method]) { |
|||
return methods[method].apply(this, args); |
|||
} else if ($.isFunction(method)) { |
|||
return methods.init.apply(this, arguments); |
|||
} else if ($.isPlainObject(method)) { |
|||
return methods.init.apply(this, [null, method]); |
|||
} else if (!method) { |
|||
return $.error("jQuery Waypoints needs a callback function or handler option."); |
|||
} else { |
|||
return $.error("The " + method + " method does not exist in jQuery Waypoints."); |
|||
} |
|||
}; |
|||
$.fn[wp].defaults = { |
|||
context: window, |
|||
continuous: true, |
|||
enabled: true, |
|||
horizontal: false, |
|||
offset: 0, |
|||
triggerOnce: false |
|||
}; |
|||
jQMethods = { |
|||
refresh: function() { |
|||
return $.each(contexts, function(i, context) { |
|||
return context.refresh(); |
|||
}); |
|||
}, |
|||
viewportHeight: function() { |
|||
var _ref; |
|||
return (_ref = window.innerHeight) != null ? _ref : $w.height(); |
|||
}, |
|||
aggregate: function(contextSelector) { |
|||
var collection, waypoints, _ref; |
|||
collection = allWaypoints; |
|||
if (contextSelector) { |
|||
collection = (_ref = contexts[$(contextSelector).data(contextKey)]) != null ? _ref.waypoints : void 0; |
|||
} |
|||
if (!collection) { |
|||
return []; |
|||
} |
|||
waypoints = { |
|||
horizontal: [], |
|||
vertical: [] |
|||
}; |
|||
$.each(waypoints, function(axis, arr) { |
|||
$.each(collection[axis], function(key, waypoint) { |
|||
return arr.push(waypoint); |
|||
}); |
|||
arr.sort(function(a, b) { |
|||
return a.offset - b.offset; |
|||
}); |
|||
waypoints[axis] = $.map(arr, function(waypoint) { |
|||
return waypoint.element; |
|||
}); |
|||
return waypoints[axis] = $.unique(waypoints[axis]); |
|||
}); |
|||
return waypoints; |
|||
}, |
|||
above: function(contextSelector) { |
|||
if (contextSelector == null) { |
|||
contextSelector = window; |
|||
} |
|||
return jQMethods._filter(contextSelector, 'vertical', function(context, waypoint) { |
|||
return waypoint.offset <= context.oldScroll.y; |
|||
}); |
|||
}, |
|||
below: function(contextSelector) { |
|||
if (contextSelector == null) { |
|||
contextSelector = window; |
|||
} |
|||
return jQMethods._filter(contextSelector, 'vertical', function(context, waypoint) { |
|||
return waypoint.offset > context.oldScroll.y; |
|||
}); |
|||
}, |
|||
left: function(contextSelector) { |
|||
if (contextSelector == null) { |
|||
contextSelector = window; |
|||
} |
|||
return jQMethods._filter(contextSelector, 'horizontal', function(context, waypoint) { |
|||
return waypoint.offset <= context.oldScroll.x; |
|||
}); |
|||
}, |
|||
right: function(contextSelector) { |
|||
if (contextSelector == null) { |
|||
contextSelector = window; |
|||
} |
|||
return jQMethods._filter(contextSelector, 'horizontal', function(context, waypoint) { |
|||
return waypoint.offset > context.oldScroll.x; |
|||
}); |
|||
}, |
|||
enable: function() { |
|||
return jQMethods._invoke('enable'); |
|||
}, |
|||
disable: function() { |
|||
return jQMethods._invoke('disable'); |
|||
}, |
|||
destroy: function() { |
|||
return jQMethods._invoke('destroy'); |
|||
}, |
|||
extendFn: function(methodName, f) { |
|||
return methods[methodName] = f; |
|||
}, |
|||
_invoke: function(method) { |
|||
var waypoints; |
|||
waypoints = $.extend({}, allWaypoints.vertical, allWaypoints.horizontal); |
|||
return $.each(waypoints, function(key, waypoint) { |
|||
waypoint[method](); |
|||
return true; |
|||
}); |
|||
}, |
|||
_filter: function(selector, axis, test) { |
|||
var context, waypoints; |
|||
context = contexts[$(selector).data(contextKey)]; |
|||
if (!context) { |
|||
return []; |
|||
} |
|||
waypoints = []; |
|||
$.each(context.waypoints[axis], function(i, waypoint) { |
|||
if (test(context, waypoint)) { |
|||
return waypoints.push(waypoint); |
|||
} |
|||
}); |
|||
waypoints.sort(function(a, b) { |
|||
return a.offset - b.offset; |
|||
}); |
|||
return $.map(waypoints, function(waypoint) { |
|||
return waypoint.element; |
|||
}); |
|||
} |
|||
}; |
|||
$[wps] = function() { |
|||
var args, method; |
|||
method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; |
|||
if (jQMethods[method]) { |
|||
return jQMethods[method].apply(null, args); |
|||
} else { |
|||
return jQMethods.aggregate.call(null, method); |
|||
} |
|||
}; |
|||
$[wps].settings = { |
|||
resizeThrottle: 100, |
|||
scrollThrottle: 30 |
|||
}; |
|||
return $w.load(function() { |
|||
return $[wps]('refresh'); |
|||
}); |
|||
}); |
|||
|
|||
}).call(this); |
|||
|
|||
// Generated by CoffeeScript 1.4.0
|
|||
|
|||
/* |
|||
Sticky Elements Shortcut for jQuery Waypoints - v2.0.2 |
|||
Copyright (c) 2011-2013 Caleb Troughton |
|||
Dual licensed under the MIT license and GPL license. |
|||
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
|
|||
*/ |
|||
|
|||
|
|||
(function() { |
|||
|
|||
(function(root, factory) { |
|||
if (typeof define === 'function' && define.amd) { |
|||
return define(['jquery', 'waypoints'], factory); |
|||
} else { |
|||
return factory(root.jQuery); |
|||
} |
|||
})(this, function($) { |
|||
var defaults, wrap; |
|||
defaults = { |
|||
wrapper: '<div class="sticky-wrapper" />', |
|||
stuckClass: 'stuck' |
|||
}; |
|||
wrap = function($elements, options) { |
|||
$elements.wrap(options.wrapper); |
|||
return $elements.parent(); |
|||
}; |
|||
$.waypoints('extendFn', 'sticky', function(opt) { |
|||
var $wrap, options, originalHandler; |
|||
options = $.extend({}, $.fn.waypoint.defaults, defaults, opt); |
|||
$wrap = wrap(this, options); |
|||
originalHandler = options.handler; |
|||
options.handler = function(direction) { |
|||
var $sticky, shouldBeStuck; |
|||
$sticky = $(this).children(':first'); |
|||
shouldBeStuck = direction === 'down' || direction === 'right'; |
|||
$(this).toggleClass(options.stuckClass, shouldBeStuck); |
|||
$wrap.height(shouldBeStuck ? $sticky.outerHeight() : ''); |
|||
if (originalHandler != null) { |
|||
return originalHandler.call(this, direction); |
|||
} |
|||
}; |
|||
$wrap.waypoint(options); |
|||
return this.data('stuckClass', options.stuckClass); |
|||
}); |
|||
return $.waypoints('extendFn', 'unsticky', function() { |
|||
this.parent().waypoint('destroy'); |
|||
this.unwrap(); |
|||
return this.removeClass(this.data('stuckClass')); |
|||
}); |
|||
}); |
|||
|
|||
}).call(this); |
|||
@ -0,0 +1,246 @@ |
|||
/* |
|||
* # Semantic Menu - Flat |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
.ui.menu { |
|||
background-color: #EEEEEE; |
|||
font-size: 0px; |
|||
} |
|||
|
|||
/* Items */ |
|||
.ui.menu .item { |
|||
display: inline-block; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.menu .item:first-child { |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.menu .menu.left, |
|||
.ui.menu .item.left { |
|||
float: left; |
|||
} |
|||
.ui.menu .menu.right, |
|||
.ui.menu .item.right { |
|||
float: right; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
/* Dropdown Menu */ |
|||
.ui.menu .dropdown.item { |
|||
position: relative; |
|||
} |
|||
.ui.menu .dropdown.item .menu { |
|||
overflow: hidden; |
|||
height: 0px; |
|||
width: 0px; |
|||
position: absolute; |
|||
top: 100%; |
|||
left: 0px; |
|||
background-color: #FFFFFF; |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
.ui.menu .dropdown.item:hover .menu { |
|||
display: block; |
|||
overflow: visible; |
|||
width: 100%; |
|||
height: auto; |
|||
|
|||
opacity: 1; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.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: #555555; |
|||
} |
|||
.ui.menu .dropdown.item .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
/* Pseudo states cautiously used for convenience */ |
|||
.ui.menu .item.hover, |
|||
.ui.menu .link.item:hover, |
|||
.ui.menu a.item:hover, |
|||
.ui.menu .dropdown.item .menu .item:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
} |
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
.ui.menu .item.down, |
|||
.ui.menu .link.item:active, |
|||
.ui.menu a.item:active, |
|||
.ui.menu .dropdown.item .menu .item:active { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
.ui.menu .item.active { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.menu { |
|||
background-color: #333333; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.black.menu .item { |
|||
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
.ui.black.menu .item:first-child { |
|||
border-left: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
.ui.black.menu .menu.right, |
|||
.ui.black.menu .item.right { |
|||
border-left: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
|
|||
/* hover */ |
|||
.ui.black.menu .item.hover, |
|||
.ui.black.menu .link.item:hover, |
|||
.ui.black.menu a.item:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(255, 255, 255, .15); |
|||
} |
|||
/* active */ |
|||
.ui.black.menu .item.down, |
|||
.ui.black.menu .link.item:active, |
|||
.ui.black.menu a.item:active { |
|||
background-color: rgba(255, 255, 255, .05); |
|||
|
|||
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Transparent |
|||
---------------*/ |
|||
|
|||
.ui.transparent.menu { |
|||
opacity: 0.95; |
|||
} |
|||
|
|||
/*-------------- |
|||
Vertical |
|||
---------------*/ |
|||
|
|||
.ui.vertical.menu { |
|||
width: 100%; |
|||
} |
|||
.ui.vertical.menu .item { |
|||
border-left: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/*-------------- |
|||
Icons |
|||
---------------*/ |
|||
|
|||
.ui.menu .icon.menu .item i { |
|||
margin: 0px; |
|||
} |
|||
.ui.menu .icon.item i { |
|||
padding: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fixed |
|||
---------------*/ |
|||
|
|||
.ui.menu.fixed { |
|||
position: fixed; |
|||
z-index: 10; |
|||
width: 100%; |
|||
} |
|||
.ui.menu.fixed.top { |
|||
top: 0px; |
|||
left: 0px; |
|||
right: auto; |
|||
bottom: auto; |
|||
} |
|||
.ui.menu.fixed.right { |
|||
top: 0px; |
|||
right: 0px; |
|||
left: auto; |
|||
bottom: auto; |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
.ui.menu.fixed.bottom { |
|||
bottom: 0px; |
|||
left: 0px; |
|||
top: auto; |
|||
right: auto; |
|||
} |
|||
.ui.menu.fixed.left { |
|||
top: 0px; |
|||
left: 0px; |
|||
right: auto; |
|||
bottom: auto; |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
.ui.menu .item { |
|||
padding: 5px 10px; |
|||
font-size: 13px; |
|||
} |
|||
.ui.large.menu .item { |
|||
padding: 12px 10px; |
|||
font-size: 16px; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
25066de069a62374b39f220581d1314fa60a5f45 |
|||
@ -0,0 +1 @@ |
|||
b9c54d022b2628b920f09afd4cb10d4dc0ce0d17 |
|||
@ -0,0 +1 @@ |
|||
318a2643d3af55fe51b472e7769b99caf74ff7b0 |
|||
Write
Preview
Loading…
Cancel
Save