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,4 @@
1
+ require 'compass'
2
+ require 'translucencss'
3
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
4
+ Compass::Frameworks.register('cimma', :path => extension_path)
@@ -0,0 +1,6 @@
1
+ // --------------------------------------------------------------------------------
2
+ // Cimma: A library of commonly used styles, mixins, and variables
3
+ // --------------------------------------------------------------------------------
4
+
5
+ @import "cimma/baseline";
6
+ @import "cimma/widgets/dialog-boxes";
@@ -0,0 +1,5 @@
1
+ @import "cimma/baseline/typography";
2
+ @import "cimma/baseline/html5";
3
+ @import "cimma/baseline/lists";
4
+ @import "cimma/baseline/tables";
5
+ @import "cimma/baseline/forms";
@@ -0,0 +1,4 @@
1
+ @import "util/clearfix";
2
+ @import "util/ie";
3
+ @import "util/images";
4
+ @import "util/ellipsis";
@@ -0,0 +1,5 @@
1
+ @import "typography/core";
2
+ @import "html5/core";
3
+ @import "lists/core";
4
+ @import "tables/core";
5
+ @import "forms/core";
@@ -0,0 +1,2 @@
1
+ @import "forms/core";
2
+ @import "forms/status-backgrounds";
@@ -0,0 +1 @@
1
+ @import "html5/core";
@@ -0,0 +1 @@
1
+ @import "lists/core";
@@ -0,0 +1,2 @@
1
+ @import "tables/core";
2
+ @import "tables/adaptive";
@@ -0,0 +1,4 @@
1
+ @import "typography/core";
2
+ @import "typography/headlines";
3
+ @import "typography/quotes";
4
+ @import "typography/annotations";
@@ -0,0 +1,141 @@
1
+ @import "compass/css3/border-radius";
2
+ @import "compass/css3/box-shadow";
3
+ @import "compass/css3/box-sizing";
4
+
5
+ @import "../../misc/effects";
6
+
7
+ $form-default-glow: #BDE5F8 !default;
8
+ $form-error-glow: #F8AAAA !default;
9
+ $form-valid-glow: darken(#DFE5B0, 10%) !default;
10
+
11
+ $form-input-border: 1px solid #CCC !default;
12
+ $form-input-width: 15em !default;
13
+ $form-textarea-height: 5em !default;
14
+
15
+ // ====================================================================================================
16
+ // | Form Controls
17
+ // ====================================================================================================
18
+
19
+ input, textarea, select {
20
+ font-size: inherit;
21
+ padding: .25em;
22
+ @include box-sizing(border-box);
23
+
24
+ &:focus {
25
+ @include soft-outer-glow($form-default-glow);
26
+ outline: none;
27
+
28
+ &:invalid, &:out-of-range {
29
+ @include soft-outer-glow($form-error-glow);
30
+ }
31
+
32
+ &:valid, &:in-range {
33
+ @include soft-outer-glow($form-valid-glow);
34
+ }
35
+ }
36
+ }
37
+
38
+ textarea {
39
+ height: $form-textarea-height;
40
+ }
41
+
42
+ #{$form-input-text}, textarea {
43
+ @include border-radius(.25em);
44
+ border: $form-input-border;
45
+ }
46
+
47
+ #{$form-input-text}, textarea {
48
+ width: $form-input-width;
49
+ max-width: 100%;
50
+ -webkit-appearance: textfield
51
+ }
52
+
53
+ input, textarea {
54
+ &.x-small { width: 2.5em }
55
+ &.small { width: 5em }
56
+ &.medium { width: 15em }
57
+ &.large { width: 25em }
58
+ &.x-large { width: 50em }
59
+ &.maximum { width: 100% }
60
+ }
61
+
62
+ #{$form-input-buttons} {
63
+ padding: .25em .5em;
64
+ }
65
+
66
+ // ====================================================================================================
67
+ // | Fieldsets
68
+ // ====================================================================================================
69
+
70
+ fieldset {
71
+ border: 1px solid;
72
+ padding: 1em;
73
+ }
74
+
75
+ fieldset%reset {
76
+ border: none;
77
+ padding: none;
78
+ }
79
+
80
+ fieldset ul {
81
+ margin-left: 0; padding-left: 0; list-style-type: none;
82
+ }
83
+
84
+ fieldset%silent {
85
+ @extend fieldset%reset;
86
+
87
+ legend {
88
+ display: none;
89
+ }
90
+ }
91
+
92
+ fieldset%subform {
93
+ legend {
94
+ cursor: pointer;
95
+ cursor: hand;
96
+ }
97
+
98
+ legend:after {
99
+ // content: " (Edit Mode)";
100
+ }
101
+
102
+ &[disabled] legend:after {
103
+ content: " (Disabled)";
104
+ }
105
+
106
+ &.modified legend:after {
107
+ content: " (Modified)";
108
+ }
109
+
110
+ &.modified[disabled] legend:after {
111
+ content: " (Cancelled)";
112
+ }
113
+ }
114
+
115
+ // ====================================================================================================
116
+ // | Labels
117
+ // ====================================================================================================
118
+
119
+ label {
120
+ white-space: nowrap;
121
+
122
+ #{$form-input-not-radio} {
123
+ @media (max-width: 35em) {
124
+ display: block;
125
+ }
126
+ }
127
+ }
128
+
129
+ // ====================================================================================================
130
+ // | Forms
131
+ // ====================================================================================================
132
+
133
+ form.simplified, form .simplified {
134
+ @extend form%simplified;
135
+ }
136
+
137
+ form%simplified {
138
+ > label, label select, label textarea, label #{$form-input-not-radio} {
139
+ display: block;
140
+ }
141
+ }
@@ -0,0 +1,20 @@
1
+ #{$form-input-text} {
2
+ &:invalid, &:out-of-range {
3
+ // background: url('../extensions/cimma/templates/forms/images/spritemap.svg') no-repeat right -12em;
4
+ background-size: 5em 13em;
5
+
6
+ &:focus {
7
+ background-position: right -8em;
8
+ //embed testing
9
+ // background: inline-image('cimma/forms/invalid.svg', unquote('image/svg+xml')) no-repeat right center;
10
+ background-size: 1em 1em;
11
+ }
12
+ }
13
+
14
+ &[required]:valid, &[required]:in-range {
15
+ &:focus {
16
+ // background: url('../extensions/cimma/templates/forms/images/spritemap.svg') no-repeat right -4em;
17
+ background-size: 5em 13em;
18
+ }
19
+ }
20
+ }
@@ -0,0 +1,25 @@
1
+ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
2
+ display: block; // Corrects `block` display not defined in IE 8/9.
3
+ }
4
+
5
+ audio, canvas, video {
6
+ display: inline-block; // Corrects `inline-block` display not defined in IE 8/9.
7
+ }
8
+
9
+ audio:not([controls]) {
10
+ display: none; // Prevents modern browsers from displaying `audio` without controls.
11
+ height: 0; // Remove excess height in iOS 5 devices.
12
+ }
13
+
14
+ [hidden] {
15
+ display: none; // Addresses styling for `hidden` attribute not present in IE 8/9.
16
+ }
17
+
18
+ figure {
19
+ //margin: 0; // Addresses margin not present in IE 8/9 and Safari 5.
20
+ }
21
+
22
+ summary {
23
+ cursor: pointer;
24
+ cursor: hand;
25
+ }
@@ -0,0 +1,11 @@
1
+ // -------------------------------------------------------------------------------- Ordered Lists
2
+
3
+ ul, ol {
4
+ padding-left: 2em;
5
+ }
6
+
7
+ // -------------------------------------------------------------------------------- Definition Lists
8
+
9
+ dt { font-weight: bold }
10
+ dd { margin-left: 0.5em; border-left: .5em solid; padding-left: 1em }
11
+ dd + dt { margin-top: .75em }
@@ -0,0 +1,83 @@
1
+ @import "compass/utilities/color/contrast";
2
+
3
+ $table-adaptive-border-color: #EEE !default;
4
+ $table-adaptive-max-width: 35em !default;
5
+
6
+ $table-major-background: #CCC !default;
7
+ $table-minor-background: #EEE !default;
8
+
9
+ @media (max-width: $table-adaptive-max-width) {
10
+ table%adaptive, table.adaptive {
11
+ border: none;
12
+ &, tbody, tr, th, td, caption { display: block }
13
+ thead { display: none }
14
+ tbody { border: 1px solid }
15
+ tr { border-width: 0 0 1px 0; }
16
+ td:empty, th:empty { display: none }
17
+ th { border: none }
18
+ td {
19
+ border: none;
20
+ padding-left: 2em;
21
+ text-align: left !important;
22
+
23
+ // &:first-child + td ~ td { border-top: 1px solid $table-zebra-color }
24
+ }
25
+ // tr:nth-child(even) td { border-color: $table-adaptive-border-color !important }
26
+
27
+ // tbody:only-of-type td ~ td,
28
+ // tbody:not(:only-of-type) tr:first-child td ~ td,
29
+ // tbody:not(:only-of-type) tr ~ tr td {
30
+ td[data-label] {
31
+ &:before {
32
+ content: attr(data-label);
33
+ display: inline-block;
34
+ width: 6em;
35
+ padding-right: 1em;
36
+ vertical-align: middle;
37
+ }
38
+ }
39
+
40
+ %inherited-link-color {
41
+ a {
42
+ color: inherit;
43
+ }
44
+ }
45
+ }
46
+
47
+ table.adaptive {
48
+ td.major {
49
+ padding: .25em .5em;
50
+ @include contrasted($table-major-background);
51
+
52
+ @if lightness($table-major-background) < 70% {
53
+ @extend %inherited-link-color;
54
+ }
55
+ }
56
+
57
+ td.minor {
58
+ @include contrasted($table-minor-background);
59
+
60
+ @if lightness($table-minor-background) < 70% {
61
+ @extend %inherited-link-color;
62
+ }
63
+ }
64
+
65
+ tbody:only-of-type,
66
+ tbody:not(:only-of-type) tr:first-child {
67
+ td:first-child {
68
+ @extend td.major;
69
+ }
70
+ }
71
+
72
+ tbody:not(:only-of-type) {
73
+ tr:first-child td:not([rowspan]),
74
+ tr:first-child ~ tr td:first-child {
75
+ @extend td.minor;
76
+
77
+ ~ td:not([rowspan]) {
78
+ background: transparent;
79
+ }
80
+ }
81
+ }
82
+ }
83
+ }
@@ -0,0 +1,52 @@
1
+ $table-background: white !default;
2
+ $table-border: 1px solid !default;
3
+ $table-zebra-background: #CCC !default;
4
+
5
+ table%bordered {
6
+ @include bordered-table($table-border);
7
+ }
8
+
9
+ table {
10
+ * { font-size: inherit; }
11
+ th, td { empty-cells: show; }
12
+ tbody th { text-align: left }
13
+
14
+ tfoot {
15
+ td[colspan], th[colspan] {
16
+ text-align: right;
17
+ }
18
+ }
19
+
20
+ @media (max-width: 35em) {
21
+ th[abbr] { content: attr(abbr) }
22
+ }
23
+
24
+ &.tabular {
25
+ @extend %bordered;
26
+ @include zebra-striping {
27
+ background: $table-zebra-background;
28
+ }
29
+ }
30
+
31
+ &.associative tbody th[colspan] {
32
+ text-align: center;
33
+ }
34
+ }
35
+
36
+ td {
37
+ &.decimal, &.currency {
38
+ text-align: right;
39
+ text-align: '.'; // no browser implements this (yet)
40
+ }
41
+
42
+ &.fraction {
43
+ text-align: center;
44
+ text-align: '/'; // no browser implements this (yet)
45
+ }
46
+
47
+ &.numeric, &.range, &.small {
48
+ text-align: center;
49
+ }
50
+
51
+ ul { padding-left: 1em; }
52
+ }
@@ -0,0 +1,9 @@
1
+ table.extrawide {
2
+ display: block; position: relative; width: 100%;
3
+ thead { display: block; float: left; }
4
+ thead tr { display: block; }
5
+ tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
6
+ tbody tr { display: inline-block; vertical-align: top; }
7
+ th { display: block; }
8
+ td { display: block; min-height: 1.4em; }
9
+ }
@@ -0,0 +1,44 @@
1
+ $mark-background: #ff0 !default;
2
+ $mark-color: #000 !default;
3
+
4
+ // Corrects font family set oddly in Safari 5 and Chrome.
5
+ code, kbd, pre, samp {
6
+ font-family: $monospace;
7
+ }
8
+
9
+ // Addresses styling not present in Safari 5 and Chrome.
10
+ dfn {
11
+ font-style: italic;
12
+ }
13
+
14
+ // Addresses styling not present in IE 8/9.
15
+ mark {
16
+ background: $mark-background;
17
+ color: $mark-color;
18
+ }
19
+
20
+ // Improves readability of pre-formatted text in all browsers.
21
+ pre {
22
+ white-space: pre;
23
+ white-space: pre-wrap;
24
+ word-wrap: break-word;
25
+ }
26
+
27
+ // Prevents `sub` and `sup` affecting `line-height` in all browsers.
28
+ sub, sup {
29
+ font-size: .75em;
30
+ line-height: 0;
31
+ position: relative;
32
+ vertical-align: baseline;
33
+ }
34
+
35
+ sup {
36
+ top: -0.5em;
37
+ }
38
+
39
+ sub {
40
+ bottom: -0.25em;
41
+ }
42
+
43
+ // var { }
44
+