From e035a08cbd16dba282d803cb7e4f4cc5a1b35697 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 7 Aug 2013 12:27:57 -0400 Subject: [PATCH] Adds page dimmer text styles, fixes shape not initing, removes logs from transition --- LICENSE.md | 7 +++++++ build/minified/modules/shape.js | 3 ++- build/minified/modules/transition.js | 5 ++--- build/packaged/modules/shape.js | 3 ++- build/packaged/modules/transition.js | 5 ++--- build/uncompressed/modules/dimmer.css | 4 ++++ build/uncompressed/modules/shape.js | 3 ++- build/uncompressed/modules/transition.js | 5 ++--- node/src/documents/guide/cssguide.html | 9 +++++++++ node/src/documents/introduction/definitions.html | 2 +- node/src/files/components/semantic/modules/dimmer.css | 4 ++++ node/src/files/components/semantic/modules/shape.js | 3 ++- node/src/files/components/semantic/modules/transition.js | 5 ++--- node/src/files/stylesheets/semantic.css | 8 ++++++-- src/modules/dimmer.less | 4 ++++ src/modules/shape.js | 3 ++- src/modules/transition.js | 5 ++--- src/modules/transition.less | 1 + 18 files changed, 56 insertions(+), 23 deletions(-) create mode 100755 LICENSE.md diff --git a/LICENSE.md b/LICENSE.md new file mode 100755 index 000000000..62df7662b --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,7 @@ +# The MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/build/minified/modules/shape.js b/build/minified/modules/shape.js index 82c713b52..ec14fa83e 100644 --- a/build/minified/modules/shape.js +++ b/build/minified/modules/shape.js @@ -58,6 +58,7 @@ $.fn.shape = function(parameters) { initialize: function() { module.verbose('Initializing module for', element); module.set.defaultSide(); + module.instantiate(); }, instantiate: function() { @@ -745,4 +746,4 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); +})( jQuery, window , document ); \ No newline at end of file diff --git a/build/minified/modules/transition.js b/build/minified/modules/transition.js index a5c37385e..506954beb 100644 --- a/build/minified/modules/transition.js +++ b/build/minified/modules/transition.js @@ -113,7 +113,6 @@ $.fn.transition = function() { .one(animationEnd, module.complete) ; if(!module.has.direction() && module.can.transition()) { - console.log($module.attr('class')); module.set.direction(); } if(!module.can.animate()) { @@ -139,11 +138,11 @@ $.fn.transition = function() { complete: function () { module.verbose('CSS animation complete', settings.animation); if(!module.is.looping()) { - if($module.hasClass(className.outward) && !instance.queuing) { + if($module.hasClass(className.outward)) { module.restore.conditions(); module.hide(); } - else if($module.hasClass(className.inward) && !instance.queuing) { + else if($module.hasClass(className.inward)) { module.restore.conditions(); module.show(); } diff --git a/build/packaged/modules/shape.js b/build/packaged/modules/shape.js index 82c713b52..ec14fa83e 100644 --- a/build/packaged/modules/shape.js +++ b/build/packaged/modules/shape.js @@ -58,6 +58,7 @@ $.fn.shape = function(parameters) { initialize: function() { module.verbose('Initializing module for', element); module.set.defaultSide(); + module.instantiate(); }, instantiate: function() { @@ -745,4 +746,4 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); +})( jQuery, window , document ); \ No newline at end of file diff --git a/build/packaged/modules/transition.js b/build/packaged/modules/transition.js index a5c37385e..506954beb 100644 --- a/build/packaged/modules/transition.js +++ b/build/packaged/modules/transition.js @@ -113,7 +113,6 @@ $.fn.transition = function() { .one(animationEnd, module.complete) ; if(!module.has.direction() && module.can.transition()) { - console.log($module.attr('class')); module.set.direction(); } if(!module.can.animate()) { @@ -139,11 +138,11 @@ $.fn.transition = function() { complete: function () { module.verbose('CSS animation complete', settings.animation); if(!module.is.looping()) { - if($module.hasClass(className.outward) && !instance.queuing) { + if($module.hasClass(className.outward)) { module.restore.conditions(); module.hide(); } - else if($module.hasClass(className.inward) && !instance.queuing) { + else if($module.hasClass(className.inward)) { module.restore.conditions(); module.show(); } diff --git a/build/uncompressed/modules/dimmer.css b/build/uncompressed/modules/dimmer.css index ca98a92aa..8a36a46bd 100644 --- a/build/uncompressed/modules/dimmer.css +++ b/build/uncompressed/modules/dimmer.css @@ -81,6 +81,7 @@ .ui.dimmer .content > * { display: table-cell; vertical-align: middle; + color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer { @@ -142,6 +143,9 @@ body.ui.dimmable.dimmed > :not(.dimmer) { .ui.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } +.ui.inverted.dimmer .content > * { + color: rgba(0, 0, 0, 0.8); +} /*-------------- Simple ---------------*/ diff --git a/build/uncompressed/modules/shape.js b/build/uncompressed/modules/shape.js index 82c713b52..ec14fa83e 100644 --- a/build/uncompressed/modules/shape.js +++ b/build/uncompressed/modules/shape.js @@ -58,6 +58,7 @@ $.fn.shape = function(parameters) { initialize: function() { module.verbose('Initializing module for', element); module.set.defaultSide(); + module.instantiate(); }, instantiate: function() { @@ -745,4 +746,4 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); +})( jQuery, window , document ); \ No newline at end of file diff --git a/build/uncompressed/modules/transition.js b/build/uncompressed/modules/transition.js index a5c37385e..506954beb 100644 --- a/build/uncompressed/modules/transition.js +++ b/build/uncompressed/modules/transition.js @@ -113,7 +113,6 @@ $.fn.transition = function() { .one(animationEnd, module.complete) ; if(!module.has.direction() && module.can.transition()) { - console.log($module.attr('class')); module.set.direction(); } if(!module.can.animate()) { @@ -139,11 +138,11 @@ $.fn.transition = function() { complete: function () { module.verbose('CSS animation complete', settings.animation); if(!module.is.looping()) { - if($module.hasClass(className.outward) && !instance.queuing) { + if($module.hasClass(className.outward)) { module.restore.conditions(); module.hide(); } - else if($module.hasClass(className.inward) && !instance.queuing) { + else if($module.hasClass(className.inward)) { module.restore.conditions(); module.show(); } diff --git a/node/src/documents/guide/cssguide.html b/node/src/documents/guide/cssguide.html index a13323257..aa2264c03 100755 --- a/node/src/documents/guide/cssguide.html +++ b/node/src/documents/guide/cssguide.html @@ -283,6 +283,15 @@ type : 'UI Guide' } +

CSS :not is Awesome

+

Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to "cancel out" of that opacity change on content inside. Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.

+
+ /* blur everything but the dimmer */ + body.dimmed > :not(.dimmer){ + -webkit-filter: ~"blur(15px) grayscale(0.7)"; + -moz-filter: ~"blur(15px) grayscale(0.7)"; + } +

Prevent Accidental Highlighting

Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.

diff --git a/node/src/documents/introduction/definitions.html b/node/src/documents/introduction/definitions.html index e79735065..7adf03f96 100755 --- a/node/src/documents/introduction/definitions.html +++ b/node/src/documents/introduction/definitions.html @@ -116,7 +116,7 @@ type : 'UI Introduction'

Mostly tag ambivalent

-

Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like
without any difference.

+

Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like <div> <article> <nav> without any difference.

Context sensitive

diff --git a/node/src/files/components/semantic/modules/dimmer.css b/node/src/files/components/semantic/modules/dimmer.css index ca98a92aa..8a36a46bd 100644 --- a/node/src/files/components/semantic/modules/dimmer.css +++ b/node/src/files/components/semantic/modules/dimmer.css @@ -81,6 +81,7 @@ .ui.dimmer .content > * { display: table-cell; vertical-align: middle; + color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer { @@ -142,6 +143,9 @@ body.ui.dimmable.dimmed > :not(.dimmer) { .ui.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } +.ui.inverted.dimmer .content > * { + color: rgba(0, 0, 0, 0.8); +} /*-------------- Simple ---------------*/ diff --git a/node/src/files/components/semantic/modules/shape.js b/node/src/files/components/semantic/modules/shape.js index 82c713b52..ec14fa83e 100644 --- a/node/src/files/components/semantic/modules/shape.js +++ b/node/src/files/components/semantic/modules/shape.js @@ -58,6 +58,7 @@ $.fn.shape = function(parameters) { initialize: function() { module.verbose('Initializing module for', element); module.set.defaultSide(); + module.instantiate(); }, instantiate: function() { @@ -745,4 +746,4 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); +})( jQuery, window , document ); \ No newline at end of file diff --git a/node/src/files/components/semantic/modules/transition.js b/node/src/files/components/semantic/modules/transition.js index a5c37385e..506954beb 100644 --- a/node/src/files/components/semantic/modules/transition.js +++ b/node/src/files/components/semantic/modules/transition.js @@ -113,7 +113,6 @@ $.fn.transition = function() { .one(animationEnd, module.complete) ; if(!module.has.direction() && module.can.transition()) { - console.log($module.attr('class')); module.set.direction(); } if(!module.can.animate()) { @@ -139,11 +138,11 @@ $.fn.transition = function() { complete: function () { module.verbose('CSS animation complete', settings.animation); if(!module.is.looping()) { - if($module.hasClass(className.outward) && !instance.queuing) { + if($module.hasClass(className.outward)) { module.restore.conditions(); module.hide(); } - else if($module.hasClass(className.inward) && !instance.queuing) { + else if($module.hasClass(className.inward)) { module.restore.conditions(); module.show(); } diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 070adeba2..1c88c3e3c 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -265,8 +265,12 @@ a:hover { z-index: 999; } #example .main.menu .count { - font-family: "Hevletica Neue", Arial, sans-serif; - font-size: 0.8em; +/* font-family: "Hevletica Neue", Arial, sans-serif; +font-size: 0.8em; */ + color: rgba(255, 255, 255, 0.6); +} +#example .main.menu .count:hover { + color: rgba(255, 255, 255, 0.8); } /* lists */ diff --git a/src/modules/dimmer.less b/src/modules/dimmer.less index 4ad1c92dc..fd66681e5 100755 --- a/src/modules/dimmer.less +++ b/src/modules/dimmer.less @@ -106,6 +106,7 @@ .ui.dimmer .content > * { display: table-cell; vertical-align: middle; + color: #FFFFFF; } @@ -182,6 +183,9 @@ body.ui.dimmable.dimmed > :not(.dimmer){ .ui.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } +.ui.inverted.dimmer .content > * { + color: rgba(0, 0, 0, 0.8); +} /*-------------- Simple diff --git a/src/modules/shape.js b/src/modules/shape.js index 82c713b52..ec14fa83e 100755 --- a/src/modules/shape.js +++ b/src/modules/shape.js @@ -58,6 +58,7 @@ $.fn.shape = function(parameters) { initialize: function() { module.verbose('Initializing module for', element); module.set.defaultSide(); + module.instantiate(); }, instantiate: function() { @@ -745,4 +746,4 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); +})( jQuery, window , document ); \ No newline at end of file diff --git a/src/modules/transition.js b/src/modules/transition.js index a5c37385e..506954beb 100755 --- a/src/modules/transition.js +++ b/src/modules/transition.js @@ -113,7 +113,6 @@ $.fn.transition = function() { .one(animationEnd, module.complete) ; if(!module.has.direction() && module.can.transition()) { - console.log($module.attr('class')); module.set.direction(); } if(!module.can.animate()) { @@ -139,11 +138,11 @@ $.fn.transition = function() { complete: function () { module.verbose('CSS animation complete', settings.animation); if(!module.is.looping()) { - if($module.hasClass(className.outward) && !instance.queuing) { + if($module.hasClass(className.outward)) { module.restore.conditions(); module.hide(); } - else if($module.hasClass(className.inward) && !instance.queuing) { + else if($module.hasClass(className.inward)) { module.restore.conditions(); module.show(); } diff --git a/src/modules/transition.less b/src/modules/transition.less index c44b8baed..db83a3a37 100755 --- a/src/modules/transition.less +++ b/src/modules/transition.less @@ -69,6 +69,7 @@ display: block; } + /* Direction */ .ui.out.transition { -webkit-animation-direction: reverse;