webshims-rails 1.11.6.1 → 1.12.0

data/vendor/assets/javascripts/webshims/shims/styles/scss/shim.scss

@@ -7,29 +7,6 @@
 	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;
@@ -233,19 +210,28 @@ output {
  * 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;
@@ -260,7 +246,7 @@ output {
 .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;
@@ -268,16 +254,17 @@ output {
 	[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);
@@ -285,10 +272,11 @@ output {
 }
 
 .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 {
@@ -303,7 +291,7 @@ output {
 		-webkit-appearance: none;
 		appearance: none;
 		box-sizing: content-box;
-		font-family: arial, sans-serif;
+		font-family: inherit;
 		background: transparent;
 		cursor: pointer;
 
@@ -321,33 +309,32 @@ output {
 
 .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 & {
@@ -367,21 +354,21 @@ output {
 
 	.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;
 		}
 	}
 }
@@ -394,12 +381,14 @@ datalist {
 
 .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;
@@ -413,15 +402,15 @@ datalist {
   		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;
@@ -455,7 +444,7 @@ datalist {
   		text-overflow: ellipsis;
   		vertical-align: bottom;
   		margin-top: 0.15em;
-  		margin-left: 10px;
+  		margin-left: em(10);
   		text-align: right;
   		transition: color 400ms;
   	}
@@ -488,7 +477,6 @@ datalist {
 
 .validity-alert {
 	display: inline-block;
-	font: 12px/140% sans-serif;
 	z-index: 1000000000;
 }
 
@@ -509,16 +497,35 @@ datalist {
 	}
 }
 
+@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;
 	}
 
 	> * {
@@ -526,44 +533,52 @@ progress {
 	}
 
 	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;

data/vendor/assets/javascripts/webshims/shims/styles/shim.css

@@ -4,29 +4,6 @@
   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; }
 
@@ -190,19 +167,28 @@ output {
  * 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 0.92308em 0;
+  margin: 0 0 0 -0.92308em;
   z-index: 1100;
-  min-width: 90px;
+  min-width: 3.84615em;
+  -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; }
+  box-sizing: content-box;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
   .ws-popover.no-transition {
     display: none; }
   .ws-popover.ws-po-visible {
@@ -212,28 +198,29 @@ output {
 .ws-po-outerbox {
   position: relative;
   opacity: 0;
-  padding: 11px 0 4px;
+  padding: 0.84615em 0 0.69231em;
   -webkit-transform: translate(0, -100%);
   transform: translate(0, -100%);
   transition: all 400ms ease-in-out; }
   [data-vertical="bottom"] .ws-po-outerbox {
     -webkit-transform: translate(0, 100%);
     transform: translate(0, 100%);
-    padding: 4px 0 11px; }
+    padding: 0.30769em 0 0.84615em; }
   [data-vertical="middle"] .ws-po-outerbox {
     -webkit-transform: translate(0, 0) scale(0.3);
     transform: translate(0, 0) scale(0.3);
-    padding: 4px 0; }
-  .ws-popover.ws-po-visible .ws-po-outerbox {
+    padding: 0.30769em 0; }
+  .ws-popover.ws-po-visible .ws-po-outerbox, div.ws-popover[data-vertical][data-horizontal].ws-po-visible .ws-po-outerbox {
     opacity: 1;
     -webkit-transform: translate(0, 0) scale(1);
     transform: translate(0, 0) scale(1); }
 
 .ws-po-box {
-  border: 1px solid #cccccc;
-  background: #fefefe;
-  padding: 5px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
+  border: 0.07692em solid #cccccc;
+  background: #fff;
+  padding: 0.38462em 0.38462em 0.23077em;
+  border-radius: 3px;
+  box-shadow: 0 0.07692em 0.38462em rgba(0, 0, 0, 0.25); }
   .ws-po-box button {
     display: inline-block;
     overflow: visible;
@@ -246,7 +233,7 @@ output {
     -webkit-appearance: none;
     appearance: none;
     box-sizing: content-box;
-    font-family: arial, sans-serif;
+    font-family: inherit;
     background: transparent;
     cursor: pointer; }
     .ws-po-box button::-moz-focus-inner {
@@ -258,28 +245,27 @@ output {
 
 .ws-po-arrow {
   position: absolute;
-  top: 4px;
-  left: 20px;
+  top: 0.30769em;
+  left: 1.53846em;
   display: block;
   width: 0;
   height: 0;
-  border-left: 9px solid transparent;
-  border-right: 9px solid transparent;
-  border-bottom: 7px solid #cccccc;
+  border-left: 0.61538em solid transparent;
+  border-right: 0.61538em solid transparent;
+  border-bottom: 0.61538em solid #cccccc;
   border-top: none;
-  zoom: 1;
-  font-size: 0; }
+  zoom: 1; }
   [data-horizontal="center"] .ws-po-arrow {
     left: 50%;
-    margin-left: -5px; }
+    margin-left: -0.30769em; }
   [data-horizontal="right"] .ws-po-arrow {
     left: auto;
-    right: 20px; }
+    right: 1.53846em; }
   [data-vertical="bottom"] .ws-po-arrow {
     top: auto;
-    bottom: 4px;
+    bottom: 0.30769em;
     border-bottom: none;
-    border-top: 7px solid #cccccc; }
+    border-top: 0.61538em solid #cccccc; }
   html .ws-po-arrow {
     border-left-color: transparent;
     border-right-color: transparent; }
@@ -290,31 +276,31 @@ output {
     display: none; }
   .ws-po-arrow .ws-po-arrowbox {
     position: relative;
-    top: 1px;
-    left: -9px;
+    top: 0.07692em;
+    left: -0.51538em;
     display: block;
     width: 0;
     height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    border-bottom: 7px solid #fefefe;
+    border-left: 0.53846em solid transparent;
+    border-right: 0.53846em solid transparent;
+    border-bottom: 0.53846em solid #fefefe;
     border-top: none;
     z-index: 999999999; }
     [data-vertical="bottom"] .ws-po-arrow .ws-po-arrowbox {
-      top: -9px;
+      top: -0.61538em;
       border-bottom: none;
-      border-top: 7px solid #fefefe; }
+      border-top: 0.53846em solid #fefefe; }
 
 datalist {
   display: none; }
 
 .datalist-polyfill {
-  position: absolute !important;
-  font-family: "Lucida Grande", "MS Shell Dlg", "Calibri", sans-serif;
-  font-size: 13px; }
+  position: absolute !important; }
+  .datalist-polyfill .ws-po-box {
+    padding: 0.38462em 0; }
   .datalist-polyfill .datalist-box {
     position: relative;
-    max-height: 200px;
+    max-height: 15.38462em;
     overflow: hidden;
     overflow-x: hidden !important;
     overflow-y: auto; }
@@ -325,13 +311,13 @@ datalist {
       position: static !important;
       overflow: hidden;
       margin: 0;
-      padding: 2px 0;
+      padding: 0.07692em 0;
       height: auto !important;
       background-color: #fff;
       color: #000; }
     .datalist-polyfill .datalist-box li {
-      margin: 1px 1px 1px 0;
-      padding: 2px 2px 2px 5px;
+      margin: 0.07692em 0;
+      padding: 0.15385em 0.76923em;
       overflow: hidden;
       white-space: nowrap;
       cursor: default;
@@ -359,7 +345,7 @@ datalist {
       text-overflow: ellipsis;
       vertical-align: bottom;
       margin-top: 0.15em;
-      margin-left: 10px;
+      margin-left: 0.76923em;
       text-align: right;
       transition: color 400ms; }
     .datalist-polyfill .datalist-box .has-option-label .option-label {
@@ -376,7 +362,6 @@ datalist {
 
 .validity-alert {
   display: inline-block;
-  font: 12px/140% sans-serif;
   z-index: 1000000000; }
 
 .ws-errorbox {
@@ -397,11 +382,14 @@ progress {
   position: relative;
   display: inline-block;
   width: 160px;
-  height: 16px; }
+  height: 16px;
+  overflow: hidden; }
   progress[data-position] {
-    vertical-align: -0.2em;
-    border: 1px solid #cccccc;
-    background: #e6e6e6; }
+    border: 1px solid #dddddd;
+    background: #f0f0f0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+    border-radius: 4px;
+    vertical-align: -0.2em; }
   progress > * {
     display: none !important; }
   progress span.progress-value {
@@ -411,28 +399,66 @@ progress {
     left: 0;
     bottom: 0;
     height: 100%;
-    background: #a66300; }
+    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset;
+    background: #0063a6 url(progress.gif);
+    border: 0; }
   progress[aria-valuenow] span.progress-value {
-    background: #0063a6; }
-
-/* localStorage */
-#swflocalstorageshim-wrapper {
-  position: absolute;
-  top: -999px;
-  left: -9999px;
-  overflow: hidden;
-  width: 215px;
-  min-width: 215px !important;
-  z-index: 2147483647; }
-  #swflocalstorageshim-wrapper .polyfill-exceeded-message {
-    margin: 0 0 5px;
-    padding: 5px;
-    background: #ffd;
-    color: #000;
-    font-size: 13px; }
-  #swflocalstorageshim-wrapper object {
-    min-height: 138px !important;
-    min-width: 215px !important; }
+    background-image: url(progress.png); }
+  .ws-replaceui progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 1px solid #dddddd;
+    background: #f0f0f0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+    border-radius: 4px;
+    /*ms styles*/ }
+    .ws-replaceui progress::-webkit-progress-bar {
+      border: 1px solid #dddddd;
+      background: #f0f0f0;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+      border-radius: 4px;
+      border: 0 none; }
+    .ws-replaceui progress::-webkit-progress-value {
+      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;
+      background-image: url(progress.png); }
+    .ws-replaceui progress:indeterminate::-webkit-progress-bar {
+      background-image: url(progress.gif); }
+    .ws-replaceui progress::-moz-progress-bar {
+      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;
+      background-image: url(progress.png); }
+    .ws-replaceui progress:indeterminate::-moz-progress-bar {
+      background-image: url(progress.gif); }
+    .ws-replaceui progress:indeterminate {
+      background-image: url(progress.gif); }
+    .ws-replaceui progress::-ms-fill {
+      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;
+      background-image: url(progress.png);
+      animation-name: none; }
 
 details {
   overflow: hidden; }