shim.scss in webshims-rails-1.12.0

- old
+ new

@@ -5,33 +5,10 @@
 	visibility: hidden !important;
 	position: absolute;
 	top: -999999px;
 }
 
-/*
-.webshims-debug-list {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	margin: 5px;
-	padding: 5px;
-	list-style: none;
-	background: #fff;
-	color: #930;
-	font-size: 16px;
-	font-weight: bold;
-	max-height: 200px;
-	z-index: 99999;
-	overflow-y: auto;
-	
-	li {
-		border: 1px solid #c60;
-		margin: 2px 0;
-		padding: 5px;
-	}
-}*/
 
 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
 	display: block;
 }
 
@@ -231,23 +208,32 @@
 
 /*
  * popovers
  */
 .ws-popover {
+	font-size: 13px;
 	display: block;
 	visibility: hidden;
 	overflow: hidden;
 	position: absolute;
 	top: 0;
 	left: 0;
-	padding: 0 6px 0;
-	margin: 0 0 0 -6px;
+	outline: none;
+	padding: 0 em(12) 0;
+	margin: 0 0 0 em(-12);
 	z-index: 1100;
-	min-width: 90px;
+	min-width: em(50);
+	-webkit-transform: translate3d(0px, 0px, 0px);
+	-webkit-backface-visibility: hidden;
+	-webkit-transform-style: preserve-3d;
+	transform: translate3d(0px, 0px, 0px);
+	transform-style: preserve-3d;
+	backface-visibility: hidden;
 	transition: visibility 400ms ease-in-out;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	
 	&.no-transition	{
 		display: none;
 	}
 	
@@ -258,39 +244,41 @@
 }
 
 .ws-po-outerbox {
 	position: relative;
 	opacity: 0;
-	padding: 11px 0 4px;
+	padding: em(11) 0 em(9);
 	-webkit-transform: translate(0, -100%);
 	transform: translate(0, -100%);
 	transition: all 400ms ease-in-out;
 	
 	[data-vertical="bottom"] & {
 	  -webkit-transform: translate(0, 100%);
 		transform: translate(0, 100%);
-		padding: 4px 0 11px;
+		padding: em(4) 0 em(11);
 	}
 	
 	[data-vertical="middle"] & {
-	  -webkit-transform: translate(0, 0) scale(0.3);
+		-webkit-transform: translate(0, 0) scale(0.3);
 		transform: translate(0, 0) scale(0.3);
-		padding: 4px 0;
+		padding: em(4) 0;
 	}
 
-	.ws-popover.ws-po-visible & {
+	.ws-popover.ws-po-visible &,
+	div.ws-popover[data-vertical][data-horizontal].ws-po-visible & {
 		opacity: 1;
 		-webkit-transform: translate(0, 0) scale(1);
 		transform: translate(0, 0) scale(1);
 	}
 }
 
 .ws-po-box {
-	border: 1px solid #ccc;
-	background: #fefefe;
-	padding: 5px;
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+	border: em(1) solid #ccc;
+	background: #fff;
+	padding: em(5) em(5) em(3);
+	border-radius: 3px;
+	box-shadow: 0 em(1) em(5) rgba(0, 0, 0, 0.25);
 	
 	
 	button {
 		display: inline-block;
 		overflow: visible;
@@ -301,11 +289,11 @@
 		-moz-box-sizing: content-box;
 		box-sizing: content-box;
 		-webkit-appearance: none;
 		appearance: none;
 		box-sizing: content-box;
-		font-family: arial, sans-serif;
+		font-family: inherit;
 		background: transparent;
 		cursor: pointer;
 
 		&::-moz-focus-inner {
 			border: 0;
@@ -319,37 +307,36 @@
 	}
 }
 
 .ws-po-arrow {
 	position: absolute;
-	top: 4px;
-	left: 20px;
+	top: em(4);
+	left: em(20);
 	display: block;
 	width: 0;
 	height: 0;
-	border-left: 9px solid transparent;
-	border-right: 9px solid transparent;
-	border-bottom: 7px solid #ccc;
+	border-left: em(8) solid transparent;
+	border-right: em(8) solid transparent;
+	border-bottom: em(8) solid #ccc;
 	border-top: none;
 	zoom: 1;
-	font-size: 0;
 	
 	[data-horizontal="center"] & {
 		left: 50%;
-		margin-left: -5px;
+		margin-left: em(-4);
 	}
 	
 	[data-horizontal="right"] & {
 		left: auto;
-		right: 20px;
+		right: em(20);
 	}
 	
 	[data-vertical="bottom"] & {
 		top: auto;
-		bottom: 4px;
+		bottom: em(4);
 		border-bottom: none;
-		border-top: 7px solid #ccc;
+		border-top: em(8) solid #ccc;
 	}
 
 	html & {
 		border-left-color: transparent;
 		border-right-color: transparent;
@@ -365,25 +352,25 @@
 		display: none;
 	}
 
 	.ws-po-arrowbox {
 		position: relative;
-		top: 1px;
-		left: -9px;
+		top: em(1);
+		left: em(-6.7);
 		display: block;
 		width: 0;
 		height: 0;
-		border-left: 9px solid transparent;
-		border-right: 9px solid transparent;
-		border-bottom: 7px solid #fefefe;
+		border-left: em(7) solid transparent;
+		border-right: em(7) solid transparent;
+		border-bottom: em(7) solid #fefefe;
 		border-top: none;
 		z-index: 999999999;
 		
 		[data-vertical="bottom"] & {
-			top: -9px;
+			top: em(-8);
 			border-bottom: none;
-			border-top: 7px solid #fefefe;
+			border-top: em(7) solid #fefefe;
 		}
 	}
 }
 
 
@@ -392,16 +379,18 @@
 	display: none;
 }
 
 .datalist-polyfill {
 	position: absolute !important;
-	font-family: "Lucida Grande", "MS Shell Dlg", "Calibri", sans-serif;
-	font-size: 13px;
+	
+	.ws-po-box {
+		padding: em(5) 0;
+	}
 
 	.datalist-box {
 		position: relative;
-		max-height: 200px;
+		max-height: em(200);
 		overflow: hidden;
 		overflow-x: hidden !important;
 		overflow-y: auto;
 
   	ul, li {
@@ -411,19 +400,19 @@
   
   	ul {
   		position: static !important;
   		overflow: hidden;
   		margin: 0;
-  		padding: 2px 0;
+  		padding: em(1) 0;
   		height: auto !important;
   		background-color: #fff;
   		color: #000;
   	}
   
   	li {
-  		margin: 1px 1px 1px 0;
-  		padding: 2px 2px 2px 5px;
+  		margin: em(1) 0;
+  		padding: em(2) em(10);
   		overflow: hidden;
   		white-space: nowrap;
   		cursor: default;
   		zoom: 1;
   		overflow: hidden;
@@ -453,11 +442,11 @@
   		font-size: 90%;
   		color: #666;
   		text-overflow: ellipsis;
   		vertical-align: bottom;
   		margin-top: 0.15em;
-  		margin-left: 10px;
+  		margin-left: em(10);
   		text-align: right;
   		transition: color 400ms;
   	}
   	
   	.has-option-label  {
@@ -486,11 +475,10 @@
 }
 
 
 .validity-alert {
 	display: inline-block;
-	font: 12px/140% sans-serif;
 	z-index: 1000000000;
 }
 
 .ws-errorbox {
 	display: none;
@@ -507,64 +495,91 @@
 		color: #933;
 		font: 90%/120% sans-serif;
 	}
 }
 
+@mixin progressbar {
+	border: 1px solid #ddd;
+	background: #f0f0f0;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+	border-radius: 4px;
+}
+
+@mixin progressvalue {
+	position: absolute;
+	display: block !important;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	height: 100%;
+	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset;
+	background: #0063a6 url(progress.gif);
+	border: 0;
+}
+
 progress {
 	position: relative;
 	display: inline-block;
 	width: 160px;
 	height: 16px;
-
+	overflow: hidden;
+	
 	&[data-position] {
+		@include progressbar;
 		vertical-align: -0.2em;
-		border: 1px solid #ccc;
-		background: #e6e6e6;
 	}
 
 	> * {
 		display: none !important;
 	}
 
 	span.progress-value {
-		position: absolute;
-		display: block !important;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		height: 100%;
-		background: #a66300;
+		@include progressvalue;
 	}
-
+	
 	&[aria-valuenow] span.progress-value {
-		background: #0063a6;
+		background-image: url(progress.png);
 	}
+	
+	.ws-replaceui & {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		
+		@include progressbar;
+		
+		&::-webkit-progress-bar { 
+			@include progressbar;
+			border: 0 none;
+		}
+		&::-webkit-progress-value { 
+			@include progressvalue;
+			background-image: url(progress.png);
+		}
+		&:indeterminate::-webkit-progress-bar { 
+			background-image: url(progress.gif);
+		}
+		
+		&::-moz-progress-bar { 
+			@include progressvalue;
+			background-image: url(progress.png);
+		}
+		&:indeterminate::-moz-progress-bar {
+			background-image: url(progress.gif);
+		}
+		/*ms styles*/
+		&:indeterminate {
+			background-image: url(progress.gif);
+		}
+		&::-ms-fill {
+			@include progressvalue;
+			background-image: url(progress.png);
+			animation-name: none;
+		}
+	}
 }
 
 
-/* localStorage */
-#swflocalstorageshim-wrapper {
-	position: absolute;
-	top: -999px;
-	left: -9999px;
-	overflow: hidden;
-	width: 215px;
-	min-width: 215px !important;
-	z-index: 2147483647;
-
-	.polyfill-exceeded-message {
-		margin: 0 0 5px;
-		padding: 5px;
-		background: #ffd;
-		color: #000;
-		font-size: 13px;
-	}
-
-	object {
-		min-height: 138px !important;
-		min-width: 215px !important;
-	}
-}
 
 details {
 	overflow: hidden;
 }
 summary {