jensgro

// adds all necessary items to :before or :after (hence b-a) to create elements with CSS, such as triangles
// top, left, bottom, right shall be added directly to the rule
// $ba == before or after
@mixin b-a($ba:before, $border-width: 10px, $padding: $border-width * 1.5, $border-side: left, $top-position: 0, $position-side: $border-side, $position-side-distance: 0, $border-color: #000) {
    $seladd : ":";
    padding-#{$border-side}: $padding;
	
	position: relative;
	&#{$seladd+$ba} {
		content: ""; 

jensgro

@mixin box-s($x, $y, $offset, $color, $inset: false) {
    $ie-color: ie-hex-str($color);

  @if $inset {
	    -webkit-box-shadow: inset $x $y $offset $color;
			    box-shadow: inset $x $y $offset $color;			
	} @else {
	    -webkit-box-shadow: $x $y $offset $color;
			    box-shadow: $x $y $offset $color;	
		filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$ie-color}');				

jensgro

// This is the central stylesheet. 

// This variable is important to distinguish between legacy browsers and the rest.
// It has importance in conjunction with the legacy-mixin.
$isoldIE: false;

@import "compass";

// import all mixins
@import "mixins/jg-mixins",

jensgro

$isoldIE: true;
// import all mixins
@import "mixins/jg-mixins"
  	"mixins/legacy-mixins";


@import "partials/colors",
		"partials/before-after",
		"partials/before-after-legacy";

jensgro

// Converts a solid color with an alpha-channel-value into rgba 
// and an IE-filter as fallback for oldIE (IE up to version 8)
@mixin all-rgba($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-color: ie-hex-str($rgba);
  @if $isoldIE == false {
	  background-color: $color; // fallback for old browser that are not oldIE - very seldom
	  background-color: $rgba;
	} @else if $isoldIE == true {
	  background-color: transparent; // counteract against the defintion for older modern browsers

jensgro

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
    /* Retina-specific stuff here */
}
/* read more: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ */

jensgro

/**
 * Transforms und Z-Index
 */
div {
	height: 100px;
	width: 100px;
	position: absolute;
}
#a {
	top: 100px;

jensgro

/**
 * Animierte Listeneinträge - könnten Headlines sein
 */

body {
      font-family: 'open sans', helvetica, arial, 
      sans-serif;
    }
    ul {
      width: 40em;

jensgro

// names and colors from http://flatuicolors.com/

$turquoise:     	#1ABC9C;
$green-sea: 		#16A085;
$emerland: 			#2ECC71;
$nephritis: 		#27AE60;
$peter-river: 		#3498DB;
$belize-hole: 		#2980B9;
$amethyst: 			#9B59B6;
$wisteria: 			#8E44AD;

jensgro

/**
 * Übung Adaptives Layout
 */
 
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }

nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }