cimma 0.1.1

data/stylesheets/cimma/widgets/_dialog-boxes2.scss

@@ -0,0 +1,238 @@
+// --------------------------------------------------------------------------------
+// Dialog boxes:  attractive, scalable dialog boxes
+// --------------------------------------------------------------------------------
+
+// Spritemaps are assumed to be horizontal and the sprites are expected to be in the same order defined
+// If you're using an SVG as a background, pass it as a list with a bitmap image placed last
+
+@import "compass/css3/background-size";
+
+// ---------- Color/image definitions
+$dialog-namespace: d !default;
+$dialog-icon-width: 24px !default;
+$dialog-icon-height: 24px !default;
+$dialog-padding: 1em !default;
+$dialog-border: 2px solid !default;
+$dialog-fc-multiplier: 1.4 !default;
+
+// class name | color | bg-color | image
+$dialog-attributes:
+	( help    #2E3192 #B9C2E1 url(icons/dialog-help.png) // yellow
+	, info    #005FB4 #BDE5F8 url(icons/dialog-info.png) // blue
+	, success #6F7D03 #DFE5B0 url(icons/dialog-success.png) // green
+	, warning #A0410D #EFBBA0 url(icons/dialog-warning.png) // orange
+	, error   #C41616 #F8AAAA url(icons/dialog-error.png) // red
+	) !default;
+
+// ---------- Container styling
+@mixin dialog-box-simple($tag, $attributes: $dialog-attributes, $ns: $dialog-namespace) {
+	$collector: ();
+	
+	@each $a in $attributes {
+		$name: nth($a, 1);
+		$color: nth($a, 2);
+		$bg: nth($a, 3);
+
+		$cur: append-selector("#{$tag}", ".#{$name}");
+		
+		%#{$ns}-#{$name}-color {
+			@include dialog-common-color($color, $bg);
+		}
+
+		#{$cur} {
+			@extend %#{$ns}-#{$name}-color;
+		}
+		
+		$collector: append($collector, $cur, comma);
+	}
+	
+	#{$collector} {
+		@content;
+	}
+}
+
+@mixin dialog-box-sprite($spritemap, $container: (div, aside), $single: p, $attributes: $dialog-attributes, $ns: $dialog-namespace, $icon-width: $dialog-icon-width, $icon-height: $dialog-icon-height, $padding: $dialog-padding, $border: $dialog-border, $fc-multiplier: $dialog-fc-multiplier) {
+	$col-container: ();
+	$col-single: ();
+	
+	$offset: 0;
+	@each $a in $attributes {
+		$name: nth($a, 1);
+		$color: nth($a, 2);
+		$bg: nth($a, 3);
+	
+		%#{$ns}-#{$name}-color {
+			@include dialog-common-color($color, $bg, $border);
+		}
+
+		$cur-container: append-selector("#{$container}", ".#{$name}");
+		$cur-single: append-selector("#{$single}", ".#{$name}");
+		
+		#{$cur-single}, #{$cur-container} {
+			@extend %#{$ns}-#{$name}-color;
+		}
+		
+		#{$cur-single}, #{nest("#{$cur-container}", "> :first-child")} {
+			&:before {
+				background-position: $offset 0;
+			}
+		}
+		
+		$col-container: append($col-container, $cur-container, comma);
+		$col-single: append($col-single, $cur-single, comma);
+		$offset: $offset - $icon-width;
+	}
+	
+	#{$col-container} {
+		@include dialog-container-sprite($padding, $fc-multiplier);
+	}
+	
+	#{$col-single} {
+		@include dialog-single-sprite($padding);
+	}
+		
+	#{$col-container}, #{$col-single} {
+		@content;
+	}
+	
+	#{nest("#{$col-container}", "> :first-child")}, #{$col-single} {
+		&:before {
+			@include dialog-icon-sprite($icon-width, $icon-height, length($dialog-attributes) * $icon-width $icon-height);
+			@if length($spritemap) > 1 {
+				// http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
+				background-image: nth($spritemap, length($spritemap));
+				background-image: none, $spritemap; // hack to hide SVGs from IE
+			} @else {
+				background-image: $spritemap;
+			}
+		}
+	}
+}
+
+@mixin dialog-box-inline($container: (div, aside), $single: p, $attributes: $dialog-attributes, $ns: $dialog-namespace) {
+	$col-container: ();
+	$col-single: ();
+	
+	@each $a in $attributes {
+		$name: nth($a, 1);
+		$color: nth($a, 2);
+		$bg: nth($a, 3);
+		$image: nth($a, 4);
+	
+		%#{$ns}-#{$name}-color {
+			@include dialog-common-color($color, $bg, $border);
+		}
+
+		%#{$ns}-#{$name}-bg {
+			background-image: $image;
+			// possibly also add background-position here
+		}
+		
+		$cur-container: append-selector("#{$container}", ".#{$name}");
+		$cur-single: append-selector("#{$single}", ".#{$name}");
+		
+		#{$cur-single}, #{$cur-container} {
+			@extend %#{$ns}-#{$name}-color;
+		}
+		
+		#{$cur-single}, #{nest("#{$cur-container}", "> :first-child")} {
+			background-image: $image;
+		}
+		$col-container: append($col-container, $cur-container, comma);
+		$col-single: append($col-single, $cur-single, comma);
+	}
+	
+	#{$col-container} {
+		@include dialog-container-inline;
+	}
+	
+	#{$col-single} {
+		@include dialog-single-inline;
+	}
+		
+	#{$col-container}, #{$col-single} {
+		@content;
+	}
+	
+	#{nest("#{$col-container}", "> :first-child")}, #{$col-single} {
+		@include dialog-icon-inline;
+	}
+}
+
+// -------------------------------------------------------------------------------- Common styling
+
+@mixin dialog-single-common {
+	font-weight: bold;
+}
+
+@mixin dialog-container-common($fc-multiplier: $dialog-fc-multiplier) {
+	overflow: hidden;
+	> :first-child {
+		margin-top: 0;
+		font-size: $fc-multiplier * 1em;
+		line-height: 1em;
+		@content;
+	}
+	> :last-child { margin-bottom: 0 }
+	> * { color: inherit; position: relative; }
+}
+
+@mixin dialog-common-color($color, $bg, $border: $dialog-border) {
+	color: $color;
+	background-color: $bg;
+//	border: $border;
+}
+
+// -------------------------------------------------------------------------------- Spritemaps
+
+@mixin dialog-icon-sprite($icon-width: $dialog-icon-width, $icon-height: $dialog-icon-height, $bg-size: length($dialog-attributes) * $dialog-icon-width $dialog-icon-height) {
+	content: " ";
+	text-indent: -10em;
+	display: inline-block;
+	width: $icon-width;
+	height: $icon-height;
+	vertical-align: middle;
+	background-repeat: no-repeat;
+	@include background-size($bg-size);
+}
+
+@mixin dialog-single-sprite($padding: $dialog-padding) {
+	@include dialog-single-common;
+//	padding-left: $padding;
+	
+	&:before {
+		margin-right: $padding;
+	}
+}
+
+@mixin dialog-container-sprite($padding: $dialog-padding, $fc-multiplier: $dialog-fc-multiplier) {
+	@include dialog-container-common($fc-multiplier) {
+		&:before {
+			margin-right: $padding / $fc-multiplier;
+		}
+	}
+}
+
+// -------------------------------------------------------------------------------- Inline icons
+
+@mixin dialog-icon-inline($icon-width: $dialog-icon-width, $icon-height: $dialog-icon-height) {
+	background-repeat: no-repeat;
+	@include background-size($icon-width $icon-height);
+}
+
+@mixin dialog-single-inline($icon-width: $dialog-icon-width, $padding: $dialog-padding) {
+	@include dialog-single-common;
+	
+	@if (not comparabe($icon-width, $padding)) {
+		@warn "Icon width isn't comparable to the provided padding size, falling back on padding size";
+	}
+	padding-left: if(not comparabe($icon-width, $padding), $padding, $icon-width) + ($padding * 2);
+	background-position: $padding center;
+}
+
+@mixin dialog-container-inline($padding: $dialog-padding, $icon-width: $dialog-padding, $fc-multiplier: $dialog-fc-multiplier) {
+	@include dialog-container-common($fc-multiplier) {
+		padding-left: $icon-width + ($padding / $fc-multiplier);
+		background-position: left center;
+	}
+}

data/stylesheets/cimma/widgets/_dialog.scss

@@ -0,0 +1,85 @@
+@import "compass/utilities/color/contrast";
+
+// ====================================================================================================
+//                                                                       | Colors
+// ====================================================================================================
+
+$background-color: white !default;
+$foreground-color: black !default;
+
+//      name     dark    light
+$dialog-help:    #2E3192 #B9C2E1 !default; // purple
+$dialog-info:    #005FB4 #BDE5F8 !default; // blue
+$dialog-success: #6F7D03 #DFE5B0 !default; // green
+$dialog-warning: #A0410D #EFBBA0 !default; // orange
+$dialog-error:   #C41616 #F8AAAA !default; // red
+
+$dialog-attributes:
+	( help    nth($dialog-help, 1) nth($dialog-help, 2)
+	, info    nth($dialog-info, 1) nth($dialog-info, 2)
+	, success nth($dialog-success, 1) nth($dialog-success, 2)
+	, warning nth($dialog-warning, 1) nth($dialog-warning, 2)
+	, error   nth($dialog-error, 1) nth($dialog-error, 2)
+	) !default;
+
+// ====================================================================================================
+//                                                                       | Extend Classes
+// ====================================================================================================
+
+@import "buttons";
+
+@each $a in $dialog-attributes {
+	$name: nth($a, 1);
+	$color: nth($a, 2);
+	$bg: nth($a, 3);
+
+//	%dialog-colors.#{$name} {
+//		color: $color;
+//		background-color: $bg;
+//	}
+
+	%dialog-colors-inverted.#{$name} {
+		color: $bg;
+		background-color: $color;
+	}
+
+	%dialog-colors-light.#{$name} {
+		background-color: $bg;
+		color: contrast-color($color);
+	}
+
+	%dialog-colors-dark.#{$name} {
+		background-color: $color;
+		color: contrast-color($color);
+	}
+
+	%badge-colors.#{$name} {
+		background-color: $color;
+		color: $background-color;
+	}
+
+	%button-colors.#{$name} {
+		@include button($base: $bg) {
+			@include button-text($color, inset);
+
+			@include button-states;
+		}
+	}
+
+	%button-colors-inverted.#{$name} {
+		@include button($base: $color) {
+			@include button-text($bg, inset);
+
+			@include button-states;
+		}
+	}
+
+	%button-colors-faded.#{$name} {
+		@include button($base: fade($bg, 10%)) {
+//			@include button-text($color, inset);
+			color: #CCC;
+
+			@include button-states;
+		}
+	}
+}

data/stylesheets/cimma/widgets/_font-awesome.scss

@@ -0,0 +1,264 @@
+// http://fortawesome.github.com/Font-Awesome/
+// This file is compatible with FontAwesome 2.0
+
+$font-path: 'fonts/' !default;
+
+@font-face {
+	font-family: 'FontAwesome';
+	src: url(#{$font-path}fontawesome-webfont.eot);
+	src: url(#{$font-path}fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
+	url(#{$font-path}fontawesome-webfont.woff) format('woff'),
+	url(#{$font-path}fontawesome-webfont.ttf) format('truetype'),
+	url(#{$font-path}fontawesome-webfont.svgz#FontAwesomeRegular) format('svg'),
+	url(#{$font-path}fontawesome-webfont.svg#FontAwesomeRegular) format('svg');
+	font-weight : normal;
+	font-style : normal;
+}
+
+// Icons must be a list of lists:
+// ($style-name1 $icon-character1, $style-name2 $icon-character2)
+@mixin awesome-icons($icons) {
+	*[class^="preicon"]:before {
+		font-family: FontAwesome;
+		padding-right: .25em;
+	}
+	
+	*[class^="posticon"]:after {
+		font-family: FontAwesome;
+		padding-left: .25em;
+	}
+	
+	@each $i in $icons {
+		.preicon-#{nth($i, 1)}:before, .posticon-#{nth($i, 1)}:after {
+			content: nth($i, 2);
+		}
+	}
+}
+
+$icon-glass:                "\f000";
+$icon-music:                "\f001";
+$icon-search:               "\f002";
+$icon-envelope:             "\f003";
+$icon-heart:                "\f004";
+$icon-star:                 "\f005";
+$icon-star-empty:           "\f006";
+$icon-user:                 "\f007";
+$icon-film:                 "\f008";
+$icon-th-large:             "\f009";
+$icon-th:                   "\f00a";
+$icon-th-list:              "\f00b";
+$icon-ok:                   "\f00c";
+$icon-remove:               "\f00d";
+$icon-zoom-in:              "\f00e";
+
+$icon-zoom-out:             "\f010";
+$icon-off:                  "\f011";
+$icon-signal:               "\f012";
+$icon-cog:                  "\f013";
+$icon-trash:                "\f014";
+$icon-home:                 "\f015";
+$icon-file:                 "\f016";
+$icon-time:                 "\f017";
+$icon-road:                 "\f018";
+$icon-download-alt:         "\f019";
+$icon-download:             "\f01a";
+$icon-upload:               "\f01b";
+$icon-inbox:                "\f01c";
+$icon-play-circle:          "\f01d";
+$icon-repeat:               "\f01e";
+
+// \f020 doesn't work in Safari, all shifted one down
+$icon-refresh:              "\f021";
+$icon-list-alt:             "\f022";
+$icon-lock:                 "\f023";
+$icon-flag:                 "\f024";
+$icon-headphones:           "\f025";
+$icon-volume-off:           "\f026";
+$icon-volume-down:          "\f027";
+$icon-volume-up:            "\f028";
+$icon-qrcode:               "\f029";
+$icon-barcode:              "\f02a";
+$icon-tag:                  "\f02b";
+$icon-tags:                 "\f02c";
+$icon-book:                 "\f02d";
+$icon-bookmark:             "\f02e";
+$icon-print:                "\f02f";
+
+$icon-camera:               "\f030";
+$icon-font:                 "\f031";
+$icon-bold:                 "\f032";
+$icon-italic:               "\f033";
+$icon-text-height:          "\f034";
+$icon-text-width:           "\f035";
+$icon-align-left:           "\f036";
+$icon-align-center:         "\f037";
+$icon-align-right:          "\f038";
+$icon-align-justify:        "\f039";
+$icon-list:                 "\f03a";
+$icon-indent-left:          "\f03b";
+$icon-indent-right:         "\f03c";
+$icon-facetime-video:       "\f03d";
+$icon-picture:              "\f03e";
+
+$icon-pencil:               "\f040";
+$icon-map-marker:           "\f041";
+$icon-adjust:               "\f042";
+$icon-tint:                 "\f043";
+$icon-edit:                 "\f044";
+$icon-share:                "\f045";
+$icon-check:                "\f046";
+$icon-move:                 "\f047";
+$icon-step-backward:        "\f048";
+$icon-fast-backward:        "\f049";
+$icon-backward:             "\f04a";
+$icon-play:                 "\f04b";
+$icon-pause:                "\f04c";
+$icon-stop:                 "\f04d";
+$icon-forward:              "\f04e";
+
+$icon-fast-forward:         "\f050";
+$icon-step-forward:         "\f051";
+$icon-eject:                "\f052";
+$icon-chevron-left:         "\f053";
+$icon-chevron-right:        "\f054";
+$icon-plus-sign:            "\f055";
+$icon-minus-sign:           "\f056";
+$icon-remove-sign:          "\f057";
+$icon-ok-sign:              "\f058";
+$icon-question-sign:        "\f059";
+$icon-info-sign:            "\f05a";
+$icon-screenshot:           "\f05b";
+$icon-remove-circle:        "\f05c";
+$icon-ok-circle:            "\f05d";
+$icon-ban-circle:           "\f05e";
+
+$icon-arrow-left:           "\f060";
+$icon-arrow-right:          "\f061";
+$icon-arrow-up:             "\f062";
+$icon-arrow-down:           "\f063";
+$icon-share-alt:            "\f064";
+$icon-resize-full:          "\f065";
+$icon-resize-small:         "\f066";
+$icon-plus:                 "\f067";
+$icon-minus:                "\f068";
+$icon-asterisk:             "\f069";
+$icon-exclamation-sign:     "\f06a";
+$icon-gift:                 "\f06b";
+$icon-leaf:                 "\f06c";
+$icon-fire:                 "\f06d";
+$icon-eye-open:             "\f06e";
+
+$icon-eye-close:            "\f070";
+$icon-warning-sign:         "\f071";
+$icon-plane:                "\f072";
+$icon-calendar:             "\f073";
+$icon-random:               "\f074";
+$icon-exchange:             $icon-random;
+$icon-comment:              "\f075";
+$icon-magnet:               "\f076";
+$icon-chevron-up:           "\f077";
+$icon-chevron-down:         "\f078";
+$icon-retweet:              "\f079";
+$icon-shopping-cart:        "\f07a";
+$icon-folder-close:         "\f07b";
+$icon-folder-open:          "\f07c";
+$icon-resize-vertical:      "\f07d";
+$icon-resize-horizontal:    "\f07e";
+
+$icon-bar-chart:            "\f080";
+$icon-twitter-sign:         "\f081";
+$icon-facebook-sign:        "\f082";
+$icon-camera-retro:         "\f083";
+$icon-key:                  "\f084";
+$icon-cogs:                 "\f085";
+$icon-comments:             "\f086";
+$icon-thumbs-up:            "\f087";
+$icon-thumbs-down:          "\f088";
+$icon-star-half:            "\f089";
+$icon-heart-empty:          "\f08a";
+$icon-signout:              "\f08b";
+$icon-linkedin-sign:        "\f08c";
+$icon-pushpin:              "\f08d";
+$icon-external-link:        "\f08e";
+
+$icon-signin:               "\f090";
+$icon-trophy:               "\f091";
+$icon-github-sign:          "\f092";
+$icon-upload-alt:           "\f093";
+$icon-lemon:                "\f094";
+$icon-phone:                "\f095";
+$icon-check-empty:          "\f096";
+$icon-bookmark-empty:       "\f097";
+$icon-phone-sign:           "\f098";
+$icon-twitter:              "\f099";
+$icon-facebook:             "\f09a";
+$icon-github:               "\f09b";
+$icon-unlock:               "\f09c";
+$icon-credit-card:          "\f09d";
+$icon-rss:                  "\f09e";
+
+$icon-hdd:                  "\f0a0";
+$icon-bullhorn:             "\f0a1";
+$icon-bell:                 "\f0a2";
+$icon-certificate:          "\f0a3";
+$icon-hand-right:           "\f0a4";
+$icon-hand-left:            "\f0a5";
+$icon-hand-up:              "\f0a6";
+$icon-hand-down:            "\f0a7";
+$icon-circle-arrow-left:    "\f0a8";
+$icon-circle-arrow-right:   "\f0a9";
+$icon-circle-arrow-up:      "\f0aa";
+$icon-circle-arrow-down:    "\f0ab";
+$icon-globe:                "\f0ac";
+$icon-wrench:               "\f0ad";
+$icon-tasks:                "\f0ae";
+
+$icon-filter:               "\f0b0";
+$icon-briefcase:            "\f0b1";
+$icon-fullscreen:           "\f0b2";
+
+$icon-group:                "\f0c0";
+$icon-link:                 "\f0c1";
+$icon-cloud:                "\f0c2";
+$icon-beaker:               "\f0c3";
+$icon-cut:                  "\f0c4";
+$icon-copy:                 "\f0c5";
+$icon-paper-clip:           "\f0c6";
+$icon-save:                 "\f0c7";
+$icon-sign-blank:           "\f0c8";
+$icon-reorder:              "\f0c9";
+$icon-list-ul:              "\f0ca";
+$icon-list-ol:              "\f0cb";
+$icon-strikethrough:        "\f0cc";
+$icon-underline:            "\f0cd";
+$icon-table:                "\f0ce";
+
+$icon-magic:                "\f0d0";
+$icon-truck:                "\f0d1";
+$icon-pinterest:            "\f0d2";
+$icon-pinterest-sign:       "\f0d3";
+$icon-google-plus-sign:     "\f0d4";
+$icon-google-plus:          "\f0d5";
+$icon-money:                "\f0d6";
+$icon-caret-down:           "\f0d7";
+$icon-caret-up:             "\f0d8";
+$icon-caret-left:           "\f0d9";
+$icon-caret-right:          "\f0da";
+$icon-columns:              "\f0db";
+$icon-sort:                 "\f0dc";
+$icon-sort-down:            "\f0dd";
+$icon-sort-up:              "\f0de";
+
+$icon-envelope-alt:         "\f0e0";
+$icon-linkedin:             "\f0e1";
+$icon-undo:                 "\f0e2";
+$icon-legal:                "\f0e3";
+$icon-dashboard:            "\f0e4";
+$icon-comment-alt:          "\f0e5";
+$icon-comments-alt:         "\f0e6";
+$icon-bolt:                 "\f0e7";
+$icon-sitemap:              "\f0e8";
+$icon-umbrella:             "\f0e9";
+$icon-paste:                "\f0ea";
+
+$icon-user-md:              "\f200";