Changed: moved non-structural styling to docs/style.css. Closes visio…

…nmedia#23
eponym · Feb 4, 2012 · 97a0466 · 97a0466
1 parent a4dd583
commit 97a0466
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 81 deletions.
diff --git a/Readme.md b/Readme.md
@@ -1,7 +1,7 @@
 
  ![UIKit JavaScript component framework](http://f.cl.ly/items/2j0m3D1l1T041S1k463L/Grab.png)
 
-  UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on (mostly) structure-only styling making it simple to apply application specific styling. UIKit is _not_ a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap. UIKit is still a work in progress, check the [Issues](https://github.com/visionmedia/uikit/issues).
+  UIKit is a small (4kb minified / gzipped) collection of flexible, cohesive, decoupled components for the modern web. With an emphasis on structure-only styling making it simple to apply application specific styling. UIKit is _not_ a replacement for larger UI frameworks, nor is it a CSS framework such as Bootstrap. UIKit is still a work in progress, check the [Issues](https://github.com/visionmedia/uikit/issues).
 
 ## Components
 

diff --git a/build/ui.css b/build/ui.css
@@ -5,9 +5,6 @@
   max-width: 600px;
   min-width: 250px;
   border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  -webkit-border-radius: 3px;
-  -webkit-box-shadow: 0 1px 4px 0 #ddd;
   background: white;
   z-index: 1000;
 }
@@ -28,36 +25,6 @@
   font-size: .9em;
 }
 
-#dialog .actions button {
-  padding: 5px;
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-}
-
-#dialog .actions button:hover {
-  text-decoration: underline;
-}
-
-#dialog .actions button.main {
-  padding: 5px 15px;
-  background: -webkit-linear-gradient(top, #fff 20%, #eee);
-  border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  -webkit-border-radius: 3px;
-  outline: none;
-}
-
-#dialog .actions button.main:hover {
-  text-decoration: none;
-  background: -webkit-linear-gradient(top, #fff 50%, #eee);
-}
-
-#dialog .actions button.main:active {
-  background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
-}
-
 #dialog.modal {
   -webkit-box-shadow: 0 1px 8px 0 black;
 }
@@ -159,9 +126,6 @@
   max-width: 600px;
   min-width: 250px;
   border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  -webkit-border-radius: 3px;
-  -webkit-box-shadow: 0 1px 4px 0 #ddd;
   background: white;
   z-index: 100;
 }
@@ -255,10 +219,7 @@
   margin: 0;
   padding: 0;
   background: white;
-  -webkit-border-radius: 5px;
-  font-size: 12px;
   border: 1px solid rgba(0,0,0,0.2);
-  -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
 }
 
 #context-menu li {

diff --git a/build/ui.js b/build/ui.js
@@ -644,7 +644,7 @@ ColorPicker.prototype.spectrumEvents = function(){
     , down;
 
   function update(e) {
-    var color = self.hueAt(e.offsetY);
+    var color = self.hueAt(e.offsetY - 4);
     self.hue(color.toString());
     self.emit('change', color);
     self._huePos = e.offsetY;

diff --git a/docs/index.html b/docs/index.html
@@ -216,7 +216,7 @@ <h1>UI<strong>kit</strong></h1>
         <span>Modern UI components for the modern web</span>
       </div>
 
-      <p>UIKit is a small collection of flexible, decoupled components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
+      <p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
 
       <section>
         <h2 id="dialog-section"><a href="#">Dialog</a></h2>

diff --git a/docs/style.css b/docs/style.css
@@ -24,12 +24,58 @@ body {
 #card .wrapper .front {
   line-height: 150px;
 }
+#dialog {
+  border-bottom-color: #cacaca;
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 #ddd;
+}
 #dialog .card p {
   text-align: center;
   line-height: 100px;
   font-weight: bold;
   font-size: 22px;
 }
+#dialog .actions button {
+  padding: 5px;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+#dialog .actions button:hover {
+  text-decoration: underline;
+}
+#dialog .actions button.main {
+  padding: 5px 15px;
+  background: -webkit-linear-gradient(top, #fff 20%, #eee);
+  border: 1px solid #eee;
+  border-bottom-color: #cacaca;
+  border-radius: 3px;
+  outline: none;
+}
+#dialog .actions button.main:hover {
+  text-decoration: none;
+  background: -webkit-linear-gradient(top, #fff 50%, #eee);
+}
+#dialog .actions button.main:active {
+  background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
+}
+#context-menu {
+  font-size: 12px;
+  -webkit-border-radius: 5px;
+  -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
+}
+#context-menu li:first-child a {
+  -webkit-border-radius: 5px 5px 0 0;
+}
+#context-menu li:last-child a {
+  -webkit-border-radius: 0 0 5px 5px;
+}
+.notification {
+  border-bottom-color: #cacaca;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: 0 1px 4px 0 #ddd;
+}
 #wrapper > section {
   margin: 30px 0;
   width: 350px;

diff --git a/lib/components/context-menu/context-menu.css b/lib/components/context-menu/context-menu.css
@@ -7,10 +7,7 @@
   margin: 0;
   padding: 0;
   background: white;
-  border-radius: 5px;
-  font-size: 12px;
   border: 1px solid rgba(0,0,0,0.2);
-  box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
 }
 
 #context-menu li {

diff --git a/lib/components/dialog/dialog.css b/lib/components/dialog/dialog.css
@@ -5,9 +5,6 @@
   max-width: 600px;
   min-width: 250px;
   border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  border-radius: 3px;
-  box-shadow: 0 1px 4px 0 #ddd;
   background: white;
   z-index: 1000;
 }
@@ -28,36 +25,6 @@
   font-size: .9em;
 }
 
-#dialog .actions button {
-  padding: 5px;
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-}
-
-#dialog .actions button:hover {
-  text-decoration: underline;
-}
-
-#dialog .actions button.main {
-  padding: 5px 15px;
-  background: linear-gradient(top, #fff 20%, #eee);
-  border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  border-radius: 3px;
-  outline: none;
-}
-
-#dialog .actions button.main:hover {
-  text-decoration: none;
-  background: linear-gradient(top, #fff 50%, #eee);
-}
-
-#dialog .actions button.main:active {
-  background: linear-gradient(bottom, #fff 20%, #eee);
-}
-
 #dialog.modal {
   box-shadow: 0 1px 8px 0 black;
 }

diff --git a/lib/components/notification/notification.css b/lib/components/notification/notification.css
@@ -15,9 +15,6 @@
   max-width: 600px;
   min-width: 250px;
   border: 1px solid #eee;
-  border-bottom-color: #cacaca;
-  border-radius: 3px;
-  box-shadow: 0 1px 4px 0 #ddd;
   background: white;
   z-index: 100;
 }