diff --git a/Readme.md b/Readme.md index 1f868a3..b8cefbc 100644 --- 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 index ed1660f..1c8d034 100644 --- 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 index 3f72900..ec6cc7e 100644 --- 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 index 751ddd8..4de48d3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -216,7 +216,7 @@

UIkit

Modern UI components for the modern web -

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.

+

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.

Dialog

diff --git a/docs/style.css b/docs/style.css index 1eba339..1c15c03 100644 --- 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 index e6cca57..4aec746 100644 --- 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 index 56729dc..be7cbb7 100644 --- 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 index 56fe4ea..678447b 100644 --- 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; }