From 294fa68f83690070f63b9710e591d7cf5a2ea61a Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 29 Aug 2013 17:00:49 -0400 Subject: [PATCH] Adds first docs for modal, adds revisions to modal and dimmer Former-commit-id: 5a515a3c6c08f8dd75125e88d3d3599d1d109b11 Former-commit-id: 249e072adb24b940280ac35e5195b4efc0de3744 --- build/minified/modules/dimmer.js | 26 +- build/minified/modules/dropdown.js | 1 - build/minified/modules/modal.js | 107 ++++-- build/packaged/modules/dimmer.js | 26 +- build/packaged/modules/dropdown.js | 1 - build/packaged/modules/modal.js | 107 ++++-- build/uncompressed/collections/menu.css | 165 ++++---- build/uncompressed/elements/button.css | 328 ++++++++-------- build/uncompressed/elements/icons.css | 6 +- build/uncompressed/elements/image.css | 1 + build/uncompressed/elements/label.css | 72 +++- build/uncompressed/elements/list.css | 4 + build/uncompressed/modules/dimmer.css | 31 +- build/uncompressed/modules/dimmer.js | 26 +- build/uncompressed/modules/dropdown.js | 1 - build/uncompressed/modules/modal.css | 60 +-- build/uncompressed/modules/modal.js | 107 ++++-- build/uncompressed/modules/transition.css | 73 +++- node/package.json | 15 +- node/src/documents/collections/menu.html | 20 +- node/src/documents/elements/label.html | 99 +++-- node/src/documents/index.html.eco | 2 +- node/src/documents/modules/modal.html | 312 +++++++++++++++ .../components/semantic/collections/menu.css | 130 ++++--- .../components/semantic/elements/button.css | 328 ++++++++-------- .../components/semantic/elements/icons.css | 6 +- .../components/semantic/elements/image.css | 1 + .../components/semantic/elements/label.css | 72 +++- .../components/semantic/elements/list.css | 4 + .../components/semantic/modules/dimmer.css | 31 +- .../components/semantic/modules/dimmer.js | 26 +- .../components/semantic/modules/dropdown.js | 1 - .../components/semantic/modules/modal.css | 60 +-- .../components/semantic/modules/modal.js | 107 ++++-- .../semantic/modules/transition.css | 73 +++- node/src/files/fonts/nobile-bold.eot | Bin 24472 -> 0 bytes .../fonts/nobile-bold.ttf.REMOVED.git-id | 1 - node/src/files/fonts/nobile-bold.woff | Bin 28424 -> 0 bytes node/src/files/fonts/nobile-regular.eot | Bin 24174 -> 0 bytes .../fonts/nobile-regular.ttf.REMOVED.git-id | 1 - node/src/files/fonts/nobile-regular.woff | Bin 28036 -> 0 bytes node/src/files/javascript/menu.js | 11 +- node/src/files/javascript/modal.js | 24 ++ node/src/files/javascript/semantic.js | 7 + node/src/files/stylesheets/semantic.css | 9 +- node/src/layouts/default.html.eco | 11 +- src/collections/menu.less.REMOVED.git-id | 2 +- src/elements/button.less | 357 +++++++++--------- src/elements/icons.less | 6 +- src/elements/image.less | 1 + src/elements/label.less | 92 ++++- src/elements/list.less | 5 + src/modules/dimmer.js | 26 +- src/modules/dimmer.less | 27 +- src/modules/dropdown.js | 1 - src/modules/modal.js | 107 ++++-- src/modules/modal.less | 76 ++-- src/modules/transition.less | 74 +++- 58 files changed, 2145 insertions(+), 1122 deletions(-) create mode 100755 node/src/documents/modules/modal.html delete mode 100755 node/src/files/fonts/nobile-bold.eot delete mode 100644 node/src/files/fonts/nobile-bold.ttf.REMOVED.git-id delete mode 100755 node/src/files/fonts/nobile-bold.woff delete mode 100755 node/src/files/fonts/nobile-regular.eot delete mode 100644 node/src/files/fonts/nobile-regular.ttf.REMOVED.git-id delete mode 100755 node/src/files/fonts/nobile-regular.woff create mode 100755 node/src/files/javascript/modal.js diff --git a/build/minified/modules/dimmer.js b/build/minified/modules/dimmer.js index 5aa73ec05..1b6e81238 100644 --- a/build/minified/modules/dimmer.js +++ b/build/minified/modules/dimmer.js @@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) { if( module.is.dimmer() ) { $dimmer = $module; $module = $dimmer.parent(); - module.debug('Module initialized as dimmer'); + module.debug('Module initialized as dimmer', settings); } else { if( module.has.dimmer() ) { $dimmer = $module.children(selector.dimmer).first(); - module.debug('Module initialized with found dimmer'); + module.debug('Module initialized with found dimmer', settings); } else { module.create(); - module.debug('Module initialized with created dimmer'); + module.debug('Module initialized with created dimmer', settings); } if(settings.on == 'hover') { $module @@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) { }, animate: { - show: function() { + show: function(callback) { + callback = callback || function(){}; module.set.dimmed(); if($.fn.transition !== undefined) { $dimmer - .transition(settings.transition + ' in', function() { + .transition(settings.transition + ' in', settings.duration, function() { module.set.active(); + callback(); }) ; } @@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) { .fadeTo(settings.duration, 1, function() { $dimmer.removeAttr('style'); module.set.active(); + callback(); }) ; } }, - hide: function() { + hide: function(callback) { + callback = callback || function(){}; module.remove.dimmed(); if($.fn.transition !== undefined) { module.verbose('Hiding dimmer with css'); $dimmer .transition(settings.transition + ' out', settings.duration, function() { module.remove.active(); + callback(); }) ; } @@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) { .fadeOut(settings.duration, function() { $dimmer.removeAttr('style'); module.remove.active(); + callback(); }) ; } @@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) { } }, - show: function() { + show: function(callback) { module.debug('Showing dimmer', $dimmer); if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) { - module.animate.show(); + module.animate.show(callback); $.proxy(settings.onShow, element)(); $.proxy(settings.onChange, element)(); } @@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) { } }, - hide: function() { + hide: function(callback) { if( module.is.active() || module.is.animating() ) { module.debug('Hiding dimmer', $dimmer); - module.animate.hide(); + module.animate.hide(callback); $.proxy(settings.onHide, element)(); $.proxy(settings.onChange, element)(); } diff --git a/build/minified/modules/dropdown.js b/build/minified/modules/dropdown.js index 32d732449..553191b1e 100644 --- a/build/minified/modules/dropdown.js +++ b/build/minified/modules/dropdown.js @@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) { $currentMenu = $(this).find(selector.menu), $otherMenus = $(this).siblings(selector.item).children(selector.menu) ; - console.log($currentMenu); if( $currentMenu.size() > 0 ) { clearTimeout(dropdown.itemTimer); dropdown.itemTimer = setTimeout(function() { diff --git a/build/minified/modules/modal.js b/build/minified/modules/modal.js index 192c858b0..8be7689ca 100644 --- a/build/minified/modules/modal.js +++ b/build/minified/modules/modal.js @@ -19,21 +19,21 @@ $.fn.modal = function(parameters) { ? $.extend(true, {}, $.fn.modal.settings, parameters) : $.fn.modal.settings, - selector = settings.selector, - className = settings.className, - namespace = settings.namespace, - error = settings.error, + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + error = settings.error, - eventNamespace = '.' + namespace, + eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModals.selector || '', + moduleSelector = $allModals.selector || '', - time = new Date().getTime(), - performance = [], + time = new Date().getTime(), + performance = [], - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), invokedResponse ; @@ -46,6 +46,8 @@ $.fn.modal = function(parameters) { $otherModals = $allModals.not($modal), $closeButton = $modal.find(selector.closeButton), + $dimmer, + element = this, instance = $modal.data(moduleNamespace), modal @@ -60,6 +62,7 @@ $.fn.modal = function(parameters) { ; $context .dimmer({ + closable: settings.closable, duration: settings.duration, onShow: function() { modal.add.keyboardShortcuts(); @@ -67,6 +70,7 @@ $.fn.modal = function(parameters) { }, onHide: function() { if($modal.is(':visible')) { + $context.off('.dimmer'); modal.hide(); $.proxy(settings.onHide, this)(); } @@ -74,6 +78,14 @@ $.fn.modal = function(parameters) { } }) ; + $dimmer = $context.children(selector.dimmer); + if( $modal.parent()[0] !== $dimmer[0] ) { + modal.debug('Moving element inside dimmer', $context); + $modal + .detach() + .appendTo($dimmer) + ; + } modal.cache.sizes(); modal.instantiate(); }, @@ -118,18 +130,27 @@ $.fn.modal = function(parameters) { } }, + toggle: function() { + if( modal.is.active() ) { + modal.hide(); + } + else { + modal.show(); + } + }, + show: function() { modal.set.type(); modal.set.position(); - modal.hideOthers(); + modal.hideAll(); if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' in', settings.duration) + .transition(settings.transition + ' in', settings.duration, modal.set.active) ; } else { $modal - .fadeIn(settings.duration, settings.easing) + .fadeIn(settings.duration, settings.easing, modal.set.active) ; } $context.dimmer('show'); @@ -142,17 +163,17 @@ $.fn.modal = function(parameters) { ; if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' out', settings.duration, settings.unDim) + .transition(settings.transition + ' out', settings.duration, modal.remove.active) ; } else { $modal - .fadeOut(settings.duration, settings.easing, settings.unDim) + .fadeOut(settings.duration, settings.easing, modal.remove.active) ; } }, - hideOthers: function() { + hideAll: function() { $otherModals .filter(':visible') .modal('hide') @@ -169,6 +190,9 @@ $.fn.modal = function(parameters) { }, remove: { + active: function() { + $modal.removeClass(className.active); + }, keyboardShortcuts: function() { modal.verbose('Removing keyboard shortcuts'); $document @@ -195,7 +219,16 @@ $.fn.modal = function(parameters) { } }, + is: { + active: function() { + return $modal.hasClass(className.active); + } + }, + set: { + active: function() { + $modal.addClass('active'); + }, type: function() { if(modal.can.fit()) { modal.verbose('Modal fits on screen'); @@ -257,7 +290,7 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.debug.apply(console, arguments); } } @@ -268,13 +301,13 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.verbose.apply(console, arguments); } } }, error: function() { - modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); + modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); modal.error.apply(console, arguments); }, performance: { @@ -301,7 +334,7 @@ $.fn.modal = function(parameters) { }, display: function() { var - title = settings.moduleName + ':', + title = settings.name + ':', totalTime = 0 ; time = false; @@ -406,35 +439,33 @@ $.fn.modal = function(parameters) { $.fn.modal.settings = { - name : 'Modal', + name : 'Modal', namespace : 'modal', - verbose : true, debug : true, performance : true, - selector : { - closeButton : '.close' - }, + offset : 0, + transition : 'scale', + duration : 500, + easing : 'easeOutExpo', + + closable : true, + context : 'body', + + onShow : function(){}, + onHide : function(){}, + selector : { + closeButton : '.close, .actions .button', + dimmer: '.ui.dimmer' + }, error : { method : 'The method you called is not defined.' }, - className : { scrolling : 'scrolling' }, - - onShow : function(){}, - onHide : function(){}, - - transition : 'scale', - - context : 'body', - offset : -25, - - duration : 400, - easing : 'easeOutExpo' }; diff --git a/build/packaged/modules/dimmer.js b/build/packaged/modules/dimmer.js index 5aa73ec05..1b6e81238 100644 --- a/build/packaged/modules/dimmer.js +++ b/build/packaged/modules/dimmer.js @@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) { if( module.is.dimmer() ) { $dimmer = $module; $module = $dimmer.parent(); - module.debug('Module initialized as dimmer'); + module.debug('Module initialized as dimmer', settings); } else { if( module.has.dimmer() ) { $dimmer = $module.children(selector.dimmer).first(); - module.debug('Module initialized with found dimmer'); + module.debug('Module initialized with found dimmer', settings); } else { module.create(); - module.debug('Module initialized with created dimmer'); + module.debug('Module initialized with created dimmer', settings); } if(settings.on == 'hover') { $module @@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) { }, animate: { - show: function() { + show: function(callback) { + callback = callback || function(){}; module.set.dimmed(); if($.fn.transition !== undefined) { $dimmer - .transition(settings.transition + ' in', function() { + .transition(settings.transition + ' in', settings.duration, function() { module.set.active(); + callback(); }) ; } @@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) { .fadeTo(settings.duration, 1, function() { $dimmer.removeAttr('style'); module.set.active(); + callback(); }) ; } }, - hide: function() { + hide: function(callback) { + callback = callback || function(){}; module.remove.dimmed(); if($.fn.transition !== undefined) { module.verbose('Hiding dimmer with css'); $dimmer .transition(settings.transition + ' out', settings.duration, function() { module.remove.active(); + callback(); }) ; } @@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) { .fadeOut(settings.duration, function() { $dimmer.removeAttr('style'); module.remove.active(); + callback(); }) ; } @@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) { } }, - show: function() { + show: function(callback) { module.debug('Showing dimmer', $dimmer); if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) { - module.animate.show(); + module.animate.show(callback); $.proxy(settings.onShow, element)(); $.proxy(settings.onChange, element)(); } @@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) { } }, - hide: function() { + hide: function(callback) { if( module.is.active() || module.is.animating() ) { module.debug('Hiding dimmer', $dimmer); - module.animate.hide(); + module.animate.hide(callback); $.proxy(settings.onHide, element)(); $.proxy(settings.onChange, element)(); } diff --git a/build/packaged/modules/dropdown.js b/build/packaged/modules/dropdown.js index 32d732449..553191b1e 100644 --- a/build/packaged/modules/dropdown.js +++ b/build/packaged/modules/dropdown.js @@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) { $currentMenu = $(this).find(selector.menu), $otherMenus = $(this).siblings(selector.item).children(selector.menu) ; - console.log($currentMenu); if( $currentMenu.size() > 0 ) { clearTimeout(dropdown.itemTimer); dropdown.itemTimer = setTimeout(function() { diff --git a/build/packaged/modules/modal.js b/build/packaged/modules/modal.js index 192c858b0..8be7689ca 100644 --- a/build/packaged/modules/modal.js +++ b/build/packaged/modules/modal.js @@ -19,21 +19,21 @@ $.fn.modal = function(parameters) { ? $.extend(true, {}, $.fn.modal.settings, parameters) : $.fn.modal.settings, - selector = settings.selector, - className = settings.className, - namespace = settings.namespace, - error = settings.error, + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + error = settings.error, - eventNamespace = '.' + namespace, + eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModals.selector || '', + moduleSelector = $allModals.selector || '', - time = new Date().getTime(), - performance = [], + time = new Date().getTime(), + performance = [], - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), invokedResponse ; @@ -46,6 +46,8 @@ $.fn.modal = function(parameters) { $otherModals = $allModals.not($modal), $closeButton = $modal.find(selector.closeButton), + $dimmer, + element = this, instance = $modal.data(moduleNamespace), modal @@ -60,6 +62,7 @@ $.fn.modal = function(parameters) { ; $context .dimmer({ + closable: settings.closable, duration: settings.duration, onShow: function() { modal.add.keyboardShortcuts(); @@ -67,6 +70,7 @@ $.fn.modal = function(parameters) { }, onHide: function() { if($modal.is(':visible')) { + $context.off('.dimmer'); modal.hide(); $.proxy(settings.onHide, this)(); } @@ -74,6 +78,14 @@ $.fn.modal = function(parameters) { } }) ; + $dimmer = $context.children(selector.dimmer); + if( $modal.parent()[0] !== $dimmer[0] ) { + modal.debug('Moving element inside dimmer', $context); + $modal + .detach() + .appendTo($dimmer) + ; + } modal.cache.sizes(); modal.instantiate(); }, @@ -118,18 +130,27 @@ $.fn.modal = function(parameters) { } }, + toggle: function() { + if( modal.is.active() ) { + modal.hide(); + } + else { + modal.show(); + } + }, + show: function() { modal.set.type(); modal.set.position(); - modal.hideOthers(); + modal.hideAll(); if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' in', settings.duration) + .transition(settings.transition + ' in', settings.duration, modal.set.active) ; } else { $modal - .fadeIn(settings.duration, settings.easing) + .fadeIn(settings.duration, settings.easing, modal.set.active) ; } $context.dimmer('show'); @@ -142,17 +163,17 @@ $.fn.modal = function(parameters) { ; if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' out', settings.duration, settings.unDim) + .transition(settings.transition + ' out', settings.duration, modal.remove.active) ; } else { $modal - .fadeOut(settings.duration, settings.easing, settings.unDim) + .fadeOut(settings.duration, settings.easing, modal.remove.active) ; } }, - hideOthers: function() { + hideAll: function() { $otherModals .filter(':visible') .modal('hide') @@ -169,6 +190,9 @@ $.fn.modal = function(parameters) { }, remove: { + active: function() { + $modal.removeClass(className.active); + }, keyboardShortcuts: function() { modal.verbose('Removing keyboard shortcuts'); $document @@ -195,7 +219,16 @@ $.fn.modal = function(parameters) { } }, + is: { + active: function() { + return $modal.hasClass(className.active); + } + }, + set: { + active: function() { + $modal.addClass('active'); + }, type: function() { if(modal.can.fit()) { modal.verbose('Modal fits on screen'); @@ -257,7 +290,7 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.debug.apply(console, arguments); } } @@ -268,13 +301,13 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.verbose.apply(console, arguments); } } }, error: function() { - modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); + modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); modal.error.apply(console, arguments); }, performance: { @@ -301,7 +334,7 @@ $.fn.modal = function(parameters) { }, display: function() { var - title = settings.moduleName + ':', + title = settings.name + ':', totalTime = 0 ; time = false; @@ -406,35 +439,33 @@ $.fn.modal = function(parameters) { $.fn.modal.settings = { - name : 'Modal', + name : 'Modal', namespace : 'modal', - verbose : true, debug : true, performance : true, - selector : { - closeButton : '.close' - }, + offset : 0, + transition : 'scale', + duration : 500, + easing : 'easeOutExpo', + + closable : true, + context : 'body', + + onShow : function(){}, + onHide : function(){}, + selector : { + closeButton : '.close, .actions .button', + dimmer: '.ui.dimmer' + }, error : { method : 'The method you called is not defined.' }, - className : { scrolling : 'scrolling' }, - - onShow : function(){}, - onHide : function(){}, - - transition : 'scale', - - context : 'body', - offset : -25, - - duration : 400, - easing : 'easeOutExpo' }; diff --git a/build/uncompressed/collections/menu.css b/build/uncompressed/collections/menu.css index ea95e9184..3eb46c005 100644 --- a/build/uncompressed/collections/menu.css +++ b/build/uncompressed/collections/menu.css @@ -94,15 +94,15 @@ .ui.menu .item .menu a.item.hover, .ui.menu .item .menu .link.item:hover, .ui.menu .item .menu .link.item.hover { - color: rgba(35, 35, 35, 0.95); + color: rgba(0, 0, 0, 0.85); } .ui.menu .dropdown.item .menu .item a:hover { - color: rgba(0, 0, 0, 0.9); + color: rgba(0, 0, 0, 0.85); } /* Active */ .ui.menu .active.item, .ui.menu .active.item a { - color: rgba(0, 0, 0, 0.95); + color: rgba(0, 0, 0, 0.85); -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; @@ -172,8 +172,8 @@ .ui.menu .item > p:first-child { margin-top: 0px; } -.ui.menu .item > p:only-child { - margin: 0px; +.ui.menu .item > p:last-child { + margin-bottom: 0px; } /*-------------- Inputs @@ -211,12 +211,18 @@ /*-------------- Dropdowns ---------------*/ +.ui.menu .dropdown.item .menu { + margin: 1px 0px 0px 0px; +} +.ui.menu .simple.dropdown.item .menu { + margin: 0px !important; +} .ui.menu .dropdown.item .menu .item { width: 100%; color: rgba(0, 0, 0, 0.75); } .ui.menu .dropdown.item .menu .active.item { - border-color: transparent !important; + box-shadow: none !important; } .ui.menu .ui.dropdown .menu .item:before { display: none; @@ -228,7 +234,7 @@ .ui.menu .item > a > .label { background-color: #9DA6AB; color: #FFFFFF; - margin: -0.3em 0em -0.3em 0.5em; + margin: -0.15em 0em -0.15em 0.5em; padding: 0.3em 0.8em; vertical-align: baseline; } @@ -250,7 +256,6 @@ /*-------------- Hover ---------------*/ -/* Pseudo states cautiously used for convenience */ .ui.link.menu .item:hover, .ui.menu .item.hover, .ui.menu .link.item:hover, @@ -260,12 +265,10 @@ cursor: pointer; background-color: rgba(0, 0, 0, 0.02); } -.ui.menu .ui.dropdown.active, -.ui.menu .ui.dropdown.hover, -.ui.menu .ui.dropdown:hover { - border-top: none; - padding-top: 0.83em; +.ui.menu .ui.dropdown.active { background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: none; + box-shadow: none; -webkit-border-bottom-right-radius: 0em; -moz-border-bottom-right-radius: 0em; border-bottom-right-radius: 0em; @@ -289,18 +292,19 @@ Active ---------------*/ .ui.menu .active.item { - padding-top: 0.63em; - border-top: 0.2em solid rgba(50, 50, 50, 0.8); - color: rgba(0, 0, 0, 0.95); background-color: rgba(0, 0, 0, 0.01); + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: 0em 0.2em 0em inset; + -moz-box-shadow: 0em 0.2em 0em inset; + box-shadow: 0em 0.2em 0em inset; } .ui.vertical.menu .active.item { - border-left: 0.2em solid rgba(50, 50, 50, 0.8); - padding-top: 0.83em; - padding-left: 0.76em; -webkit-border-radius: 0em; -moz-border-radius: 0em; border-radius: 0em; + -moz-box-shadow: 0.2em 0em 0em inset; + -webkit-box-shadow: 0.2em 0em 0em inset; + box-shadow: 0.2em 0em 0em inset; } .ui.vertical.menu > .active.item:first-child { -webkit-border-radius: 0em 0.1875em 0em 0em; @@ -409,10 +413,10 @@ .ui.vertical.menu .dropdown.item > i { float: right; } -.ui.vertical.menu .simple.dropdown.item .menu { +.ui.vertical.menu .dropdown.item .menu { top: 0% !important; left: 100%; - margin: 0em; + margin: 0px 0px 0px 1px; } .ui.vertical.menu .dropdown.item .menu .item { font-size: 0.875rem; @@ -421,6 +425,11 @@ .ui.vertical.menu .dropdown.item .menu .item .icon { margin-right: 0em; } +.ui.vertical.menu .dropdown.item.active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*--- Sub Menu ---*/ .ui.vertical.menu .item > .menu { margin: 0.5em -0.95em 0em; @@ -439,8 +448,8 @@ /*-------------- Tiered ---------------*/ -.ui.tiered.menu > .menu > .item { - color: rgba(0, 0, 0, 0.5); +.ui.tiered.menu > .sub.menu > .item { + color: rgba(0, 0, 0, 0.4); } .ui.tiered.menu > .menu > .item:hover, .ui.tiered.menu > .menu > .item.hover { @@ -454,6 +463,8 @@ background-color: rgba(0, 0, 0, 0.01); border-radius: 0em; border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + -moz-box-shadow: none; box-shadow: none; color: #FFFFFF; } @@ -468,6 +479,8 @@ background-color: transparent; border-radius: 0 0 0 0; border-top: medium none; + -webkit-box-shadow: none; + -moz-box-shadow: none; box-shadow: none; color: rgba(0, 0, 0, 0.7); } @@ -533,6 +546,9 @@ border-right: 1px solid #DCDDDE; border-top: 1px solid #DCDDDE; padding-top: 0.83em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; @@ -556,19 +572,19 @@ .ui.pagination.menu .active.item { border-top: none; padding-top: 0.83em; - background-color: rgba(0, 0, 0, 0.05); + background-color: transparent; } /*-------------- Secondary ---------------*/ .ui.secondary.menu { background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .ui.secondary.menu > .item { -webkit-box-shadow: none; @@ -587,7 +603,12 @@ } .ui.secondary.menu .link.item, .ui.secondary.menu a.item { - color: rgba(0, 0, 0, 0.4); + opacity: 0.8; + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } .ui.secondary.menu .header.item { border-right: 0.1em solid rgba(0, 0, 0, 0.1); @@ -599,14 +620,15 @@ /* hover */ .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { - color: rgba(0, 0, 0, 0.6); + opacity: 1; } /* active */ .ui.secondary.menu > .active.item { - border-top: none; background-color: rgba(0, 0, 0, 0.08); - padding-top: 0.5em; - color: rgba(0, 0, 0, 0.6); + opacity: 1; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .ui.secondary.vertical.menu > .active.item { -webkit-border-radius: 0.3125em; @@ -645,7 +667,7 @@ font-weight: bold; } .ui.secondary.pointing.menu .text.item { - border-color: transparent !important; + box-shadow: none !important; } .ui.secondary.pointing.menu > .item { margin: 0em 0em -3px; @@ -684,6 +706,9 @@ .ui.secondary.pointing.menu > .item.active { background-color: transparent; border-color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } /*--------------------- Secondary Vertical @@ -779,7 +804,7 @@ box-shadow: none; } .ui.text.menu > .item { - opacity: 0.6; + opacity: 0.8; margin: 0em 1em; padding: 0em; height: auto !important; @@ -789,7 +814,6 @@ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - color: rgba(0, 0, 0, 0.6); -webkit-transition: opacity 0.2s ease ; -moz-transition: opacity 0.2s ease @@ -873,25 +897,6 @@ .ui.inverted.text.menu .item.active { background-color: transparent; } -/* colors */ -.ui.green.text.menu .active.item { - color: #A1CF64; -} -.ui.red.text.menu .active.item { - color: #D95C5C; -} -.ui.blue.text.menu .active.item { - color: #6ECFF5; -} -.ui.purple.text.menu .active.item { - color: #564F8A; -} -.ui.orange.text.menu .active.item { - color: #F05940; -} -.ui.teal.text.menu .active.item { - color: #00B5AD; -} /*-------------- Icon Only ---------------*/ @@ -901,15 +906,16 @@ display: inline-block; height: auto; } -.ui.icon.menu .item { +.ui.icon.menu > .item { + height: auto; text-align: center; color: rgba(60, 60, 60, 0.7); } -.ui.icon.menu .item .icon { +.ui.icon.menu > .item > .icon { display: block; - float: none; + float: none !important; opacity: 1; - margin: 0em auto; + margin: 0em auto !important; } .ui.icon.menu .icon:before { opacity: 1; @@ -918,6 +924,9 @@ .ui.menu .icon.item .icon { margin: 0em; } +.ui.vertical.icon.menu { + float: none; +} /*--- inverted ---*/ .ui.inverted.icon.menu .item { color: rgba(255, 255, 255, 0.8); @@ -931,10 +940,10 @@ .ui.labeled.icon.menu { text-align: center; } -.ui.labeled.icon.menu .icon { +.ui.labeled.icon.menu > .item > .icon { display: block; - font-size: 1.5em; - margin: 0em auto 0.3em; + font-size: 1.5em !important; + margin: 0em auto 0.3em !important; } /******************************* Variations @@ -946,26 +955,32 @@ .ui.menu .green.active.item, .ui.green.menu .active.item { border-color: #A1CF64 !important; + color: #A1CF64 !important; } .ui.menu .red.active.item, .ui.red.menu .active.item { border-color: #D95C5C !important; + color: #D95C5C !important; } .ui.menu .blue.active.item, .ui.blue.menu .active.item { border-color: #6ECFF5 !important; + color: #6ECFF5 !important; } .ui.menu .purple.active.item, .ui.purple.menu .active.item { border-color: #564F8A !important; + color: #564F8A !important; } .ui.menu .orange.active.item, .ui.orange.menu .active.item { border-color: #F05940 !important; + color: #F05940 !important; } .ui.menu .teal.active.item, .ui.teal.menu .active.item { border-color: #00B5AD !important; + color: #00B5AD !important; } /*-------------- Inverted @@ -1050,12 +1065,12 @@ } /*--- Active ---*/ .ui.inverted.menu .active.item { - border-color: transparent !important; + box-shadow: none !important; background-color: rgba(255, 255, 255, 0.2); } .ui.inverted.menu .active.item, .ui.inverted.menu .active.item a { - color: #ffffff; + color: #ffffff !important; } .ui.inverted.vertical.menu .item .menu .active.item { background-color: rgba(255, 255, 255, 0.2); @@ -1069,6 +1084,27 @@ .ui.inverted.pointing.menu .active.item:hover:after { background-color: #3B3B3B; } +/*-------------- + Selection +---------------*/ +.ui.selection.menu > .item { + color: rgba(0, 0, 0, 0.4); +} +.ui.selection.menu > .item:hover { + color: rgba(0, 0, 0, 0.6); +} +.ui.selection.menu > .item.active { + color: rgba(0, 0, 0, 0.85); +} +.ui.inverted.selection.menu > .item { + color: rgba(255, 255, 255, 0.4); +} +.ui.inverted.selection.menu > .item:hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.selection.menu > .item.active { + color: #FFFFFF; +} /*-------------- Floated ---------------*/ @@ -1371,6 +1407,9 @@ .ui.large.menu .item { font-size: 1.125rem; } +.ui.large.menu .item .item { + font-size: 0.875rem; +} .ui.large.vertical.menu { width: 18rem; } diff --git a/build/uncompressed/elements/button.css b/build/uncompressed/elements/button.css index 5d0f8c0d6..fbf113b60 100644 --- a/build/uncompressed/elements/button.css +++ b/build/uncompressed/elements/button.css @@ -309,163 +309,6 @@ float: right; margin-left: 0.25em; } -/*------------------- - Colors ---------------------*/ -/*--- Black ---*/ -.ui.black.buttons .button, -.ui.black.button { - background-color: #5C6166 !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.black.buttons .button:hover, -.ui.black.button:hover { - background-color: #4C4C4C !important; - color: #FFFFFF !important; -} -.ui.black.buttons .button:active, -.ui.black.button:active { - background-color: #333333 !important; - color: #FFFFFF !important; -} -/*--- Green ---*/ -.ui.green.buttons .button, -.ui.green.button { - background-color: #5BBD72 !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.green.buttons .button:hover, -.ui.green.button:hover, -.ui.green.buttons .active.button, -.ui.green.button.active { - background-color: #58cb73 !important; - color: #FFFFFF !important; -} -.ui.green.buttons .button:active, -.ui.green.button:active { - background-color: #4CB164 !important; - color: #FFFFFF !important; -} -/*--- Red ---*/ -.ui.red.buttons .button, -.ui.red.button { - background-color: #D95C5C !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.red.buttons .button:hover, -.ui.red.button:hover, -.ui.red.buttons .active.button, -.ui.red.button.active { - background-color: #E75859 !important; - color: #FFFFFF !important; -} -.ui.red.buttons .button:active, -.ui.red.button:active { - background-color: #D24B4C !important; - color: #FFFFFF !important; -} -/*--- Blue ---*/ -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.blue.buttons .button:hover, -.ui.blue.button:hover, -.ui.blue.buttons .active.button, -.ui.blue.button.active { - background-color: #1AB8F3 !important; - color: #FFFFFF !important; -} -.ui.blue.buttons .button:active, -.ui.blue.button:active { - background-color: #0AA5DF !important; - color: #FFFFFF !important; -} -/*--- Purple ---*/ -.ui.purple.buttons .button, -.ui.purple.button { - background-color: #564F8A !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.purple.buttons .button:hover, -.ui.purple.button:hover, -.ui.purple.buttons .active.button, -.ui.purple.button.active { - background-color: #3E3773 !important; - color: #FFFFFF !important; -} -.ui.purple.buttons .button:active, -.ui.purple.button:active { - background-color: #2E2860 !important; - color: #FFFFFF !important; -} -/*--- Teal ---*/ -.ui.teal.buttons .button, -.ui.teal.button { - background-color: #00B5AD !important; - color: #FFFFFF !important; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.teal.buttons .button:hover, -.ui.teal.button:hover, -.ui.teal.buttons .active.button, -.ui.teal.button.active { - background-color: #009A93 !important; - color: #FFFFFF !important; -} -.ui.teal.buttons .button:active, -.ui.teal.button:active { - background-color: #00847E !important; - color: #FFFFFF !important; -} -/*--------------- - Positive -----------------*/ -.ui.positive.buttons .button, -.ui.positive.button { - background-color: #5BBD72 !important; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.positive.buttons .button:hover, -.ui.positive.button:hover, -.ui.positive.buttons .active.button, -.ui.positive.button.active { - background-color: #58CB73 !important; - color: #FFFFFF; -} -.ui.positive.buttons .button:active, -.ui.positive.button:active { - background-color: #4CB164 !important; - color: #FFFFFF; -} -/*--------------- - Negative -----------------*/ -.ui.negative.buttons .button, -.ui.negative.button { - background-color: #D95C5C !important; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.negative.buttons .button:hover, -.ui.negative.button:hover, -.ui.negative.buttons .active.button, -.ui.negative.button.active { - background-color: #E75859 !important; - color: #FFFFFF; -} -.ui.negative.buttons .button:active, -.ui.negative.button:active { - background-color: #D24B4C !important; - color: #FFFFFF; -} /*------------------- Sizes --------------------*/ @@ -498,15 +341,11 @@ .ui.huge.buttons .button, .ui.huge.button { font-size: 1.375rem; - padding-left: 2em; - padding-right: 2em; } .ui.massive.buttons .button, .ui.massive.button { font-size: 1.5rem; font-weight: bold; - padding-left: 2.5em; - padding-right: 2.5em; } /* loading */ .ui.huge.loading.button:after { @@ -550,9 +389,9 @@ --------------------*/ .ui.basic.buttons .button, .ui.basic.button { - background-color: transparent; + background-color: transparent !important; background-image: none; - color: #999999; + color: #999999 !important; font-weight: normal; text-transform: none; text-shadow: none; @@ -580,15 +419,15 @@ } .ui.basic.buttons .button:hover, .ui.basic.button:hover { - color: #7F7F7F; + color: #7F7F7F !important; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; } .ui.basic.buttons .button:active, .ui.basic.button:active { - background-color: rgba(0, 0, 0, 0.02); - color: #7F7F7F; + background-color: rgba(0, 0, 0, 0.02) !important; + color: #7F7F7F !important; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -950,6 +789,163 @@ .ui.twelve.vertical.buttons > .button { height: 8.3333%; } +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: #5C6166 !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #4C4C4C !important; + color: #FFFFFF !important; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #333333 !important; + color: #FFFFFF !important; +} +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: #5BBD72 !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.green.buttons .button:hover, +.ui.green.button:hover, +.ui.green.buttons .active.button, +.ui.green.button.active { + background-color: #58cb73 !important; + color: #FFFFFF !important; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #4CB164 !important; + color: #FFFFFF !important; +} +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: #D95C5C !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.red.buttons .button:hover, +.ui.red.button:hover, +.ui.red.buttons .active.button, +.ui.red.button.active { + background-color: #E75859 !important; + color: #FFFFFF !important; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #D24B4C !important; + color: #FFFFFF !important; +} +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover, +.ui.blue.buttons .active.button, +.ui.blue.button.active { + background-color: #1AB8F3 !important; + color: #FFFFFF !important; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #0AA5DF !important; + color: #FFFFFF !important; +} +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #564F8A !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover, +.ui.purple.buttons .active.button, +.ui.purple.button.active { + background-color: #3E3773 !important; + color: #FFFFFF !important; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #2E2860 !important; + color: #FFFFFF !important; +} +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD !important; + color: #FFFFFF !important; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover, +.ui.teal.buttons .active.button, +.ui.teal.button.active { + background-color: #009A93 !important; + color: #FFFFFF !important; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00847E !important; + color: #FFFFFF !important; +} +/*--------------- + Positive +----------------*/ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #5BBD72 !important; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover, +.ui.positive.buttons .active.button, +.ui.positive.button.active { + background-color: #58CB73 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #4CB164 !important; + color: #FFFFFF; +} +/*--------------- + Negative +----------------*/ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #D95C5C !important; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover, +.ui.negative.buttons .active.button, +.ui.negative.button.active { + background-color: #E75859 !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #D24B4C !important; + color: #FFFFFF; +} /******************************* Groups *******************************/ diff --git a/build/uncompressed/elements/icons.css b/build/uncompressed/elements/icons.css index 0dcb934bd..8cab6ce84 100644 --- a/build/uncompressed/elements/icons.css +++ b/build/uncompressed/elements/icons.css @@ -555,7 +555,6 @@ i.dropdown.icon { i.icon.star { width: auto; margin: 0em; - vertical-align: middle; } /* left side icons */ i.icon.left, @@ -660,8 +659,9 @@ i.circular.icon { -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - width: 2em; - height: 2em; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; } i.circular.icon:before { vertical-align: middle; diff --git a/build/uncompressed/elements/image.css b/build/uncompressed/elements/image.css index 2f704e7d0..e4404f05b 100644 --- a/build/uncompressed/elements/image.css +++ b/build/uncompressed/elements/image.css @@ -13,6 +13,7 @@ Image *******************************/ .ui.image { + position: relative; display: inline-block; vertical-align: middle; max-width: 100%; diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index 7c0fbd866..5708a7c00 100644 --- a/build/uncompressed/elements/label.css +++ b/build/uncompressed/elements/label.css @@ -15,7 +15,7 @@ .ui.label { display: inline-block; vertical-align: middle; - margin: -0.5em 0.25em 0em; + margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; @@ -40,19 +40,29 @@ transition: background 0.1s linear ; } +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} +/* Link */ a.ui.label { cursor: pointer; } -.ui.label.disabled { - opacity: 0.5; -} +/* Detail */ .ui.label .detail { display: inline-block; margin-left: 0.5em; font-weight: bold; opacity: 0.8; } -.ui.label .icon.close { +/* Icon */ +.ui.label .icon { + width: auto; +} +/* Removable label */ +.ui.label .delete.icon { cursor: pointer; margin: 0em 0em 0em 0.5em; opacity: 0.7; @@ -67,9 +77,43 @@ a.ui.label { transition: background 0.1s linear ; } +.ui.label .delete.icon:hover { + opacity: 0.99; +} +/******************************* + Types +*******************************/ +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + padding-top: 0.4em; + padding-bottom: 0.4em; + line-height: 1.5em; + vertical-align: baseline; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.image.label img { + display: inline-block; + height: 2.5em; + margin: -0.4em 0.8em -0.4em -0.8em; + vertical-align: top; + -moz-border-radius: 0.325em 0em 0em 0.325em; + -webkit-border-radius: 0.325em 0em 0em 0.325em; + border-radius: 0.325em 0em 0em 0.325em; +} /******************************* States *******************************/ +/*------------------- + Disabled +--------------------*/ +.ui.label.disabled { + opacity: 0.5; +} /*------------------- Hover --------------------*/ @@ -84,9 +128,6 @@ a.ui.label:hover:before { background-color: #E0E0E0; color: rgba(0, 0, 0, 0.7); } -.ui.label .icon.close:hover { - opacity: 0.99; -} /******************************* Variations *******************************/ @@ -498,16 +539,27 @@ a.ui.teal.label:hover:before { .ui.teal.corner.label:hover { background-color: transparent !important; } +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: -0.125em 0.5em -0.125em 0em; + padding: 0.35em 1em; + min-width: 6em; + text-align: center; +} /*------------------- Circular --------------------*/ .ui.circular.labels .label, .ui.circular.label { - margin-top: -1em; - height: 2em; + min-height: 1em; + max-height: 2em; padding: 0.5em !important; line-height: 1em; text-align: center; + vertical-align: baseline; -webkit-border-radius: 500em; -moz-border-radius: 500em; border-radius: 500em; diff --git a/build/uncompressed/elements/list.css b/build/uncompressed/elements/list.css index b31572b53..415c5c852 100644 --- a/build/uncompressed/elements/list.css +++ b/build/uncompressed/elements/list.css @@ -229,9 +229,13 @@ ol.ui.list li, ol.ui.list li:before, .ui.ordered.list .item:before { position: absolute; + top: 50%; left: -2em; counter-increment: ordered; content: counters(ordered, "."); + margin-top: -0.5em; + line-height: 1; + color: rgba(0, 0, 0, 0.6); text-align: right; vertical-align: top; opacity: 0.75; diff --git a/build/uncompressed/modules/dimmer.css b/build/uncompressed/modules/dimmer.css index 765ab095c..69fecbe8e 100644 --- a/build/uncompressed/modules/dimmer.css +++ b/build/uncompressed/modules/dimmer.css @@ -51,8 +51,8 @@ box-sizing: border-box; z-index: 1000; } +/* .ui.dimmable.dimmed > :not(.dimmer) { - /* -webkit-transition: filter 0.5s ease ; @@ -68,10 +68,9 @@ transition: filter 0.5s ease ; - */ - } -/* Dimmer Content */.ui.dimmer .content { +*/ +/* Dimmer Content */.ui.dimmer > .content { width: 100%; height: 100%; display: table; @@ -80,7 +79,7 @@ -ms-user-select: text; user-select: text; } -.ui.dimmer .content > * { +.ui.dimmer > .content > div { display: table-cell; vertical-align: middle; color: #FFFFFF; @@ -122,18 +121,28 @@ ---------------*/ .ui.page.dimmer { position: fixed; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; } -body.ui.dimmable.dimmed > :not(.dimmer) { - -webkit-filter: blur(15px) grayscale(0.7); - -moz-filter: blur(15px) grayscale(0.7); +/* +body.ui.dimmable.dimmed > :not(.dimmer){ + -webkit-filter: ~"blur(15px) grayscale(0.7)"; + -moz-filter: ~"blur(15px) grayscale(0.7)"; } +*/ /*-------------- Aligned ---------------*/ -.ui.dimmer .top.aligned.content > * { +.ui.dimmer > .top.aligned.content > * { vertical-align: top; } -.ui.dimmer .bottom.aligned.content > * { +.ui.dimmer > .bottom.aligned.content > * { vertical-align: bottom; } /*-------------- @@ -142,7 +151,7 @@ body.ui.dimmable.dimmed > :not(.dimmer) { .ui.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } -.ui.inverted.dimmer .content > * { +.ui.inverted.dimmer > .content > * { color: rgba(0, 0, 0, 0.8); } /*-------------- diff --git a/build/uncompressed/modules/dimmer.js b/build/uncompressed/modules/dimmer.js index 5aa73ec05..1b6e81238 100644 --- a/build/uncompressed/modules/dimmer.js +++ b/build/uncompressed/modules/dimmer.js @@ -56,16 +56,16 @@ $.fn.dimmer = function(parameters) { if( module.is.dimmer() ) { $dimmer = $module; $module = $dimmer.parent(); - module.debug('Module initialized as dimmer'); + module.debug('Module initialized as dimmer', settings); } else { if( module.has.dimmer() ) { $dimmer = $module.children(selector.dimmer).first(); - module.debug('Module initialized with found dimmer'); + module.debug('Module initialized with found dimmer', settings); } else { module.create(); - module.debug('Module initialized with created dimmer'); + module.debug('Module initialized with created dimmer', settings); } if(settings.on == 'hover') { $module @@ -126,12 +126,14 @@ $.fn.dimmer = function(parameters) { }, animate: { - show: function() { + show: function(callback) { + callback = callback || function(){}; module.set.dimmed(); if($.fn.transition !== undefined) { $dimmer - .transition(settings.transition + ' in', function() { + .transition(settings.transition + ' in', settings.duration, function() { module.set.active(); + callback(); }) ; } @@ -147,17 +149,20 @@ $.fn.dimmer = function(parameters) { .fadeTo(settings.duration, 1, function() { $dimmer.removeAttr('style'); module.set.active(); + callback(); }) ; } }, - hide: function() { + hide: function(callback) { + callback = callback || function(){}; module.remove.dimmed(); if($.fn.transition !== undefined) { module.verbose('Hiding dimmer with css'); $dimmer .transition(settings.transition + ' out', settings.duration, function() { module.remove.active(); + callback(); }) ; } @@ -168,6 +173,7 @@ $.fn.dimmer = function(parameters) { .fadeOut(settings.duration, function() { $dimmer.removeAttr('style'); module.remove.active(); + callback(); }) ; } @@ -251,10 +257,10 @@ $.fn.dimmer = function(parameters) { } }, - show: function() { + show: function(callback) { module.debug('Showing dimmer', $dimmer); if( (!module.is.active() || module.is.animating() ) && module.is.enabled() ) { - module.animate.show(); + module.animate.show(callback); $.proxy(settings.onShow, element)(); $.proxy(settings.onChange, element)(); } @@ -263,10 +269,10 @@ $.fn.dimmer = function(parameters) { } }, - hide: function() { + hide: function(callback) { if( module.is.active() || module.is.animating() ) { module.debug('Hiding dimmer', $dimmer); - module.animate.hide(); + module.animate.hide(callback); $.proxy(settings.onHide, element)(); $.proxy(settings.onChange, element)(); } diff --git a/build/uncompressed/modules/dropdown.js b/build/uncompressed/modules/dropdown.js index 32d732449..553191b1e 100644 --- a/build/uncompressed/modules/dropdown.js +++ b/build/uncompressed/modules/dropdown.js @@ -130,7 +130,6 @@ $.fn.dropdown = function(parameters) { $currentMenu = $(this).find(selector.menu), $otherMenus = $(this).siblings(selector.item).children(selector.menu) ; - console.log($currentMenu); if( $currentMenu.size() > 0 ) { clearTimeout(dropdown.itemTimer); dropdown.itemTimer = setTimeout(function() { diff --git a/build/uncompressed/modules/modal.css b/build/uncompressed/modules/modal.css index 87eea61a8..d9641f097 100644 --- a/build/uncompressed/modules/modal.css +++ b/build/uncompressed/modules/modal.css @@ -14,15 +14,15 @@ *******************************/ .ui.modal { display: none; - position: absolute; + position: fixed; z-index: 1001; top: 50%; left: 50%; - margin-left: -400px; + text-align: left; width: 800px; - -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); + margin-left: -400px; + background-color: #FFFFFF; + border: 1px solid #DDDDDD; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; @@ -31,7 +31,7 @@ Content *******************************/ /*-------------- - Close + Close ---------------*/ .ui.modal > .close { cursor: pointer; @@ -49,37 +49,45 @@ Header ---------------*/ .ui.modal > .header { - background-color: #442359; - padding: 1em 2em; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding: 1.5rem 2rem; + font-size: 1.6em; + font-weight: bold; -webkit-border-radius: 0.325em 0.325em 0px 0px; -moz-border-radius: 0.325em 0.325em 0px 0px; border-radius: 0.325em 0.325em 0px 0px; } -.ui.modal > .header h2 { - margin: 0px; - font-size: 1.5em; - font-weight: bold; - color: #FFFFFF; -} /*-------------- Content ---------------*/ .ui.modal > .content { + display: table; position: relative; - overflow: hidden; padding: 2em; - background-color: #FAFAFA; - -webkit-border-radius: 0px 0px 0.325em 0.325em; - -moz-border-radius: 0px 0px 0.325em 0.325em; - border-radius: 0px 0px 0.325em 0.325em; + background-color: #F4F4F4; } .ui.modal > .content > .left { - float: left; - width: 50%; + display: table-cell; + padding-right: 5%; } .ui.modal > .content > .right { - float: right; - width: 50%; + display: table-cell; + padding-left: 5%; + vertical-align: middle; + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); +} +/*-------------- + Actions +---------------*/ +.ui.modal .actions { + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: #FFFFFF; + padding: 1rem 2rem; + text-align: right; +} +.ui.modal .actions > .button { + margin-left: 0.75em; } /******************************* Types @@ -89,3 +97,9 @@ position: absolute; margin-top: 100px; } +/******************************* + States +*******************************/ +.ui.active.modal { + display: block; +} diff --git a/build/uncompressed/modules/modal.js b/build/uncompressed/modules/modal.js index 192c858b0..8be7689ca 100644 --- a/build/uncompressed/modules/modal.js +++ b/build/uncompressed/modules/modal.js @@ -19,21 +19,21 @@ $.fn.modal = function(parameters) { ? $.extend(true, {}, $.fn.modal.settings, parameters) : $.fn.modal.settings, - selector = settings.selector, - className = settings.className, - namespace = settings.namespace, - error = settings.error, + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + error = settings.error, - eventNamespace = '.' + namespace, + eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModals.selector || '', + moduleSelector = $allModals.selector || '', - time = new Date().getTime(), - performance = [], + time = new Date().getTime(), + performance = [], - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), invokedResponse ; @@ -46,6 +46,8 @@ $.fn.modal = function(parameters) { $otherModals = $allModals.not($modal), $closeButton = $modal.find(selector.closeButton), + $dimmer, + element = this, instance = $modal.data(moduleNamespace), modal @@ -60,6 +62,7 @@ $.fn.modal = function(parameters) { ; $context .dimmer({ + closable: settings.closable, duration: settings.duration, onShow: function() { modal.add.keyboardShortcuts(); @@ -67,6 +70,7 @@ $.fn.modal = function(parameters) { }, onHide: function() { if($modal.is(':visible')) { + $context.off('.dimmer'); modal.hide(); $.proxy(settings.onHide, this)(); } @@ -74,6 +78,14 @@ $.fn.modal = function(parameters) { } }) ; + $dimmer = $context.children(selector.dimmer); + if( $modal.parent()[0] !== $dimmer[0] ) { + modal.debug('Moving element inside dimmer', $context); + $modal + .detach() + .appendTo($dimmer) + ; + } modal.cache.sizes(); modal.instantiate(); }, @@ -118,18 +130,27 @@ $.fn.modal = function(parameters) { } }, + toggle: function() { + if( modal.is.active() ) { + modal.hide(); + } + else { + modal.show(); + } + }, + show: function() { modal.set.type(); modal.set.position(); - modal.hideOthers(); + modal.hideAll(); if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' in', settings.duration) + .transition(settings.transition + ' in', settings.duration, modal.set.active) ; } else { $modal - .fadeIn(settings.duration, settings.easing) + .fadeIn(settings.duration, settings.easing, modal.set.active) ; } $context.dimmer('show'); @@ -142,17 +163,17 @@ $.fn.modal = function(parameters) { ; if(settings.transition && $.fn.transition !== undefined) { $modal - .transition(settings.transition + ' out', settings.duration, settings.unDim) + .transition(settings.transition + ' out', settings.duration, modal.remove.active) ; } else { $modal - .fadeOut(settings.duration, settings.easing, settings.unDim) + .fadeOut(settings.duration, settings.easing, modal.remove.active) ; } }, - hideOthers: function() { + hideAll: function() { $otherModals .filter(':visible') .modal('hide') @@ -169,6 +190,9 @@ $.fn.modal = function(parameters) { }, remove: { + active: function() { + $modal.removeClass(className.active); + }, keyboardShortcuts: function() { modal.verbose('Removing keyboard shortcuts'); $document @@ -195,7 +219,16 @@ $.fn.modal = function(parameters) { } }, + is: { + active: function() { + return $modal.hasClass(className.active); + } + }, + set: { + active: function() { + $modal.addClass('active'); + }, type: function() { if(modal.can.fit()) { modal.verbose('Modal fits on screen'); @@ -257,7 +290,7 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.debug.apply(console, arguments); } } @@ -268,13 +301,13 @@ $.fn.modal = function(parameters) { modal.performance.log(arguments); } else { - modal.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); modal.verbose.apply(console, arguments); } } }, error: function() { - modal.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); + modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); modal.error.apply(console, arguments); }, performance: { @@ -301,7 +334,7 @@ $.fn.modal = function(parameters) { }, display: function() { var - title = settings.moduleName + ':', + title = settings.name + ':', totalTime = 0 ; time = false; @@ -406,35 +439,33 @@ $.fn.modal = function(parameters) { $.fn.modal.settings = { - name : 'Modal', + name : 'Modal', namespace : 'modal', - verbose : true, debug : true, performance : true, - selector : { - closeButton : '.close' - }, + offset : 0, + transition : 'scale', + duration : 500, + easing : 'easeOutExpo', + + closable : true, + context : 'body', + + onShow : function(){}, + onHide : function(){}, + selector : { + closeButton : '.close, .actions .button', + dimmer: '.ui.dimmer' + }, error : { method : 'The method you called is not defined.' }, - className : { scrolling : 'scrolling' }, - - onShow : function(){}, - onHide : function(){}, - - transition : 'scale', - - context : 'body', - offset : -25, - - duration : 400, - easing : 'easeOutExpo' }; diff --git a/build/uncompressed/modules/transition.css b/build/uncompressed/modules/transition.css index 6aa6f3c2a..30d967499 100644 --- a/build/uncompressed/modules/transition.css +++ b/build/uncompressed/modules/transition.css @@ -158,10 +158,10 @@ animation-name: fadeUp; } .ui.fade.up.transition.out { - -webkit-animation-name: fadeUp; - -moz-animation-name: fadeUp; - -o-animation-name: fadeUp; - animation-name: fadeUp; + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; } .ui.fade.down.transition.in { -webkit-animation-name: fadeDown; @@ -170,10 +170,10 @@ animation-name: fadeDown; } .ui.fade.down.transition.out { - -webkit-animation-name: fadeDown; - -moz-animation-name: fadeDown; - -o-animation-name: fadeDown; - animation-name: fadeDown; + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; } /*-------------- Scale @@ -570,7 +570,7 @@ /* Horizontal */ @-webkit-keyframes horizontalFlip { 0% { - -webkit-transform: rotateY(90deg); + -webkit-transform: rotateY(-90deg); opacity: 0; } 100% { @@ -580,7 +580,7 @@ } @-moz-keyframes horizontalFlip { 0% { - -moz-transform: rotateY(90deg); + -moz-transform: rotateY(-90deg); opacity: 0; } 100% { @@ -590,7 +590,7 @@ } @-o-keyframes horizontalFlip { 0% { - -o-transform: rotateY(90deg); + -o-transform: rotateY(-90deg); opacity: 0; } 100% { @@ -600,7 +600,7 @@ } @keyframes horizontalFlip { 0% { - transform: rotateY(90deg); + transform: rotateY(-90deg); opacity: 0; } 100% { @@ -608,10 +608,51 @@ opacity: 1; } } +/* Horizontal */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(90deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlipOut { + 0% { + -moz-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(90deg); + opacity: 1; + } +} +@-o-keyframes horizontalFlipOut { + 0% { + -o-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -o-transform: rotateY(90deg); + opacity: 1; + } +} +@keyframes horizontalFlipOut { + 0% { + transform: rotateY(0deg); + opacity: 0; + } + 100% { + transform: rotateY(90deg); + opacity: 1; + } +} /* Vertical */ @-webkit-keyframes verticalFlip { 0% { - -webkit-transform: rotateX(90deg); + -webkit-transform: rotateX(-90deg); opacity: 0; } 100% { @@ -621,7 +662,7 @@ } @-moz-keyframes verticalFlip { 0% { - -moz-transform: rotateX(90deg); + -moz-transform: rotateX(-90deg); opacity: 0; } 100% { @@ -631,7 +672,7 @@ } @-o-keyframes verticalFlip { 0% { - -o-transform: rotateX(90deg); + -o-transform: rotateX(-90deg); opacity: 0; } 100% { @@ -641,7 +682,7 @@ } @keyframes verticalFlip { 0% { - transform: rotateX(90deg); + transform: rotateX(-90deg); opacity: 0; } 100% { diff --git a/node/package.json b/node/package.json index de94b65f1..636cd71c4 100755 --- a/node/package.json +++ b/node/package.json @@ -4,6 +4,19 @@ "version": 0.1 }, "dependencies": { - "docpad": "~6.50.0" + "docpad": "~6.51.3", + "docpad-plugin-eco": "~2.0.2" + }, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-watch": "~0.5.3", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-uglify": "~0.2.2", + "grunt-contrib-cssmin": "~0.6.1", + "grunt-contrib-less": "~0.7.0", + "grunt-contrib-copy": "~0.4.1", + "grunt-docco": "~0.2.0", + "grunt-bower-task": "~0.3.1", + "grunt-css": "~0.5.4" } } diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index af0aa4135..7ffaec965 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -45,7 +45,7 @@ type : 'UI Collection' -