cimma 0.1.1

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

@@ -0,0 +1,51 @@
+$baseline-font-family: $sans-serif !default;
+
+$line-height: 1.4 !default;
+
+$a-link   : #016bb0 !default; // dark cerulean
+$a-visited: #662d91 !default; // royal purple
+$a-hover  : lighten($a-link, 15%) !default;
+
+// -------------------------------------------------------------------------------- Block Elements
+
+body {
+	font: 100%/#{$line-height} $baseline-font-family;
+}
+
+%baseline-common-block, #{headings()}, p, ul, ol, dl, table, blockquote, div, section, article, aside, fieldset, hgroup {
+	margin: 1em 0;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+// -------------------------------------------------------------------------------- Inline Elements
+
+a {
+	color: $a-link;
+	&:visited { color: $a-visited; }
+	&:hover { color: $a-hover; }
+}
+
+
+abbr[title] { // Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+	border-bottom: 1px dotted;
+}
+
+address {
+	white-space: pre;
+	white-space: pre-line;
+}
+
+b, strong { // Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+	font-weight: bold;
+}
+
+small {
+	font-size: .8em; // Addresses inconsistent and variable font size in all browsers.
+}

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

@@ -0,0 +1,30 @@
+@import "modular-scale";
+
+$heading-modular-sizes: true !default;
+$heading-font-family: $optima !default;
+$heading-scale-start: -2 !default;
+$heading-scale: major-third() !default;
+
+$heading-size-list: modular-scale-list($heading-scale-start, $heading-scale-start + 5, 1em, $heading-scale) !default;
+
+@include headings {
+	font-family: $heading-font-family;
+	font-weight: 700;
+	@extend %size !optional;
+}
+
+@if $heading-modular-sizes {
+	$i: 6;
+	@each $s in $heading-size-list {
+		@if $s != unquote("MS-LIST:") { // this is stupid, why is this here?
+			h#{$i}%size {
+				font-size: $s;
+
+				@if $s > 1em {
+					margin: scale-em($s, 1em) 0;
+				}
+			}
+			$i: $i - 1;
+		}
+	}
+}

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

@@ -0,0 +1,17 @@
+blockquote {
+	border-top: 1px solid;
+	border-bottom: 1px solid;
+	margin: 1em 2em;
+	font-family: $serif;
+	padding: 1em;
+	
+	&[cite]:after {
+		margin-top: 1em;
+		text-align: right;
+		font-style: italic;
+	}
+}
+
+q {
+	quotes: "\201C" "\201D" "\2018" "\2019";
+}

data/stylesheets/cimma/misc/_effects.scss

@@ -0,0 +1,32 @@
+// http://sachagreif.com/useful-sass-mixins/
+
+$emboss-highlight: rgba(white, 0.5) !default;
+$emboss-lowlight: rgba(black, 0.5) !default;
+
+// ====================================================================================================
+//                                                                       | Box Effects
+// ====================================================================================================
+
+@mixin emboss-box {
+    box-shadow: 0 1px 0 $emboss-highlight, inset 0 1px 0 $emboss-lowlight;
+}
+
+
+@mixin soft-outer-glow($color) {
+	@include box-shadow(0px 0px .25em .25em $color);
+}
+
+// ====================================================================================================
+//                                                                       | Text Effects
+// ====================================================================================================
+
+@mixin letterpress-text($direction: inset) {
+	$offset: if($direction == inset, 1, -1);
+    text-shadow: $offset 1px 0 $emboss-lowlight;
+}
+
+@mixin emboss-text($direction: inset) {
+	text-shadow:
+		-1px -1px 1px if($direction == inset, $emboss-lowlight, $emboss-highlight),
+		1px 1px 1px if($direction == inset, $emboss-highlight, $emboss-lowlight);
+}

data/stylesheets/cimma/widgets/_buttons.scss

@@ -0,0 +1,196 @@
+@import "compass/utilities/color/contrast";
+
+$button-gradient-style: simple;
+$button-base-color: #4ba3cc !default;
+$button-accent-color: false !default;
+
+// @private, don't tinker with these variables...
+$orig-button-gradient-style: $button-gradient-style;
+$orig-button-base-color: $button-base-color;
+$orig-button-accent-color: $button-accent-color;
+
+$button-color1: $button-base-color;
+$button-color2: $button-base-color;
+
+// ====================================================================================================
+//                                                                       | Primary Mixins (Impure)
+// ====================================================================================================
+
+@mixin button($style: $button-gradient-style, $base: $button-base-color, $accent: $button-accent-color) {
+	$orig-button-gradient-style: $button-gradient-style !global;
+	$orig-button-base-color: $button-base-color !global;
+	$orig-button-accent-color: $button-accent-color !global;
+
+	$button-gradient-style: $style !global;
+	$button-base-color: $base !global;
+	$button-accent-color: $accent !global;
+
+	background-color: $base;
+
+	$color-stops: if($style == flat or $style == inset, $base, button-color-stops($style, $base, $accent));
+	$button-color1: first-color-stop($color-stops) !global;
+	$button-color2: last-color-stop($color-stops) !global;
+
+	@if length($color-stops) > 1 {
+		@include button-border;
+		@include button-shadow;
+		@include background-image(linear-gradient($color-stops...));
+	} @else if $style == inset {
+		@include inset-button;
+	}
+
+	@content;
+
+	$button-gradient-style: $orig-button-gradient-style !global;
+	$button-base-color: $orig-button-base-color !global;
+	$button-accent-color: $orig-button-accent-color !global;
+}
+
+@mixin button-states {
+	&%hover, &:hover {
+		@include button-hover;
+		cursor: hand;
+		cursor: pointer;
+	}
+
+	&%active, &:active {
+		@include button-active;
+	}
+}
+
+// ====================================================================================================
+//                                                                       | Components
+// ====================================================================================================
+
+@mixin button-border($color: button-border-color()) {
+	border: 1px solid $color;
+}
+
+@mixin button-shadow($color: button-shadow-color()) {
+	@include box-shadow(inset 0 1px 0 $color, 0 1px 2px .5em rgba(#CCC, .3));
+}
+
+@mixin inset-button() {
+	@include box-shadow(inset 0 -1px 1px rgba(white, .3), inset 0 1px 1px rgba(black, .5));
+}
+
+// ---------------------------------------------------------------------- Text Appearance (Pure)
+
+@mixin button-text($color: white, $style: inset) {
+	color: $color;
+	$shadow-color: contrast-color($color, rgba(black, .8), rgba(white, .3));
+	$shadow-offset: contrast-style($color, 1px, -1px);
+	@if $style == inset {
+		$shadow-offset: $shadow-offset * -1;
+	}
+
+	//@if $style == pillow {
+	//	@include text-shadow(-2 (-2) 0 rgba(white, .3), 0 (-1) 0 rgba(black, .3), 0 1 0 rgba(black, .8), 0 2 0 rgba(white, .3));
+	//} @else {
+		@include text-shadow(0 $shadow-offset 0 $shadow-color);
+	//}
+}
+
+// ---------------------------------------------------------------------- Button States
+
+@mixin button-hover($style: $button-gradient-style, $base: darken($button-base-color, 5%), $accent: darken(if($button-accent-color, $button-accent-color, $button-base-color), 5%)) {
+	background-color: $base;
+	$color-stops: if($style == flat, $base, button-color-stops($style, $base, $accent));
+	@include background-image(linear-gradient($color-stops));
+}
+
+@mixin button-active($style: $button-gradient-style, $base: $button-base-color, $accent: darken($button-color2, 8%)) {
+	@if $style == flat {
+		background-color: $base;
+	} @else {
+		@include box-shadow(inset 0 1px 2px $accent)
+	}
+}
+
+// ====================================================================================================
+//                                                                       | Helper Functions
+// ====================================================================================================
+
+@function button-border-color($color: $button-color2) {
+	@return darken($color, 5%);
+}
+
+@function button-shadow-color($color: $button-color1) {
+	@return lighten($color, 15%);
+}
+
+// ----------------------------------------------------------------------  Gradients (Pure)
+
+@function button-color-stops-old($style, $base, $accent) {
+	$color1: $base;
+	$color2: if(not $accent, $base, $accent);
+
+	$brightnessDivsor: if(lightness($base) > 75, 2, 1);
+
+	@if $style == matte {
+		@if not $accent or $base == $accent {
+			$color1: lighten($base, 15%);
+		}
+
+		@return $color1, $color2 70%;
+	} @else if $style == shiny {
+		$color1: lighten($base, 25% / $brightnessDivsor);
+
+		@if not $accent or $base == $accent {
+			$color2: darken($base, 10%);
+		}
+
+		@return $color1, $base 50%, $color2;
+	} @else if $style == glass {
+		$color1: lighten($base, 8% / $brightnessDivsor);
+
+		@return $color1 50%, $base 51%;
+	} @else {
+		@if not $accent or $base == $accent {
+			$color2: darken($base, 10%);
+		}
+
+		@return $color1, $color2;
+	}
+}
+
+@function button-color-stops($style, $base, $accent) {
+	$color1: $base;
+	$color2: if(not $accent, $base, $accent);
+
+	$brightnessDivsor: if(lightness($base) > 75, 2, 1);
+
+	@if $style == matte {
+		@if not $accent or $base == $accent {
+			$color2: darken($base, 15%);
+		}
+
+		@return $color1, $color2 70%;
+	} @else if $style == shiny {
+		$color1: lighten($base, 25% / $brightnessDivsor);
+
+		@if not $accent or $base == $accent {
+			$color2: darken($base, 10%);
+		}
+
+		@return $color1, $base 50%, $color2;
+	} @else if $style == glass {
+		$color2: darken($base, 8% / $brightnessDivsor);
+
+		@return $color1 50%, $color2 51%;
+	} @else {
+		@if not $accent or $base == $accent {
+			$color2: darken($base, 10%);
+		}
+
+		@return $color1, $color2;
+	}
+}
+
+@function first-color-stop($colors) {
+	@return nth(nth($colors, 1), 1);
+}
+
+@function last-color-stop($colors) {
+	@return nth(nth($colors, length($colors)), 1);
+}

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

@@ -0,0 +1,129 @@
+// --------------------------------------------------------------------------------
+// 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";
+@import "translucencss/util/images";
+
+// ---------- Color/image definitions
+$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
+$dialog-attributes:
+	( help    #2E3192 #B9C2E1 // yellow
+	, info    #005FB4 #BDE5F8 // blue
+	, success #6F7D03 #DFE5B0 // green
+	, warning #A0410D #EFBBA0 // orange
+	, error   #C41616 #F8AAAA // red
+	) !default;
+
+@mixin dialog-box($spritemap, $attributes: $dialog-attributes, $icon-width: $dialog-icon-width, $icon-height: $dialog-icon-height, $padding: $dialog-padding, $border: $dialog-border, $fc-multiplier: $dialog-fc-multiplier, $class: dialog) {
+	$offset: 0;
+	@each $a in $dialog-attributes {
+		$name: nth($a, 1);
+		$color: nth($a, 2);
+		$bg: nth($a, 3);
+	
+		%dialog-colors.#{$name} {
+			@include dialog-color($color, $bg);
+		}
+		
+		p.#{$class}.#{$name}, div.#{$class}.#{$name} > :first-child, ul.#{$class}.#{$name} li:only-child {
+			&:before {
+				background-position: $offset 0;
+			}
+			$icon-width: 24px;
+			$offset: $offset - $icon-width;
+		}
+	}
+	
+	.dialog:first-child {
+		margin-top: 0;
+	}
+	
+	p.#{$class}, div.#{$class}, ul.#{$class} {
+		padding: $padding;
+		border: $border;
+		@content;
+		@extend %dialog-colors;
+	}
+	
+	p.#{$class}, ul.#{$class} {
+		@include dialog-p;
+	}
+	
+	div.#{$class} {
+		@include dialog-div($fc-multiplier * 1em);
+	}
+	
+	ul.#{$class} {
+		$border-width: if(type-of(nth($border, 1)) != number, 0, nth($border, 1));
+		@include dialog-ul($border-width);
+	}
+	
+	p.#{$class}, div.#{$class} > :first-child, ul.#{$class} li:only-child {
+		&:before {
+			background: $spritemap no-repeat;
+			@if length($spritemap) > 1 {
+				@include svg-background(nth($spritemap, 1));
+			}
+			@include dialog-sprite($padding, $icon-width, $icon-height, length($dialog-attributes) * $icon-width $icon-height);
+		}
+	}
+}
+
+// -------------------------------------------------------------------------------- Common styling
+
+@mixin dialog-p {
+	&:first-line { font-weight: bold; }
+}
+
+@mixin dialog-div($font-size: 1.4em) {
+	> :first-child {
+		font-size: $font-size;
+		line-height: 1em;
+		margin-top: 0;
+		
+		&:before {
+			@include rem(font-size, 1rem, 1em, scale-em($font-size, 1));
+		}
+	}
+	> :last-child { margin-bottom: 0 }
+	> * { color: inherit; }
+}
+
+@mixin dialog-ul($border-width: 2px) {
+	padding-left: 2em;
+	
+	li {
+		margin-left: -$border-width;
+	}
+	
+	li:only-child {
+		list-style-type: none;
+		margin-left: -1em;
+	}
+}
+
+@mixin dialog-color($color, $bg) {
+	color: $color;
+	background-color: $bg;
+}
+
+@mixin dialog-sprite($padding: $dialog-padding, $width: $dialog-icon-width, $height: $dialog-icon-height, $bg-size: length($dialog-attributes) * $dialog-icon-width $dialog-icon-height) {
+	content: " ";
+	margin-right: $padding;
+	text-indent: 110%;
+	display: inline-block;
+	width: $width;
+	height: $height;
+	vertical-align: middle;
+	@include background-size($bg-size);
+}