Adds page dimmer text styles, fixes shape not initing, removes logs from transition

Former-commit-id: e035a08cbd
Former-commit-id: d470851177

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.

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 );

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();
             }

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 );

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();
             }

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
 ---------------*/

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 );

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();
             }

node/src/documents/guide/cssguide.html

@@ -283,6 +283,15 @@ type   : 'UI Guide'
     }
     </div>
     
+    <h4 class="ui header">CSS :not is Awesome</h4>
+    <p>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.</p>
+    <div class="code" data-type="css">
+    /* blur everything but the dimmer */
+    body.dimmed > :not(.dimmer){
+      -webkit-filter: ~"blur(15px) grayscale(0.7)";
+      -moz-filter: ~"blur(15px) grayscale(0.7)";
+    }
+    </div>
 
     <h4 class="ui header">Prevent Accidental Highlighting</h4>
     <p>Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.</p>

node/src/documents/introduction/definitions.html

@@ -116,7 +116,7 @@ type   : 'UI Introduction'
 
   <h3 class="ui header">Mostly tag ambivalent</h3>
 
-  <p>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 <pre><code><div> <article> <nav></code></pre> without any difference.</p>
+  <p>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 &lt;div&gt; &lt;article&gt; &lt;nav&gt; without any difference.</p>
 
   <h3 class="ui header">Context sensitive</h3>
 

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
 ---------------*/

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 );

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();
             }

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 */

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

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 );

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();
             }

src/modules/transition.less

@@ -69,6 +69,7 @@
   display: block;
 }
 
+
 /* Direction */
 .ui.out.transition {
   -webkit-animation-direction: reverse;