cimma 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/cimma.rb +4 -0
- data/stylesheets/_cimma.scss +6 -0
- data/stylesheets/cimma/_baseline.scss +5 -0
- data/stylesheets/cimma/_util.scss +4 -0
- data/stylesheets/cimma/baseline/_core.scss +5 -0
- data/stylesheets/cimma/baseline/_forms.scss +2 -0
- data/stylesheets/cimma/baseline/_html5.scss +1 -0
- data/stylesheets/cimma/baseline/_lists.scss +1 -0
- data/stylesheets/cimma/baseline/_tables.scss +2 -0
- data/stylesheets/cimma/baseline/_typography.scss +4 -0
- data/stylesheets/cimma/baseline/forms/_core.scss +141 -0
- data/stylesheets/cimma/baseline/forms/_status-backgrounds.scss +20 -0
- data/stylesheets/cimma/baseline/html5/_core.scss +25 -0
- data/stylesheets/cimma/baseline/lists/_core.scss +11 -0
- data/stylesheets/cimma/baseline/tables/_adaptive.scss +83 -0
- data/stylesheets/cimma/baseline/tables/_core.scss +52 -0
- data/stylesheets/cimma/baseline/tables/_extra-wide.scss +9 -0
- data/stylesheets/cimma/baseline/typography/_annotations.scss +44 -0
- data/stylesheets/cimma/baseline/typography/_core.scss +51 -0
- data/stylesheets/cimma/baseline/typography/_headlines.scss +30 -0
- data/stylesheets/cimma/baseline/typography/_quotes.scss +17 -0
- data/stylesheets/cimma/misc/_effects.scss +32 -0
- data/stylesheets/cimma/widgets/_buttons.scss +196 -0
- data/stylesheets/cimma/widgets/_dialog-boxes.scss +129 -0
- data/stylesheets/cimma/widgets/_dialog-boxes2.scss +238 -0
- data/stylesheets/cimma/widgets/_dialog.scss +85 -0
- data/stylesheets/cimma/widgets/_font-awesome.scss +264 -0
- data/stylesheets/cimma/widgets/_test.scss +31 -0
- data/templates/dialog-boxes/example.scss +42 -0
- data/templates/dialog-boxes/example2.scss +29 -0
- data/templates/dialog-boxes/images/old/dialog-error.png +0 -0
- data/templates/dialog-boxes/images/old/dialog-info.png +0 -0
- data/templates/dialog-boxes/images/old/dialog-success.png +0 -0
- data/templates/dialog-boxes/images/old/dialog-validation.png +0 -0
- data/templates/dialog-boxes/images/old/dialog-warning.png +0 -0
- data/templates/dialog-boxes/images/spritemap - 1pt.svg +76 -0
- data/templates/dialog-boxes/images/spritemap.png +0 -0
- data/templates/dialog-boxes/images/spritemap.svg +73 -0
- data/templates/dialog-boxes/manifest.rb +7 -0
- data/templates/drop-menu/drop-menu.js +124 -0
- data/templates/drop-menu/manifest.rb +7 -0
- data/templates/forms/images/spritemap - Copy.svg +66 -0
- data/templates/forms/images/spritemap.svg +104 -0
- data/templates/forms/manifest.rb +7 -0
- data/templates/project/_cimma.scss +3 -0
- data/templates/project/_variables.scss +24 -0
- data/templates/project/manifest.rb +13 -0
- 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));
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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>
|
Binary file
|
@@ -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>
|