cimma 0.1.1

data/lib/cimma.rb

@@ -0,0 +1,4 @@
+require 'compass'
+require 'translucencss'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('cimma', :path => extension_path)

data/stylesheets/_cimma.scss

@@ -0,0 +1,6 @@
+// --------------------------------------------------------------------------------
+// Cimma:  A library of commonly used styles, mixins, and variables
+// --------------------------------------------------------------------------------
+
+@import "cimma/baseline";
+@import "cimma/widgets/dialog-boxes";

data/stylesheets/cimma/_baseline.scss

@@ -0,0 +1,5 @@
+@import "cimma/baseline/typography";
+@import "cimma/baseline/html5";
+@import "cimma/baseline/lists";
+@import "cimma/baseline/tables";
+@import "cimma/baseline/forms";

data/stylesheets/cimma/_util.scss

@@ -0,0 +1,4 @@
+@import "util/clearfix";
+@import "util/ie";
+@import "util/images";
+@import "util/ellipsis";

data/stylesheets/cimma/baseline/_core.scss

@@ -0,0 +1,5 @@
+@import "typography/core";
+@import "html5/core";
+@import "lists/core";
+@import "tables/core";
+@import "forms/core";

data/stylesheets/cimma/baseline/_forms.scss

@@ -0,0 +1,2 @@
+@import "forms/core";
+@import "forms/status-backgrounds";

data/stylesheets/cimma/baseline/_html5.scss

@@ -0,0 +1 @@
+@import "html5/core";

data/stylesheets/cimma/baseline/_lists.scss

@@ -0,0 +1 @@
+@import "lists/core";

data/stylesheets/cimma/baseline/_tables.scss

@@ -0,0 +1,2 @@
+@import "tables/core";
+@import "tables/adaptive";

data/stylesheets/cimma/baseline/_typography.scss

@@ -0,0 +1,4 @@
+@import "typography/core";
+@import "typography/headlines";
+@import "typography/quotes";
+@import "typography/annotations";

data/stylesheets/cimma/baseline/forms/_core.scss

@@ -0,0 +1,141 @@
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/box-sizing";
+
+@import "../../misc/effects";
+
+$form-default-glow: #BDE5F8 !default;
+$form-error-glow: #F8AAAA !default;
+$form-valid-glow: darken(#DFE5B0, 10%) !default;
+
+$form-input-border: 1px solid #CCC !default;
+$form-input-width: 15em !default;
+$form-textarea-height: 5em !default;
+
+// ====================================================================================================
+//                                                                       | Form Controls
+// ====================================================================================================
+
+input, textarea, select {
+	font-size: inherit;
+	padding: .25em;
+	@include box-sizing(border-box);
+	
+	&:focus {
+		@include soft-outer-glow($form-default-glow);
+		outline: none;
+		
+		&:invalid, &:out-of-range {
+			@include soft-outer-glow($form-error-glow);
+		}
+		
+		&:valid, &:in-range {
+			@include soft-outer-glow($form-valid-glow);
+		}
+	}
+}
+
+textarea {
+	height: $form-textarea-height;
+}
+
+#{$form-input-text}, textarea {
+	@include border-radius(.25em);
+	border: $form-input-border;
+}
+
+#{$form-input-text}, textarea {
+	width: $form-input-width;
+	max-width: 100%;
+	-webkit-appearance: textfield
+}
+
+input, textarea {
+	&.x-small { width: 2.5em }
+	&.small { width: 5em }
+	&.medium { width: 15em }
+	&.large { width: 25em }
+	&.x-large { width: 50em }
+	&.maximum { width: 100% }
+}
+
+#{$form-input-buttons} {
+	padding: .25em .5em;
+}
+
+// ====================================================================================================
+//                                                                       | Fieldsets
+// ====================================================================================================
+
+fieldset {
+	border: 1px solid;
+	padding: 1em;
+}
+
+fieldset%reset {
+	border: none;
+	padding: none;
+}
+
+fieldset ul {
+	margin-left: 0; padding-left: 0; list-style-type: none;
+}
+
+fieldset%silent {
+	@extend fieldset%reset;
+
+	legend {
+		display: none;
+	}
+}
+
+fieldset%subform {
+	legend {
+		cursor: pointer;
+		cursor: hand;
+	}
+	
+	legend:after {
+//		content: " (Edit Mode)";
+	}
+
+	&[disabled] legend:after {
+		content: " (Disabled)";
+	}
+
+	&.modified legend:after {
+		content: " (Modified)";
+	}
+
+	&.modified[disabled] legend:after {
+		content: " (Cancelled)";
+	}
+}
+
+// ====================================================================================================
+//                                                                       | Labels
+// ====================================================================================================
+
+label {
+	white-space: nowrap;
+	
+	#{$form-input-not-radio} {
+		@media (max-width: 35em) {
+			display: block;
+		}
+	}
+}
+
+// ====================================================================================================
+//                                                                       | Forms
+// ====================================================================================================
+
+form.simplified, form .simplified {
+	@extend form%simplified;
+}
+
+form%simplified {
+	> label, label select, label textarea, label #{$form-input-not-radio} {
+		display: block;
+	}
+}

data/stylesheets/cimma/baseline/forms/_status-backgrounds.scss

@@ -0,0 +1,20 @@
+#{$form-input-text} {
+	&:invalid, &:out-of-range {
+//		background: url('../extensions/cimma/templates/forms/images/spritemap.svg') no-repeat right -12em;
+		background-size: 5em 13em;
+	
+		&:focus {
+		background-position: right -8em;
+		//embed testing
+//			background: inline-image('cimma/forms/invalid.svg', unquote('image/svg+xml')) no-repeat right center;
+			background-size: 1em 1em;
+		}
+	}
+
+	&[required]:valid, &[required]:in-range {
+		&:focus {
+//			background: url('../extensions/cimma/templates/forms/images/spritemap.svg') no-repeat right -4em;
+			background-size: 5em 13em;
+		}
+	}
+}

data/stylesheets/cimma/baseline/html5/_core.scss

@@ -0,0 +1,25 @@
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+	display: block; // Corrects `block` display not defined in IE 8/9.
+}
+
+audio, canvas, video {
+	display: inline-block; // Corrects `inline-block` display not defined in IE 8/9.
+}
+
+audio:not([controls]) {
+	display: none; // Prevents modern browsers from displaying `audio` without controls.
+	height: 0; // Remove excess height in iOS 5 devices.
+}
+
+[hidden] {
+	display: none; // Addresses styling for `hidden` attribute not present in IE 8/9.
+}
+
+figure {
+	//margin: 0; // Addresses margin not present in IE 8/9 and Safari 5.
+}
+
+summary {
+	cursor: pointer;
+	cursor: hand;
+}

data/stylesheets/cimma/baseline/lists/_core.scss

@@ -0,0 +1,11 @@
+// -------------------------------------------------------------------------------- Ordered Lists
+
+ul, ol {
+	padding-left: 2em;
+}
+
+// -------------------------------------------------------------------------------- Definition Lists
+
+dt { font-weight: bold }
+dd { margin-left: 0.5em; border-left: .5em solid; padding-left: 1em }
+dd + dt { margin-top: .75em }

data/stylesheets/cimma/baseline/tables/_adaptive.scss

@@ -0,0 +1,83 @@
+@import "compass/utilities/color/contrast";
+
+$table-adaptive-border-color: #EEE !default;
+$table-adaptive-max-width: 35em !default;
+
+$table-major-background: #CCC !default;
+$table-minor-background: #EEE !default;
+
+@media (max-width: $table-adaptive-max-width) {
+	table%adaptive, table.adaptive {
+		border: none;
+		&, tbody, tr, th, td, caption { display: block }
+		thead { display: none }
+		tbody { border: 1px solid }
+		tr { border-width: 0 0 1px 0; }
+		td:empty, th:empty { display: none }
+		th { border: none }
+		td {
+			border: none;
+			padding-left: 2em;
+			text-align: left !important;
+			
+//			&:first-child + td ~ td { border-top: 1px solid $table-zebra-color }
+		}
+//		tr:nth-child(even) td { border-color: $table-adaptive-border-color !important }
+
+//		tbody:only-of-type td ~ td,
+//		tbody:not(:only-of-type) tr:first-child td ~ td,
+//		tbody:not(:only-of-type) tr ~ tr td {
+		td[data-label] {
+			&:before {
+				content: attr(data-label);
+				display: inline-block;
+				width: 6em;
+				padding-right: 1em;
+				vertical-align: middle;
+			}
+		}
+
+		%inherited-link-color {
+			a {
+				color: inherit;
+			}
+		}
+	}
+
+	table.adaptive {
+		td.major {
+			padding: .25em .5em;
+			@include contrasted($table-major-background);
+
+			@if lightness($table-major-background) < 70% {
+				@extend %inherited-link-color;
+			} 
+		}
+
+		td.minor {
+			@include contrasted($table-minor-background);
+
+			@if lightness($table-minor-background) < 70% {
+				@extend %inherited-link-color;
+			} 
+		}
+		
+		tbody:only-of-type,
+		tbody:not(:only-of-type) tr:first-child {
+			td:first-child {
+				@extend td.major;
+			}
+		}
+
+		tbody:not(:only-of-type) {
+			tr:first-child td:not([rowspan]),
+			tr:first-child ~ tr td:first-child {
+				@extend td.minor;
+						
+				~ td:not([rowspan]) {
+					background: transparent; 
+				}
+			}
+		}
+	}
+}

data/stylesheets/cimma/baseline/tables/_core.scss

@@ -0,0 +1,52 @@
+$table-background: white !default;
+$table-border: 1px solid !default;
+$table-zebra-background: #CCC !default;
+
+table%bordered {
+	@include bordered-table($table-border);
+}
+
+table {
+	* { font-size: inherit; }
+	th, td { empty-cells: show; }
+	tbody th { text-align: left }
+	
+	tfoot {
+		td[colspan], th[colspan] {
+			text-align: right;
+		}
+	}
+	
+	@media (max-width: 35em) {
+		th[abbr] { content: attr(abbr) }
+	}
+	
+	&.tabular {
+		@extend %bordered;
+		@include zebra-striping {
+			background: $table-zebra-background;
+		}
+	}
+	
+	&.associative tbody th[colspan] {
+		text-align: center;
+	}
+}
+
+td {
+	&.decimal, &.currency {
+		text-align: right;
+		text-align: '.'; // no browser implements this (yet)
+	}
+	
+	&.fraction {
+		text-align: center;
+		text-align: '/'; // no browser implements this (yet)
+	}
+	
+	&.numeric, &.range, &.small {
+		text-align: center;
+	}
+
+	ul { padding-left: 1em; }
+}

data/stylesheets/cimma/baseline/tables/_extra-wide.scss

@@ -0,0 +1,9 @@
+table.extrawide {
+	display: block; position: relative; width: 100%;
+	thead { display: block; float: left; }
+	thead tr { display: block; }
+	tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
+	tbody tr { display: inline-block; vertical-align: top; }
+	th { display: block; }
+	td { display: block; min-height: 1.4em; }
+}

data/stylesheets/cimma/baseline/typography/_annotations.scss

@@ -0,0 +1,44 @@
+$mark-background: #ff0 !default;
+$mark-color: #000 !default;
+
+// Corrects font family set oddly in Safari 5 and Chrome.
+code, kbd, pre, samp { 
+	font-family: $monospace;
+}
+
+// Addresses styling not present in Safari 5 and Chrome.
+dfn {
+	font-style: italic;
+}
+
+// Addresses styling not present in IE 8/9.
+mark {
+	background: $mark-background;
+	color: $mark-color;
+}
+
+// Improves readability of pre-formatted text in all browsers.
+pre {
+	white-space: pre;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+// Prevents `sub` and `sup` affecting `line-height` in all browsers.
+sub, sup {
+	font-size: .75em;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+// var { }
+