From cca7fddd96a91277d862f2bf4324e2d4d3a9544f Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 9 Apr 2013 19:37:17 -0400 Subject: [PATCH] origami: origami is now SHAPE. Working on new button styles to match new GE page. Added doc page. Working on default doc styling for 'semantic' Former-commit-id: a60ef77ed9afa696259171ab365b9c2a16517b5b Former-commit-id: 2698daad9aaf5befcf4da347887635aff5ba6b34 --- README.md | 0 build/{origami.min.css => shape.min.css} | 0 build/{origami.min.js => shape.min.js} | 0 component.json | 6 +- dependencies/jquery.js.REMOVED.git-id | 1 + examples/example.css | 185 +++ examples/example.js | 87 ++ .../fonts/neutraface-bold.otf.REMOVED.git-id | 1 + .../fonts/neutraface-book.otf.REMOVED.git-id | 1 + .../fonts/neutraface-demi.otf.REMOVED.git-id | 1 + .../fonts/neutraface-light.otf.REMOVED.git-id | 1 + examples/index.html | 109 ++ examples/ui/button.css | 1087 +++++++++++++++++ examples/ui/panel.css | 530 ++++++++ examples/ui/state.js | 594 +++++++++ src/{origami.css => shape.css} | 58 +- src/{origami.js => shape.js} | 133 +- 17 files changed, 2691 insertions(+), 103 deletions(-) mode change 100644 => 100755 README.md rename build/{origami.min.css => shape.min.css} (100%) rename build/{origami.min.js => shape.min.js} (100%) create mode 100644 dependencies/jquery.js.REMOVED.git-id create mode 100755 examples/example.css create mode 100755 examples/example.js create mode 100644 examples/fonts/neutraface-bold.otf.REMOVED.git-id create mode 100644 examples/fonts/neutraface-book.otf.REMOVED.git-id create mode 100644 examples/fonts/neutraface-demi.otf.REMOVED.git-id create mode 100644 examples/fonts/neutraface-light.otf.REMOVED.git-id create mode 100755 examples/index.html create mode 100755 examples/ui/button.css create mode 100755 examples/ui/panel.css create mode 100755 examples/ui/state.js rename src/{origami.css => shape.css} (59%) rename src/{origami.js => shape.js} (84%) diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/build/origami.min.css b/build/shape.min.css similarity index 100% rename from build/origami.min.css rename to build/shape.min.css diff --git a/build/origami.min.js b/build/shape.min.js similarity index 100% rename from build/origami.min.js rename to build/shape.min.js diff --git a/component.json b/component.json index b69a9a503..9a739ceb4 100755 --- a/component.json +++ b/component.json @@ -1,9 +1,9 @@ { - "name" : "Origami", + "name" : "Shape", "version" : "0.1", - "description" : "3D animation made easy, using the Semantic module spec.", + "description" : "3D animation made easy. A jQuery plugin built with the Semantic module spec.", - "homepage" : "https://github.com/quirkyinc/", + "homepage" : "https://github.com/quirkyinc/shapeful", "author": { "name" : "Jack Lukic", "web" : "http://www.github.com/quirkyjack/" diff --git a/dependencies/jquery.js.REMOVED.git-id b/dependencies/jquery.js.REMOVED.git-id new file mode 100644 index 000000000..bf3fceaf4 --- /dev/null +++ b/dependencies/jquery.js.REMOVED.git-id @@ -0,0 +1 @@ +c508b0af276ef6d67a302391fd4f07d960597be9 \ No newline at end of file diff --git a/examples/example.css b/examples/example.css new file mode 100755 index 000000000..0c522adae --- /dev/null +++ b/examples/example.css @@ -0,0 +1,185 @@ +/******************************* + CSS Reset +*******************************/ + +html, body, div, form, fieldset, legend, label, ul, li, menu, button { + margin: 0px; + padding: 0px; + background: none; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block +} + +table { + border-collapse: collapse; + border-spacing: 0px; +} +th, td { + text-align: left; + vertical-align: top; +} +th, td, caption { + font-weight:normal; + margin: 0px; + padding: 0px; +} +img, +iframe { + border: 0px; +} +:focus, input:focus, button:focus, button:active, button:hover { + outline: 0px; +} +button { + display: block; + outline: 0px; + border: 0px; +} +ul, li { + list-style-type: none; +} +p { + margin: 0px; +} +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/******************************* + Example +*******************************/ +@font-face { + font-family: 'Neutraface'; + src: + url("fonts/neutraface-book.otf") format('opentype') + ; + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Neutraface Bold'; + src: + url("fonts/neutraface-bold.otf") format('opentype') + ; + font-weight: normal; + font-style: normal; +} + +#example { + font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif; + background-color: #FCFCFC; +} +#example h1, +#example h2, +#example h3, +#example h4, +#example h5, +#example .ui { + font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; +} + +#example h2 { + margin: 60px 0px 20px; +} +#example h3 { + margin: 40px 0px 15px; +} +#example pre { + background-color: #F0F0F0; +} + +#example .shortcuts { + float: right; + clear: both; +} + +#example .container { + width: 1000px; + margin: 0px auto; +} + +#example .demo.shape { + +} + +#example .demo.shape .side { + + width: 300px; + height: 300px; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + + background-color: #22C1FC; + + color: #FFFFFF; + + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); +} +#example .demo.shape .side b { + display: block; + position: absolute; + top: 50%; + width: 100%; + font-size: 80px; + margin-top: -48px; + text-align: center; +} + +#example .demo.shape .up.side, +#example .demo.shape .down.side { + background-color: #E6E6E6; + color: #737373; +} + +/* Shapes */ +#example .demo.rectangle.shape .side { + width: 500px; + height: 300px; +} +#example .demo.rectangle.shape .up.side, +#example .demo.rectangle.shape .down.side { + height: 100px; +} +#example .demo.rectangle.shape .left.side, +#example .demo.rectangle.shape .right.side { + width: 300px; +} + + +#example .demo.irregular.shape .side { + padding: 0px; +} +#example .demo.irregular.shape .side:nth-child(1n) { + width: 514px; + height: 210px; +} +#example .demo.irregular.shape .side:nth-child(2n) { + width: 126px; + height: 115px; +} +#example .demo.irregular.shape .side:nth-child(3n) { + width: 864px; + height: 510px; +} +#example .demo.irregular.shape .side:nth-child(4n) { + width: 322px; + height: 210px; +} \ No newline at end of file diff --git a/examples/example.js b/examples/example.js new file mode 100755 index 000000000..c07b37f02 --- /dev/null +++ b/examples/example.js @@ -0,0 +1,87 @@ +// namespace +var shape = { + handler: {} +}; + +// ready event +shape.ready = function() { + + // selector cache + var + $demo = $('.demo'), + $ui = $('.ui'), + $directionButton = $('.direction .button'), + $shapeButton = $('.shape .button'), + // alias + handler + ; + + // event handlers + handler = { + rotate: function() { + var + direction = $(this).data('direction') || false, + animation = $(this).data('animation') || false + ; + if(direction && animation) { + $('.active.side') + .next() + .attr('class', direction + ' side') + ; + $demo + .shape(animation + '.' + direction) + ; + } + }, + + removeShape: function(){ + var + shape = $(this).data('shape') || false + ; + if(shape) { + $demo + .removeClass(shape) + ; + } + }, + + changeShape: function() { + var + $shape = $(this), + $otherShapes = $shape.siblings(), + shape = $shape.data('shape') + ; + $shape + .addClass('active') + ; + $otherShapes + .removeClass('active') + .each(handler.removeShape) + ; + $demo + .addClass(shape) + ; + } + }; + + // attach events + $ui + .state() + ; + $demo + .shape() + ; + $directionButton + .on('click', handler.rotate) + ; + $shapeButton + .on('click', handler.changeShape) + ; + +}; + + +// attach ready event +$(document) + .ready(shape.ready) +; \ No newline at end of file diff --git a/examples/fonts/neutraface-bold.otf.REMOVED.git-id b/examples/fonts/neutraface-bold.otf.REMOVED.git-id new file mode 100644 index 000000000..975398828 --- /dev/null +++ b/examples/fonts/neutraface-bold.otf.REMOVED.git-id @@ -0,0 +1 @@ +a095aa8f6a54db7141b4605fd0bdb7af3f20a1d5 \ No newline at end of file diff --git a/examples/fonts/neutraface-book.otf.REMOVED.git-id b/examples/fonts/neutraface-book.otf.REMOVED.git-id new file mode 100644 index 000000000..39ea9b02f --- /dev/null +++ b/examples/fonts/neutraface-book.otf.REMOVED.git-id @@ -0,0 +1 @@ +4e7ae56252713dd21979f725b872b745b5f1405d \ No newline at end of file diff --git a/examples/fonts/neutraface-demi.otf.REMOVED.git-id b/examples/fonts/neutraface-demi.otf.REMOVED.git-id new file mode 100644 index 000000000..a71b1b34e --- /dev/null +++ b/examples/fonts/neutraface-demi.otf.REMOVED.git-id @@ -0,0 +1 @@ +45683d0b7594aa05d78d89c45fc89a3f1be44ed7 \ No newline at end of file diff --git a/examples/fonts/neutraface-light.otf.REMOVED.git-id b/examples/fonts/neutraface-light.otf.REMOVED.git-id new file mode 100644 index 000000000..0273609cb --- /dev/null +++ b/examples/fonts/neutraface-light.otf.REMOVED.git-id @@ -0,0 +1 @@ +b1f286e072c69b5042008ad89cffe52793868fa9 \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100755 index 000000000..75edc788c --- /dev/null +++ b/examples/index.html @@ -0,0 +1,109 @@ + + + + + Shape Examples + + + + + + + + + + + + + + + + + + + + + +
+ +

Shape

+

Shape is a plugin for 3D transitioning elements.

+ +

Examples

+ +

Regular Shape

+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+
+ +

Shape

+
+
Square
+
Rectangle
+
Irregular
+
+ +

Flip

+
+
Left
+
Right
+
Up
+
Down
+
+ +

Usage

+ + Usage: + // the plugin must be initialized once before methods can be accessed + 
+  
+  $('.shape')
+    .shape()
+  ;
+  
+
+ + // transion automatically assumed next side is the next sibling (or first if last element) + 
+  
+  $('.shape')
+    .shape('flip.up')
+  ;
+  
+
+ + // to manually set the next side to appear use a selector or jQuery object + 
+  
+  $('.shape')
+    .shape('set.nextSide', '.second')
+    .shape('flip.up')
+  ;
+  
+
+ + // any internal method can be invoked programmatically + 
+  
+  $('.shape')
+    .shape('repaint')
+  ;
+  
+
+
+ + + \ No newline at end of file diff --git a/examples/ui/button.css b/examples/ui/button.css new file mode 100755 index 000000000..487c1f396 --- /dev/null +++ b/examples/ui/button.css @@ -0,0 +1,1087 @@ +/******************************* + UI Button +*******************************/ + +/*-------------- + Standard Button +---------------*/ + +/* Normal */ +.ui.button { + cursor: pointer; + display: inline-block; + vertical-align: middle; + + min-height: 1em; + + background-color: #F0F0F0; + + padding: 12px 30px; + + font-size: 14px; + text-transform: uppercase; + line-height: 1; + font-weight: bold; + color: #7A7A7A; + text-align: center; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + -webkit-box-shadow: + 0px -2px 0px rgba(0, 0, 0, 0.1) inset + ; + -moz-box-shadow: + 0px -2px 0px rgba(0, 0, 0, 0.1) inset + ; + box-shadow: + 0px -2px 0px rgba(0, 0, 0, 0.1) inset + ; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + -webkit-transition: + opacity 0.1s linear, + background 0.1s linear, + box-shadow 0.1s linear + ; + -moz-transition: + opacity 0.1s linear, + background 0.1s linear, + box-shadow 0.1s linear + ; + -o-transition: + opacity 0.1s linear, + background 0.1s linear, + box-shadow 0.1s linear + ; + -ms-transition: + opacity 0.1s linear, + background 0.1s linear, + box-shadow 0.1s linear + ; + transition: + opacity 0.1s linear, + background 0.1s linear, + box-shadow 0.1s linear + ; +} + + +/*--------------- + Purple Button +----------------*/ + +.ui.purple.button { + background-color: #6E4889; +} +.ui.purple.button.hover { + background-color: #62397F; +} +.ui.purple.button.down { + background-color: #9254BD; +} + +/*--------------- + Green Button +----------------*/ + +.ui.button.green, +.ui.button.success { + background-color: #7DDC5C; + color: #FFFFFF; +} + +.ui.button.green.hover, +.ui.button.success.hover { + background-color: #7fe95A; + color: #FFFFFF; +} + +.ui.button.green.down, +.ui.button.success.down { + background-color: #59B94B; + color: #FFFFFF; +} + +/*-------------------- + Transparent Button +----------------------*/ + +.ui.transparent.buttons .button, +.ui.transparent.button { + background-color: transparent; + background-image: none; + border: none; + color: #777777; +} +.ui.transparent.buttons .button a, +.ui.transparent.button a { + color: #777777; +} + +/* Hover / Down */ +.ui.transparent.buttons .button.hover, +.ui.transparent.buttons .button.down, +.ui.transparent.button.hover, +.ui.transparent.button.down { + color: #555555; +} +.ui.transparent.buttons .button.hover a, +.ui.transparent.buttons .button.down a, +.ui.transparent.button.hover a, +.ui.transparent.button.down a { + color: #555555; +} + +.ui.transparent.buttons .button.down { + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); +} + + +/*------------------- + Resizes +--------------------*/ + +.ui.buttons.mini .button, +.ui.mini.button { + font-size: 9px; + padding: 4px 5px; + border-radius: 3px; +} +.ui.buttons.mini .button i, +.ui.mini.button i { + vertical-align: top; +} +.ui.tiny.buttons .button, +.ui.tiny.button { + font-size: 11px; + font-weight: bold; + padding: 6px 13px; +} +.ui.small.buttons .button, +.ui.small.button { + font-size: 12px; + padding: 6px 15px; +} +.ui.medium.buttons .button, +.ui.medium.button { + font-size: 14px; + padding: 7px 15px; +} +.ui.big.buttons .button, +.ui.big.button { + font-size: 16px; + padding: 10px 20px; +} +.ui.huge.buttons .button, +.ui.huge.button { + font-size: 18px; + padding: 11px 30px; +} +.ui.massive.buttons .button, +.ui.massive.button { + padding: 15px 45px; + + font-size: 24px; + font-weight: bold; + + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); +} +.ui.gigantic.buttons .button, +.ui.gigantic.button { + padding: 18px 45px; + + font-size: 30px; + font-weight: bold; + + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); +} + + +/*-------------- + Icons +---------------*/ + +.ui.button i { + line-height: 1; + margin-right: 0.2em; +} + +/* left arrow icons */ +.ui.button i.icon.left, +.ui.button i.icon.left-open, +.ui.button i.icon.left-dir { + margin: 0em 0.2em 0em; +} +/* right positioned icons */ +.ui.button i.icon.up, +.ui.button i.icon.up-open, +.ui.button i.icon.up-dir, +.ui.button i.icon.down, +.ui.button i.icon.down-open, +.ui.button i.icon.down-dir, +.ui.button i.icon.right, +.ui.button i.icon.right-open, +.ui.button i.icon.right-dir { + margin: 0em; +} + +/*-------------- + Labels +---------------*/ + +.ui.button .label { + +} + +/******************************* + Modifiers +*******************************/ + +/* Image Buttons */ +.ui.icon.buttons .button, +.ui.icon.button { + padding: 7px; + text-align: center; +} +.ui.icon.buttons .button i, +.ui.icon.button i { + margin: 0px; + vertical-align: text-top; +} +/* Image Button Resizes */ +.ui.icon.buttons.mini .button, +.ui.mini.icon.button { + padding: 4px; +} +.ui.tiny.icon.buttons .button, +.ui.tiny.icon.button { + padding: 6px; +} +.ui.small.icon.buttons .button, +.ui.small.icon.button { + padding: 6px; +} +.ui.medium.icon.buttons .button, +.ui.medium.icon.button { + padding: 7px; +} +.ui.big.icon.buttons .button, +.ui.big.icon.button { + padding: 10px; +} +.ui.huge.icon.buttons .button, +.ui.huge.icon.button { + padding: 11px; +} +.ui.massive.icon.buttons .button, +.ui.massive.icon.button { + padding: 15px; +} +.ui.gigantic.icon.buttons .button, +.ui.gigantic.icon.button { + padding: 18px; +} + + +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .button.active, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + +} +.ui.buttons.toggle .ui.button.active.hover, +.ui.buttons .ui.button.toggle.active.hover, +.ui.button.toggle.active.hover { + color: #21A627; + + background-color: #BBF0A9; + + -webkit-box-shadow: + 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset + ; + -moz-box-shadow: + 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset + ; + box-shadow: + 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset + ; +} +.ui.button.toggle.active.hover.loading, +.ui.button.toggle.active.loading { + border-color: #CCCCCC; +} +.ui.button.toggle.active.hover.down { + border: 1px solid #77CF66; + + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5); + background-color: #B6F3A2; + color: #21A627; + + -webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset; + -moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset; + box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset; +} + + +/* Bubbly Variation */ +.ui.button.bubbly { + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; +} + +/* Button attached to a form element */ +input + .ui.attached.button { + min-width: 40px; + float: left; + margin: 0px 0px 0px -15px; + height: 14px; + padding: 8px 15px; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + -webkit-border-radius: 0px 5px 5px 0px; + -moz-border-radius: 0px 5px 5px 0px; + border-radius: 0px 5px 5px 0px; +} +.ui.attached.button.loading, +.ui.attached.button.loading.hover { + opacity: 1; +} + +/*------------------- + Wrapping Style +--------------------*/ + +.ui.button.wrapping { + display: block; +} +.ui.button.wrapping.top { + margin-left: -1px; + margin-right: -1px; + -webkit-border-radius: 5px 5px 0px 0px; + -moz-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.button.wrapping.bottom { + margin-left: -1px; + margin-right: -1px; + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} + + +/******************************* + States +*******************************/ + +/* Hover */ +.ui.button.hover { + background-color: #DDDDDD; +} +/* Down */ +.ui.button.down { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; +} + +/* Active */ +.ui.buttons .button.active, +.ui.button.active { + background-color: #E6E6E6; + background: -webkit-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); + background: -moz-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); + background: -o-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); + background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); + background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); + + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3); + + -webkit-box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; + -moz-box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; + box-shadow: + 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset + ; +} +.ui.buttons .button.active, +.ui.buttons .button.active a, +.ui.button.active, +.ui.button.active a { + color: #7A7A7A; +} +.ui.buttons .button.active.hover, +.ui.button.active.hover { + background: #E0E0E0 -webkit-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); + background: #E0E0E0 -moz-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); + background: #E0E0E0 -o-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); + background: #E0E0E0 -ms-linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); + background: #E0E0E0 linear-gradient(top, #E8E8E8 0%, #E0E0E0 100%); + + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; + + text-shadow: none; +} +.ui.buttons .button.active.hover, +.ui.buttons .button.active.hover a, +.ui.button.active.hover, +.ui.button.active.hover a { + color: #555555; +} +.ui.buttons .button.active.hover.down, +.ui.button.active.hover.down { + background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); + background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%); +} + + + + +/******************************* + Loading +*******************************/ + +/* Loading */ +.ui.button.loading, +.ui.button.loading.hover { + position: relative; + cursor: default; + opacity: 0.75; + color: #888888 !important; + + background-image: none !important; + + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.loading:after { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + content: ''; + /* standard */ + background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%; + /* css 3 multi image */ + background-image: url(/images/ui/throbber-blue-tiny.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-tiny.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-tiny.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-tiny.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-tiny.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-position: 50% 50%, 0px 0px; + background-repeat: no-repeat, repeat; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} +/* Opposite color loader */ +.ui.grey.button.loading, +.ui.button.active.loading { + border-color: #BBBBBB +} +.ui.grey.button.loading:after, +.ui.button.active.loading:after { + background-color: #FAFAFA; + /* standard */ + background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%; + /* css 3 multi image */ + background-image: url(/images/ui/throbber-tiny.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-tiny.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-tiny.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-tiny.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-tiny.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-position: 50% 50%, 0px 0px; + background-repeat: no-repeat, repeat; +} + +/* resizes */ + +/* blue */ +.ui.huge.button.loading:after { + background-image: url(/images/ui/throbber-blue-small.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-small.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-small.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-small.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-small.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); +} +.ui.massive.buttons .button.loading:after, +.ui.gigantic.buttons .button.loading:after, +.ui.massive.button.loading:after, +.ui.gigantic.button.loading:after { + background-image: url(/images/ui/throbber-blue-medium.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-medium.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-medium.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-medium.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); + background-image: url(/images/ui/throbber-blue-medium.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); +} + +/* grey */ +.ui.huge.grey.button.loading:after, +.ui.huge.button.loading.active:after { + background-image: url(/images/ui/throbber-small.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-small.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-small.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-small.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-small.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); +} +.ui.massive.grey.buttons .button.loading:after, +.ui.gigantic.grey.buttons .button.loading:after, +.ui.massive.grey.button.loading:after, +.ui.gigantic.grey.button.loading:after, +.ui.massive.grey.buttons .button.loading.active:after, +.ui.gigantic.grey.buttons .button.loading.active:after, +.ui.massive.button.loading.active:after, +.ui.gigantic.button.loading.active:after { + background-image: url(/images/ui/throbber-medium.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-medium.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-medium.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-medium.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); + background-image: url(/images/ui/throbber-medium.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); +} + + +/******************************* + Error States +*******************************/ + +.ui.buttons .button.error, +.ui.buttons .button.error.hover, +.ui.buttons .button.error.down, +.ui.button.error, +.ui.button.error.hover, +.ui.button.error.down { + cursor: default; + position: relative; + + color: #FFFFFF; + text-shadow: none; + + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.buttons .button.error:after, +.ui.buttons .button.error.hover:after, +.ui.buttons .button.error.down:after, +.ui.button.error:after, +.ui.button.error.hover:after, +.ui.button.error.down:after { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + content: ''; + /* standard */ + background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%; +} + +.ui.button.success, +.ui.button.success.hover, +.ui.button.success.down { + background-color: #59B94B; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + border-color: #588D0F; +} + +/* Disabled State */ +.ui.button.disabled, +.ui.button.disabled.hover, +.ui.button.disabled.down { + cursor: default; + color: #AAAAAA; + background-color: #F0F0F0 !important; + background-image: none !important; + + text-shadow: none !important; + + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + + +/******************************* + Buttons (Button Group) +*******************************/ + +.ui.buttons { + overflow: hidden; +} +.ui.buttons .button, +.ui.buttons .mini.button, +.ui.buttons .tiny.button, +.ui.buttons .small.button, +.ui.buttons .massive.button, +.ui.buttons .huge.button, +.ui.buttons .gigantic.button { + float: left; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} +.ui.buttons .button:first-child, +.ui.buttons .mini.button:first-child, +.ui.buttons .tiny.button:first-child, +.ui.buttons .small.button:first-child, +.ui.buttons .massive.button:first-child, +.ui.buttons .huge.button:first-child, +.ui.buttons .gigantic.button:first-child { + margin-left: 0px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.ui.buttons .button:last-child, +.ui.buttons .mini.button:last-child, +.ui.buttons .tiny.button:last-child, +.ui.buttons .small.button:last-child, +.ui.buttons .massive.button:last-child, +.ui.buttons .huge.button:last-child, +.ui.buttons .gigantic.button:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +/* Vertical Style */ +.ui.buttons.vertical { + display: inline-block; +} +.ui.buttons.vertical .button { + display: block; + float: none; +} +.ui.buttons.vertical .button, +.ui.buttons.vertical .mini.button, +.ui.buttons.vertical .tiny.button, +.ui.buttons.vertical .small.button, +.ui.buttons.vertical .massive.button, +.ui.buttons.vertical .huge.button, +.ui.buttons.vertical .gigantic.button { + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; +} +.ui.buttons.vertical .button:first-child, +.ui.buttons.vertical .mini.button:first-child, +.ui.buttons.vertical .tiny.button:first-child, +.ui.buttons.vertical .small.button:first-child, +.ui.buttons.vertical .massive.button:first-child, +.ui.buttons.vertical .huge.button:first-child, +.ui.buttons.vertical .gigantic.button:first-child { + margin-top: 0px; + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.buttons.vertical .button:last-child, +.ui.buttons.vertical .mini.button:last-child, +.ui.buttons.vertical .tiny.button:last-child, +.ui.buttons.vertical .small.button:last-child, +.ui.buttons.vertical .massive.button:last-child, +.ui.buttons.vertical .huge.button:last-child, +.ui.buttons.vertical .gigantic.button:last-child { + -moz-border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} + +/* Only show multiple borders when changing colors in group */ +.ui.buttons .grey.button + .grey.button, +.ui.buttons .blue.button + .blue.button, +.ui.buttons .purple.button + .purple.button, +.ui.buttons .green.button + .green.button { + margin-left: -1px; +} +.ui.vertical.buttons .grey.button + .grey.button, +.ui.vertical.buttons .blue.button + .blue.button, +.ui.vertical.buttons .purple.button + .purple.button, +.ui.vertical.buttons .green.button + .green.button { + margin-top: -1px; +} + +/******************************* + OR Button Divisions +*******************************/ + +.ui.buttons .or { + position: relative; + float: left; +} +.ui.buttons .or:before { + position: absolute; + top: 50%; + left: 50%; + content: 'or'; + background-color: #FFFFFF; + + line-height: 1; + color: #AAAAAA; + font-style: italic; + text-align: center; + + -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; + -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset; + + -moz-border-radius: 500px; + -webkit-border-radius: 500px; + border-radius: 500px; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.buttons .or:after { + position: absolute; + top: 0px; + left: 0px; + content: ' '; + + background-color: transparent; + border-top: 2px solid #FFFFFF; + border-bottom: 2px solid #FFFFFF; +} + + +/* Or Sizes */ +.ui.buttons .or { + width: 5px; + height: 28px; +} +.ui.buttons .or:before { + margin-top: -10px; + margin-left: -12px; + + padding-top: 5px; + width: 22px; + height: 22px; + + font-size: 12px; +} +.ui.buttons .or:after { + top: 4px; + width: 5px; + height: 18px; +} +.ui.fluid.buttons .or { + width: 0px !important; +} +.ui.fluid.buttons .or:after{ + display: none; +} + +/* mini */ +.ui.mini.buttons .or, +.ui.buttons .mini.or { + height: 19px; +} +.ui.mini.buttons .or:before, +.ui.buttons .mini.or:before { + margin-left: -8px; + margin-top: -6px; + + padding-top: 2px; + width: 14px; + height: 14px; + + font-size: 9px; +} +.ui.mini.buttons .or:after, +.ui.buttons .mini.or:after { + top: 3px; + width: 4px; + height: 10px; +} + +/* tiny */ +.ui.tiny.buttons .or, +.ui.buttons .tiny.or { + height: 26px; +} +.ui.tiny.buttons .or:before, +.ui.buttons .tiny.or:before { + margin-left: -11px; + margin-top: -10px; + + padding-top: 4px; + width: 20px; + height: 19px; + + font-size: 11px; +} +.ui.tiny.buttons .or:after, +.ui.buttons .tiny.or:after { + top: 2px; + width: 5px; + height: 16px; +} + +/* small */ +.ui.small.buttons .or, +.ui.buttons .small.or { + height: 26px; +} +.ui.small.buttons .or:before, +.ui.buttons .small.or:before { + margin-left: -11px; + margin-top: -10px; + + padding-top: 4px; + width: 20px; + height: 19px; + + font-size: 11px; +} +.ui.small.buttons .or:after, +.ui.buttons .small.or:after { + top: 2px; + width: 5px; + height: 16px; +} + +/* big */ +.ui.big.buttons .or, +.ui.buttons .big.or { + +} +.ui.big.buttons .or:before, +.ui.buttons .big.or:before { + margin-left: -14px; + margin-top: -8px; + + padding-top: 5px; + width: 26px; + height: 25px; + + font-size: 14px; +} +.ui.big.buttons .or:after, +.ui.buttons .big.or:after { + top: 5px; + width: 5px; + height: 22px; +} + +/* huge */ +.ui.huge.buttons .or, +.ui.buttons .huge.or { + width: 6px; + height: 41px; +} +.ui.huge.buttons .or:before, +.ui.buttons .huge.or:before { + margin-left: -15px; + margin-top: -14px; + + padding-top: 6px; + width: 30px; + height: 29px; + + font-size: 15px; +} +.ui.huge.buttons .or:after, +.ui.buttons .huge.or:after { + top: 6px; + width: 6px; + height: 26px; +} + + + + +/* Wide Style */ +.ui.buttons.wide { + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); + background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); + background: linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%); + + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset; + + border-radius: 3px; + padding-bottom: 0px; +} +.ui.buttons.wide .button:last-child { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} + + +/*------------------- + Attached +--------------------*/ + +.attached.ui.buttons { + margin: 0px; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} +.attached.ui.buttons .button:first-child { + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} + +/* Bottom Side */ +.bottom.attached.ui.buttons { + margin-top: -1px; + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.bottom.attached.ui.buttons .button:first-child { + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +.bottom.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} + + +/* Fluid */ +.ui.fluid.buttons, +.ui.button.fluid, +.ui.fluid.buttons > .button { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.two.fluid.buttons > .button { + width: 50%; +} +.ui.three.fluid.buttons > .button { + width: 33.333%; +} +.ui.four.fluid.buttons > .button { + width: 25%; +} +.ui.five.fluid.buttons > .button { + width: 20%; +} +.ui.six.fluid.buttons > .button { + width: 16.666%; +} +.ui.seven.fluid.buttons > .button { + width: 14.285%; +} +.ui.eight.fluid.buttons > .button { + width: 12.500%; +} +.ui.nine.fluid.buttons > .button { + width: 11.11%; +} +.ui.ten.fluid.buttons > .button { + width: 10%; +} +.ui.eleven.fluid.buttons > .button { + width: 9.09%; +} +.ui.twelve.fluid.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + width: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.two.fluid.buttons > .button { + height: 50%; +} +.ui.three.fluid.buttons > .button { + height: 33.333%; +} +.ui.four.fluid.buttons > .button { + height: 25%; +} +.ui.five.fluid.buttons > .button { + height: 20%; +} +.ui.six.fluid.buttons > .button { + height: 16.666%; +} +.ui.seven.fluid.buttons > .button { + height: 14.285%; +} +.ui.eight.fluid.buttons > .button { + height: 12.500%; +} +.ui.nine.fluid.buttons > .button { + height: 11.11%; +} +.ui.ten.fluid.buttons > .button { + height: 10%; +} +.ui.eleven.fluid.buttons > .button { + height: 9.09%; +} +.ui.twelve.fluid.buttons > .button { + height: 8.3333%; +} \ No newline at end of file diff --git a/examples/ui/panel.css b/examples/ui/panel.css new file mode 100755 index 000000000..9560d13c1 --- /dev/null +++ b/examples/ui/panel.css @@ -0,0 +1,530 @@ +/******************************* + UI Panel +*******************************/ + +.ui.panel { + margin: 0px 0px 25px; + height: 41px; + + border: 1px solid #DADADA; + border: 1px solid rgba(0, 0, 0, 0.12); + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + background-color: #FAFAFA; + background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + +} + +.ui.panel li { + position: relative; + cursor: pointer; + float: left; + + line-height: 1; + padding: 14px 35px; + vertical-align: middle; + + font-size: 13px; + font-weight: bold; + + color: #555555; + + -webkit-box-shadow: + 1px 0px 0px rgba(255, 255, 255, 0.5) inset, + -1px 0px 0px rgba(0, 0, 0, 0.06) + ; + -moz-box-shadow: + 1px 0px 0px rgba(255, 255, 255, 0.5) inset, + -1px 0px 0px rgba(0, 0, 0, 0.06) + ; + box-shadow: + 1px 0px 0px rgba(255, 255, 255, 0.5) inset, + -1px 0px 0px rgba(0, 0, 0, 0.06) + ; + + background-color: #FAFAFA; + background: -webkit-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -moz-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -o-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: -ms-linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + background: linear-gradient(top, #FAFAFA 0%, #ECECEC 100%); + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + -webkit-transition: color 0.3s linear; + -moz-transition: color 0.3s linear; + -o-transition: color 0.3s linear; + -ms-transition: color 0.3s linear; + transition: color 0.3s linear; +} +.ui.panel li a { + color: #555555; +} + +.ui.panel li:first-child { + -webkit-border-radius: 4px 0px 0px 4px; + -moz-border-radius: 4px 0px 0px 4px; + border-radius: 4px 0px 0px 4px; +} + +/* Icons */ +.ui.panel i { + line-height: 1; + margin-right: 0.5em; +} + +/* left arrow icons */ +.ui.panel i.icon.left, +.ui.panel i.icon.left-open, +.ui.panel i.icon.left-dir { + margin: 0em 0.5em 0em; +} +/* right positioned icons */ +.ui.panel i.icon.up, +.ui.panel i.icon.up-open, +.ui.panel i.icon.up-dir, +.ui.panel i.icon.down, +.ui.panel i.icon.down-open, +.ui.panel i.icon.down-dir, +.ui.panel i.icon.right, +.ui.panel i.icon.right-open, +.ui.panel i.icon.right-dir { + margin: 0em 0em 0em 0.5em; +} + +/* States */ +.ui.panel li.hover { + background: -webkit-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + background: -moz-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + background: -o-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + background: -ms-linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + background: linear-gradient(top, #F6F6F6 0%, #EAEAEA 100%); + color: #333333; +} +.ui.panel li.hover a { + color: #333333; +} + +.ui.panel li.down, +.ui.panel li.active { + + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); + + -webkit-box-shadow: + 0px 1px 5px rgba(0, 0, 0, 0.1) inset, + 0px 0px 0px 1px #DDDDDD inset, + 0px 0px 0px 1px #CCCCCC + ; + -moz-box-shadow: + 0px 1px 5px rgba(0, 0, 0, 0.1) inset, + 0px 0px 0px 1px #DDDDDD inset, + 0px 0px 0px 1px #CCCCCC + ; + box-shadow: + 0px 1px 5px rgba(0, 0, 0, 0.1) inset, + 0px 0px 0px 1px #DDDDDD inset, + 0px 0px 0px 1px #CCCCCC + ; + + background-color: #EAEAEA; + background: -webkit-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); + background: -moz-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); + background: -o-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); + background: -ms-linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); + background: linear-gradient(top, #EAEAEA 0%, #ECECEC 100%); + +} +.ui.panel li.active, +.ui.panel li.active.hover { + cursor: default; + color: #333333; +} +.ui.panel li.active a, +.ui.panel li.active.hover a { + color: #333333; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.panel li.active:after { + position: absolute; + bottom: -6px; + left: 50%; + content: ""; + + margin-left: -5px; + width: 12px; + height: 12px; + + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.2) inset; + + background-color: #ECECEC; + background-image: none; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; +} + +.ui.vertical.pointing.panel li.active:after { + position: absolute; + top: 50%; + right: -6px; + bottom: auto; + left: auto; + + -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; + box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; + + margin-top: -7px; + width: 12px; + height: 12px; +} +.ui.simple.pointing.panel li.active:after { + background-color: #ECECEC; + background-image: none; +} +.ui.vertical.pointing.panel li.active:after { + background: -webkit-linear-gradient(top, #E9E9E9, #EBEBEB); + background: -moz-linear-gradient(top, #E9E9E9, #EBEBEB); + background: -o-linear-gradient(top, #E9E9E9, #EBEBEB); + background: -ms-linear-gradient(top, #E9E9E9, #EBEBEB); + background: linear-gradient(top, #E9E9E9, #EBEBEB); +} +.ui.simple.vertical.pointing.panel li.active:after { + background: -webkit-linear-gradient(top, #F2F2F2, #ECECEC); + background: -moz-linear-gradient(top, #F2F2F2, #ECECEC); + background: -o-linear-gradient(top, #F2F2F2, #ECECEC); + background: -ms-linear-gradient(top, #F2F2F2, #ECECEC); + background: linear-gradient(top, #F2F2F2, #ECECEC); +} + + +/*------------------- + Alerts +--------------------*/ + +.ui.panel li .alert { + position: absolute; + top: -8px; + left: 75%; + + background-color: #EEEEEE; + padding: 3px 5px; + + background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + + border: 1px solid #E5E5E5; + + border-radius: 5px; + + -webkit-box-shadow: + 0px 1px 0px rgba(0, 0, 0, 0.3), + 0px 1px 0px rgba(255, 255, 255, 0.6) inset + ; + -moz-box-shadow: + 0px 1px 0px rgba(0, 0, 0, 0.3), + 0px 1px 0px rgba(255, 255, 255, 0.6) inset + ; + box-shadow: + 0px 1px 0px rgba(0, 0, 0, 0.3), + 0px 1px 0px rgba(255, 255, 255, 0.6) inset + ; + + font-size: 11px; + line-height: 1; + text-transform: uppercase; + color: #555555; + z-index: 100; +} + + +/*------------------- + Attached +--------------------*/ + +.attached.ui.panel { + margin: 0px; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} +.attached.ui.panel li:first-child { + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.attached.ui.panel li:last-child { + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} + +/* Bottom Side */ +.bottom.attached.ui.panel { + margin-top: -1px; + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.bottom.attached.ui.panel li:first-child { + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +.bottom.attached.ui.panel li:last-child { + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} + +/*------------------- + Vertical +--------------------*/ + +.vertical.ui.panel { + float: left; + width: 150px; + height: auto; +} +.vertical.ui.panel li { + float: none; + border-top: 1px solid #DDDDDD; + border-top: 1px solid rgba(0, 0, 0, 0.08); + padding: 12px 15px; +} +.vertical.ui.panel li:first-child { + border-top: 1px solid transparent; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} +.vertical.ui.panel li:last-child { + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.vertical.ui.panel li.down, +.vertical.ui.panel li.active { + border-top: 1px solid #CCCCCC; +} + +.vertical.fluid.ui.panel { + height: auto; +} +.bottom.attached.vertical.ui.panel li:first-child { + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; +} +.bottom.attached.vertical.ui.panel li:last-child { + -moz-border-radius: 0px 0px 4px 4px; + -webkit-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.attached.vertical.ui.panel li:first-child:last-child { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; +} + +/*------------------- + Simple +--------------------*/ +.simple.ui.panel { + background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + + border-color: #EDEDED #E6E6E6 #E6E6E6 #EDEDED; + border-color: rgba(0, 0, 0, 0.09) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.09); +} +.simple.ui.panel li { + background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -moz-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -o-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: -ms-linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); + background-image: linear-gradient(top , #FFFFFF 0px, #F6F6F6 100%); +} +.simple.ui.panel li.hover { + background-image: -webkit-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); + background-image: -moz-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); + background-image: -o-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); + background-image: -ms-linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); + background-image: linear-gradient(top , #FFFFFF 0px, #FCFCFC 100%); +} +.simple.ui.panel li.down, +.simple.ui.panel li.active { + background-image: -webkit-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); + background-image: -moz-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); + background-image: -o-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); + background-image: -ms-linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); + background-image: linear-gradient(top , #F2F2F2 0px, #ECECEC 100%); + + -webkit-box-shadow: + 0px 1px 3px rgba(0, 0, 0, 0.05) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset + ; + -moz-box-shadow: + 0px 1px 3px rgba(0, 0, 0, 0.05) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset + ; + box-shadow: + 0px 1px 3px rgba(0, 0, 0, 0.05) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset + ; +} + +.ui.simple.panel li.active, +.ui.simple.panel li.active.hover { + cursor: default; + color: #333333; +} +.ui.simple.panel li.active a, +.ui.simple.panel li.active.hover a { + color: #333333; +} + +.simple.vertical.ui.panel li.down, +.simple.vertical.ui.panel li.active { + border-top: 1px solid #DDDDDD; + border-left: none; + border-right: none; + border-bottom: none; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.panel.fluid { + width: 100%; + height: 43px; +} +.ui.panel.fluid, +.ui.panel.fluid li { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + text-align: center; +} +.ui.panel.fluid li { + padding-left: 0px !important; + padding-right: 0px !important; +} +.ui.panel.two.fluid li { + width: 50%; +} +.ui.panel.three.fluid li { + width: 33.333%; +} +.ui.panel.four.fluid li { + width: 25%; +} +.ui.panel.five.fluid li { + width: 20%; +} +.ui.panel.six.fluid li { + width: 16.666%; +} +.ui.panel.seven.fluid li { + width: 14.285%; +} +.ui.panel.eight.fluid li { + width: 12.500%; +} +.ui.panel.nine.fluid li { + width: 11.11%; +} +.ui.panel.ten.fluid li { + width: 10.0%; +} +.ui.panel.eleven.fluid li { + width: 9.09%; +} +.ui.panel.twelve.fluid li { + width: 8.333%; +} + +/*------------------- + Resizes +--------------------*/ + +.small.ui.panel { + height: 32px; + margin: 0px 0px 15px; +} +.small.fluid.ui.panel { + height: 34px; +} +.small.ui.panel li { + font-size: 12px; + font-weight: bold; + padding: 10px 25px; +} + +/* Small Vertical Panel */ +.small.vertical.ui.panel, +.small.vertical.ui.panel li { + height: auto; +} +.small.vertical.ui.panel li { + padding: 5px 9px; +} +.small.vertical.ui.panel li.down, +.small.vertical.ui.panel li.active { + border-top: 1px solid #CCCCCC; +} + +.large.ui.panel { + height: 47px; +} +.large.fluid.ui.panel { + height: 49px; +} +.large.ui.panel li { + font-size: 15px; + font-weight: bold; + padding: 16px 35px; +} + +/* Large Vertical Panel */ +.large.vertical.ui.panel, +.large.vertical.ui.panel li { + height: auto; +} +.large.vertical.ui.panel li { + padding: 15px 20px; +} +.large.vertical.ui.panel li.down, +.large.vertical.ui.panel li.active { + border-top: 1px solid #CCCCCC; +} + diff --git a/examples/ui/state.js b/examples/ui/state.js new file mode 100755 index 000000000..b94ecd64f --- /dev/null +++ b/examples/ui/state.js @@ -0,0 +1,594 @@ +/* ****************************** + Module + State + Change text based on state context + Hover/Pressed/Active/Inactive + Author: Jack Lukic + Last revision: May 2012 + + State text module is used to apply text to a given node + depending on the elements "state" + + State is either defined as "active" or "inactive" depending + on the returned value of a test function + + Usage: + + $button + .state({ + states: { + active: true + }, + text: { + inactive: 'Follow', + active : 'Following', + enable : 'Add', + disable : 'Remove' + } + }) + ; + + "Follow", turns to "Add" on hover, then "Following" on active + and finally "Remove" on active hover + + This plugin works in correlation to API module and will, by default, + use deffered object accept/reject to determine state. + +****************************** */ + +;(function ( $, window, document, undefined ) { + +$.fn.state = function(parameters) { + var + + $allModules = $(this), + + // make arguments available + query = arguments[0], + passedArguments = [].slice.call(arguments, 1), + invokedResponse + ; + $allModules + .each(function() { + var + $module = $(this), + + settings = $.extend(true, {}, $.fn.state.settings, parameters), + + selector = $module.selector || '', + element = this, + instance = $module.data('module-' + settings.namespace), + methodInvoked = (typeof query == 'string'), + + // shortcuts + namespace = settings.namespace, + metadata = settings.metadata, + className = settings.className, + states = settings.states, + text = settings.text, + + module + ; + module = { + + initialize: function() { + module.verbose('Initializing module for', element); + + // allow module to guess desired state based on element + if(settings.automatic) { + module.add.defaults(); + } + + // bind events with delegated events + if(settings.context && selector !== '') { + if( module.allows('hover') ) { + $(element, settings.context) + .on(selector, 'mouseenter.' + namespace, module.hover.enable) + .on(selector, 'mouseleave.' + namespace, module.hover.disable) + ; + } + if( module.allows('pressed') ) { + $(element, settings.context) + .on(selector, 'mousedown.' + namespace, module.pressed.enable) + .on(selector, 'mouseup.' + namespace, module.pressed.disable) + ; + } + if( module.allows('focus') ) { + $(element, settings.context) + .on(selector, 'focus.' + namespace, module.focus.enable) + .on(selector, 'blur.' + namespace, module.focus.disable) + ; + } + $(settings.context) + .on(selector, 'mouseover.' + namespace, module.text.change) + .on(selector, 'mouseout.' + namespace, module.text.reset) + .on(selector, 'click.' + namespace, module.toggle) + ; + + } + else { + if( module.allows('hover') ) { + $module + .on('mouseenter.' + namespace, module.hover.enable) + .on('mouseleave.' + namespace, module.hover.disable) + ; + } + if( module.allows('pressed') ) { + $module + .on('mousedown.' + namespace, module.pressed.enable) + .on('mouseup.' + namespace, module.pressed.disable) + ; + } + if( module.allows('focus') ) { + $module + .on('focus.' + namespace, module.focus.enable) + .on('blur.' + namespace, module.focus.disable) + ; + } + $module + .on('mouseover.' + namespace, module.text.change) + .on('mouseout.' + namespace, module.text.reset) + .on('click.' + namespace, module.toggle) + ; + } + $module + .data('module-' + namespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module for', element); + $module + .off('.' + namespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache for', element); + $module = $(element); + }, + + add: { + defaults: function() { + var + userStates = parameters && $.isPlainObject(parameters.states) + ? parameters.states + : {} + ; + $.each(settings.defaults, function(type, typeStates) { + if( module.is[type] !== undefined && module.is[type]() ) { + module.verbose('Adding default states for detected type:', type, element); + $.extend(settings.states, typeStates, userStates); + } + }); + } + }, + + is: { + + active: function() { + return $module.hasClass(className.active); + }, + loading: function() { + return $module.hasClass(className.loading); + }, + inactive: function() { + return !( $module.hasClass(className.active) ); + }, + + enabled: function() { + return !( $module.is(settings.filter.active) ); + }, + disabled: function() { + return ( $module.is(settings.filter.active) ); + }, + textEnabled: function() { + return !( $module.is(settings.filter.text) ); + }, + + // definitions for automatic type detection + button: function() { + return $module.is('.button:not(a, .submit)'); + }, + input: function() { + return $module.is('input'); + } + }, + + allows: function(state) { + return states[state] || false; + }, + enable: function(state) { + if(module.allows(state)) { + $module.addClass( className[state] ); + } + }, + disable: function(state) { + if(module.allows(state)) { + $module.removeClass( className[state] ); + } + }, + textFor: function(state) { + return text[state] || false; + }, + + focus : { + enable: function() { + $module.addClass(className.focus); + }, + disable: function() { + $module.removeClass(className.focus); + } + }, + + hover : { + enable: function() { + $module.addClass(className.hover); + }, + disable: function() { + $module.removeClass(className.hover); + } + }, + + pressed : { + enable: function() { + $module + .addClass(className.pressed) + .one('mouseleave', module.pressed.disable) + ; + }, + disable: function() { + $module.removeClass(className.pressed); + } + }, + + // determines method for state activation + toggle: function() { + var + apiRequest = $module.data(metadata.promise) + ; + if( module.allows('active') && module.is.enabled() ) { + module.refresh(); + if(apiRequest !== undefined) { + module.listenTo(apiRequest); + } + else { + module.change(); + } + } + }, + + listenTo: function(apiRequest) { + module.debug('API request detected, waiting for state signal'); + if(apiRequest) { + if(text.loading) { + module.text.update(text.loading); + } + $.when(apiRequest) + .then(function() { + if(apiRequest.state() == 'resolved') { + module.debug('API request succeeded'); + settings.activateTest = function(){ return true; }; + settings.deactivateTest = function(){ return true; }; + } + else { + module.debug('API request failed'); + settings.activateTest = function(){ return false; }; + settings.deactivateTest = function(){ return false; }; + } + module.change(); + }) + ; + } + // xhr exists but set to false, beforeSend killed the xhr + else { + settings.activateTest = function(){ return false; }; + settings.deactivateTest = function(){ return false; }; + } + }, + + // checks whether active/inactive state can be given + change: function() { + module.debug('Determining state change direction'); + // inactive to active change + if( module.is.inactive() ) { + module.activate(); + } + else { + module.deactivate(); + } + if(settings.sync) { + module.sync(); + } + settings.onChange(); + }, + + activate: function() { + if( $.proxy(settings.activateTest, element)() ) { + module.debug('Setting state to active'); + $module + .addClass(className.active) + ; + module.text.update(text.active); + } + }, + + deactivate: function() { + if($.proxy(settings.deactivateTest, element)() ) { + module.debug('Setting state to inactive'); + $module + .removeClass(className.active) + ; + module.text.update(text.inactive); + } + }, + + sync: function() { + module.verbose('Syncing other buttons to current state'); + if( module.is.active() ) { + $allModules + .not($module) + .state('activate'); + } + else { + $allModules + .not($module) + .state('deactivate') + ; + } + }, + + text: { + + // finds text node to update + get: function() { + return (settings.textFilter) + ? $module.find(settings.textFilter).text() + : $module.html() + ; + }, + + change: function() { + if( module.is.textEnabled() ) { + if( module.is.active() ) { + if(text.hover) { + module.verbose('Changing text to hover text', text.hover); + module.text.update(text.hover); + } + else if(text.disable) { + module.verbose('Changing text to disable text', text.disable); + module.text.update(text.disable); + } + } + else { + if(text.hover) { + module.verbose('Changing text to hover text', text.disable); + module.text.update(text.hover); + } + else if(text.enable){ + module.verbose('Changing text to enable text', text.disable); + module.text.update(text.enable); + } + } + } + }, + + // on mouseout sets text to previous value + reset : function() { + var + activeText = text.active || $module.data(metadata.storedText), + inactiveText = text.inactive || $module.data(metadata.storedText) + ; + if( module.is.textEnabled() ) { + if( module.is.active() && activeText) { + module.verbose('Resetting active text', activeText); + module.text.update(activeText); + } + else if(inactiveText) { + module.verbose('Resetting inactive text', activeText); + module.text.update(inactiveText); + } + } + }, + + update: function(text) { + var + currentText = module.text.get() + ; + if(text && text !== currentText) { + module.debug('Updating text to', text); + if(settings.textFilter) { + $module + .data(metadata.storedText, text) + .find(settings.textFilter) + .text(text) + ; + } + else { + $module + .data(metadata.storedText, text) + .html(text) + ; + } + } + } + }, + /* standard module */ + setting: function(name, value) { + if(value === undefined) { + return settings[name]; + } + settings[name] = value; + }, + verbose: function() { + if(settings.verbose) { + module.debug.apply(this, arguments); + } + }, + debug: function() { + var + output = [], + message = settings.moduleName + ': ' + arguments[0], + variables = [].slice.call( arguments, 1 ), + log = console.info || console.log || function(){} + ; + log = Function.prototype.bind.call(log, console); + if(settings.debug) { + output.push(message); + log.apply(console, output.concat(variables) ); + } + }, + error: function() { + var + output = [], + errorMessage = settings.moduleName + ': ' + arguments[0], + variables = [].slice.call( arguments, 1 ), + log = console.warn || console.log || function(){} + ; + log = Function.prototype.bind.call(log, console); + if(settings.debug) { + output.push(errorMessage); + output.concat(variables); + log.apply(console, output.concat(variables) ); + } + }, + invoke: function(query, context, passedArguments) { + var + maxDepth, + found + ; + passedArguments = passedArguments || [].slice.call( arguments, 2 ); + if(typeof query == 'string' && instance !== undefined) { + query = query.split('.'); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { + instance = instance[value]; + return true; + } + else if( instance[value] !== undefined ) { + found = instance[value]; + return true; + } + module.error(settings.errors.method); + return false; + }); + } + if ( $.isFunction( found ) ) { + return found.apply(context, passedArguments); + } + // return retrieved variable or chain + return found; + } + }; + + // check for invoking internal method + if(methodInvoked) { + invokedResponse = module.invoke(query, this, passedArguments); + } + // otherwise initialize + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + }) + ; + // chain or return queried method + return (invokedResponse !== undefined) + ? invokedResponse + : this + ; +}; + +$.fn.state.settings = { + + // module info + moduleName : 'State Module', + + // debug output + debug : true, + // verbose debug output + verbose : false, + + namespace : 'state', + + // callback occurs on state change + onChange: function() {}, + + // state test functions + activateTest : function() { return true; }, + deactivateTest : function() { return true; }, + + // whether to automatically map default states + automatic: true, + // activate / deactivate changes all elements instantiated at same time + sync: false, + + // selector filter + filter : { + text : '.loading, .disabled', + active : '.disabled' + }, + + textFilter : false, + context : false, + // errors + errors: { + method : 'The method you called is not defined.' + }, + + // metadata + metadata: { + promise : 'promise', + storedText : 'stored-text' + }, + + // change class on state + className: { + focus : 'focus', + hover : 'hover', + pressed : 'down', + active : 'active', + loading : 'loading' + }, + + defaults : { + input: { + hover : true, + focus : true, + pressed : true, + loading : false, + active : false + }, + button: { + hover : true, + focus : false, + pressed : true, + active : false, + loading : true + } + }, + + states : { + hover : true, + focus : true, + pressed : true, + loading : false, + active : false + }, + + text : { + hover : false, + active : false, + inactive : false, + enable : false, + disable : false + } + +}; + + + +})( jQuery, window , document ); diff --git a/src/origami.css b/src/shape.css similarity index 59% rename from src/origami.css rename to src/shape.css index 72f3f9c5f..14d40832b 100755 --- a/src/origami.css +++ b/src/shape.css @@ -1,8 +1,8 @@ /******************************* - Origami Module + shape Module *******************************/ -.origami.module { +.shape.module { position: relative; -webkit-perspective: 2000px; @@ -11,72 +11,48 @@ perspective: 2000px; } -.origami.module .box { +.shape.module .shape { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } -.origami.module .side { - display: none; +.shape.module .side { opacity: 1; width: 100%; - background-color: #FFFFFF; - - -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } -/* Handle (Stubbed as image will fix) */ -.origami.module .handle { - cursor: pointer; - position: absolute; - bottom: -28px; - right: 50%; - - margin-left: -22px; - width: 44px; - height: 44px; - background: url(/images/modules/origami-handle.png) no-repeat 0px 0px; -} -.origami.module .down.handle { - background-position: 0px -50px; -} - - /*--------------- States ----------------*/ +/* Standard */ +.shape.module .side { + display: none; +} + /* Animating */ -.origami.module.animating .box { +.shape.module.animating .shape { position: absolute; } -.origami.module .animating.side { +.shape.module .animating.side { position: absolute; width: 100%; top: 0px; left: 0px; z-index: 100; } -.origami.module .hidden.side { +.shape.module .hidden.side { opacity: 0.5; } -/* Animate using CSS */ -.origami.css.module { +/* css animation */ +.shape.css.module { -webkit-transition: all 0.5s ease-in-out; ; @@ -93,14 +69,14 @@ all 0.5s ease-in-out; ; } -.origami.css.module .box { +.shape.css.module .shape { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } -.origami.css.module .side { +.shape.css.module .side { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; @@ -109,6 +85,6 @@ } /* Active */ -.origami.module .active.side { +.shape.module .active.side { display: block; } \ No newline at end of file diff --git a/src/origami.js b/src/shape.js similarity index 84% rename from src/origami.js rename to src/shape.js index 80e753fc9..47676e8b2 100755 --- a/src/origami.js +++ b/src/shape.js @@ -1,31 +1,21 @@ -/* ****************************** - Module - Origami - Author: Jack Lukic - Created: Mar 28, 2013 - Last revision: Mar 2013 +/* ******************************************************************************************* - Creates a cube which can be rotated + Shape - A 3D Animation Plugin + Version 0.1 + (built using Semantic module spec) - Usage: + Author : Jack Lukic + Last revision : April 2013 - $origami - .origami() - ; - - $origami - .origami('flip.up') - ; - -****************************** */ +********************************************************************************************* */ ;(function ( $, window, document, undefined ) { -$.fn.origami = function(parameters) { +$.fn.shape = function(parameters) { var $allModules = $(this), - settings = $.extend(true, {}, $.fn.origami.settings, parameters), + settings = $.extend(true, {}, $.fn.shape.settings, parameters), // make arguments available query = arguments[0], passedArguments = [].slice.call(arguments, 1), @@ -35,28 +25,29 @@ $.fn.origami = function(parameters) { .each(function() { var // selector cache - $module = $(this), - $box = $module.find(settings.selector.box), - $side = $module.find(settings.selector.side), - + $module = $(this), + $shape = $module.find(settings.selector.shape), + $side = $module.find(settings.selector.side), + $activeSide, $nextSide, - - // private variables - selector = $module.selector || '', - element = this, - instance = $module.data('module-' + settings.namespace), - methodInvoked = (typeof query == 'string'), - - endTransition = 'transitionend msTransitionEnd oTransitionEnd', - - // shortcuts - namespace = settings.namespace, - metadata = settings.metadata, - className = settings.className, + + selector = $module.selector || '', + element = this, + instance = $module.data('module-' + settings.namespace), + methodInvoked = (typeof query == 'string'), + + // private + endTransition = 'transitionend msTransitionEnd oTransitionEnd', + + // internal aliases + namespace = settings.namespace, + metadata = settings.metadata, + className = settings.className, module ; + module = { initialize: function() { @@ -77,13 +68,14 @@ $.fn.origami = function(parameters) { refresh: function() { module.verbose('Refreshing selector cache for', element); $module = $(element); - $box = $(this).find(settings.selector.box); + $shape = $(this).find(settings.selector.shape); $side = $(this).find(settings.selector.side); }, repaint: function() { + module.verbose('Forcing repaint event'); var - fakeAssignment = $module.get(0).offsetWidth + fakeAssignment = $shape.get(0).offsetWidth ; }, @@ -93,9 +85,10 @@ $.fn.origami = function(parameters) { callback = function() { module.reset(); module.set.active(); + $.proxy(settings.onChange, $nextSide)(); } ; - if(settings.useCSS) { + if(settings.useCSS || 1) { module.verbose('Using CSS transitions to animate'); $module .addClass(className.animating) @@ -108,7 +101,7 @@ $.fn.origami = function(parameters) { $activeSide .addClass(className.hidden) ; - $box + $shape .css(propertyObject) .one(endTransition, callback) ; @@ -127,7 +120,7 @@ $.fn.origami = function(parameters) { opacity: 0 }, settings.duration, settings.easing) ; - $box + $shape .animate(propertyObject, settings.duration, settings.easing, callback) ; } @@ -140,7 +133,7 @@ $.fn.origami = function(parameters) { .removeClass(className.animating) .removeAttr('style') ; - $box + $shape .removeAttr('style') ; $side @@ -153,6 +146,17 @@ $.fn.origami = function(parameters) { ; }, + get: { + + nextSide: function() { + return ( $activeSide.next(settings.selector.side).size() > 0 ) + ? $activeSide.next(settings.selector.side) + : $module.find(settings.selector.side).first() + ; + } + + }, + set: { defaultSide: function() { @@ -166,10 +170,17 @@ $.fn.origami = function(parameters) { }, stageSize: function() { - $module - .css({ + var + stage = { width : $nextSide.outerWidth(), height : $nextSide.outerHeight() + } + ; + module.verbose('Resizing stage to fit new content', stage); + $module + .css({ + width : stage.width, + height : stage.height }) ; }, @@ -455,34 +466,38 @@ $.fn.origami = function(parameters) { ; }; -$.fn.origami.settings = { +$.fn.shape.settings = { // module info - moduleName : 'Origami Module', - - // debug output + moduleName : 'Shape Module', + + // debug content outputted to console debug : true, + // verbose debug output verbose : true, - namespace : 'origami', + // event namespace + namespace : 'shape', // callback occurs on side change - onChange : function() {}, + beforeChange : function() {}, + onChange : function() {}, + // use css animation (currently only true is supported) useCSS : true, + + // animation duration (useful only with future js animations) duration : 1000, easing : 'easeInOutQuad', + // possible errors errors: { - api : 'You tried to switch to a side that does not exist.', - method : 'The method you called is not defined' - }, - - metadata : { - + side : 'You tried to switch to a side that does not exist.', + method : 'The method you called is not defined' }, + // classnames used className : { css : 'css', animating : 'animating', @@ -490,13 +505,13 @@ $.fn.origami.settings = { active : 'active' }, + // selectors used selector : { - box : '.box', - side : '.side' + shape : '.shape', + side : '.side' } }; - })( jQuery, window , document );