diff --git a/docs/button.html b/docs/button.html index c57f205c5..303f51556 100755 --- a/docs/button.html +++ b/docs/button.html @@ -4,12 +4,14 @@ UI Button - Semantic - - - - - - + + + + + + + + @@ -21,6 +23,7 @@ + @@ -72,178 +75,204 @@ -
+
+
+
+ Semantic UI: Button +
+ +
+ 1 of 14 +
+
1. Button
+
2. Text
+
3. Headers
+
4. Columns
+
5. Elements
+
6. Tags
+
7. Items
+
8. Panels
+
+
+ +
+ Swap Layout +
+
+
+
Menu
-
Swap Style
-
+
+
+

Button

+

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

+
-
-
-

Semantic UI Spec

+
-

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

- -

Button

- -

The standard button:

-
Button
- -

States

+
+
  • Standard
    • +
  • States
    • +
  • Variations
    • +
  • Group
    • +
    +

    Standard

    -

    Can be hovered:

    -
    Hovered Button
    -

    Can be pressed in:

    - -
    Pressed Button
    +

    Button:

    +
    Button
    -

    Can be active:

    -
    Active Button
    +

    States

    -

    Can be disabled:

    -
    Disabled Button
    +

    Can be hovered:

    +
    Hovered Button
    +

    Can be pressed in:

    + +
    Pressed Button
    -

    Can show a loading indicator:

    -
    Loading Button
    +

    Can be active:

    +
    Active Button
    -

    Can alert to a succesful action:

    -
    Successful Button
    +

    Can be disabled:

    +
    Disabled Button
    -

    Can alert user of an error:

    -
    Error Button
    +

    Can show a loading indicator:

    +
    Loading Button
    -

    Standard Variations

    +

    Can alert to a succesful action:

    +
    Successful Button
    -

    Can have different sizes:

    -
    - Mini -
    -
    - Tiny -
    -
    - Small -
    -
    - Medium -
    -
    - Big -
    -
    - Huge -
    -
    - - Massive -
    -
    - - Gigantic -
    - - -

    Can have different colors:

    -
    Blue Button
    -
    Purple Button
    -
    Green Button
    - -

    Can fit parent container:

    -
    Fits container
    +

    Can alert user of an error:

    +
    Error Button
    + +
    Normal
    +
    Hover
    +
    Down
    +
    Loading
    +

    +
    Disabled
    +
    Active
    +
    Toggled
    +
    Error
    +
    Success
    + +

    Variations

    + +

    Can have different sizes:

    +
    + Mini +
    +
    + Tiny +
    +
    + Small +
    +
    + Medium +
    +
    + Big +
    +
    + Huge +
    +
    + + Massive +
    +
    + + Gigantic +
    -

    Buttons (Button Groups)

    -

    Can exist together as groups

    -
    -
    One
    -
    Two
    -
    Three
    -
    -

    Groups can be vertical

    -
    -
    One
    -
    Two
    -
    Three
    -
    -

    Groups can be divided evenly to fit parent

    -
    -
    One
    -
    Two
    -
    Three
    -
    +

    Can have different colors:

    +
    Blue Button
    +
    Purple Button
    +
    Green Button
    -

    Singular variations can be applied to groups to infer all elements share the same quality

    -

    Blue

    -
    -
    One
    -
    Two
    -
    Three
    -
    -

    -

    Large

    -
    -
    One
    -
    Two
    -
    Three
    -
    +

    Can fit parent container:

    +
    Fits container
    + +

    Can be formatted to fit just an icon or image:

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +

    Can be attached to the top or bottom of other content

    +
    Top
    +
    +
    Bottom
    -

    Additional Variations

    +

    Can be attached to an input field

    +
    + +
    Search
    +
    -

    Can be formatted to fit just an icon or image:

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +

    Buttons (Button Groups)

    -

    Can be attached to the top or bottom of other content

    -
    Top
    -
    -
    Bottom
    - -

    Can be attached to an input field

    -
    - -
    Search
    -
    - -

    States

    -
    -

    Button States

    -
    Normal
    -
    Hover
    -
    Down
    -
    Loading
    - -

    -
    Disabled
    -
    Active
    -
    Toggled
    -
    Error
    -
    Success
    -
    +

    Can exist together as groups

    +
    +
    One
    +
    Two
    +
    Three
    +
    +

    Groups can be vertical

    +
    +
    One
    +
    Two
    +
    Three
    +
    +

    Groups can be divided evenly to fit parent

    +
    +
    One
    +
    Two
    +
    Three
    +
    +

    Singular variations can be applied to groups to infer all elements share the same quality

    +

    Blue

    +
    +
    One
    +
    Two
    +
    Three
    +

    +

    Large

    +
    +
    One
    +
    Two
    +
    Three
    +
    + +
    \ No newline at end of file diff --git a/docs/javascript/example.js b/docs/javascript/example.js index 3d6fbab60..ef9bbff0f 100755 --- a/docs/javascript/example.js +++ b/docs/javascript/example.js @@ -8,29 +8,45 @@ shape.ready = function() { // selector cache var - $ui = $('.ui'), - $swap = $('.swap.button'), - $menu = $('.menu.button'), - $demo = $('.demo'), + $ui = $('.ui'), + $swap = $('.swap'), + $menu = $('.menu.button'), + $demo = $('.demo'), + $waypoints = $('h2'), + + $peek = $('.peek'), + $peekMenu = $peek.find('li'), // alias handler ; // event handlers handler = { + + peek: function() { + $('html, body') + .animate({ + scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90 + }, 500, function(){ + $(this).addClass('active').siblings().removeClass('active'); + }) + ; + $('html') + .one('scroll', function() { + $('html,body').stop(); + }) + ; + }, swapStyle: function() { - $('head link') + $('head link.ui') .each(function() { var href = $(this).attr('href') ; - console.log (href, href.search('flat') ); if( href.search('flat') > -1 ) { - console.log('zz'); $(this).attr('href', href.replace('flat', 'shaded')); } else { - console.log('aaa'); $(this).attr('href', href.replace('shaded', 'flat')); } }) @@ -43,6 +59,27 @@ shape.ready = function() { .state() ; + $waypoints + .waypoint({ + continuous : false, + offset : 220, + handler : function(direction) { + var + index = (direction == 'down') + ? $waypoints.index(this) + : ($waypoints.index(this) - 1 >= 0) + ? ($waypoints.index(this) - 1) + : 0 + ; + $peekMenu + .removeClass('active') + .eq( index ) + .addClass('active') + ; + } + }) + ; + $swap .on('click', handler.swapStyle) ; @@ -53,6 +90,17 @@ shape.ready = function() { }) ; + $peek + .waypoint('sticky', { + offset: 80, + stuckClass: 'stuck' + }) + ; + $peekMenu + .state() + .on('click', handler.peek) + ; + }; diff --git a/docs/library/waypoints.js b/docs/library/waypoints.js new file mode 100755 index 000000000..4488c5b8e --- /dev/null +++ b/docs/library/waypoints.js @@ -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: '
    ', + 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); \ No newline at end of file diff --git a/docs/module.html b/docs/module.html index b33107fd7..7b6a024ee 100755 --- a/docs/module.html +++ b/docs/module.html @@ -7,6 +7,7 @@ + @@ -17,22 +18,23 @@ - + + -
    -
    Menu
    +
    +
    +
    + Semantic UI: Introduction +
    + +
    + 1 of 2 +
    +
    1. Introduction
    +
    2. Download
    +
    3. UI Library
    +
    4. UI Modules
    +
    5. Behavioral Modules
    +
    +
    + +
    +
    +
    +
    Menu
    -

    +
    - Semantic +

    Semantic

    +

    UI is the DNA of the web. Semantic empowers designers and developers by creating a shared vocabulary for UI.

    -

    -
    -

    UI is the DNA of the web. Semantic empowers developers by creating a shared vocabulary for UI.

    +
    +
    +
    +
  • What is Semantic?
    • +
  • The Standard
    • +
  • The Library
    • +

    What is Semantic?

    Semantic has two parts. The semantic standard, and the semantic library.

    -

    The standard

    +

    The standard

    The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).

    Static elements: menus, columns, grids, tables, buttons, forms.

    Dynamic components: popups, modals, chat rooms.

    Behavioral components: form validation, state management, history.

    -

    Defining UI

    +

    Defining UI

    Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.

    Sharing a common standard for UI releases the burden from developers at being a naming authorities in their own projects.

    If together as a community we can define a standard for interface elements, we can share designs without having to modify our site's code to match the arbitrary specifications of a library, and interface designs can be freely exchanged between projects and teams.

    @@ -111,7 +145,7 @@

    If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.

    UI Button Spec -

    Defining Modules

    +

    Defining Modules

    The Semantic modules standard is created primarily to accomplish two things:

    1. Provide conveniences for module authors so that they can be written faster and without clutter.
      2. @@ -137,7 +171,7 @@
    -

    The Libraries

    +

    The Libraries

    To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.

    The UI Library

      diff --git a/docs/shape.html b/docs/shape.html index c58054b2b..40b6d2174 100755 --- a/docs/shape.html +++ b/docs/shape.html @@ -76,7 +76,7 @@
    -
    +
    Menu
    diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index a14ff2482..1f6401f66 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -24,8 +24,9 @@ body#example { font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif; - background: #FCFCFC url(images/bg.jpg) repeat; - padding-bottom: 150px; + background: #FCFCFC url(../images/bg.jpg) repeat; + margin: 0px; + padding: 0px 0px 150px; } /* links */ @@ -70,10 +71,12 @@ a:hover { } #example h1:first-child { margin-top: 0px; - padding-top: 20px; + padding-top: 0px; } #example h2 { - margin: 40px 0px 20px; + margin: 35px 0px 0px; + padding-bottom: 10px; + border-bottom: 1px solid #DDDDDD; } #example h3 { font-size: 20px; @@ -102,6 +105,22 @@ a:hover { #example p > a { font-weight: bold; } +#example .section.dropdown .menu { + left: -46px; + width: 215px; +} + +/* segment headers */ +#example .segment { + margin: 0px 0px 46px; + padding: 65px 0px 20px; + background-color: #FAFAFA; + border-bottom: 1px solid #DDDDDD; +} +#example .segment .text { + width: 800px; + margin: 0px auto; +} /* lists */ #example ol { @@ -126,13 +145,8 @@ a:hover { /* content */ -#example .full.container { - position: relative; - width: 800px; -} - #example .container { - width: 700px; + width: 800px; margin: 0px auto; } #example .shortcuts { @@ -140,8 +154,26 @@ a:hover { clear: both; } -#example .menu.buttons { +#example .side.buttons { + position: fixed; + margin-top: 75px; +} + +#example .main.container { + position: relative; +} +#example .peek { + position: absolute; + top: -8px; + left: -230px; + width: 180px; +} +#example .sticky-wrapper.stuck { + height: 0px !important; +} +#example .sticky-wrapper.stuck .peek { position: fixed; - margin-top: 20px; - margin-left: -8px; + top: 75px; + left: 50%; + margin-left: -630px; } \ No newline at end of file diff --git a/src/spec/multiple.js b/src/spec/multiple.js index 353d735d5..c304b90a9 100755 --- a/src/spec/multiple.js +++ b/src/spec/multiple.js @@ -11,7 +11,7 @@ * * Copyright 2013 Contributors * Released under the MIT license - * http://jquery.org/license + * http://opensource.org/licenses/MIT * * Released: April 17 2013 */ diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index 6a2ee7b63..0754769ee 100755 --- a/src/ui/flat/button.css +++ b/src/ui/flat/button.css @@ -1,11 +1,20 @@ +/* + * # Semantic Button - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ + + /******************************* - UI Button + Standard *******************************/ -/*-------------- - Standard Button ----------------*/ - /* Normal */ .ui.button { cursor: pointer; @@ -73,8 +82,225 @@ ; } + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.button.hover { + background-color: #DDDDDD; +} +/* Down */ +.ui.button.down { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; +} + + +/*-------------- + Active +---------------*/ + +.ui.buttons .button.active, +.ui.button.active { + background-color: #E6E6E6; + -webkit-box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; + -moz-box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; + box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; +} +.ui.buttons .button.active, +.ui.buttons .button.active a, +.ui.button.active, +.ui.button.active a { + color: #7A7A7A; +} +.ui.buttons .button.active.hover, +.ui.button.active.hover { + background: #E0E0E0; + + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + +} +.ui.buttons .button.active.hover, +.ui.buttons .button.active.hover a, +.ui.button.active.hover, +.ui.button.active.hover a { + color: #555555; +} +.ui.buttons .button.active.hover.down, +.ui.button.active.hover.down { + background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); +} + +/*-------------- + Loading +---------------*/ + +.ui.button.loading, +.ui.button.loading.hover { + position: relative; + cursor: default; + opacity: 0.75; + color: #888888 !important; + + background-image: none !important; + + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.loading:after { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + content: ''; + background: #EEEEEE url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%; + background-position: 50% 50%; + background-repeat: no-repeat; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} +/* Opposite color loader */ +.ui.grey.button.loading, +.ui.button.active.loading { + border-color: #BBBBBB +} +.ui.grey.button.loading:after, +.ui.button.active.loading:after { + background-color: #FAFAFA; + background: url(../images/throbber-tiny.gif) no-repeat 50% 50%; +} + +/* resizes */ + +/* blue */ +.ui.huge.button.loading:after { + background-image: url(../images/throbber-blue-small.gif); +} +.ui.massive.buttons .button.loading:after, +.ui.gigantic.buttons .button.loading:after, +.ui.massive.button.loading:after, +.ui.gigantic.button.loading:after { + background-image: url(../images/throbber-blue-medium.gif); +} + +/* grey */ +.ui.huge.grey.button.loading:after, +.ui.huge.button.loading.active:after { + background-image: url(../images/throbber-small.gif); +} +.ui.massive.grey.buttons .button.loading:after, +.ui.gigantic.grey.buttons .button.loading:after, +.ui.massive.grey.button.loading:after, +.ui.gigantic.grey.button.loading:after, +.ui.massive.grey.buttons .button.loading.active:after, +.ui.gigantic.grey.buttons .button.loading.active:after, +.ui.massive.button.loading.active:after, +.ui.gigantic.button.loading.active:after { + background-image: url(../images/throbber-medium.gif); +} + + +/*-------------- + Error +---------------*/ + +.ui.buttons .button.error, +.ui.buttons .button.error.hover, +.ui.buttons .button.error.down, +.ui.button.error, +.ui.button.error.hover, +.ui.button.error.down { + cursor: default; + position: relative; + + color: #FFFFFF; + text-shadow: none; + + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.buttons .button.error:after, +.ui.buttons .button.error.hover:after, +.ui.buttons .button.error.down:after, +.ui.button.error:after, +.ui.button.error.hover:after, +.ui.button.error.down:after { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + content: ''; + /* standard */ + background: #EE141D url(../images/button-error.gif) no-repeat 50% 50%; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; +} + +.ui.button.success, +.ui.button.success.hover, +.ui.button.success.down { + background-color: #59B94B; + color: #FFFFFF; + border-color: #588D0F; +} + +/* Disabled State */ +.ui.button.disabled, +.ui.button.disabled.hover, +.ui.button.disabled.down { + cursor: default; + color: #BBBBBB; + background-color: #F8F8F8 !important; + background-image: none !important; + + text-shadow: none !important; + + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + + +/******************************* + Variations +*******************************/ + + /*--------------- - Blue Button + Blue ----------------*/ .ui.blue.buttons .button, @@ -92,7 +318,7 @@ } /*--------------- - Purple Button + Purple ----------------*/ .ui.purple.buttons .button, @@ -110,7 +336,7 @@ } /*--------------- - Green Button + Green ----------------*/ .ui.button.green, @@ -132,7 +358,7 @@ } /*-------------------- - Transparent Button + Transparent ----------------------*/ .ui.transparent.buttons .button, @@ -160,7 +386,6 @@ .ui.transparent.button.down a { color: #555555; } - .ui.transparent.buttons .button.down { background-color: rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); @@ -170,7 +395,7 @@ /*------------------- - Resizes + Sizes --------------------*/ .ui.buttons.mini .button, @@ -226,7 +451,7 @@ /*-------------- - Icons +Containing Icon ---------------*/ .ui.button i { @@ -254,18 +479,17 @@ } /*-------------- - Labels + Labels ---------------*/ .ui.button .label { } -/******************************* - Modifiers -*******************************/ -/* Image Buttons */ +/*-------------- + Icon Only +---------------*/ .ui.icon.buttons .button, .ui.icon.button { padding: 7px; @@ -311,11 +535,16 @@ } +/*-------------- + Toggle +---------------*/ + /* Toggle (Modifies active state to give affordances) */ .ui.toggle.buttons .button.active, .ui.buttons .button.toggle.active, .ui.button.toggle.active { background-color: #BBF0A9; + color: #1C8C21; } .ui.buttons.toggle .ui.button.active.hover, .ui.buttons .ui.button.toggle.active.hover, @@ -350,13 +579,38 @@ } -/* Bubbly Variation */ +/*-------------- + Bubbly +---------------*/ .ui.button.bubbly { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } + +/*-------------- + Attached +---------------*/ + +.ui.button.attached { + display: block; +} +.ui.button.attached.top { + margin-left: -1px; + margin-right: -1px; + -webkit-border-radius: 5px 5px 0px 0px; + -moz-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.button.attached.bottom { + margin-left: -1px; + margin-right: -1px; + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} + /* Button attached to a form element */ input + .ui.attached.button { display: inline-block; @@ -386,271 +640,6 @@ input + .ui.attached.button.down { opacity: 1; } -/*------------------- - Attached Style ---------------------*/ - -.ui.button.attached { - display: block; -} -.ui.button.attached.top { - margin-left: -1px; - margin-right: -1px; - -webkit-border-radius: 5px 5px 0px 0px; - -moz-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; -} -.ui.button.attached.bottom { - margin-left: -1px; - margin-right: -1px; - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; -} - - -/******************************* - States -*******************************/ - -/* Hover */ -.ui.button.hover { - background-color: #DDDDDD; -} -/* Down */ -.ui.button.down { - -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; -} - -/* Active */ -.ui.buttons .button.active, -.ui.button.active { - background-color: #E6E6E6; - background: -webkit-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); - background: -moz-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); - background: -o-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); - background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); - background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); - - - -webkit-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset - ; - -moz-box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset - ; - box-shadow: - 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset - ; -} -.ui.buttons .button.active, -.ui.buttons .button.active a, -.ui.button.active, -.ui.button.active a { - color: #7A7A7A; -} -.ui.buttons .button.active.hover, -.ui.button.active.hover { - background: #E0E0E0 -webkit-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); - background: #E0E0E0 -moz-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); - background: #E0E0E0 -o-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); - background: #E0E0E0 -ms-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); - background: #E0E0E0 linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); - - -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; - -} -.ui.buttons .button.active.hover, -.ui.buttons .button.active.hover a, -.ui.button.active.hover, -.ui.button.active.hover a { - color: #555555; -} -.ui.buttons .button.active.hover.down, -.ui.button.active.hover.down { - background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); - background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); - background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); - background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); - background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); -} - - - - -/******************************* - Loading -*******************************/ - -/* Loading */ -.ui.button.loading, -.ui.button.loading.hover { - position: relative; - cursor: default; - opacity: 0.75; - color: #888888 !important; - - background-image: none !important; - - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; - - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.button.loading:after { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - content: ''; - background: #EEEEEE url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%; - background-position: 50% 50%; - background-repeat: no-repeat; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; -} -/* Opposite color loader */ -.ui.grey.button.loading, -.ui.button.active.loading { - border-color: #BBBBBB -} -.ui.grey.button.loading:after, -.ui.button.active.loading:after { - background-color: #FAFAFA; - /* standard */ - background: url(../images/throbber-tiny.gif) no-repeat 50% 50%; - /* css 3 multi image */ - background-image: url(../images/throbber-tiny.gif); - background-image: url(../images/throbber-tiny.gif); - background-image: url(../images/throbber-tiny.gif); - background-image: url(../images/throbber-tiny.gif); - background-image: url(../images/throbber-tiny.gif); - background-position: 50% 50%, 0px 0px; - background-repeat: no-repeat; -} - -/* resizes */ - -/* blue */ -.ui.huge.button.loading:after { - background-image: url(../images/throbber-blue-small.gif); - background-image: url(../images/throbber-blue-small.gif); - background-image: url(../images/throbber-blue-small.gif); - background-image: url(../images/throbber-blue-small.gif); - background-image: url(../images/throbber-blue-small.gif); -} -.ui.massive.buttons .button.loading:after, -.ui.gigantic.buttons .button.loading:after, -.ui.massive.button.loading:after, -.ui.gigantic.button.loading:after { - background-image: url(../images/throbber-blue-medium.gif); - background-image: url(../images/throbber-blue-medium.gif); - background-image: url(../images/throbber-blue-medium.gif); - background-image: url(../images/throbber-blue-medium.gif); - background-image: url(../images/throbber-blue-medium.gif); -} - -/* grey */ -.ui.huge.grey.button.loading:after, -.ui.huge.button.loading.active:after { - background-image: url(../images/throbber-small.gif); - background-image: url(../images/throbber-small.gif); - background-image: url(../images/throbber-small.gif); - background-image: url(../images/throbber-small.gif); - background-image: url(../images/throbber-small.gif); -} -.ui.massive.grey.buttons .button.loading:after, -.ui.gigantic.grey.buttons .button.loading:after, -.ui.massive.grey.button.loading:after, -.ui.gigantic.grey.button.loading:after, -.ui.massive.grey.buttons .button.loading.active:after, -.ui.gigantic.grey.buttons .button.loading.active:after, -.ui.massive.button.loading.active:after, -.ui.gigantic.button.loading.active:after { - background-image: url(../images/throbber-medium.gif); - background-image: url(../images/throbber-medium.gif); - background-image: url(../images/throbber-medium.gif); - background-image: url(../images/throbber-medium.gif); - background-image: url(../images/throbber-medium.gif); -} - - -/******************************* - Error States -*******************************/ - -.ui.buttons .button.error, -.ui.buttons .button.error.hover, -.ui.buttons .button.error.down, -.ui.button.error, -.ui.button.error.hover, -.ui.button.error.down { - cursor: default; - position: relative; - - color: #FFFFFF; - text-shadow: none; - - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.buttons .button.error:after, -.ui.buttons .button.error.hover:after, -.ui.buttons .button.error.down:after, -.ui.button.error:after, -.ui.button.error.hover:after, -.ui.button.error.down:after { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - content: ''; - /* standard */ - background: #EE141D url(../images/button-error.gif) no-repeat 50% 50%; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; -} - -.ui.button.success, -.ui.button.success.hover, -.ui.button.success.down { - background-color: #59B94B; - color: #FFFFFF; - border-color: #588D0F; -} - -/* Disabled State */ -.ui.button.disabled, -.ui.button.disabled.hover, -.ui.button.disabled.down { - cursor: default; - color: #BBBBBB; - background-color: #F8F8F8 !important; - background-image: none !important; - - text-shadow: none !important; - - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; -} /******************************* diff --git a/src/ui/flat/icons.css b/src/ui/flat/icons.css index 22327f398..31a9ec6e0 100755 --- a/src/ui/flat/icons.css +++ b/src/ui/flat/icons.css @@ -4,12 +4,12 @@ @font-face { font-family: 'Icons'; - src: url("/fonts/icons.eot"); + src: url("..//fonts/icons.eot"); src: - url("/fonts/icons.eot?#iefix") format('embedded-opentype'), - url("/fonts/icons.woff") format('woff'), - url("/fonts/icons.ttf") format('truetype'), - url("/fonts/icons.svg#icons") format('svg') + url("../fonts/icons.eot?#iefix") format('embedded-opentype'), + url("../fonts/icons.woff") format('woff'), + url("../fonts/icons.ttf") format('truetype'), + url("../fonts/icons.svg#icons") format('svg') ; font-weight: normal; font-style: normal; diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css index e69de29bb..346b9ec6f 100755 --- a/src/ui/flat/menu.css +++ b/src/ui/flat/menu.css @@ -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; +} \ No newline at end of file diff --git a/src/ui/flat/panel.css b/src/ui/flat/panel.css index f85e404de..dd1194bbc 100755 --- a/src/ui/flat/panel.css +++ b/src/ui/flat/panel.css @@ -16,12 +16,6 @@ border-radius: 4px; background-color: #FAFAFA; - background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - } .ui.panel li { @@ -54,11 +48,6 @@ ; background-color: #FAFAFA; - background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); - background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); -webkit-user-select: none; -moz-user-select: none; @@ -109,11 +98,7 @@ /* States */ .ui.panel li.hover { - background: -webkit-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); - background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); - background: -o-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); - background: -ms-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); - background: linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + background-color: #F6F6F6; color: #333333; } .ui.panel li.hover a { @@ -123,31 +108,18 @@ .ui.panel li.down, .ui.panel li.active { + background-color: #EAEAEA; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); -webkit-box-shadow: - 0px 1px 5px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 1px #DDDDDD inset, - 0px 0px 0px 1px #CCCCCC + 0px 0px 2px rgba(0, 0, 0, 0.1) inset ; -moz-box-shadow: - 0px 1px 5px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 1px #DDDDDD inset, - 0px 0px 0px 1px #CCCCCC + 0px 0px 2px rgba(0, 0, 0, 0.1) inset ; box-shadow: - 0px 1px 5px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 1px #DDDDDD inset, - 0px 0px 0px 1px #CCCCCC + 0px 0px 2px rgba(0, 0, 0, 0.1) inset ; - - background-color: #EAEAEA; - background: -webkit-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); - background: -moz-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); - background: -o-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); - background: -ms-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); - background: linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); - } .ui.panel li.active, .ui.panel li.active.hover { @@ -173,9 +145,9 @@ width: 12px; height: 12px; - -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; - box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset; background-color: #ECECEC; background-image: none; @@ -193,9 +165,9 @@ bottom: auto; left: auto; - -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; - box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; + box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; margin-top: -7px; width: 12px; diff --git a/src/ui/fonts/icons.eot.REMOVED.git-id b/src/ui/fonts/icons.eot.REMOVED.git-id new file mode 100644 index 000000000..2776fbe5d --- /dev/null +++ b/src/ui/fonts/icons.eot.REMOVED.git-id @@ -0,0 +1 @@ +25066de069a62374b39f220581d1314fa60a5f45 \ No newline at end of file diff --git a/src/ui/fonts/icons.svg.REMOVED.git-id b/src/ui/fonts/icons.svg.REMOVED.git-id new file mode 100644 index 000000000..fbf9c2439 --- /dev/null +++ b/src/ui/fonts/icons.svg.REMOVED.git-id @@ -0,0 +1 @@ +b9c54d022b2628b920f09afd4cb10d4dc0ce0d17 \ No newline at end of file diff --git a/src/ui/fonts/icons.ttf.REMOVED.git-id b/src/ui/fonts/icons.ttf.REMOVED.git-id new file mode 100644 index 000000000..f8d220df0 --- /dev/null +++ b/src/ui/fonts/icons.ttf.REMOVED.git-id @@ -0,0 +1 @@ +318a2643d3af55fe51b472e7769b99caf74ff7b0 \ No newline at end of file diff --git a/src/ui/fonts/icons.woff b/src/ui/fonts/icons.woff new file mode 100755 index 000000000..baba1b5eb Binary files /dev/null and b/src/ui/fonts/icons.woff differ diff --git a/src/ui/shaded/panel.css b/src/ui/shaded/panel.css index 9560d13c1..98d73f260 100755 --- a/src/ui/shaded/panel.css +++ b/src/ui/shaded/panel.css @@ -26,6 +26,7 @@ position: relative; cursor: pointer; float: left; + list-style-type: none; line-height: 1; padding: 14px 35px;