Skip to content
Browse files

trying to match mootools colours :). like the ones used on mootools s…

  • Loading branch information...
1 parent b8d3e64 commit 14938829723cc98a937ae35830ccefab946cba9a @eerne eerne committed Dec 30, 2010
View
19 demos/Accordion/demo.css
@@ -5,23 +5,18 @@
max-width: 400px;
}
#accordion H2 {
- background: #D2E0E6;
- border: 1px solid #F5F5F5;
- color: #528CE0;
+ background: #6B7B95;
+ color: white;
cursor: pointer;
font: 12px Helvetica, Arial, sans-serif;
+ line-height: 16px;
margin: 0 0 4px 0;
padding: 3px 5px 1px;
}
#accordion .content {
background-color: #F4F5F5;
}
-
-DIV.element P, DIV.element H4 {
- margin: 0px;
- padding: 4px;
-}
-
-BLOCKQUOTE {
- padding: 5px 20px;
-}
+ #accordion .content p {
+ margin: 0.5em 0;
+ padding: 0 6px 8px 6px;
+ }
View
2 demos/Accordion/demo.html
@@ -17,7 +17,7 @@
<h2>What browsers does it support?</h2>
<div class="content">
- <p>MooTools is compatible and fully tested with Safari 3+, Internet Explorer 6+, Firefox 2+ (and browsers based on gecko), Opera 9+, and Chrome 4+.</p>
+ <p>MooTools is compatible and fully tested with Safari&nbsp;3+, Internet Explorer&nbsp;6+, Firefox&nbsp;2+ (and browsers based on gecko), Opera&nbsp;9+, and Chrome&nbsp;4+.</p>
</div>
</div>
View
3 demos/Chaining/demo.css
@@ -1,6 +1,5 @@
#box {
- background: #4F8096;
- border: 1px solid #7199AB;
+ background: #6B7B95;
height: 70px;
margin: 0 auto;
width: 100px;
View
4 demos/Chaining/demo.js
@@ -31,12 +31,12 @@ window.addEvent('domready', function(){
.chain(function(){
log.set('html', 'Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
- 'background-color': '#89c577'
+ 'background-color': '#78BA91'
});
}).chain(function(){
log.set('html', 'Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
- 'background-color': '#4f8096',
+ 'background-color': '#A87AAD',
'width': 100,
'height': 70
});
View
4 demos/Drag.Drop/demo.css
@@ -3,7 +3,7 @@
position: relative;
}
#draggables DIV {
- background: #C17878;
+ background: #78BA91;
cursor: move;
height: 50px;
left: 10px;
@@ -13,7 +13,7 @@
}
#droppables DIV {
- background: #1D1D20;
+ background: #6B7B95;
float: left;
height: 100px;
margin: 10px;
View
8 demos/Drag.Drop/demo.js
@@ -6,22 +6,22 @@ window.addEvent('domready', function(){
droppables: $$('#droppables DIV'),
onEnter: function(draggable, droppable){
- droppable.setStyle('background', '#78BA91');
+ droppable.setStyle('background', '#E79D35');
},
onLeave: function(draggable, droppable){
- droppable.setStyle('background', '#1D1D20');
+ droppable.setStyle('background', '#6B7B95');
},
onDrop: function(draggable, droppable){
if (droppable){
draggable.destroy();
droppable.morph({
'height': droppable.getStyle('height').toInt() + 30,
- 'background-color' : ['#78BA91', '#1D1D20']
+ 'background-color' : ['#E79D35', '#6B7B95']
});
} else {
- draggable.setStyle('background', '#FAEC8F');
+ draggable.setStyle('background', '#C17878');
}
}
View
19 demos/Drag.Move/demo.css
@@ -1,25 +1,24 @@
#container {
background: #DDD;
- height: 160px;
+ height: 260px;
position: relative;
- width: 330px;
}
#drag {
- background: #000;
+ background: #78BA91;
cursor: move;
- height: 20px;
+ height: 40px;
left: 0;
position: absolute;
top: 0;
- width: 20px;
+ width: 40px;
}
.drop {
- background: #F30;
+ background: #6B7B95;
float: left;
- height: 40px;
- margin-left: 10px;
- margin-top: 10px;
- width: 30px;
+ height: 60px;
+ margin-left: 20px;
+ margin-top: 20px;
+ width: 72px;
}
View
6 demos/Drag.Move/demo.js
@@ -8,15 +8,15 @@ window.addEvent('domready', function(){
droppables: $$('.drop'),
onEnter: function(element, droppable){
- droppable.setStyle('background', '#000');
+ droppable.setStyle('background', '#E79D35');
},
onLeave: function(element, droppable){
- droppable.setStyle('background', '#F30');
+ droppable.setStyle('background', '#6B7B95');
},
onDrop: function(element, droppable){
- if (droppable) droppable.setStyle('background', '#FACE8F');
+ if (droppable) droppable.setStyle('background', '#C17878');
}
});
View
4 demos/Effects/demo.css
@@ -1,7 +1,7 @@
#element {
background-color: #F9F9F9;
- border: 1px solid #000;
+ border: 1px solid #6B7B95;
color: #000;
float: left;
height: 60px;
@@ -14,7 +14,7 @@
background-color: #C6D880;
border: 3px dashed #000;
font-size: 20px;
- height: 50px;
+ height: 60px;
padding: 20px;
width: 300px;
}
View
2 demos/Effects/demo.html
@@ -12,7 +12,7 @@
<li data-property="height" data-value="30">Animate height to 30px</li>
<li data-property="height" data-value="100">Animate height to 100px</li>
- <li data-property="background-color" data-value="#E6EFC2">Animate background color</li>
+ <li data-property="background-color" data-value="#78BA91">Animate background color</li>
<li data-property="border-width" data-value="10px">Animate border</li>
</ul>
View
7 demos/Effects/demo.js
@@ -14,17 +14,18 @@ window.addEvent('domready', function() {
$('morph-1').addEvent('click', function(){
$('element').morph({
'background-color': '#F9F9F9',
- 'color': '#C6D880',
+ 'color': '#78BA91',
'width': '200px'
});
});
$('morph-2').addEvent('click', function(){
$('element').morph({
- 'background-color': '#B86364',
+ 'background-color': '#E79D35',
'border-width': '1px',
'border-style': 'solid',
- 'border-color': '#f00',
+ 'border-color': '#000000',
+ 'color': '#fff',
'height': '45px',
'opacity': '0.6',
'width': '100px'
View
4 demos/MouseEnter/demo.js
@@ -10,8 +10,8 @@ window.addEvent('domready', function(){
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
- 'opacity': 1,
- 'background-color': '#c6d880'
+ 'opacity': 0.6,
+ 'background-color': '#E79D35'
});
},
mouseleave: function(){
View
3 demos/Periodical/demo.css
@@ -2,6 +2,5 @@
margin: 1em auto;
width: 200px;
height: 150px;
- background: #bcd965;
- border: 1px solid #000;
+ background: #6B7B95;
}
View
4 demos/Periodical/demo.js
@@ -6,8 +6,8 @@ window.addEvent('domready', function(){
// Create the function wich will run the effect
var fx = function() {
- effect.start('background-color', '#6684a0').chain(function() {
- effect.start('background-color', '#bcd965');
+ effect.start('background-color', '#6B7B95').chain(function(){
+ effect.start('background-color', '#E79D35');
});
// return this function, so you could do fx() which returns fx,
//or fx()()() which still returns fx and runs the function 3 times
View
4 demos/Transitions/demo.css
@@ -1,14 +1,14 @@
#box {
height: 400px;
width: 100%;
- background: #ccc;
+ background: #ddd;
margin-top: 10px;
overflow: hidden;
}
#target {
height: 50px;
width: 50px;
- background: #ff3300;
+ background: #C17878;
position: absolute;
}​

0 comments on commit 1493882

Please sign in to comment.
Something went wrong with that request. Please try again.