Applied box-sizing: border-box to render box model like ie 6 and 7

mahemoff · Apr 14, 2013 · e83bc3c · e83bc3c
1 parent e3b1740
commit e83bc3c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<!--[if IE 6]> <html class="ie6"> <![endif]-->
-<!--[if IE 7]> <html class="ie7"> <![endif]-->
+<!--[if IE 6]> <html class="ie6 ltie8"> <![endif]-->
+<!--[if IE 7]> <html class="ie7 ltie8"> <![endif]-->
 <!--[if IE 8]> <html class="ie8"> <![endif]-->
 <!--[if gt IE 8]> ><! <![endif]-->
 <html>

diff --git a/sass/_lib.sass b/sass/_lib.sass
@@ -100,59 +100,3 @@ $powered-radius:     8 * $width / $orig-width
     src: url("#{$file}.eot?#iefix") format('embedded-opentype'), url("#{$file}.woff") format('woff'), url("#{$file}.ttf") format('truetype'), url("#{$file}.svg##{$family}") format('svg')
     font-weight: normal
     font-style: normal
-
-
-////////////////
-// Typography //
-////////////////
-//+webfont('icomoon', '../fonts/icomoon')
-//
-///* Use the following CSS code if you want to use data attributes for inserting your icons
-//[data-icon]:before
-//  font-family: 'icomoon'
-//  content: attr(data-icon)
-//  speak: none
-//  font-weight: normal
-//  font-variant: normal
-//  text-transform: none
-//  line-height: 1
-//  -webkit-font-smoothing: antialiased
-//
-///* Use the following CSS code if you want to have a class per icon
-///*
-// *Instead of a list of all class selectors,
-// *you can use the generic selector below, but it's slower:
-// *[class*="icon-"] {
-//.icon-backward, .icon-stop, .icon-pause, .icon-play, .icon-forward, .icon-volume-high, .icon-volume-medium, .icon-volume-low, .icon-volume-mute, .icon-volume-mute-2, .icon-volume-increase, .icon-volume-decrease
-//  font-family: 'icomoon'
-//  speak: none
-//  font-style: normal
-//  font-weight: normal
-//  font-variant: normal
-//  text-transform: none
-//  line-height: 1
-//  -webkit-font-smoothing: antialiased
-//.icon-backward:before
-//  content: "\e004"
-//.icon-stop:before
-//  content: "\e005"
-//.icon-pause:before
-//  content: "\e006"
-//.icon-play:before
-//  content: "\e007"
-//.icon-forward:before
-//  content: "\e008"
-//.icon-volume-high:before
-//  content: "\e009"
-//.icon-volume-medium:before
-//  content: "\e00a"
-//.icon-volume-low:before
-//  content: "\e00b"
-//.icon-volume-mute:before
-//  content: "\e00c"
-//.icon-volume-mute-2:before
-//  content: "\e00d"
-//.icon-volume-increase:before
-//  content: "\e00e"
-//.icon-volume-decrease:before
-//  content: "\e00f"
diff --git a/sass/_widget.sass b/sass/_widget.sass
@@ -2,6 +2,7 @@
   width: #{$width}px
   float: left
   font-family: $font-family
+  +box-sizing(border-box)
   .clear
     clear: both
   .jp-skin
@@ -17,6 +18,7 @@
       clear: both
       font-family: $font-family
       position: relative
+      +box-sizing(border-box)
       +clearfix
       a:link, a:visited
         text-decoration: none
@@ -62,12 +64,16 @@
           float: left
           width: 100%
           margin: -10px auto 10px
+          +box-sizing(border-box)
           li
             list-style-type: none
             float: left
             text-align: center
       .jp-controls
         margin-bottom: 15px
+        position: relative
+        display: block
+        height: #{$big-button-size}px
         li
           line-height: #{$big-button-line-height}px
           border-radius: 50%
@@ -98,6 +104,9 @@
             background: transparent
             line-height: 0
             height: 0
+        .jp-previous, .jp-next, .jp-play, .jp-pause, .jp-stop
+          position: absolute
+          left: 0
         .jp-previous, .jp-next
           width: #{$small-button-size}px
           height: #{$small-button-size}px
@@ -110,15 +119,17 @@
             span
               font-size: #{$small-button-font-size}em
         .jp-previous
-          margin-left: #{$prev-margin-left}px
+          left: 0
+          //margin-left: #{$prev-margin-left}px
           .before, .after
             left: 10px
             border-width: 12.5px 13px
             border-right-color: #000
           .after
             left: 19px
         .jp-next
-          margin-left: -#{$next-margin-left}px
+          left: #{$small-button-size * 3}px
+          //margin-left: -#{$next-margin-left}px
           .before, .after
             left: 29px
             border-width: 12.5px 13px
@@ -128,29 +139,32 @@
         .jp-play, .jp-stop, .jp-pause
           width: #{$big-button-size}px
           height: #{$big-button-size}px
-          margin-left: -#{$button-margin-left}px
-        .jp-play
+          //margin-left: -#{$button-margin-left}px
+        li.jp-play
           z-index: 20
+          left: #{$small-button-size}px
           .before
             top: 30px
             left: 36px
             border-width: 14.5px 24px
             border-left-color: #000
-        .jp-stop
-          z-index: 15
-          .before
-            top: 30px
-            left: 30px
-            border-width: 14.5px 14.5px
-            border-color: #000
         .jp-pause
+          left: #{$small-button-size}px
           .before, .after
             top: 30px
             left: 30px
             border-width: 14.5px 6px
             border-color: #000
           .after
             left: 47px
+        .jp-stop
+          z-index: 15
+          left: #{$small-button-size * 2}px
+          .before
+            top: 30px
+            left: 30px
+            border-width: 14.5px 14.5px
+            border-color: #000
       .jp-volume-bar
         clear: both
         height: 8px
@@ -278,3 +292,4 @@
     border-bottom-right-radius: #{$powered-radius}px
     border-bottom-left-radius: #{$powered-radius}px
     margin-left: 5px
+    margin-right: 15px