diff --git a/Gruntfile.js b/Gruntfile.js index d882d37..e96cce5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,20 +10,62 @@ module.exports = function(grunt){ less_main: { files: './css/**/*.less', tasks: ['less'] + }, + sass: { + files: './css/**/*.scss', + tasks: ['sass', 'postcss:autoprefixer', 'postcss:minify'] } }, less: { main: { files: { - './css/style.css': './css/style.less' + './css/style.css': './css/less/style.less' } } - } + }, + sass: { + options: { + sourceMap: true + }, + dist: { + files: { + './css/style.css': './css/sass/style.scss' + } + } + }, + + postcss: { + autoprefixer: { + options: { + map: true, + processors: [ + require('autoprefixer-core') + ] + }, + files: { + './css/style.css': './css/style.css' + } + }, + minify: { + options: { + map: true, + processors: [ + require('csswring') + ] + }, + files: { + './css/style.min.css': './css/style.css' + } + } + } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-postcss'); + grunt.registerTask('default', ['sass', 'postcss:autoprefixer', 'postcss:minify', 'watch']); }; \ No newline at end of file diff --git a/css/css-flip-counter.less b/css/less/css-flip-counter.less similarity index 100% rename from css/css-flip-counter.less rename to css/less/css-flip-counter.less diff --git a/css/demo.less b/css/less/demo.less similarity index 100% rename from css/demo.less rename to css/less/demo.less diff --git a/css/mixins.less b/css/less/mixins.less similarity index 100% rename from css/mixins.less rename to css/less/mixins.less diff --git a/css/style.less b/css/less/style.less similarity index 100% rename from css/style.less rename to css/less/style.less diff --git a/css/sass/css-flip-counter.scss b/css/sass/css-flip-counter.scss new file mode 100644 index 0000000..280e97a --- /dev/null +++ b/css/sass/css-flip-counter.scss @@ -0,0 +1,166 @@ +// Some defaults + +$digitWidth: 60px; +$digitHeight: 90px; +$digitFontSize: 90px; + +$digitMargin: 10px; +$digitBackground: black; +$digitColor: white; + +$digitFontFamily: 'Ubuntu', sans-serif; +$digitFontWeight: 700; + +$digitFlipDuration: 0.3s ease-in; +$digitFlipPerspective: 300px; + +$delimiterFontSize: 52px; + +// Base styles + +.counter-wrapper { + float : right; + position : relative; + left : -50%; + margin-top : 20px; +} + +.flip-counter { + position : relative; + left : 50%; + list-style-type : none; + + li { + float : right; + } +} + +@mixin build-counter($className, + $digitWidth: $digitWidth, + $digitHeight: $digitHeight, + $digitFontSize: $digitFontSize, + $digitMargin: $digitMargin, + $digitBackground: $digitBackground, + $digitColor: $digitColor, + $delimiterFontSize: $delimiterFontSize, + $digitFlipPerspective: $digitFlipPerspective +) { + $shadowColor: rgba($digitBackground, .5); + + .flip-counter.#{$className} .digit { + position : relative; + z-index : 0; + width : $digitWidth; + height : $digitHeight; + margin-left : $digitMargin; + background-color : $digitBackground; + text-align : center; + line-height : 0; + // Fix for slight Chrome-Win font jumping + // https://code.google.com/p/chromium/issues/detail?id=137692 + // 1px not enough, unfortunately + //-webkit-text-stroke : 2px #fff; + box-shadow : 1px 1px 5px 0 $shadowColor; + border-radius : 5px; + + &:last-child { + margin-left : 0; + } + + span { + position : absolute; + left : 0; + height : $digitHeight / 2; + width : $digitWidth; + overflow : hidden; + border-radius : 5px; + font-size : $digitFontSize; + font-family : $digitFontFamily; + font-weight : $digitFontWeight; + text-indent : 2px; + background-color : $digitBackground; + color : $digitColor; + + // Prevents some jumping around in FF + transform : translate3d(0, 0, 0); + + &.front { + top : 0; + padding-top : $digitHeight / 2; + } + + &.back { + bottom : 0; + } + } + + .line { + position : absolute; + z-index : 10; + height : $digitHeight / 2; + width : $digitWidth; + $lineHeight: ceil($digitFontSize/100); + border-bottom : $lineHeight solid rgba($digitBackground, .3); + box-shadow: 0 $lineHeight+4 7px -4px rgba($digitBackground, .3); + + // Another method of creating the dividing line as a box shadow. I thought this might + // fix Safari's problem of not respecting z-index with transforms: + // http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d + // I've spent enough time messing with it, can't get it to work right in Safari. + // Applying a .translate3d(0, 0, 0); to it also does nothing. + // + //@shadows: 0px @lineHeight+4 7px -4px fadeout($digitBackground, 20%), 0px @lineHeight 0px 0px fadeout($digitBackground, 20%); + //.box-shadow(@shadows); + } + + .hinge-wrap { + z-index : 5; + position : relative; + overflow : visible; + perspective : $digitFlipPerspective; + } + + .hinge { + position : absolute; + height : $digitHeight / 2; + width : $digitWidth; + transform-style: preserve-3d; + transition: transform $digitFlipDuration; + transform-origin: 50% 100%; + + span { + height : 0; + z-index : 5; + backface-visibility: hidden; + + &.front { + padding-top : $digitHeight / 2; + } + + &.back { + height : $digitHeight / 2; + transform: rotateX(180deg); + } + } + } + + &.animate .hinge { + transform: rotateX(-180deg); + } + } + + .flip-counter.#{$className} .digit-delimiter { + padding-top : $digitHeight - $delimiterFontSize; + margin-right : -($digitMargin / 2); + font-family : $digitFontFamily; + font-weight : $digitFontWeight; + font-size : $delimiterFontSize; + color : $digitBackground; + text-indent : ($digitMargin) / 3; + text-shadow : 1px 1px 5px $shadowColor; + } +}; + +.no-csstransforms3d span.back { + display : none; +} \ No newline at end of file diff --git a/css/sass/demo.scss b/css/sass/demo.scss new file mode 100644 index 0000000..61bba1e --- /dev/null +++ b/css/sass/demo.scss @@ -0,0 +1,86 @@ +body { + font: 14px 'Ubuntu', sans-serif; +} + +h1 { + text-align: center; + margin: 10px; + line-height: 60px; + font-weight: 700; + font-size: 60px; + /* Web fonts look bad in Chrome even with -webkit-font-smoothing, so this is a cheap way to soften the jaggies */ + //text-shadow: 0 0 1px #000; +} + +.clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} + +#style-switcher { + list-style-type: none; + width: 600px; + margin: 20px auto 10px; + + li { + padding: 0; + width: 150px; + float: left; + text-align: center; + + a { + display: block; + padding: 5px 10px; + text-transform: uppercase; + text-decoration: none; + font-size: 20px; + font-weight: 400; + color: #000; + + &:hover { + font-size: 24px; + } + + &.active { + font-size: 24px; + font-weight: 700; + background: #eee; + } + } + } +} + +#demo_controls { + position: relative; + width: 700px; + margin: 0 auto; + padding: 20px 0; + list-style-type: none; + + li { + width: 320px; + float: left; + text-align: center; + margin: 0 15px; + font-weight: bold; + font-size: 15px; + + p { + margin-bottom: 10px; + } + } +} + +p.info { + text-align: center; + margin-top: 20px; +} \ No newline at end of file diff --git a/css/sass/style.scss b/css/sass/style.scss new file mode 100644 index 0000000..0bc63e0 --- /dev/null +++ b/css/sass/style.scss @@ -0,0 +1,19 @@ +// Demo page styles +// ------------------------- +@import 'demo'; + +// Base counter styles and builder +// ------------------------- +@import 'css-flip-counter'; + +// Lets make some counters! +// ------------------------- + +// Simple default +@include build-counter(default); +// Light +@include build-counter(light, 60px, 90px, 90px, 10px, #E8F1FF, white, 52px, 300px); +// Small +@include build-counter(small, 30px, 40px, 34px, 5px, black, white, 25px, 300px); +// Huge mofo +@include build-counter(huge, 140px, 200px, 190px, 20px, black, white, 70px, 800px); diff --git a/css/style.css b/css/style.css index 055e258..f6a5539 100644 --- a/css/style.css +++ b/css/style.css @@ -1,113 +1,84 @@ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} body { - font: 14px 'Ubuntu', sans-serif; -} + font: 14px 'Ubuntu', sans-serif; } + h1 { text-align: center; margin: 10px; line-height: 60px; font-weight: 700; font-size: 60px; - /* Web fonts look bad in Chrome even with -webkit-font-smoothing, so this is a cheap way to soften the jaggies */ -} + /* Web fonts look bad in Chrome even with -webkit-font-smoothing, so this is a cheap way to soften the jaggies */ } + +.clearfix { + *zoom: 1; } + .clearfix:before, + .clearfix:after { + display: table; + content: ""; + line-height: 0; } + .clearfix:after { + clear: both; } + #style-switcher { - *zoom: 1; list-style-type: none; width: 600px; - margin: 20px auto 10px; -} -#style-switcher:before, -#style-switcher:after { - display: table; - content: ""; - line-height: 0; -} -#style-switcher:after { - clear: both; -} -#style-switcher li { - padding: 0; - width: 150px; - float: left; - text-align: center; -} -#style-switcher li a { - display: block; - padding: 5px 10px; - text-transform: uppercase; - text-decoration: none; - font-size: 20px; - font-weight: 400; - color: #000; -} -#style-switcher li a:hover { - font-size: 24px; -} -#style-switcher li a.active { - font-size: 24px; - font-weight: 700; - background: #eee; -} + margin: 20px auto 10px; } + #style-switcher li { + padding: 0; + width: 150px; + float: left; + text-align: center; } + #style-switcher li a { + display: block; + padding: 5px 10px; + text-transform: uppercase; + text-decoration: none; + font-size: 20px; + font-weight: 400; + color: #000; } + #style-switcher li a:hover { + font-size: 24px; } + #style-switcher li a.active { + font-size: 24px; + font-weight: 700; + background: #eee; } + #demo_controls { - *zoom: 1; position: relative; width: 700px; margin: 0 auto; padding: 20px 0; - list-style-type: none; -} -#demo_controls:before, -#demo_controls:after { - display: table; - content: ""; - line-height: 0; -} -#demo_controls:after { - clear: both; -} -#demo_controls li { - width: 320px; - float: left; - text-align: center; - margin: 0 15px; - font-weight: bold; - font-size: 15px; -} -#demo_controls li p { - margin-bottom: 10px; -} + list-style-type: none; } + #demo_controls li { + width: 320px; + float: left; + text-align: center; + margin: 0 15px; + font-weight: bold; + font-size: 15px; } + #demo_controls li p { + margin-bottom: 10px; } + p.info { text-align: center; - margin-top: 20px; -} + margin-top: 20px; } + .counter-wrapper { float: right; position: relative; left: -50%; - margin-top: 20px; -} + margin-top: 20px; } + .flip-counter { position: relative; left: 50%; - list-style-type: none; -} -.flip-counter li { - float: right; -} + list-style-type: none; } + .flip-counter li { + float: right; } + .no-csstransforms3d span.back { - display: none; -} + display: none; } + .flip-counter.default .digit { position: relative; z-index: 0; @@ -117,235 +88,161 @@ p.info { background-color: black; text-align: center; line-height: 0; - -webkit-text-stroke: 2px; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.flip-counter.default .digit:last-child { - margin-left: 0; -} -.flip-counter.default .digit span { - position: absolute; - left: 0; - height: 45px; - width: 60px; - overflow: hidden; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-size: 90px; - font-family: 'Ubuntu', sans-serif; - font-weight: 700; - text-indent: 2px; - background-color: black; - color: white; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -.flip-counter.default .digit span.front { - top: 0; - padding-top: 45px; -} -.flip-counter.default .digit span.back { - bottom: 0; -} -.flip-counter.default .digit .line { - position: absolute; - z-index: 10; - height: 45px; - width: 60px; - border-bottom: 1px solid rgba(0, 0, 0, 0.7); - -webkit-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); - -moz-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); - box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); -} -.flip-counter.default .digit .hinge-wrap { - z-index: 5; - position: relative; - overflow: visible; - -webkit-perspective: 300px; - -moz-perspective: 300px; - -ms-perspective: 300px; - perspective: 300px; -} -.flip-counter.default .digit .hinge { - position: absolute; - height: 45px; - width: 60px; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-transition: -webkit-transform 0.3s ease-in; - -moz-transition: -moz-transform 0.3s ease-in; - transition: transform 0.3s ease-in; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - -o-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -.flip-counter.default .digit .hinge span { - height: 0; - z-index: 5; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} -.flip-counter.default .digit .hinge span.front { - padding-top: 45px; -} -.flip-counter.default .digit .hinge span.back { - height: 45px; - -webkit-transform: rotateX(180deg); - -moz-transform: rotateX(180deg); - -ms-transform: rotateX(180deg); - -o-transform: rotateX(180deg); - transform: rotateX(180deg); -} -.flip-counter.default .digit.animate .hinge { - -webkit-transform: rotateX(-180deg); - -moz-transform: rotateX(-180deg); - -ms-transform: rotateX(-180deg); - -o-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5); + border-radius: 5px; } + .flip-counter.default .digit:last-child { + margin-left: 0; } + .flip-counter.default .digit span { + position: absolute; + left: 0; + height: 45px; + width: 60px; + overflow: hidden; + border-radius: 5px; + font-size: 90px; + font-family: "Ubuntu", sans-serif; + font-weight: 700; + text-indent: 2px; + background-color: black; + color: white; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .flip-counter.default .digit span.front { + top: 0; + padding-top: 45px; } + .flip-counter.default .digit span.back { + bottom: 0; } + .flip-counter.default .digit .line { + position: absolute; + z-index: 10; + height: 45px; + width: 60px; + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + box-shadow: 0 5px 7px -4px rgba(0, 0, 0, 0.3); } + .flip-counter.default .digit .hinge-wrap { + z-index: 5; + position: relative; + overflow: visible; + -webkit-perspective: 300px; + perspective: 300px; } + .flip-counter.default .digit .hinge { + position: absolute; + height: 45px; + width: 60px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: -webkit-transform 0.3s ease-in; + transition: transform 0.3s ease-in; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; } + .flip-counter.default .digit .hinge span { + height: 0; + z-index: 5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + .flip-counter.default .digit .hinge span.front { + padding-top: 45px; } + .flip-counter.default .digit .hinge span.back { + height: 45px; + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .flip-counter.default .digit.animate .hinge { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); } + .flip-counter.default .digit-delimiter { padding-top: 38px; margin-right: -5px; - font-family: 'Ubuntu', sans-serif; + font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 52px; color: black; - text-indent: 3.33333333px; - text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); -} + text-indent: 3.3333333333px; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } + .flip-counter.light .digit { position: relative; z-index: 0; width: 60px; height: 90px; margin-left: 10px; - background-color: #e8f1ff; + background-color: #E8F1FF; text-align: center; line-height: 0; - -webkit-text-stroke: 2px; - -webkit-box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5); - -moz-box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5); - box-shadow: 1px 1px 5px 0px rgba(232, 241, 255, 0.5); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.flip-counter.light .digit:last-child { - margin-left: 0; -} -.flip-counter.light .digit span { - position: absolute; - left: 0; - height: 45px; - width: 60px; - overflow: hidden; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-size: 90px; - font-family: 'Ubuntu', sans-serif; - font-weight: 700; - text-indent: 2px; - background-color: #e8f1ff; - color: white; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -.flip-counter.light .digit span.front { - top: 0; - padding-top: 45px; -} -.flip-counter.light .digit span.back { - bottom: 0; -} -.flip-counter.light .digit .line { - position: absolute; - z-index: 10; - height: 45px; - width: 60px; - border-bottom: 1px solid rgba(232, 241, 255, 0.7); - -webkit-box-shadow: 0px 5px 7px -4px rgba(232, 241, 255, 0.7); - -moz-box-shadow: 0px 5px 7px -4px rgba(232, 241, 255, 0.7); - box-shadow: 0px 5px 7px -4px rgba(232, 241, 255, 0.7); -} -.flip-counter.light .digit .hinge-wrap { - z-index: 5; - position: relative; - overflow: visible; - -webkit-perspective: 300px; - -moz-perspective: 300px; - -ms-perspective: 300px; - perspective: 300px; -} -.flip-counter.light .digit .hinge { - position: absolute; - height: 45px; - width: 60px; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-transition: -webkit-transform 0.3s ease-in; - -moz-transition: -moz-transform 0.3s ease-in; - transition: transform 0.3s ease-in; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - -o-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -.flip-counter.light .digit .hinge span { - height: 0; - z-index: 5; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} -.flip-counter.light .digit .hinge span.front { - padding-top: 45px; -} -.flip-counter.light .digit .hinge span.back { - height: 45px; - -webkit-transform: rotateX(180deg); - -moz-transform: rotateX(180deg); - -ms-transform: rotateX(180deg); - -o-transform: rotateX(180deg); - transform: rotateX(180deg); -} -.flip-counter.light .digit.animate .hinge { - -webkit-transform: rotateX(-180deg); - -moz-transform: rotateX(-180deg); - -ms-transform: rotateX(-180deg); - -o-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} + box-shadow: 1px 1px 5px 0 rgba(232, 241, 255, 0.5); + border-radius: 5px; } + .flip-counter.light .digit:last-child { + margin-left: 0; } + .flip-counter.light .digit span { + position: absolute; + left: 0; + height: 45px; + width: 60px; + overflow: hidden; + border-radius: 5px; + font-size: 90px; + font-family: "Ubuntu", sans-serif; + font-weight: 700; + text-indent: 2px; + background-color: #E8F1FF; + color: white; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .flip-counter.light .digit span.front { + top: 0; + padding-top: 45px; } + .flip-counter.light .digit span.back { + bottom: 0; } + .flip-counter.light .digit .line { + position: absolute; + z-index: 10; + height: 45px; + width: 60px; + border-bottom: 1px solid rgba(232, 241, 255, 0.3); + box-shadow: 0 5px 7px -4px rgba(232, 241, 255, 0.3); } + .flip-counter.light .digit .hinge-wrap { + z-index: 5; + position: relative; + overflow: visible; + -webkit-perspective: 300px; + perspective: 300px; } + .flip-counter.light .digit .hinge { + position: absolute; + height: 45px; + width: 60px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: -webkit-transform 0.3s ease-in; + transition: transform 0.3s ease-in; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; } + .flip-counter.light .digit .hinge span { + height: 0; + z-index: 5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + .flip-counter.light .digit .hinge span.front { + padding-top: 45px; } + .flip-counter.light .digit .hinge span.back { + height: 45px; + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .flip-counter.light .digit.animate .hinge { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); } + .flip-counter.light .digit-delimiter { padding-top: 38px; margin-right: -5px; - font-family: 'Ubuntu', sans-serif; + font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 52px; - color: #e8f1ff; - text-indent: 3.33333333px; - text-shadow: 1px 1px 5px rgba(232, 241, 255, 0.5); -} + color: #E8F1FF; + text-indent: 3.3333333333px; + text-shadow: 1px 1px 5px rgba(232, 241, 255, 0.5); } + .flip-counter.small .digit { position: relative; z-index: 0; @@ -355,116 +252,79 @@ p.info { background-color: black; text-align: center; line-height: 0; - -webkit-text-stroke: 2px; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.flip-counter.small .digit:last-child { - margin-left: 0; -} -.flip-counter.small .digit span { - position: absolute; - left: 0; - height: 20px; - width: 30px; - overflow: hidden; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-size: 34px; - font-family: 'Ubuntu', sans-serif; - font-weight: 700; - text-indent: 2px; - background-color: black; - color: white; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -.flip-counter.small .digit span.front { - top: 0; - padding-top: 20px; -} -.flip-counter.small .digit span.back { - bottom: 0; -} -.flip-counter.small .digit .line { - position: absolute; - z-index: 10; - height: 20px; - width: 30px; - border-bottom: 1px solid rgba(0, 0, 0, 0.7); - -webkit-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); - -moz-box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); - box-shadow: 0px 5px 7px -4px rgba(0, 0, 0, 0.7); -} -.flip-counter.small .digit .hinge-wrap { - z-index: 5; - position: relative; - overflow: visible; - -webkit-perspective: 300px; - -moz-perspective: 300px; - -ms-perspective: 300px; - perspective: 300px; -} -.flip-counter.small .digit .hinge { - position: absolute; - height: 20px; - width: 30px; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-transition: -webkit-transform 0.3s ease-in; - -moz-transition: -moz-transform 0.3s ease-in; - transition: transform 0.3s ease-in; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - -o-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -.flip-counter.small .digit .hinge span { - height: 0; - z-index: 5; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} -.flip-counter.small .digit .hinge span.front { - padding-top: 20px; -} -.flip-counter.small .digit .hinge span.back { - height: 20px; - -webkit-transform: rotateX(180deg); - -moz-transform: rotateX(180deg); - -ms-transform: rotateX(180deg); - -o-transform: rotateX(180deg); - transform: rotateX(180deg); -} -.flip-counter.small .digit.animate .hinge { - -webkit-transform: rotateX(-180deg); - -moz-transform: rotateX(-180deg); - -ms-transform: rotateX(-180deg); - -o-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5); + border-radius: 5px; } + .flip-counter.small .digit:last-child { + margin-left: 0; } + .flip-counter.small .digit span { + position: absolute; + left: 0; + height: 20px; + width: 30px; + overflow: hidden; + border-radius: 5px; + font-size: 34px; + font-family: "Ubuntu", sans-serif; + font-weight: 700; + text-indent: 2px; + background-color: black; + color: white; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .flip-counter.small .digit span.front { + top: 0; + padding-top: 20px; } + .flip-counter.small .digit span.back { + bottom: 0; } + .flip-counter.small .digit .line { + position: absolute; + z-index: 10; + height: 20px; + width: 30px; + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + box-shadow: 0 5px 7px -4px rgba(0, 0, 0, 0.3); } + .flip-counter.small .digit .hinge-wrap { + z-index: 5; + position: relative; + overflow: visible; + -webkit-perspective: 300px; + perspective: 300px; } + .flip-counter.small .digit .hinge { + position: absolute; + height: 20px; + width: 30px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: -webkit-transform 0.3s ease-in; + transition: transform 0.3s ease-in; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; } + .flip-counter.small .digit .hinge span { + height: 0; + z-index: 5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + .flip-counter.small .digit .hinge span.front { + padding-top: 20px; } + .flip-counter.small .digit .hinge span.back { + height: 20px; + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .flip-counter.small .digit.animate .hinge { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); } + .flip-counter.small .digit-delimiter { padding-top: 15px; margin-right: -2.5px; - font-family: 'Ubuntu', sans-serif; + font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 25px; color: black; - text-indent: 1.66666667px; - text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); -} + text-indent: 1.6666666667px; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } + .flip-counter.huge .digit { position: relative; z-index: 0; @@ -474,113 +334,76 @@ p.info { background-color: black; text-align: center; line-height: 0; - -webkit-text-stroke: 2px; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.flip-counter.huge .digit:last-child { - margin-left: 0; -} -.flip-counter.huge .digit span { - position: absolute; - left: 0; - height: 100px; - width: 140px; - overflow: hidden; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-size: 190px; - font-family: 'Ubuntu', sans-serif; - font-weight: 700; - text-indent: 2px; - background-color: black; - color: white; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -.flip-counter.huge .digit span.front { - top: 0; - padding-top: 100px; -} -.flip-counter.huge .digit span.back { - bottom: 0; -} -.flip-counter.huge .digit .line { - position: absolute; - z-index: 10; - height: 100px; - width: 140px; - border-bottom: 2px solid rgba(0, 0, 0, 0.7); - -webkit-box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.7); - -moz-box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.7); - box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.7); -} -.flip-counter.huge .digit .hinge-wrap { - z-index: 5; - position: relative; - overflow: visible; - -webkit-perspective: 800px; - -moz-perspective: 800px; - -ms-perspective: 800px; - perspective: 800px; -} -.flip-counter.huge .digit .hinge { - position: absolute; - height: 100px; - width: 140px; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-transition: -webkit-transform 0.3s ease-in; - -moz-transition: -moz-transform 0.3s ease-in; - transition: transform 0.3s ease-in; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - -o-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -.flip-counter.huge .digit .hinge span { - height: 0; - z-index: 5; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} -.flip-counter.huge .digit .hinge span.front { - padding-top: 100px; -} -.flip-counter.huge .digit .hinge span.back { - height: 100px; - -webkit-transform: rotateX(180deg); - -moz-transform: rotateX(180deg); - -ms-transform: rotateX(180deg); - -o-transform: rotateX(180deg); - transform: rotateX(180deg); -} -.flip-counter.huge .digit.animate .hinge { - -webkit-transform: rotateX(-180deg); - -moz-transform: rotateX(-180deg); - -ms-transform: rotateX(-180deg); - -o-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5); + border-radius: 5px; } + .flip-counter.huge .digit:last-child { + margin-left: 0; } + .flip-counter.huge .digit span { + position: absolute; + left: 0; + height: 100px; + width: 140px; + overflow: hidden; + border-radius: 5px; + font-size: 190px; + font-family: "Ubuntu", sans-serif; + font-weight: 700; + text-indent: 2px; + background-color: black; + color: white; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .flip-counter.huge .digit span.front { + top: 0; + padding-top: 100px; } + .flip-counter.huge .digit span.back { + bottom: 0; } + .flip-counter.huge .digit .line { + position: absolute; + z-index: 10; + height: 100px; + width: 140px; + border-bottom: 2px solid rgba(0, 0, 0, 0.3); + box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.3); } + .flip-counter.huge .digit .hinge-wrap { + z-index: 5; + position: relative; + overflow: visible; + -webkit-perspective: 800px; + perspective: 800px; } + .flip-counter.huge .digit .hinge { + position: absolute; + height: 100px; + width: 140px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: -webkit-transform 0.3s ease-in; + transition: transform 0.3s ease-in; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; } + .flip-counter.huge .digit .hinge span { + height: 0; + z-index: 5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + .flip-counter.huge .digit .hinge span.front { + padding-top: 100px; } + .flip-counter.huge .digit .hinge span.back { + height: 100px; + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .flip-counter.huge .digit.animate .hinge { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); } + .flip-counter.huge .digit-delimiter { padding-top: 130px; margin-right: -10px; - font-family: 'Ubuntu', sans-serif; + font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 70px; color: black; - text-indent: 6.66666667px; - text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); -} + text-indent: 6.6666666667px; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..7d8f650 --- /dev/null +++ b/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sass/demo.scss","sass/css-flip-counter.scss","sass/style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/css/style.min.css b/css/style.min.css new file mode 100644 index 0000000..96d4019 --- /dev/null +++ b/css/style.min.css @@ -0,0 +1,2 @@ +body{font:14px 'Ubuntu',sans-serif}h1{text-align:center;margin:10px;line-height:60px;font-weight:700;font-size:60px}.clearfix{zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}#style-switcher{list-style-type:none;width:600px;margin:20px auto 10px}#style-switcher li{padding:0;width:150px;float:left;text-align:center}#style-switcher li a{display:block;padding:5px 10px;text-transform:uppercase;text-decoration:none;font-size:20px;font-weight:400;color:#000}#style-switcher li a:hover{font-size:24px}#style-switcher li a.active{font-size:24px;font-weight:700;background:#eee}#demo_controls{position:relative;width:700px;margin:0 auto;padding:20px 0;list-style-type:none}#demo_controls li{width:320px;float:left;text-align:center;margin:0 15px;font-weight:700;font-size:15px}#demo_controls li p{margin-bottom:10px}p.info{text-align:center;margin-top:20px}.counter-wrapper{float:right;position:relative;left:-50%;margin-top:20px}.flip-counter{position:relative;left:50%;list-style-type:none}.flip-counter li{float:right}.no-csstransforms3d span.back{display:none}.flip-counter.default .digit{position:relative;z-index:0;width:60px;height:90px;margin-left:10px;background-color:black;text-align:center;line-height:0;box-shadow:1px 1px 5px 0 rgba(0,0,0,.5);border-radius:5px}.flip-counter.default .digit:last-child{margin-left:0}.flip-counter.default .digit span{position:absolute;left:0;height:45px;width:60px;overflow:hidden;border-radius:5px;font-size:90px;font-family:Ubuntu,sans-serif;font-weight:700;text-indent:2px;background-color:black;color:white;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flip-counter.default .digit span.front{top:0;padding-top:45px}.flip-counter.default .digit span.back{bottom:0}.flip-counter.default .digit .line{position:absolute;z-index:10;height:45px;width:60px;border-bottom:1px solid rgba(0,0,0,.3);box-shadow:0 5px 7px -4px rgba(0,0,0,.3)}.flip-counter.default .digit .hinge-wrap{z-index:5;position:relative;overflow:visible;-webkit-perspective:300px;perspective:300px}.flip-counter.default .digit .hinge{position:absolute;height:45px;width:60px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.flip-counter.default .digit .hinge span{height:0;z-index:5;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-counter.default .digit .hinge span.front{padding-top:45px}.flip-counter.default .digit .hinge span.back{height:45px;-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flip-counter.default .digit.animate .hinge{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.flip-counter.default .digit-delimiter{padding-top:38px;margin-right:-5px;font-family:Ubuntu,sans-serif;font-weight:700;font-size:52px;color:black;text-indent:3.3333333333px;text-shadow:1px 1px 5px rgba(0,0,0,.5)}.flip-counter.light .digit{position:relative;z-index:0;width:60px;height:90px;margin-left:10px;background-color:#e8f1ff;text-align:center;line-height:0;box-shadow:1px 1px 5px 0 rgba(232,241,255,.5);border-radius:5px}.flip-counter.light .digit:last-child{margin-left:0}.flip-counter.light .digit span{position:absolute;left:0;height:45px;width:60px;overflow:hidden;border-radius:5px;font-size:90px;font-family:Ubuntu,sans-serif;font-weight:700;text-indent:2px;background-color:#e8f1ff;color:white;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flip-counter.light .digit span.front{top:0;padding-top:45px}.flip-counter.light .digit span.back{bottom:0}.flip-counter.light .digit .line{position:absolute;z-index:10;height:45px;width:60px;border-bottom:1px solid rgba(232,241,255,.3);box-shadow:0 5px 7px -4px rgba(232,241,255,.3)}.flip-counter.light .digit .hinge-wrap{z-index:5;position:relative;overflow:visible;-webkit-perspective:300px;perspective:300px}.flip-counter.light .digit .hinge{position:absolute;height:45px;width:60px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.flip-counter.light .digit .hinge span{height:0;z-index:5;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-counter.light .digit .hinge span.front{padding-top:45px}.flip-counter.light .digit .hinge span.back{height:45px;-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flip-counter.light .digit.animate .hinge{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.flip-counter.light .digit-delimiter{padding-top:38px;margin-right:-5px;font-family:Ubuntu,sans-serif;font-weight:700;font-size:52px;color:#e8f1ff;text-indent:3.3333333333px;text-shadow:1px 1px 5px rgba(232,241,255,.5)}.flip-counter.small .digit{position:relative;z-index:0;width:30px;height:40px;margin-left:5px;background-color:black;text-align:center;line-height:0;box-shadow:1px 1px 5px 0 rgba(0,0,0,.5);border-radius:5px}.flip-counter.small .digit:last-child{margin-left:0}.flip-counter.small .digit span{position:absolute;left:0;height:20px;width:30px;overflow:hidden;border-radius:5px;font-size:34px;font-family:Ubuntu,sans-serif;font-weight:700;text-indent:2px;background-color:black;color:white;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flip-counter.small .digit span.front{top:0;padding-top:20px}.flip-counter.small .digit span.back{bottom:0}.flip-counter.small .digit .line{position:absolute;z-index:10;height:20px;width:30px;border-bottom:1px solid rgba(0,0,0,.3);box-shadow:0 5px 7px -4px rgba(0,0,0,.3)}.flip-counter.small .digit .hinge-wrap{z-index:5;position:relative;overflow:visible;-webkit-perspective:300px;perspective:300px}.flip-counter.small .digit .hinge{position:absolute;height:20px;width:30px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.flip-counter.small .digit .hinge span{height:0;z-index:5;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-counter.small .digit .hinge span.front{padding-top:20px}.flip-counter.small .digit .hinge span.back{height:20px;-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flip-counter.small .digit.animate .hinge{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.flip-counter.small .digit-delimiter{padding-top:15px;margin-right:-2.5px;font-family:Ubuntu,sans-serif;font-weight:700;font-size:25px;color:black;text-indent:1.6666666667px;text-shadow:1px 1px 5px rgba(0,0,0,.5)}.flip-counter.huge .digit{position:relative;z-index:0;width:140px;height:200px;margin-left:20px;background-color:black;text-align:center;line-height:0;box-shadow:1px 1px 5px 0 rgba(0,0,0,.5);border-radius:5px}.flip-counter.huge .digit:last-child{margin-left:0}.flip-counter.huge .digit span{position:absolute;left:0;height:100px;width:140px;overflow:hidden;border-radius:5px;font-size:190px;font-family:Ubuntu,sans-serif;font-weight:700;text-indent:2px;background-color:black;color:white;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flip-counter.huge .digit span.front{top:0;padding-top:100px}.flip-counter.huge .digit span.back{bottom:0}.flip-counter.huge .digit .line{position:absolute;z-index:10;height:100px;width:140px;border-bottom:2px solid rgba(0,0,0,.3);box-shadow:0 6px 7px -4px rgba(0,0,0,.3)}.flip-counter.huge .digit .hinge-wrap{z-index:5;position:relative;overflow:visible;-webkit-perspective:800px;perspective:800px}.flip-counter.huge .digit .hinge{position:absolute;height:100px;width:140px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.flip-counter.huge .digit .hinge span{height:0;z-index:5;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-counter.huge .digit .hinge span.front{padding-top:100px}.flip-counter.huge .digit .hinge span.back{height:100px;-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flip-counter.huge .digit.animate .hinge{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.flip-counter.huge .digit-delimiter{padding-top:130px;margin-right:-10px;font-family:Ubuntu,sans-serif;font-weight:700;font-size:70px;color:black;text-indent:6.6666666667px;text-shadow:1px 1px 5px rgba(0,0,0,.5)} +/*# sourceMappingURL=style.min.css.map */ \ No newline at end of file diff --git a/css/style.min.css.map b/css/style.min.css.map new file mode 100644 index 0000000..b8e4ea4 --- /dev/null +++ b/css/style.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sass/demo.scss","style.css","sass/css-flip-counter.scss","sass/style.scss"],"names":[],"mappings":"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","file":"style.min.css"} \ No newline at end of file diff --git a/index.html b/index.html index 39364a0..0203390 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

CSS FLIP-COUNTER

-