cimma 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. data/lib/cimma.rb +4 -0
  2. data/stylesheets/_cimma.scss +6 -0
  3. data/stylesheets/cimma/_baseline.scss +5 -0
  4. data/stylesheets/cimma/_util.scss +4 -0
  5. data/stylesheets/cimma/baseline/_core.scss +5 -0
  6. data/stylesheets/cimma/baseline/_forms.scss +2 -0
  7. data/stylesheets/cimma/baseline/_html5.scss +1 -0
  8. data/stylesheets/cimma/baseline/_lists.scss +1 -0
  9. data/stylesheets/cimma/baseline/_tables.scss +2 -0
  10. data/stylesheets/cimma/baseline/_typography.scss +4 -0
  11. data/stylesheets/cimma/baseline/forms/_core.scss +141 -0
  12. data/stylesheets/cimma/baseline/forms/_status-backgrounds.scss +20 -0
  13. data/stylesheets/cimma/baseline/html5/_core.scss +25 -0
  14. data/stylesheets/cimma/baseline/lists/_core.scss +11 -0
  15. data/stylesheets/cimma/baseline/tables/_adaptive.scss +83 -0
  16. data/stylesheets/cimma/baseline/tables/_core.scss +52 -0
  17. data/stylesheets/cimma/baseline/tables/_extra-wide.scss +9 -0
  18. data/stylesheets/cimma/baseline/typography/_annotations.scss +44 -0
  19. data/stylesheets/cimma/baseline/typography/_core.scss +51 -0
  20. data/stylesheets/cimma/baseline/typography/_headlines.scss +30 -0
  21. data/stylesheets/cimma/baseline/typography/_quotes.scss +17 -0
  22. data/stylesheets/cimma/misc/_effects.scss +32 -0
  23. data/stylesheets/cimma/widgets/_buttons.scss +196 -0
  24. data/stylesheets/cimma/widgets/_dialog-boxes.scss +129 -0
  25. data/stylesheets/cimma/widgets/_dialog-boxes2.scss +238 -0
  26. data/stylesheets/cimma/widgets/_dialog.scss +85 -0
  27. data/stylesheets/cimma/widgets/_font-awesome.scss +264 -0
  28. data/stylesheets/cimma/widgets/_test.scss +31 -0
  29. data/templates/dialog-boxes/example.scss +42 -0
  30. data/templates/dialog-boxes/example2.scss +29 -0
  31. data/templates/dialog-boxes/images/old/dialog-error.png +0 -0
  32. data/templates/dialog-boxes/images/old/dialog-info.png +0 -0
  33. data/templates/dialog-boxes/images/old/dialog-success.png +0 -0
  34. data/templates/dialog-boxes/images/old/dialog-validation.png +0 -0
  35. data/templates/dialog-boxes/images/old/dialog-warning.png +0 -0
  36. data/templates/dialog-boxes/images/spritemap - 1pt.svg +76 -0
  37. data/templates/dialog-boxes/images/spritemap.png +0 -0
  38. data/templates/dialog-boxes/images/spritemap.svg +73 -0
  39. data/templates/dialog-boxes/manifest.rb +7 -0
  40. data/templates/drop-menu/drop-menu.js +124 -0
  41. data/templates/drop-menu/manifest.rb +7 -0
  42. data/templates/forms/images/spritemap - Copy.svg +66 -0
  43. data/templates/forms/images/spritemap.svg +104 -0
  44. data/templates/forms/manifest.rb +7 -0
  45. data/templates/project/_cimma.scss +3 -0
  46. data/templates/project/_variables.scss +24 -0
  47. data/templates/project/manifest.rb +13 -0
  48. metadata +140 -0
@@ -0,0 +1,31 @@
1
+ @mixin sassy-button-text-style($base-color, $second-color, $text-color, $text-style: "inset") {
2
+ $text-lightness: lightness($text-color);
3
+ $text-color-shift: 0;
4
+ $diff: lightness($base-color) - lightness($second-color);
5
+ @if $diff > 40 {
6
+ $text-color-shift: 35 + $diff / 10;
7
+ }
8
+ @else if $diff > 18 {
9
+ $text-color-shift: 30 + $diff / 10;
10
+ }
11
+ @else {
12
+ $text-color-shift: 25 + $diff / 10;
13
+ }
14
+ color: $text-color;
15
+ @if $text-style == "inset" {
16
+ @if $text-lightness < 50 {
17
+ @include text-shadow(lighten($second-color, $text-color-shift / 1.5) 0 1px 0);
18
+ }
19
+ @else {
20
+ @include text-shadow(darken($base-color, $text-color-shift) 0 -1px 0);
21
+ }
22
+ }
23
+ @if $text-style == "raised" {
24
+ @if $text-lightness < 50 {
25
+ @include text-shadow(lighten($second-color, $text-color-shift / 1.5) 0 -1px 0);
26
+ }
27
+ @else {
28
+ @include text-shadow(darken($base-color, $text-color-shift) 0 1px 0);
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,42 @@
1
+ @import "cimma/widgets/dialog-boxes";
2
+
3
+ // ---------- Color/image definitions
4
+ $dialog-namespace: d;
5
+ $dialog-icon-width: 24px;
6
+ $dialog-icon-height: 24px;
7
+ $dialog-padding: 1em;
8
+ $dialog-border: 2px solid;
9
+ $dialog-fc-multiplier: 1.4;
10
+
11
+ // class name | color | bg-color | image
12
+ $dialog-attributes:
13
+ ( help #2E3192 #B9C2E1 // yellow
14
+ , info #005FB4 #BDE5F8 // blue
15
+ , success #6F7D03 #DFE5B0 // green
16
+ , warning #A0410D #EFBBA0 // orange
17
+ , error #C41616 #F8AAAA // red
18
+ );
19
+
20
+ @include dialog-box((image-url("cimma/dialog-boxes/spritemap.svg"), image-url("cimma/dialog-boxes/spritemap.png"))) {
21
+ @include border-radius(.5em);
22
+ margin: 1em 0 0 0;
23
+ padding: 1em;
24
+
25
+ &:first-child {
26
+ margin-top: 0;
27
+ }
28
+ }
29
+
30
+ aside.dialog {
31
+ @extend div.dialog;
32
+ @extend %dialog-colors;
33
+ }
34
+
35
+ ol.dialog {
36
+ @extend ul.dialog;
37
+ @extend %dialog-colors;
38
+ }
39
+
40
+ tr {
41
+ @extend %dialog-colors;
42
+ }
@@ -0,0 +1,29 @@
1
+ @import "cimma/widgets/dialog-boxes2";
2
+
3
+ // ---------- Color/image definitions
4
+ $dialog-namespace: d;
5
+ $dialog-icon-width: 24px;
6
+ $dialog-icon-height: 24px;
7
+ $dialog-padding: 1em;
8
+ $dialog-border: 2px solid;
9
+ $dialog-fc-multiplier: 1.4;
10
+
11
+ // class name | color | bg-color | image
12
+ $dialog-attributes:
13
+ ( help #2E3192 #B9C2E1 url(icons/dialog-help.png) // yellow
14
+ , info #005FB4 #BDE5F8 url(icons/dialog-info.png) // blue
15
+ , success #6F7D03 #DFE5B0 url(icons/dialog-success.png) // green
16
+ , warning #A0410D #EFBBA0 url(icons/dialog-warning.png) // orange
17
+ , error #C41616 #F8AAAA url(icons/dialog-error.png) // red
18
+ );
19
+
20
+ @include dialog-box-sprite((image-url("cimma/dialog-boxes/spritemap.svg"), image-url("cimma/dialog-boxes/spritemap.png"))) {
21
+ border: 2px solid;
22
+ }
23
+
24
+ @include dialog-box-simple((ul, ol)) {
25
+ padding: 1em 1em 1em 3em;
26
+ border: 2px solid;
27
+ }
28
+
29
+ @include dialog-box-simple((tr));
@@ -0,0 +1,76 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1"
5
+ id="svg2" inkscape:version="0.48.2 r9819" sodipodi:docname="spritemap.svg" inkscape:export-ydpi="43.200001" inkscape:export-xdpi="43.200001" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" inkscape:export-filename="Z:\compass-extensions\css\icons\spritemap.png"
6
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="50px"
7
+ viewBox="0 0 250 50" enable-background="new 0 0 250 50" xml:space="preserve">
8
+ <metadata
9
+ id="metadata84">
10
+ <rdf:RDF>
11
+ <cc:Work rdf:about="">
12
+ <dc:format>image/svg+xml</dc:format>
13
+ <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
14
+ <dc:title />
15
+ </cc:Work>
16
+ </rdf:RDF>
17
+ </metadata>
18
+ <defs id="gradients">
19
+ <linearGradient id="helpGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
20
+ <stop offset="0" style="stop-color:#FFFFFF" />
21
+ <stop offset="1" style="stop-color:#2E3192" />
22
+ </linearGradient>
23
+ <linearGradient id="infoGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
24
+ <stop offset="0" style="stop-color:#FFFFFF" />
25
+ <stop offset="1" style="stop-color:#005FB4" />
26
+ </linearGradient>
27
+ <linearGradient id="successGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
28
+ <stop offset="0" style="stop-color:#FFFFFF" />
29
+ <stop offset="1" style="stop-color:#6F7D03" />
30
+ </linearGradient>
31
+ <linearGradient id="warningGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
32
+ <stop offset="0" style="stop-color:#FFFFFF" />
33
+ <stop offset="1" style="stop-color:#A0410D" />
34
+ </linearGradient>
35
+ <linearGradient id="errorGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
36
+ <stop offset="0" style="stop-color:#FFFFFF" />
37
+ <stop offset="1" style="stop-color:#C41616" />
38
+ </linearGradient>
39
+ </defs>
40
+ <g id="help">
41
+ <circle fill="#2E3192" cx="25" cy="25" r="25"/>
42
+ <circle fill="url(#helpGradient)" cx="25" cy="25" r="24"/>
43
+ <g id="question mark" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
44
+ <path fill="#FFFFFF" stroke="#2E3192" d="M12.834,32.324c0,0-0.049-1.724,0-3.277 c0.117-3.719,0.383-5.331,4.269-8.368c4.028-2.94,4.919-4.259,5.325-6.792c1.262-7.88-11.948-7.655-11.143-2.207 c0.459,3.106-1.642,4.166-3.749,4.246c-2.793,0.105-4.518-2.554-3.778-5.314c0.927-3.456,6.477-6.202,9.683-6.719 c6.635-0.83,11.916,1.006,14.862,4.297c4.095,4.575,3.216,12.189-5.49,15.298c-2.636,0.941-4.682,2.587-4.796,5.884 c-0.039,1.148-0.075,2.954-0.075,2.954H12.834L12.834,32.324z"/>
45
+ <circle fill="#FFFFFF" stroke="#2E3192" cx="15.317" cy="40.899" r="3.861"/>
46
+ </g>
47
+ </g>
48
+ <g id="info">
49
+ <circle fill="#005DB4" cx="75" cy="25" r="25"/>
50
+ <circle fill="url(#infoGradient)" cx="75" cy="25" r="24"/>
51
+ <g id="i" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
52
+ <path fill="#FFFFFF" stroke="#005DB4" d="M71.508,34.413c-0.006,0.861-0.036,1.585-0.036,2.58c0,0.699-0.026,2.093-1.013,2.093c-0.855,0-2.566,0-2.566,0 c-0.178-0.002-0.318,0.032-0.423,0.102c-0.104,0.066-0.158,0.189-0.161,0.362v2.849c0.002,0.23,0.043,0.385,0.124,0.467 c0.081,0.083,0.196,0.123,0.343,0.117c0.357-0.008,1.072-0.035,2.144-0.089c1.072-0.05,2.457-0.082,4.156-0.089
53
+ c1.975,0.007,3.581,0.035,4.819,0.089c1.238,0.05,1.984,0.081,2.238,0.089c0.173-0.001,0.294-0.057,0.364-0.163 c0.071-0.1,0.104-0.245,0.102-0.421v-2.906c0.005-0.145-0.034-0.248-0.117-0.312c-0.083-0.066-0.238-0.098-0.466-0.096 c0,0-1.555,0-2.333,0c-0.919,0-1.035-1.118-1.035-1.713c0-1.041-0.012-2.052-0.015-3.077c-0.005-2.102,0-6.299,0-6.299 c-0.002-2.455,0.003-4.53,0.015-6.222c0.012-1.69,0.046-2.783,0.102-3.286c0.049-0.465-0.107-0.699-0.466-0.699
54
+ c-0.35,0-0.816,0.116-1.4,0.351c-0.391,0.157-1.132,0.433-2.225,0.829c-1.093,0.396-2.175,0.79-3.249,1.18 c-1.073,0.389-1.776,0.656-2.108,0.79c-0.145,0.057-0.249,0.121-0.314,0.19c-0.064,0.069-0.096,0.163-0.095,0.277v0.642 c-0.009,0.116,0.023,0.219,0.095,0.305c0.072,0.088,0.235,0.162,0.489,0.219c1.3,0.348,2.141,0.82,2.523,1.414 c0.381,0.597,0.552,1.33,0.51,2.202C71.508,26.189,71.527,31.672,71.508,34.413L71.508,34.413z"/>
55
+ <circle fill="#FFFFFF" stroke="#005DB4" cx="73.972" cy="8.56" r="3.734"/>
56
+ </g>
57
+ </g>
58
+ <g id="success">
59
+ <circle fill="#6F7D03" cx="125" cy="25" r="25"/>
60
+ <circle fill="url(#successGradient)" cx="125" cy="25" r="24"/>
61
+ <path id="Checkmark" fill="#FFFFFF" stroke="#6F7D03" d="M119.596,39.592 c-0.192-0.268-1.313-1.361-2.488-2.428c-3.153-2.863-5.662-4.428-9.899-6.174l-0.77-0.316l1.442-1.534 c0.793-0.843,1.924-2.114,2.513-2.825l1.072-1.291l1.675,1.083c1.771,1.146,3.819,3.056,5.594,5.222l1.073,1.309l1.705-3.053 c4.622-8.272,9.994-15.314,14.103-18.483l1.462-1.127l1.543,1.546c0.85,0.851,2.309,2.125,3.242,2.833l1.697,1.286l-1.307,0.663 c-3.444,1.745-9.368,7.069-13.771,12.378c-2.054,2.477-5.974,7.856-7.378,10.125C120.229,40.225,120.099,40.291,119.596,39.592 L119.596,39.592L119.596,39.592z"/>
62
+ </g>
63
+ <g id="warning">
64
+ <path fill="#A0410D" d="M174.998,2.938c-0.969,0-1.938,0.638-2.674,1.911 l-21.697,37.583c-1.471,2.547-0.268,4.631,2.675,4.631h43.396c2.942,0,4.146-2.084,2.675-4.631l-21.7-37.583 C176.938,3.574,175.969,2.938,174.998,2.938L174.998,2.938z"/>
65
+ <path fill="url(#warningGradient)" d="M174.998,3.937L174.998,3.937 c0.633,0,1.291,0.515,1.809,1.412l21.701,37.583c0.518,0.896,0.635,1.726,0.318,2.271c-0.316,0.547-1.092,0.859-2.127,0.859 h-43.396c-1.035,0-1.811-0.313-2.126-0.859s-0.2-1.375,0.317-2.271l21.697-37.583C173.707,4.452,174.367,3.937,174.998,3.937"/>
66
+ <g id="exclaimation mark" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
67
+ <path fill="#FFFFFF" stroke="#A0410D" d="M191.056,9.614c1.432,0,4.907,0.276,4.907,3.052c0,2.805-2.922,17.866-3.335,20.1h-1.571 h-1.57c-0.413-2.234-3.335-17.295-3.335-20.1C186.149,9.89,189.624,9.614,191.056,9.614z"/>
68
+ <path fill="#FFFFFF" stroke="#A0410D" d="M195.32,40.336c0,5.436-8.528,5.436-8.528,0C186.793,34.836,195.32,34.839,195.32,40.336"/>
69
+ </g>
70
+ </g>
71
+ <g id="error">
72
+ <circle fill="#C41616" cx="225" cy="25" r="25"/>
73
+ <circle fill="url(#errorGradient)" cx="225" cy="25" r="24"/>
74
+ <polygon id="x" fill="#FFFFFF" stroke="#C41616" points="224.999,29.758 235.233,39.991 239.991,35.234 229.757,25 239.991,14.765 235.233,10.009 224.999,20.242 214.766,10.009 210.009,14.765 220.242,25 210.009,35.234 214.766,39.991"/>
75
+ </g>
76
+ </svg>
@@ -0,0 +1,73 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg
5
+ width="250"
6
+ height="50"
7
+ version="1.1"
8
+ xmlns="http://www.w3.org/2000/svg">
9
+ <defs id="gradients">
10
+ <linearGradient id="helpGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
11
+ <stop offset="0" style="stop-color:#FFFFFF" />
12
+ <stop offset="1" style="stop-color:#2E3192" />
13
+ </linearGradient>
14
+ <linearGradient id="infoGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
15
+ <stop offset="0" style="stop-color:#FFFFFF" />
16
+ <stop offset="1" style="stop-color:#005FB4" />
17
+ </linearGradient>
18
+ <linearGradient id="successGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
19
+ <stop offset="0" style="stop-color:#FFFFFF" />
20
+ <stop offset="1" style="stop-color:#6F7D03" />
21
+ </linearGradient>
22
+ <linearGradient id="warningGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
23
+ <stop offset="0" style="stop-color:#FFFFFF" />
24
+ <stop offset="1" style="stop-color:#A0410D" />
25
+ </linearGradient>
26
+ <linearGradient id="errorGradient" x1="0" y1="0" x2="0" y2="150%" gradientUnits="userSpaceOnUse">
27
+ <stop offset="0" style="stop-color:#FFFFFF" />
28
+ <stop offset="1" style="stop-color:#C41616" />
29
+ </linearGradient>
30
+ </defs>
31
+ <g id="help">
32
+ <circle fill="#2E3192" cx="25" cy="25" r="25"/>
33
+ <circle fill="url(#helpGradient)" cx="25" cy="25" r="23"/>
34
+ <g id="question mark" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
35
+ <path fill="#FFFFFF" stroke="#2E3192" stroke-width="2" d="M12.834,32.324c0,0-0.049-1.724,0-3.277 c0.117-3.719,0.383-5.331,4.269-8.368c4.028-2.94,4.919-4.259,5.325-6.792c1.262-7.88-11.948-7.655-11.143-2.207 c0.459,3.106-1.642,4.166-3.749,4.246c-2.793,0.105-4.518-2.554-3.778-5.314c0.927-3.456,6.477-6.202,9.683-6.719 c6.635-0.83,11.916,1.006,14.862,4.297c4.095,4.575,3.216,12.189-5.49,15.298c-2.636,0.941-4.682,2.587-4.796,5.884 c-0.039,1.148-0.075,2.954-0.075,2.954H12.834L12.834,32.324z"/>
36
+ <circle fill="#FFFFFF" stroke="#2E3192" stroke-width="2" cx="15.317" cy="40.899" r="3.861"/>
37
+ </g>
38
+ </g>
39
+ <g id="info">
40
+ <circle fill="#005DB4" cx="75" cy="25" r="25"/>
41
+ <circle fill="url(#infoGradient)" cx="75" cy="25" r="23"/>
42
+ <g id="i" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
43
+ <path fill="#FFFFFF" stroke="#005DB4" stroke-width="2" d="M71.508,34.413c-0.006,0.861-0.036,1.585-0.036,2.58c0,0.699-0.026,2.093-1.013,2.093c-0.855,0-2.566,0-2.566,0 c-0.178-0.002-0.318,0.032-0.423,0.102c-0.104,0.066-0.158,0.189-0.161,0.362v2.849c0.002,0.23,0.043,0.385,0.124,0.467 c0.081,0.083,0.196,0.123,0.343,0.117c0.357-0.008,1.072-0.035,2.144-0.089c1.072-0.05,2.457-0.082,4.156-0.089
44
+ c1.975,0.007,3.581,0.035,4.819,0.089c1.238,0.05,1.984,0.081,2.238,0.089c0.173-0.001,0.294-0.057,0.364-0.163 c0.071-0.1,0.104-0.245,0.102-0.421v-2.906c0.005-0.145-0.034-0.248-0.117-0.312c-0.083-0.066-0.238-0.098-0.466-0.096 c0,0-1.555,0-2.333,0c-0.919,0-1.035-1.118-1.035-1.713c0-1.041-0.012-2.052-0.015-3.077c-0.005-2.102,0-6.299,0-6.299 c-0.002-2.455,0.003-4.53,0.015-6.222c0.012-1.69,0.046-2.783,0.102-3.286c0.049-0.465-0.107-0.699-0.466-0.699
45
+ c-0.35,0-0.816,0.116-1.4,0.351c-0.391,0.157-1.132,0.433-2.225,0.829c-1.093,0.396-2.175,0.79-3.249,1.18 c-1.073,0.389-1.776,0.656-2.108,0.79c-0.145,0.057-0.249,0.121-0.314,0.19c-0.064,0.069-0.096,0.163-0.095,0.277v0.642 c-0.009,0.116,0.023,0.219,0.095,0.305c0.072,0.088,0.235,0.162,0.489,0.219c1.3,0.348,2.141,0.82,2.523,1.414 c0.381,0.597,0.552,1.33,0.51,2.202C71.508,26.189,71.527,31.672,71.508,34.413L71.508,34.413z"/>
46
+ <circle fill="#FFFFFF" stroke="#005DB4" stroke-width="2" cx="73.972" cy="8.56" r="3.734"/>
47
+ </g>
48
+ </g>
49
+ <g id="success">
50
+ <circle fill="#6F7D03" cx="125" cy="25" r="25"/>
51
+ <circle fill="url(#successGradient)" cx="125" cy="25" r="23"/>
52
+ <path id="Checkmark" fill="#FFFFFF" stroke="#6F7D03" stroke-width="2" d="M119.596,39.592 c-0.192-0.268-1.313-1.361-2.488-2.428c-3.153-2.863-5.662-4.428-9.899-6.174l-0.77-0.316l1.442-1.534 c0.793-0.843,1.924-2.114,2.513-2.825l1.072-1.291l1.675,1.083c1.771,1.146,3.819,3.056,5.594,5.222l1.073,1.309l1.705-3.053 c4.622-8.272,9.994-15.314,14.103-18.483l1.462-1.127l1.543,1.546c0.85,0.851,2.309,2.125,3.242,2.833l1.697,1.286l-1.307,0.663 c-3.444,1.745-9.368,7.069-13.771,12.378c-2.054,2.477-5.974,7.856-7.378,10.125C120.229,40.225,120.099,40.291,119.596,39.592 L119.596,39.592L119.596,39.592z"/>
53
+ </g>
54
+ <g id="warning">
55
+ <path fill="#A0410D" d="M174.998,2.938c-0.969,0-1.938,0.638-2.674,1.911 l-21.697,37.583c-1.471,2.547-0.268,4.631,2.675,4.631h43.396c2.942,0,4.146-2.084,2.675-4.631l-21.7-37.583 C176.938,3.574,175.969,2.938,174.998,2.938L174.998,2.938z"/>
56
+ <path fill="url(#warningGradient)" d="M174.998,4.937c-0.167,0-0.556,0.243-0.939,0.911L152.36,43.432
57
+ c-0.386,0.668-0.401,1.126-0.317,1.271c0.083,0.145,0.487,0.359,1.26,0.359h43.396c0.772,0,1.178-0.216,1.262-0.36
58
+ s0.067-0.601-0.319-1.271L175.94,5.849C175.555,5.18,175.165,4.937,174.998,4.937L174.998,4.937z"/>
59
+ <g id="exclaimation_mark" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)"/>
60
+ <g id="exclaimation mark" transform="matrix(0.85761374,0,0,0.85761374,11.147324,4.3153273)">
61
+ <path fill="#FFFFFF" stroke="#A0410D" stroke-width="2" d="M191.056,9.614c1.432,0,4.907,0.276,4.907,3.052c0,2.805-2.922,17.866-3.335,20.1h-1.571 h-1.57c-0.413-2.234-3.335-17.295-3.335-20.1C186.149,9.89,189.624,9.614,191.056,9.614z"/>
62
+ <path fill="#FFFFFF" stroke="#A0410D" stroke-width="2" d="M195.32,40.336c0,5.436-8.528,5.436-8.528,0C186.793,34.836,195.32,34.839,195.32,40.336"/>
63
+ </g>
64
+ </g>
65
+ <g id="error">
66
+ <!-- <circle fill="#C41616" cx="225" cy="25" r="25"/>
67
+ <circle fill="url(#errorGradient)" cx="225" cy="25" r="23"/>-->
68
+ <polygon fill="#C41616" points="214.646,50 200,35.355 200,14.645 214.646,0 235.354,0 250,14.645 250,35.355 235.354,50"/>
69
+ <polygon fill="url(#errorGradient)" points="215.474,48 202,34.527 202,15.473 215.474,2 234.526,2 248,15.473 248,34.527 234.526,48"/> <!--<rect x="203" y="3" fill="#C41616" width="44" height="44"/>
70
+ <rect x="205" y="5" fill="url(#errorGradient)" width="40" height="40"/>-->
71
+ <polygon id="x" fill="#FFFFFF" stroke="#C41616" stroke-width="2" points="224.999,29.758 235.233,39.991 239.991,35.234 229.757,25 239.991,14.765 235.233,10.009 224.999,20.242 214.766,10.009 210.009,14.765 220.242,25 210.009,35.234 214.766,39.991"/>
72
+ </g>
73
+ </svg>
@@ -0,0 +1,7 @@
1
+ # Make sure you list all the project template files here in the manifest.
2
+ #stylesheet 'screen.sass', :media => 'screen, projection'
3
+
4
+ image 'images/spritemap.svg', :to => 'cimma/dialog-boxes/spritemap.svg'
5
+ image 'images/spritemap.png', :to => 'cimma/dialog-boxes/spritemap.png'
6
+
7
+ stylesheet 'example.scss', :to => 'cimma/examples/_dialog-boxes.scss'
@@ -0,0 +1,124 @@
1
+ function cimmaDropMenu(el) {
2
+ var ua = navigator.userAgent;
3
+ var isTouch = hasTouchEvents() || ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || ua.match(/Android/);
4
+
5
+ var childMenus = el.getElementsByTagName('section');
6
+
7
+ if (isTouch) {
8
+ el.className = el.className.length ? el.className + ' touch' : 'touch';
9
+ }
10
+
11
+ if (hasTouchEvents()) {
12
+ el.addEventListener('touchstart', handleEvent, false);
13
+ } else {
14
+ el.addEventListener('click', handleEvent, false);
15
+ el.addEventListener('mouseover', openFirstMenu, false);
16
+ el.addEventListener('mouseout', closeFirstMenu, false);
17
+ }
18
+
19
+ function handleEvent(e) {
20
+ switch(e.type) {
21
+ case 'touchstart': onTouchStart(e); break;
22
+ case 'touchmove': onTouchMove(e); break;
23
+ case 'touchend': onTouchEnd(e); break;
24
+ case 'click': toggleMenu(e); break;
25
+ case 'mouseover': openFirstMenu(e); break;
26
+ case 'mouseout': closeFirstMenu(e); break;
27
+ }
28
+ }
29
+
30
+ function onTouchStart(e) {
31
+ if (!e.target.href) {
32
+ e.preventDefault();
33
+ }
34
+ el.addEventListener('touchmove', handleEvent, false);
35
+ el.addEventListener('touchend', handleEvent, false);
36
+ }
37
+
38
+ function onTouchMove(e) {
39
+ // do nothing?
40
+ }
41
+
42
+ function onTouchEnd(e) {
43
+ el.removeEventListener('touchmove', handleEvent, false);
44
+ el.removeEventListener('touchend', handleEvent, false);
45
+
46
+ toggleMenu(e);
47
+ }
48
+
49
+ function toggleMenu(e) {
50
+ if (e.target instanceof HTMLHeadingElement) {
51
+
52
+ var parent = e.target.parentNode;
53
+ if (parent.className.match('opened')) {
54
+ setElementClosed(parent);
55
+ closeMenu(false);
56
+ } else {
57
+ closeMenu(false);
58
+ setElementOpened(parent);
59
+ }
60
+ } else if (e.target == el) {
61
+ if (e.target.className.match('opened')) {
62
+ closeMenu(true);
63
+ } else {
64
+ openMainMenu();
65
+ }
66
+ }
67
+ }
68
+
69
+ function openMainMenu() {
70
+ setElementOpened(el);
71
+ openFirstMenu(true);
72
+ }
73
+
74
+ function openFirstMenu(e) { // ensures our first element is highlighted
75
+ if (e.target == el || e === true) {
76
+ var m = childMenus[0];
77
+ setElementOpened(m);
78
+ }
79
+ }
80
+
81
+ function closeFirstMenu(e) {
82
+ if (e.target != el && e.target != childMenus[0].firstChild) {
83
+ closeMenu();
84
+ } else {
85
+ //console.log(e.target.constructor);
86
+ }
87
+ }
88
+
89
+ function closeMenu(all) {
90
+ // close all of the submenus
91
+ for (var i = 0, len = childMenus.length; i < len; i++) {
92
+ setElementClosed(childMenus[i]);
93
+ }
94
+
95
+ if (all) {
96
+ setElementClosed(el);
97
+ }
98
+ }
99
+
100
+ function setElementOpened(e) {
101
+ setElementState(e, 'closed', 'opened');
102
+ }
103
+
104
+ function setElementClosed(e) {
105
+ setElementState(e, 'opened', 'closed');
106
+ }
107
+
108
+ function setElementState(e, oldStatus, newStatus) {
109
+ if (e.className.match(oldStatus)) {
110
+ e.className = e.className.replace(oldStatus, newStatus);
111
+ } else if (!e.className.match(newStatus)) {
112
+ e.className = e.className.length ? e.className + ' ' + newStatus : newStatus;
113
+ }
114
+ }
115
+
116
+ function hasTouchEvents() {
117
+ try {
118
+ document.createEvent("TouchEvent");
119
+ return true;
120
+ } catch (e) {
121
+ return false;
122
+ }
123
+ }
124
+ };
@@ -0,0 +1,7 @@
1
+ # Make sure you list all the project template files here in the manifest.
2
+ #stylesheet 'screen.sass', :media => 'screen, projection'
3
+
4
+ #image 'images/spritemap.svg', :to => 'cimma/dialog-boxes/spritemap.svg'
5
+ #image 'images/spritemap.png', :to => 'cimma/dialog-boxes/spritemap.png'
6
+
7
+ #stylesheet 'example.scss', :to => 'cimma/examples/_dialog_boxes.scss'
@@ -0,0 +1,66 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1"
5
+ id="svg2" inkscape:version="0.48.2 r9819" sodipodi:docname="spritemap.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
6
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="210px"
7
+ viewBox="0 0 90 210" enable-background="new 0 0 90 210" xml:space="preserve">
8
+ <path id="valid" inkscape:connector-curvature="0" fill="#FFFFFF" stroke="#788703" d="M68.468,114.725
9
+ c-0.122-0.172-0.831-0.865-1.575-1.537c-2-1.814-3.591-2.808-6.271-3.916l-0.491-0.196l0.915-0.974
10
+ c0.502-0.533,1.219-1.34,1.592-1.791l0.682-0.814l1.061,0.686c1.124,0.727,2.42,1.938,3.545,3.312l0.684,0.829l1.076-1.938
11
+ c2.934-5.241,6.336-9.706,8.938-11.714l0.927-0.714l0.979,0.98c0.539,0.541,1.462,1.349,2.054,1.794l1.073,0.816l-0.823,0.42
12
+ c-2.185,1.106-5.94,4.48-8.729,7.846c-1.297,1.57-3.783,4.979-4.677,6.416C68.869,115.127,68.787,115.168,68.468,114.725
13
+ L68.468,114.725L68.468,114.725L68.468,114.725z"/>
14
+ <polygon id="invalid" fill="#FFFFFF" stroke="#C41616" points="71.545,194.477 65.044,200.979 68.066,204 74.568,197.499
15
+ 81.072,204 84.092,200.979 77.589,194.477 84.092,187.975 81.072,184.952 74.568,191.454 68.066,184.952 65.044,187.975 "/>
16
+ <g id="optional" transform="matrix(0.40442342,0,0,0.40442342,41.944703,478.23152)">
17
+ <path id="path3146" inkscape:connector-curvature="0" d="M-77.07-1148.387c0-6.033,1.619-10.76,4.862-14.173
18
+ c3.238-3.413,7.419-5.123,12.548-5.123c3.355,0,6.383,0.8,9.073,2.409c2.696,1.602,4.757,3.836,6.164,6.706
19
+ c1.416,2.871,2.125,6.121,2.125,9.76c0,3.687-0.745,6.987-2.236,9.898c-1.485,2.906-3.592,5.113-6.319,6.609
20
+ c-2.732,1.497-5.676,2.242-8.831,2.242c-3.422,0-6.485-0.827-9.176-2.481c-2.701-1.653-4.738-3.912-6.122-6.771
21
+ C-76.374-1142.169-77.07-1145.193-77.07-1148.387z M-72.111-1148.311c0,4.379,1.177,7.832,3.533,10.353
22
+ c2.359,2.522,5.317,3.783,8.868,3.783c3.624,0,6.604-1.271,8.94-3.816c2.341-2.549,3.51-6.159,3.51-10.836
23
+ c0-2.963-0.496-5.544-1.5-7.751c-0.997-2.207-2.462-3.918-4.389-5.135c-1.927-1.218-4.088-1.822-6.491-1.822
24
+ c-3.404,0-6.333,1.17-8.794,3.505C-70.883-1157.689-72.111-1153.784-72.111-1148.311z"/>
25
+ <path id="path3148" inkscape:connector-curvature="0" d="M-36.696-1120.583v-36.434h4.076v3.423
26
+ c0.956-1.34,2.033-2.343,3.243-3.015c1.209-0.666,2.672-1.003,4.392-1.003c2.253,0,4.231,0.581,5.951,1.736
27
+ c1.718,1.157,3.016,2.79,3.895,4.898c0.879,2.108,1.311,4.419,1.311,6.93c0,2.696-0.483,5.124-1.451,7.278
28
+ c-0.961,2.159-2.365,3.814-4.215,4.961c-1.845,1.152-3.781,1.724-5.813,1.724c-1.49,0-2.824-0.313-4.011-0.943
29
+ c-1.177-0.628-2.153-1.421-2.911-2.38v12.821h-4.467V-1120.583z M-32.653-1143.698c0,3.389,0.686,5.893,2.061,7.517
30
+ c1.375,1.618,3.034,2.427,4.985,2.427c1.985,0,3.685-0.834,5.095-2.515c1.415-1.677,2.119-4.279,2.119-7.802
31
+ c0-3.355-0.687-5.865-2.067-7.54c-1.38-1.666-3.034-2.504-4.949-2.504c-1.905,0-3.582,0.89-5.05,2.67
32
+ C-31.916-1149.671-32.653-1147.088-32.653-1143.698z"/>
33
+ <path id="path3150" inkscape:connector-curvature="0" d="M1.327-1134.669l0.645,3.942c-1.256,0.264-2.378,0.397-3.371,0.397
34
+ c-1.62,0-2.881-0.256-3.772-0.769c-0.891-0.512-1.524-1.187-1.886-2.02c-0.357-0.838-0.541-2.596-0.541-5.271v-15.155h-3.278
35
+ v-3.472h3.278v-6.522l4.436-2.678v9.2h4.489v3.472h-4.489v15.402c0,1.274,0.08,2.089,0.234,2.456
36
+ c0.157,0.362,0.413,0.653,0.773,0.867c0.355,0.214,0.862,0.32,1.526,0.32C-0.141-1134.497,0.518-1134.554,1.327-1134.669z"/>
37
+ <path id="path3152" inkscape:connector-curvature="0" d="M5.693-1161.902v-5.134h4.472v5.134H5.693z M5.693-1130.677v-26.341h4.472
38
+ v26.341H5.693z"/>
39
+ <path id="path3154" inkscape:connector-curvature="0" d="M15.316-1143.848c0-4.88,1.352-8.491,4.064-10.837
40
+ c2.277-1.95,5.032-2.924,8.29-2.924c3.617,0,6.578,1.187,8.881,3.558c2.299,2.371,3.448,5.648,3.448,9.835
41
+ c0,3.389-0.512,6.056-1.526,7.999c-1.024,1.94-2.497,3.449-4.443,4.525c-1.939,1.075-4.059,1.609-6.358,1.609
42
+ c-3.69,0-6.667-1.182-8.944-3.548C16.453-1135.994,15.316-1139.397,15.316-1143.848L15.316-1143.848z M19.906-1143.848
43
+ c0,3.373,0.734,5.899,2.207,7.577c1.473,1.676,3.323,2.516,5.556,2.516c2.212,0,4.057-0.843,5.527-2.529
44
+ c1.473-1.685,2.209-4.26,2.209-7.714c0-3.256-0.741-5.723-2.222-7.4c-1.478-1.677-3.318-2.52-5.515-2.52
45
+ c-2.236,0-4.086,0.833-5.559,2.504C20.64-1149.742,19.906-1147.222,19.906-1143.848z"/>
46
+ <path id="path3156" inkscape:connector-curvature="0" d="M45.248-1130.677v-26.341h4.025v3.745c1.932-2.893,4.728-4.34,8.384-4.34
47
+ c1.584,0,3.04,0.29,4.371,0.856c1.333,0.57,2.333,1.32,2.994,2.244c0.657,0.925,1.118,2.026,1.384,3.297
48
+ c0.167,0.827,0.256,2.272,0.256,4.343v16.193h-4.467v-16.023c0-1.818-0.174-3.179-0.519-4.081
49
+ c-0.353-0.902-0.959-1.619-1.852-2.159c-0.884-0.536-1.917-0.808-3.11-0.808c-1.893,0-3.54,0.604-4.921,1.811
50
+ c-1.381,1.205-2.077,3.494-2.077,6.866v14.384h-4.462v0.005h-0.005V-1130.677L45.248-1130.677z"/>
51
+ <path id="path3158" inkscape:connector-curvature="0" d="M90.71-1133.927c-1.647,1.405-3.238,2.399-4.767,2.976
52
+ c-1.526,0.577-3.173,0.867-4.931,0.867c-2.888,0-5.114-0.705-6.669-2.118c-1.553-1.414-2.333-3.224-2.333-5.423
53
+ c0-1.286,0.295-2.467,0.884-3.529c0.584-1.065,1.357-1.922,2.306-2.569c0.956-0.645,2.024-1.132,3.219-1.463
54
+ c0.864-0.233,2.19-0.455,3.965-0.667c3.598-0.431,6.254-0.944,7.959-1.543c0.017-0.611,0.027-0.996,0.027-1.164
55
+ c0-1.817-0.423-3.098-1.26-3.849c-1.14-1.007-2.84-1.509-5.085-1.509c-2.106,0-3.651,0.368-4.656,1.101
56
+ c-1,0.736-1.739,2.04-2.217,3.908l-4.366-0.595c0.391-1.868,1.058-3.377,1.956-4.525c0.913-1.148,2.226-2.032,3.946-2.654
57
+ c1.724-0.622,3.709-0.93,5.979-0.93c2.246,0,4.076,0.264,5.477,0.793c1.415,0.529,2.446,1.197,3.11,1.996
58
+ c0.664,0.803,1.12,1.817,1.376,3.038c0.159,0.764,0.232,2.136,0.232,4.117v5.953c0,4.152,0.092,6.776,0.285,7.873
59
+ c0.193,1.101,0.57,2.154,1.13,3.161h-4.66C91.149-1131.604,90.848-1132.688,90.71-1133.927L90.71-1133.927z M90.34-1143.896
60
+ c-1.618,0.659-4.047,1.223-7.283,1.684c-1.84,0.264-3.139,0.564-3.902,0.892c-0.758,0.332-1.345,0.82-1.758,1.451
61
+ c-0.415,0.636-0.618,1.344-0.618,2.119c0,1.193,0.444,2.185,1.345,2.977c0.903,0.793,2.224,1.189,3.953,1.189
62
+ c1.719,0,3.255-0.377,4.593-1.129c1.343-0.756,2.328-1.782,2.951-3.087c0.478-1.008,0.715-2.497,0.715-4.466v-1.635h0.005
63
+ V-1143.896L90.34-1143.896z"/>
64
+ <path id="path3160" inkscape:connector-curvature="0" d="M101.702-1130.677v-36.358h4.462v36.358H101.702z"/>
65
+ </g>
66
+ </svg>