Browse Source

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

Former-commit-id: e035a08cbd
Former-commit-id: d470851177
pull/258/head
Jack Lukic 11 years ago
parent
commit
aff57cc2dc
18 changed files with 56 additions and 23 deletions
  1. 7
      LICENSE.md
  2. 3
      build/minified/modules/shape.js
  3. 5
      build/minified/modules/transition.js
  4. 3
      build/packaged/modules/shape.js
  5. 5
      build/packaged/modules/transition.js
  6. 4
      build/uncompressed/modules/dimmer.css
  7. 3
      build/uncompressed/modules/shape.js
  8. 5
      build/uncompressed/modules/transition.js
  9. 9
      node/src/documents/guide/cssguide.html
  10. 2
      node/src/documents/introduction/definitions.html
  11. 4
      node/src/files/components/semantic/modules/dimmer.css
  12. 3
      node/src/files/components/semantic/modules/shape.js
  13. 5
      node/src/files/components/semantic/modules/transition.js
  14. 8
      node/src/files/stylesheets/semantic.css
  15. 4
      src/modules/dimmer.less
  16. 3
      src/modules/shape.js
  17. 5
      src/modules/transition.js
  18. 1
      src/modules/transition.less

7
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.

3
build/minified/modules/shape.js

@ -58,6 +58,7 @@ $.fn.shape = function(parameters) {
initialize: function() { initialize: function() {
module.verbose('Initializing module for', element); module.verbose('Initializing module for', element);
module.set.defaultSide(); module.set.defaultSide();
module.instantiate();
}, },
instantiate: function() { instantiate: function() {
@ -745,4 +746,4 @@ $.fn.shape.settings = {
}; };
})( jQuery, window , document );
})( jQuery, window , document );

5
build/minified/modules/transition.js

@ -113,7 +113,6 @@ $.fn.transition = function() {
.one(animationEnd, module.complete) .one(animationEnd, module.complete)
; ;
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
console.log($module.attr('class'));
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) { if(!module.can.animate()) {
@ -139,11 +138,11 @@ $.fn.transition = function() {
complete: function () { complete: function () {
module.verbose('CSS animation complete', settings.animation); module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) { if(!module.is.looping()) {
if($module.hasClass(className.outward) && !instance.queuing) {
if($module.hasClass(className.outward)) {
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
} }
else if($module.hasClass(className.inward) && !instance.queuing) {
else if($module.hasClass(className.inward)) {
module.restore.conditions(); module.restore.conditions();
module.show(); module.show();
} }

3
build/packaged/modules/shape.js

@ -58,6 +58,7 @@ $.fn.shape = function(parameters) {
initialize: function() { initialize: function() {
module.verbose('Initializing module for', element); module.verbose('Initializing module for', element);
module.set.defaultSide(); module.set.defaultSide();
module.instantiate();
}, },
instantiate: function() { instantiate: function() {
@ -745,4 +746,4 @@ $.fn.shape.settings = {
}; };
})( jQuery, window , document );
})( jQuery, window , document );

5
build/packaged/modules/transition.js

@ -113,7 +113,6 @@ $.fn.transition = function() {
.one(animationEnd, module.complete) .one(animationEnd, module.complete)
; ;
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
console.log($module.attr('class'));
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) { if(!module.can.animate()) {
@ -139,11 +138,11 @@ $.fn.transition = function() {
complete: function () { complete: function () {
module.verbose('CSS animation complete', settings.animation); module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) { if(!module.is.looping()) {
if($module.hasClass(className.outward) && !instance.queuing) {
if($module.hasClass(className.outward)) {
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
} }
else if($module.hasClass(className.inward) && !instance.queuing) {
else if($module.hasClass(className.inward)) {
module.restore.conditions(); module.restore.conditions();
module.show(); module.show();
} }

4
build/uncompressed/modules/dimmer.css

@ -81,6 +81,7 @@
.ui.dimmer .content > * { .ui.dimmer .content > * {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
color: #FFFFFF;
} }
/* Loose Coupling */ /* Loose Coupling */
.ui.segment > .ui.dimmer { .ui.segment > .ui.dimmer {
@ -142,6 +143,9 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
.ui.inverted.dimmer { .ui.inverted.dimmer {
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
} }
.ui.inverted.dimmer .content > * {
color: rgba(0, 0, 0, 0.8);
}
/*-------------- /*--------------
Simple Simple
---------------*/ ---------------*/

3
build/uncompressed/modules/shape.js

@ -58,6 +58,7 @@ $.fn.shape = function(parameters) {
initialize: function() { initialize: function() {
module.verbose('Initializing module for', element); module.verbose('Initializing module for', element);
module.set.defaultSide(); module.set.defaultSide();
module.instantiate();
}, },
instantiate: function() { instantiate: function() {
@ -745,4 +746,4 @@ $.fn.shape.settings = {
}; };
})( jQuery, window , document );
})( jQuery, window , document );

5
build/uncompressed/modules/transition.js

@ -113,7 +113,6 @@ $.fn.transition = function() {
.one(animationEnd, module.complete) .one(animationEnd, module.complete)
; ;
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
console.log($module.attr('class'));
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) { if(!module.can.animate()) {
@ -139,11 +138,11 @@ $.fn.transition = function() {
complete: function () { complete: function () {
module.verbose('CSS animation complete', settings.animation); module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) { if(!module.is.looping()) {
if($module.hasClass(className.outward) && !instance.queuing) {
if($module.hasClass(className.outward)) {
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
} }
else if($module.hasClass(className.inward) && !instance.queuing) {
else if($module.hasClass(className.inward)) {
module.restore.conditions(); module.restore.conditions();
module.show(); module.show();
} }

9
node/src/documents/guide/cssguide.html

@ -283,6 +283,15 @@ type : 'UI Guide'
} }
</div> </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> <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> <p>Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.</p>

2
node/src/documents/introduction/definitions.html

@ -116,7 +116,7 @@ type : 'UI Introduction'
<h3 class="ui header">Mostly tag ambivalent</h3> <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> <h3 class="ui header">Context sensitive</h3>

4
node/src/files/components/semantic/modules/dimmer.css

@ -81,6 +81,7 @@
.ui.dimmer .content > * { .ui.dimmer .content > * {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
color: #FFFFFF;
} }
/* Loose Coupling */ /* Loose Coupling */
.ui.segment > .ui.dimmer { .ui.segment > .ui.dimmer {
@ -142,6 +143,9 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
.ui.inverted.dimmer { .ui.inverted.dimmer {
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
} }
.ui.inverted.dimmer .content > * {
color: rgba(0, 0, 0, 0.8);
}
/*-------------- /*--------------
Simple Simple
---------------*/ ---------------*/

3
node/src/files/components/semantic/modules/shape.js

@ -58,6 +58,7 @@ $.fn.shape = function(parameters) {
initialize: function() { initialize: function() {
module.verbose('Initializing module for', element); module.verbose('Initializing module for', element);
module.set.defaultSide(); module.set.defaultSide();
module.instantiate();
}, },
instantiate: function() { instantiate: function() {
@ -745,4 +746,4 @@ $.fn.shape.settings = {
}; };
})( jQuery, window , document );
})( jQuery, window , document );

5
node/src/files/components/semantic/modules/transition.js

@ -113,7 +113,6 @@ $.fn.transition = function() {
.one(animationEnd, module.complete) .one(animationEnd, module.complete)
; ;
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
console.log($module.attr('class'));
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) { if(!module.can.animate()) {
@ -139,11 +138,11 @@ $.fn.transition = function() {
complete: function () { complete: function () {
module.verbose('CSS animation complete', settings.animation); module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) { if(!module.is.looping()) {
if($module.hasClass(className.outward) && !instance.queuing) {
if($module.hasClass(className.outward)) {
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
} }
else if($module.hasClass(className.inward) && !instance.queuing) {
else if($module.hasClass(className.inward)) {
module.restore.conditions(); module.restore.conditions();
module.show(); module.show();
} }

8
node/src/files/stylesheets/semantic.css

@ -265,8 +265,12 @@ a:hover {
z-index: 999; z-index: 999;
} }
#example .main.menu .count { #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 */ /* lists */

4
src/modules/dimmer.less

@ -106,6 +106,7 @@
.ui.dimmer .content > * { .ui.dimmer .content > * {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
color: #FFFFFF;
} }
@ -182,6 +183,9 @@ body.ui.dimmable.dimmed > :not(.dimmer){
.ui.inverted.dimmer { .ui.inverted.dimmer {
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
} }
.ui.inverted.dimmer .content > * {
color: rgba(0, 0, 0, 0.8);
}
/*-------------- /*--------------
Simple Simple

3
src/modules/shape.js

@ -58,6 +58,7 @@ $.fn.shape = function(parameters) {
initialize: function() { initialize: function() {
module.verbose('Initializing module for', element); module.verbose('Initializing module for', element);
module.set.defaultSide(); module.set.defaultSide();
module.instantiate();
}, },
instantiate: function() { instantiate: function() {
@ -745,4 +746,4 @@ $.fn.shape.settings = {
}; };
})( jQuery, window , document );
})( jQuery, window , document );

5
src/modules/transition.js

@ -113,7 +113,6 @@ $.fn.transition = function() {
.one(animationEnd, module.complete) .one(animationEnd, module.complete)
; ;
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
console.log($module.attr('class'));
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) { if(!module.can.animate()) {
@ -139,11 +138,11 @@ $.fn.transition = function() {
complete: function () { complete: function () {
module.verbose('CSS animation complete', settings.animation); module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) { if(!module.is.looping()) {
if($module.hasClass(className.outward) && !instance.queuing) {
if($module.hasClass(className.outward)) {
module.restore.conditions(); module.restore.conditions();
module.hide(); module.hide();
} }
else if($module.hasClass(className.inward) && !instance.queuing) {
else if($module.hasClass(className.inward)) {
module.restore.conditions(); module.restore.conditions();
module.show(); module.show();
} }

1
src/modules/transition.less

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

Loading…
Cancel
Save