Permalink
Browse files

New CSS file

 * Rewrote CSS file
 * Added utility to generate minified CSS file
 * Added a minified version of the JS
 * Added .png images for non-mhtml version of CSS file
 * Added example .htaccess file
 * Added ariaFormat option to JS initiated sliders/ranges
 * Updated modernizr to 2.5.3
 * Updated all demos
  • Loading branch information...
1 parent 01084d3 commit 3f9e3467f255202abbcd4d19d579196541f6f0fa @freqdec committed Feb 26, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,6 @@
+# This is an example .htaccess file. I'm not saying that you should use it! It's
+# included in the download as an example for people who may not be old hands at
+# dealing with htaccess directives.
+
+# Add the correct mimetype for .mht files
+AddType message/rfc822 mht
View
@@ -1,116 +1,109 @@
-/*
- Sample tooltip code. Only works on grade A browsers (so no IE6, 7 or 8).
-
- See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ for full info on
- how to style generated content & the associated pitfalls
-
- This code to be taken as experimental & untested - use at your discretion
-
- If showing the tooltip above the sider handle you are relegated to showing
- single line tooltips due to styling constraints!
-*/
-
-.fd-slider-handle:before,
-.fd-slider-handle:after
- {
- content:"";
- /* Remove from screen */
- opacity:0;
- /* Firefox */
- -moz-transition-property: all;
- -moz-transition-duration: 0.3s;
- -moz-transition-delay: 0.2s;
- /* WebKit */
- -webkit-transition-property: all;
- -webkit-transition-duration: 0.3s;
- -webkit-transition-delay: 0.2s;
- /* Opera */
- -o-transition-property: all;
- -o-transition-duration: 0.3s;
- -o-transition-delay: 0.2s;
- /* Standard */
- transition-property: all;
- transition-duration: 0.3s;
- transition-delay: 0.2s;
- }
-/*
- The tooltip body - as we position it above the slider and position the tooltip arrow
- below it, we need to know the height of the body. This means that multi-line tooltips
- are not supported.
-
- To support multi-line tooltips, you will need to position the tooltip below the slider
- and the tooltip pointer above the tooltip body. Additionally, you will have to set the
- tooltip bodies "height" to auto
-*/
-.fd-slider-handle:before
- {
- display:block;
- position:absolute;
- top:-30px;
- left:-25px;
- margin:0;
- width:60px;
- padding:5px;
- height:14px;
- line-height:12px;
- font-size:10px;
- text-shadow:0 1px 0 #000;
- color:#fff;
- background:#222;
- z-index:1;
- /* Use the ARIA valuetext property, set by the script, to generate the tooltip content */
- content:attr(aria-valuetext);
- /* Border radius and box shadow */
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- -moz-box-shadow: 0 0 4px #aaa;
- -webkit-box-shadow: 0 0 4px #aaa;
- box-shadow: 0 0 4px #aaa;
- }
-.fd-slider-handle:after
- {
- outline:none;
- content:"";
- display:block;
- position:absolute;
- top:-14px;
- left:50%;
- margin:0 0 0 -5px;
- background:#222;
- z-index:2;
- width:10px;
- height:10px;
- overflow:hidden;
- /* Rotate element by 45 degress to get the "\/" pointer effect */
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- /* Add a box shadow */
- -moz-box-shadow: 0 0 4px #aaa;
- -webkit-box-shadow: 0 0 4px #aaa;
- box-shadow: 0 0 4px #aaa;
- /* Clip */
- clip:rect(4px, 14px, 14px, 4px);
- }
-/* Change opacity and position to kick in the transitions */
-.fd-slider-focused .fd-slider-handle:before,
-.fd-slider-hover .fd-slider-handle:before,
-.fd-slider-active .fd-slider-handle:before
- {
- top:-25px;
- opacity:1;
- }
-.fd-slider-focused .fd-slider-handle:after,
-.fd-slider-hover .fd-slider-handle:after,
-.fd-slider-active .fd-slider-handle:after
- {
- top:-9px;
- opacity:1;
- }
-/* Remove completely for IE */
-.oldie .fd-slider-handle:before,
-.oldie .fd-slider-handle:after
- {
- display:none;
+/*
+ Sample tooltip code. Only works on grade A browsers (so no IE6, 7 or 8).
+
+ See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
+ for full info on how to style generated content & the associated pitfalls.
+*/
+
+.fd-slider-handle:before,
+.fd-slider-handle:after
+ {
+ content:"";
+ /* Remove from screen */
+ opacity:0;
+ -webkit-transition-property: all;
+ -moz-transition-property: all;
+ -ms-transition-property: all;
+ -o-transition-property: all;
+ transition-property: all;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ -ms-transition-duration: 0.3s;
+ -o-transition-duration: 0.3s;
+ transition-duration: 0.3s;
+ -webkit-transition-delay: 0.2s;
+ -moz-transition-delay: 0.2s;
+ -ms-transition-delay: 0.2s;
+ -o-transition-delay: 0.2s;
+ transition-delay: 0.2s;
+ }
+/*
+ The tooltip body - as we position it above the slider and position the
+ tooltip arrow below it, we need to know the height of the body. This means
+ that multi-line tooltips are not supported.
+
+ To support multi-line tooltips, you will need to position the tooltip below
+ the slider and the tooltip pointer above the tooltip body. Additionally, you
+ will have to set the tooltip body "height" to auto
+*/
+.fd-slider-handle:before
+ {
+ display:block;
+ position:absolute;
+ top:-30px;
+ left:-25px;
+ margin:0;
+ width:60px;
+ padding:5px;
+ height:14px;
+ line-height:12px;
+ font-size:10px;
+ text-shadow:0 1px 0 #000;
+ color:#fff;
+ background:#222;
+ z-index:1;
+ /* Use the ARIA valuetext property, set by the script, to generate the
+ tooltip content */
+ content:attr(aria-valuetext);
+ -webkit-border-radius:3px;
+ -moz-border-radius:3px;
+ border-radius:3px;
+ -webkit-box-shadow: 0 0 4px #aaa;
+ -moz-box-shadow: 0 0 4px #aaa;
+ box-shadow: 0 0 4px #aaa;
+ }
+.fd-slider-handle:after
+ {
+ outline:none;
+ content:"";
+ display:block;
+ position:absolute;
+ top:-14px;
+ left:50%;
+ margin:0 0 0 -5px;
+ background:#222;
+ z-index:2;
+ width:10px;
+ height:10px;
+ overflow:hidden;
+ /* Rotate element by 45 degress to get the "\/" pointer effect */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -webkit-box-shadow: 0 0 4px #aaa;
+ -moz-box-shadow: 0 0 4px #aaa;
+ box-shadow: 0 0 4px #aaa;
+ clip:rect(4px, 14px, 14px, 4px);
+ }
+/* Change opacity and position to kick in the transitions */
+.fd-slider-focused .fd-slider-handle:before,
+.fd-slider-hover .fd-slider-handle:before,
+.fd-slider-active .fd-slider-handle:before
+ {
+ top:-25px;
+ opacity:1;
+ }
+.fd-slider-focused .fd-slider-handle:after,
+.fd-slider-hover .fd-slider-handle:after,
+.fd-slider-active .fd-slider-handle:after
+ {
+ top:-9px;
+ opacity:1;
+ }
+/* Remove completely for IE 6, 7 and 8 */
+.oldie .fd-slider-handle:before,
+.oldie .fd-slider-handle:after
+ {
+ display:none;
}
Oops, something went wrong.

0 comments on commit 3f9e346

Please sign in to comment.