Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

more minor visual tweaks

  • Loading branch information...
commit 0a939ea6060e65fb351897d1c4915477368408d9 1 parent a452866
mwcz authored
Showing with 27 additions and 15 deletions.
  1. +3 −3 colorpal.html
  2. +24 −12 css/cp-styles.css
View
6 colorpal.html
@@ -35,7 +35,7 @@ <h1 class="grid_11">ColorPal!</h1>
<script id="CP_PaletteTemplate" type="text/html">
<div id="cp-swatches"
- data-bind = "visible: palette_created()">
+ data-bind = "css: { off: !palette_created() }">
{{each(index,hex) colors}}
<div
class="cp-border cp-swatch grid_3"
@@ -50,8 +50,8 @@ <h1 class="grid_11">ColorPal!</h1>
<canvas id="cp-canvas" class="cp-canvas-default cp-border grid_24"></canvas>
- <div data-bind="visible: selected" id="cp-toolbox" class="cp-border grid_12">
- <div id="cp-picker" class="cp-picker-inactive grid_6"></div>
+ <div data-bind="css: { off: !selected() }" id="cp-toolbox" class="cp-border grid_12 fade">
+ <div id="cp-picker" class="grid_6"></div>
</div>
<div class="clear"></div>
View
36 css/cp-styles.css
@@ -63,10 +63,10 @@ img.logo {
.cp-swatches {
- -webkit-transition : all ease 0.13s;
- -moz-transition : all ease 0.13s;
- -o-transition : all ease 0.13s;
- transition : all ease 0.13s;
+ -webkit-transition : all 0.13s ease;
+ -moz-transition : all 0.13s ease;
+ -o-transition : all 0.13s ease;
+ transition : all 0.13s ease;
}
@@ -83,10 +83,10 @@ img.logo {
cursor : pointer;
- -webkit-transition : all ease 0.13s;
- -moz-transition : all ease 0.13s;
- -o-transition : all ease 0.13s;
- transition : all ease 0.13s;
+ -webkit-transition : all 0.13s ease;
+ -moz-transition : all 0.13s ease;
+ -o-transition : all 0.13s ease;
+ transition : all 0.13s ease;
}
/**********************
@@ -132,10 +132,10 @@ img.logo {
-o-border-radius: 2px;
border-radius: 2px;
- -webkit-box-shadow: 0px 0px 0px 3px #111;
- -moz-box-shadow: 0px 0px 0px 3px #111;
- -o-box-shadow: 0px 0px 0px 3px #111;
- box-shadow: 0px 0px 0px 3px #111;
+ -webkit-box-shadow: 0px 0px 0px 3px #222;
+ -moz-box-shadow: 0px 0px 0px 3px #222;
+ -o-box-shadow: 0px 0px 0px 3px #222;
+ box-shadow: 0px 0px 0px 3px #222;
}
@@ -152,3 +152,15 @@ img.logo {
#cp-toolbox {
margin-top: 10px;
}
+
+/*********************************************
+ * Classes for turning things "on" and "off" *
+ *********************************************/
+
+.off { display: none; }
+.fade {
+ -webkit-transition : all 0.33s ease;
+ -moz-transition : all 0.33s ease;
+ -o-transition : all 0.33s ease;
+ transition : all 0.33s ease;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.