better_styles 0.0.0.33

data/assets/stylesheets/better/icons/orderlifticons.scss

@@ -0,0 +1,300 @@
+//** Load fonts from this directory.
+$olicons-font-path: "/assets/betterfonts/";
+//** File name for all font files.
+// $olicons-font-name: "orderlifticons-webfont" !default;
+$olicons-font-name: "newmagicons-regular-webfont";
+//** Element ID within SVG icon file.
+$olicons-font-svg-id: "orderlifticonsregular";
+
+$olicons-class-name: "olicons";
+
+
+@font-face {
+  font-family: 'orderlifticonsregular';
+	src: asset-url('#{$olicons-font-path}#{$olicons-font-name}.eot');
+}
+
+@font-face {
+  font-family: 'orderlifticonsregular';
+  src: 	asset-url('#{$olicons-font-path}#{$olicons-font-name}.woff') format('woff'),
+			  asset-url('#{$olicons-font-path}#{$olicons-font-name}.ttf') format('truetype'),
+			  asset-url('#{$olicons-font-path}#{$olicons-font-name}.svg##{$olicons-font-svg-id}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+
+[class^="#{$olicons-class-name}-"]:before,
+[class*=" #{$olicons-class-name}-"]:before {
+  font-family: orderlifticonsregular;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.4em; // make them bigger
+  display: block;
+  position: relative;
+  // top: 0; right: 0; bottom: 0; left: 0;
+  text-decoration: inherit;
+  vertical-align: middle;
+  line-height: .9em;
+  color: inherit;
+  
+  // make icons thinner in webkit (white icons on dark background)
+  text-shadow: 0 0 0 rgba(0,0,0,.01);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+  
+  outline: none;
+  border: none;
+}
+
+
+
+
+[class^="#{$olicons-class-name}-"],
+[class*=" #{$olicons-class-name}-"] {
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+/* makes the font 33% larger relative to the icon container */
+.#{$olicons-class-name}-large:before {
+  vertical-align: middle;
+  font-size: 4/3em;
+}
+
+.btn, .nav-tabs {
+  [class^="#{$olicons-class-name}-"],
+  [class*=" #{$olicons-class-name}-"] {
+  /* keeps button heights with and without icons the same */
+    // font-size: 1.2em;
+    // line-height: .9em;
+    // vertical-align: middle;
+    // display: inline;
+  
+  }
+}
+
+
+
+
+.#{$olicons-class-name}-market:before { content: "\f001"; }
+.#{$olicons-class-name}-projects-empty:before { content: "\f002"; }
+.#{$olicons-class-name}-projects-full:before { content: "\f003"; }
+.#{$olicons-class-name}-tasks-empty:before { content: "\f004"; }
+.#{$olicons-class-name}-tasks-full:before { content: "\f005"; }
+.#{$olicons-class-name}-settings:before { content: "\f006"; }
+.#{$olicons-class-name}-overview:before { content: "\f007"; }
+.#{$olicons-class-name}-contacts:before { content: "\f008"; }
+.#{$olicons-class-name}-message-empty:before { content: "\f009"; }
+.#{$olicons-class-name}-message-full:before { content: "\f00a"; }
+.#{$olicons-class-name}-basket-empty:before { content: "\f00b"; }
+.#{$olicons-class-name}-basket-full:before { content: "\f00c"; }
+.#{$olicons-class-name}-bell:before { content: "\f00d"; }
+.#{$olicons-class-name}-notify:before { content: "\f00e"; }
+
+.#{$olicons-class-name}-about-me:before { content: "\f011"; }
+.#{$olicons-class-name}-portfolio:before { content: "\f012"; }
+.#{$olicons-class-name}-portfolio-alt:before { content: "\f013"; }
+.#{$olicons-class-name}-general-informations:before { content: "\f014"; }
+.#{$olicons-class-name}-contact-data:before { content: "\f015"; }
+.#{$olicons-class-name}-career:before { content: "\f016"; }
+.#{$olicons-class-name}-skills:before { content: "\f017"; }
+.#{$olicons-class-name}-view-list:before { content: "\f018"; }
+.#{$olicons-class-name}-view-tile:before { content: "\f019"; }
+.#{$olicons-class-name}-view-cards:before { content: "\f01a"; }
+.#{$olicons-class-name}-view-map:before { content: "\f01b"; }
+.#{$olicons-class-name}-state-active:before { content: "\f01c"; }
+.#{$olicons-class-name}-state-inactive:before { content: "\f01d"; }
+.#{$olicons-class-name}-edit:before { content: "\f01e"; }
+
+// double class
+.#{$olicons-class-name}-view-map-2:before { content: "\f015"; }
+
+.#{$olicons-class-name}-search:before { content: "\f021"; }
+.#{$olicons-class-name}-zoom-in:before { content: "\f022"; }
+.#{$olicons-class-name}-zoom-out:before { content: "\f023"; }
+.#{$olicons-class-name}-comment:before { content: "\f024"; }
+.#{$olicons-class-name}-share:before { content: "\f025"; }
+.#{$olicons-class-name}-like:before { content: "\f026"; }
+.#{$olicons-class-name}-lock:before { content: "\f027"; }
+.#{$olicons-class-name}-lock-open:before { content: "\f028"; }
+.#{$olicons-class-name}-chevron-up:before { content: "\f029"; }
+.#{$olicons-class-name}-chevron-right:before { content: "\f02a"; }
+.#{$olicons-class-name}-chevron-down:before { content: "\f02b"; }
+.#{$olicons-class-name}-chevron-left:before { content: "\f02c"; }
+.#{$olicons-class-name}-chevron-2-up:before { content: "\f02d"; }
+.#{$olicons-class-name}-chevron-2-right:before { content: "\f02e"; }
+
+.#{$olicons-class-name}-chevron-2-down:before { content: "\f031"; }
+.#{$olicons-class-name}-chevron-2-left:before { content: "\f032"; }
+.#{$olicons-class-name}-plus:before { content: "\f033"; }
+.#{$olicons-class-name}-minus:before { content: "\f034"; }
+.#{$olicons-class-name}-ok:before { content: "\f035"; }
+.#{$olicons-class-name}-close:before { content: "\f036"; }
+.#{$olicons-class-name}-plus-sign:before { content: "\f037"; }
+.#{$olicons-class-name}-minus-sign:before { content: "\f038"; }
+.#{$olicons-class-name}-ok-sign:before { content: "\f039"; }
+.#{$olicons-class-name}-close-sign:before { content: "\f03a"; }
+.#{$olicons-class-name}-show-sb:before { content: "\f03b"; }
+.#{$olicons-class-name}-hide-sb:before { content: "\f03c"; }
+.#{$olicons-class-name}-filter:before { content: "\f03d"; }
+.#{$olicons-class-name}-preview:before { content: "\f03e"; }
+
+.#{$olicons-class-name}-hide-filter:before { content: "\f041"; }
+.#{$olicons-class-name}-female:before { content: "\f042"; }
+.#{$olicons-class-name}-male:before { content: "\f043"; }
+.#{$olicons-class-name}-sex:before { content: "\f044"; }
+.#{$olicons-class-name}-sort-down:before { content: "\f045"; }
+.#{$olicons-class-name}-sort-up:before { content: "\f046"; }
+.#{$olicons-class-name}-sort:before { content: "\f047"; }
+.#{$olicons-class-name}-product:before { content: "\f048"; }
+.#{$olicons-class-name}-object:before { content: "\f049"; }
+.#{$olicons-class-name}-question-answer:before { content: "\f04a"; }
+.#{$olicons-class-name}-secure:before { content: "\f04b"; }
+.#{$olicons-class-name}-analytics:before { content: "\f04c"; }
+.#{$olicons-class-name}-inquiry:before { content: "\f04d"; }
+.#{$olicons-class-name}-orders:before { content: "\f04e"; }
+
+.#{$olicons-class-name}-environmentally-friendly:before { content: "\f051"; }
+.#{$olicons-class-name}-waterproof:before { content: "\f052"; }
+.#{$olicons-class-name}-delivery:before { content: "\f053"; }
+.#{$olicons-class-name}-bright:before { content: "\f054"; }
+.#{$olicons-class-name}-dark:before { content: "\f055"; }
+.#{$olicons-class-name}-indoor:before { content: "\f056"; }
+.#{$olicons-class-name}-outdoor:before { content: "\f057"; }
+.#{$olicons-class-name}-accessible:before { content: "\f058"; }
+.#{$olicons-class-name}-smoker:before { content: "\f059"; }
+.#{$olicons-class-name}-non-smoker:before { content: "\f05a"; }
+.#{$olicons-class-name}-parking:before { content: "\f05b"; }
+.#{$olicons-class-name}-parking-meter:before { content: "\f05c"; }
+.#{$olicons-class-name}-elevator:before { content: "\f05d"; }
+.#{$olicons-class-name}-max-people:before { content: "\f05e"; }
+
+.#{$olicons-class-name}-wlan:before { content: "\f061"; }
+.#{$olicons-class-name}-beamer:before { content: "\f062"; }
+.#{$olicons-class-name}-microphone:before { content: "\f063"; }
+.#{$olicons-class-name}-sockets:before { content: "\f064"; }
+.#{$olicons-class-name}-internet:before { content: "\f065"; }
+.#{$olicons-class-name}-electricity:before { content: "\f066"; }
+.#{$olicons-class-name}-coffee:before { content: "\f067"; }
+.#{$olicons-class-name}-water:before { content: "\f068"; }
+.#{$olicons-class-name}-pizza:before { content: "\f069"; }
+.#{$olicons-class-name}-burger:before { content: "\f06a"; }
+.#{$olicons-class-name}-drinks:before { content: "\f06b"; }
+.#{$olicons-class-name}-fast-food:before { content: "\f06c"; }
+.#{$olicons-class-name}-waiter:before { content: "\f06d"; }
+.#{$olicons-class-name}-wine:before { content: "\f06e"; }
+
+.#{$olicons-class-name}-dishes:before { content: "\f071"; }
+.#{$olicons-class-name}-stove:before { content: "\f072"; }
+.#{$olicons-class-name}-conference:before { content: "\f073"; }
+.#{$olicons-class-name}-classroom:before { content: "\f074"; }
+.#{$olicons-class-name}-banquet:before { content: "\f075"; }
+.#{$olicons-class-name}-theatre:before { content: "\f076"; }
+.#{$olicons-class-name}-u-shape:before { content: "\f077"; }
+.#{$olicons-class-name}-workspace:before { content: "\f078"; }
+.#{$olicons-class-name}-men:before { content: "\f079"; }
+.#{$olicons-class-name}-woman:before { content: "\f07a"; }
+.#{$olicons-class-name}-company:before { content: "\f07b"; }
+.#{$olicons-class-name}-store:before { content: "\f07c"; }
+.#{$olicons-class-name}-bar:before { content: "\f07d"; }
+.#{$olicons-class-name}-restaurant:before { content: "\f07e"; }
+
+.#{$olicons-class-name}-men-investor:before { content: "\f081"; }
+.#{$olicons-class-name}-men-work:before { content: "\f082"; }
+.#{$olicons-class-name}-men-business:before { content: "\f083"; }
+.#{$olicons-class-name}-men-normal:before { content: "\f084"; }
+.#{$olicons-class-name}-men-business2:before { content: "\f085"; }
+.#{$olicons-class-name}-men-dev:before { content: "\f086"; }
+.#{$olicons-class-name}-men-html:before { content: "\f087"; }
+.#{$olicons-class-name}-plus-contact:before { content: "\f088"; }
+.#{$olicons-class-name}-plus-picture:before { content: "\f089"; }
+.#{$olicons-class-name}-plus-company:before { content: "\f08a"; }
+.#{$olicons-class-name}-plus-company-contact:before { content: "\f08b"; }
+.#{$olicons-class-name}-ruby:before { content: "\f08c"; }
+.#{$olicons-class-name}-html5:before { content: "\f08d"; }
+.#{$olicons-class-name}-facebook:before { content: "\f08e"; }
+
+.#{$olicons-class-name}-facebook-block:before { content: "\f091"; }
+.#{$olicons-class-name}-google:before { content: "\f092"; }
+.#{$olicons-class-name}-google-block:before { content: "\f093"; }
+.#{$olicons-class-name}-google-cut:before { content: "\f094"; }
+.#{$olicons-class-name}-google-cut-block:before { content: "\f095"; }
+.#{$olicons-class-name}-twitter:before { content: "\f096"; }
+.#{$olicons-class-name}-twitter-block:before { content: "\f097"; }
+.#{$olicons-class-name}-linkedin:before { content: "\f098"; }
+.#{$olicons-class-name}-linkedin-block:before { content: "\f099"; }
+.#{$olicons-class-name}-xing:before { content: "\f09a"; }
+.#{$olicons-class-name}-xing-block:before { content: "\f09b"; }
+.#{$olicons-class-name}-qr-code:before { content: "\f09c"; }
+.#{$olicons-class-name}-barcode:before { content: "\f09d"; }
+.#{$olicons-class-name}-cash:before { content: "\f09e"; }
+
+.#{$olicons-class-name}-gift:before { content: "\f101"; }
+
+
+/* New Stuff .. 22.01.2014 */
+.#{$olicons-class-name}-auge:before { content: "\f102"; }
+.#{$olicons-class-name}-inventar:before { content: "\f103"; }
+.#{$olicons-class-name}-analytics-alt:before { content: "\f104"; }
+.#{$olicons-class-name}-settings-alt:before { content: "\f105"; }
+.#{$olicons-class-name}-slidebar:before { content: "\f106"; }
+.#{$olicons-class-name}-info-circle:before { content: "\f107"; }
+.#{$olicons-class-name}-product-circle:before { content: "\f108"; }
+.#{$olicons-class-name}-pos-circle:before { content: "\f109"; }
+.#{$olicons-class-name}-user:before { content: "\f10a"; }
+.#{$olicons-class-name}-calendar:before { content: "\f10b"; }
+.#{$olicons-class-name}-glass:before { content: "\f10c"; }
+.#{$olicons-class-name}-trash:before { content: "\f10d"; }
+.#{$olicons-class-name}-resize:before { content: "\f10e"; }
+
+
+.#{$olicons-class-name}-product-alt:before { content: "\f111"; }
+.#{$olicons-class-name}-circle-plus:before { content: "\f112"; }
+.#{$olicons-class-name}-circle-times:before { content: "\f113"; }
+.#{$olicons-class-name}-circle-minus:before { content: "\f114"; }
+.#{$olicons-class-name}-circle-ok:before { content: "\f115"; }
+.#{$olicons-class-name}-auge-alt:before { content: "\f116"; }
+.#{$olicons-class-name}-inventar-alt:before { content: "\f117"; }
+.#{$olicons-class-name}-analytics-alt:before { content: "\f118"; }
+.#{$olicons-class-name}-euro-circle:before { content: "\f119"; }
+.#{$olicons-class-name}-reports:before { content: "\f11a"; }
+.#{$olicons-class-name}-tasks:before { content: "\f11b"; }
+.#{$olicons-class-name}-vcard:before { content: "\f11c"; }
+.#{$olicons-class-name}-catalog:before { content: "\f11d"; }
+.#{$olicons-class-name}-flyer:before { content: "\f11e"; }
+
+
+
+
+
+
+
+// T E S T normal signs
+.#{$olicons-class-name}-euro:before { content: "\20AC"; }
+
+
+
+
+// .#{$olicons-class-name}-:before { content: "\f001"; }
+// .#{$olicons-class-name}-:before { content: "\f002"; }
+// .#{$olicons-class-name}-:before { content: "\f003"; }
+// .#{$olicons-class-name}-:before { content: "\f004"; }
+// .#{$olicons-class-name}-:before { content: "\f005"; }
+// .#{$olicons-class-name}-:before { content: "\f006"; }
+// .#{$olicons-class-name}-:before { content: "\f007"; }
+// .#{$olicons-class-name}-:before { content: "\f008"; }
+// .#{$olicons-class-name}-:before { content: "\f009"; }
+// .#{$olicons-class-name}-:before { content: "\f00a"; }
+// .#{$olicons-class-name}-:before { content: "\f00b"; }
+// .#{$olicons-class-name}-:before { content: "\f00c"; }
+// .#{$olicons-class-name}-:before { content: "\f00d"; }
+// .#{$olicons-class-name}-:before { content: "\f00e"; }
+
+
+/* market projects-empty projects-full tasks-empty tasks-full settings overview contacts message-empty message-full basket-empty basket-full bell notify about-me portfolio portfolio-alt general-informations contact-data career skills view-list view-tile view-cards view-map state-active state-inactive edit view-map-2 search zoom-in zoom-out comment share like lock lock-open chevron-up chevron-right chevron-down chevron-left chevron-2-up chevron-2-right chevron-2-down chevron-2-left plus minus ok close plus-sign minus-sign ok-sign close-sign show-sb hide-sb filter preview hide-filter female male sex sort-down sort-up sort product object question-answer secure analytics inquiry orders environmentally-friendly waterproof delivery bright dark indoor outdoor accessible smoker non-smoker parking parking-meter elevator max-people wlan beamer microphone sockets internet electricity coffee water pizza burger drinks fast-food waiter wine dishes stove conference classroom banquet theatre u-shape workspace men woman company store bar restaurant men-investor men-work men-business men-normal men-business2 men-dev men-html plus-contact plus-picture plus-company plus-company-contact ruby html5 facebook facebook-block google google-block google-cut google-cut-block twitter twitter-block linkedin linkedin-block xing xing-block qr-code barcode cash gift */
+
+
+
+

data/assets/stylesheets/better/layout/_corset.scss

@@ -0,0 +1,57 @@
+
+.corset {
+    display: block; position: relative;
+    margin: 0 10px !important; // margin: 0 5%;
+    padding: 0; 
+    background: transparent;
+  	width: auto;
+      // max-width: 1200px;
+  	text-align: inherit;
+    &.center {  text-align: center; } 
+  	&.left {    text-align: left; }
+  	&.right {   text-align: right; }
+
+  	&.full { margin: 0 10px !important; }
+    
+    &.tight { margin: 0 30px !important; }
+    &.extra-tight { margin: 0 40px !important; }
+    &.ultra-tight { margin: 0 50px !important; }
+    
+	.presenter {
+		min-height: 50px;
+		overflow: hidden;
+		text-align: center;
+	}
+	
+	&.top { z-index: 15; }
+    // min-width: 320px;
+}
+
+@include responsiveStep-sm {
+	
+	.corset {
+		&, &.tight, &.extra-tight, &.ultra-tight, &.full {
+			margin: 0 auto !important;
+		}
+		width: 90% !important;
+		&.tight { width: 70% !important; }
+		&.extra-tight { width: 60% !important; }
+		&.ultra-tight { width: 50% !important; }
+		&.full { width: 96% !important; margin: 0 auto !important; }
+	}
+	
+}
+
+@include responsiveStep-lg {
+	
+	.corset {
+		width: 80% !important;
+		max-width: 1200px;
+		&.tight { width: 60% !important; }
+		&.extra-tight { width: 50% !important; }
+		&.ultra-tight { width: 40% !important; }
+		&.full { width: 90% !important; max-width: 1400px; }
+	}
+	
+}
+

data/assets/stylesheets/better/layout/_fullpage_table.scss

@@ -0,0 +1,185 @@
+
+html, body, #body {
+	height: 100%;
+	// overflow-y: auto;
+}
+
+.fullpage-table, div.table {
+	width: 100%;
+	display: block;
+	position: relative;
+	& > .table-row, & > .tr {
+		display: block;
+		position: relative;
+		& > * {
+			display: block;
+			position: relative;
+		}
+	}
+  
+  .header-cell, .footer-cell { 
+    padding: 20px 0; 
+    &.bright {  background: rgba(255,255,255,.42); }
+    &.dark {    background: rgba(0,0,0,.23); }
+  }
+  
+	&.mobile {
+		height: 100%;
+		display: table;
+		top: 0; left: 0;
+		// z-index: 1;
+		& > .table-row {
+			display: table-row;
+			& > * {
+				display: table-cell;
+				vertical-align: middle;
+			}
+			&.top, &.top > * { vertical-align: top; }
+			&.middle, &.middle > * { vertical-align: middle; }
+			&.bottom, &.bottom > * { vertical-align: bottom; }
+		}
+		.fill { height: 100%; }
+    &.max-size { max-height: 800px; }
+	}
+  
+}
+
+
+
+
+.fixed-table, .layout-table, .inline_table {
+    display: block; position: relative;
+	padding: 0; margin: 0;
+    & > * {
+        display: block; position: relative;
+        padding: 0; margin: 0;
+        vertical-align: top;
+		&.top { vertical-align: top; }
+		&.middle { vertical-align: middle; }
+		&.bottom { vertical-align: bottom; }
+		
+    }
+}
+
+
+.inline_table {
+	display: table;
+	width: 100%;
+	& > * {
+		display: table-cell;
+		border-collapse: separate;
+		&.aside { width: 220px; }
+		@for $i from 1 through 12 {
+		  &.col-#{$i} { width: percentage(1 / 12 * $i); }
+		}
+	}
+	&.middled > * { vertical-align: middle; }
+	&.grid > * {
+		padding: 0 #{$grid-gutter-width / 2};
+		&:first-child { padding-left: 0; }
+		&:last-child { padding-right: 0; }
+	}
+}
+
+
+
+
+// basics/magic
+// min-width: 750px
+@include responsiveStep-sm {
+	.fullpage-table {
+		height: 100%;
+		&.max-size { max-height: 800px; }
+		display: table;
+		top: 0; left: 0;
+		// z-index: 1;
+		& > .table-row {
+			display: table-row;
+			& > * {
+				display: table-cell;
+				vertical-align: middle;
+			}
+			&.top, &.top > * { vertical-align: top; }
+			&.middle, &.middle > * { vertical-align: middle; }
+			&.bottom, &.bottom > * { vertical-align: bottom; }
+		}
+		.fill { height: 100%; }
+	}
+	div.table {
+		height: 100%;
+		display: table;
+		top: 0; left: 0;
+		& > .tr, & > .row, & > .table-row {
+			display: table-row;
+			& > .td, & > .th, & > .cell {
+				display: table-cell;
+				vertical-align: middle;
+				padding: 10px;
+				&.top { vertical-align: top; }
+				&.bottom { vertical-align: bottom; }
+			}
+		}
+	}
+	
+	.fixed-table, .layout-table {
+		display: table;
+	    width: 100%;
+		& > * {
+	        display: table-cell;
+	        border-collapse: separate;
+			&.aside { width: 220px; }
+			&.picture { width: 150px; }
+			&.ten {     width: 10%; }
+			&.twenty {  width: 20%; }
+			&.thirty {  width: 30%; }
+			&.fourty {  width: 40%; }
+			&.fivty {   width: 50%; }
+			&.sixty {   width: 60%; }
+			&.seventy { width: 70%; }
+			&.eighty {  width: 80%; }
+			&.ninety {  width: 90%; }
+			@for $i from 1 through 12 {
+			  &.col-#{$i} { width: percentage(1 / 12 * $i); }
+			}
+	    }
+		&.grid > * {
+			padding: 0 #{$grid-gutter-width / 2};
+			&:first-child { padding-left: 0; }
+			&:last-child { padding-right: 0; }
+		}
+		&.middled > * { vertical-align: middle; }
+	}
+	
+	.fixed-table {
+	    table-layout:fixed;
+	    & > * {
+	        border-spacing: 10px;
+	    }
+		&.boxed { max-width: 750px; margin: 0 auto; }
+	}
+
+	
+	
+}
+
+@include responsiveStep-md {
+	.fixed-table {
+		&.boxed { max-width: 970px; } 
+	}
+}
+
+@include responsiveStep-lg {
+	.fixed-table {
+		&.boxed { max-width: 1170px; }
+	}
+}
+
+
+.modal-content .fullpage-table {
+	display: block;
+	& > .table-row {
+		display: block;
+		& > * { display: block; }
+	}
+}
+