Permalink
Browse files

pin cleanup, css fixes

  • Loading branch information...
1 parent 6aae099 commit c68c3b4e97dd23b5d426fb3baa07e5ccba0af7c6 @potch potch committed Nov 8, 2012
Showing with 386 additions and 78 deletions.
  1. +309 −0 media/css/pay/lib.less
  2. +59 −75 media/css/pay/pay.less
  3. +0 −1 media/js/pin/pad.js
  4. +3 −2 media/js/pin/pin.js
  5. +14 −0 media/js/utils.js
  6. +1 −0 webpay/settings/base.py
View
309 media/css/pay/lib.less
@@ -0,0 +1,309 @@
+// Colors
+@link: #2d87ca;
+@link-bright: #5be;
+@link-dark: darken(@link, 10%);
+@faded-link: fadeOut(@link, 50%);
+@shadow-blue: #98B2C9;
+@border-blue: #C9DDF2;
+@inset-blue: rgba(152, 178, 201, 0.3);
+@border-black: fadeOut(#000, 80%);
+@faded-blue: fadeOut(@border-blue, 90%);
+@orange: darken(#d60, 5%);
+@red: #c00000;
+@maroon: #800;
+@green: #090;
+@black: #000;
+@dark-gray: #333;
+@navy-gray: #394C58;
+@overlay-gray: #2a353c;
+@text: #424f5a;
+@text-light: #e6edf2;
+@subtext: #74828d;
+@darker_text: darken(@text, 25%);
+@medium-gray: #666;
+@gray: #888;
+@note-gray: #999;
+@bg-gray: #bbb;
+@light-gray: #ccc;
+@faint-gray: #eee;
+@barely-gray: #fcfcfc;
+@white: #fff;
+@bg: #eff1f3;
+@black-border: #14171a;
+@bg-lite: lighten(@bg, 2%);
+@pale-bg: #eff1f3;
+@header-bg: #60747f;
+@header-dark-bg: #404f5a;
+@tab-bg: #7b8990;
+@yellow: #ffe;
+@gold: darken(@yellow, 75%);
+@faint-blue: #ECF5FE;
+@blue: #258;
+@heavy: 400;
+@grain: #394C58;
+@bg-light-gray: #F8F8F8;
+
+// Used for content ratings for games in Brazil.
+// You can use them elsewhere when you want colourful boxes.
+// Don't be a square.
+@box-green: #00b963;
+@box-blue: #00d5ff;
+@box-yellow: #ffd300;
+@box-orange: #ff7c00;
+@box-red: #ff2600;
+
+
+@btn-b: #44A5E1;
+@btn-b-dark: #267CC2;
+@btn-b-lite: saturate(spin(@btn-b, 4), 4%);
+
+
+// Font Stacks
+@open-stack: "Open Sans", "Helvetica Neue", Arial, sans-serif;
+
+
+// Mixins
+@grain-src: url(../../img/mkt/grain.png);
+.grain() {
+ background-image: @grain-src;
+}
+
+@arrow-src: url(../../img/mkt/arrows/plain.png);
+.arrow() {
+ background: @arrow-src no-repeat;
+}
+
+@arrow-big-src: url(../../img/mkt/arrows/plain-lrg-go.png);
+.arrow-big() {
+ background: @arrow-big-src no-repeat;
+}
+
+.light-text-shadow() {
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+
+.medium-text-shadow() {
+ text-shadow: .5px .5px 0 @text;
+}
+
+.dark-text-shadow() {
+ text-shadow: 0 1px 0 @black;
+}
+
+.border-radius(@radius) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ -ms-border-radius: @radius;
+ -o-border-radius: @radius;
+ border-radius: @radius;
+}
+
+.transform(@tform) {
+ -webkit-transform: @tform;
+ -moz-transform: @tform;
+ -ms-transform: @tform;
+ -o-transform: @tform;
+ transform: @tform;
+}
+
+.transform-origin(@x, @y) {
+ -moz-transform-origin: @x @y;
+ -webkit-transform-origin: @x @y;
+ -ms-transform-origin: @x @y;
+ -o-transform-origin: @x @y;
+ transform-origin: @x @y;
+}
+
+.transition(@property) {
+ -moz-transition: @property;
+ -webkit-transition: @property;
+ transition: @property;
+}
+
+.transition-property(@property) {
+ -moz-transition-property: @property;
+ -webkit-transition-property: @property;
+ transition-property: @property;
+}
+
+.transition-duration(@duration:2s) {
+ -moz-transition-duration: @duration;
+ -webkit-transition-duration: @duration;
+ transition-duration: @duration;
+}
+
+.transition-delay(@delay:1s) {
+ -moz-transition-delay: @delay;
+ -webkit-transition-delay: @delay;
+ transition-delay: @delay;
+}
+
+.background-size(@size) {
+ -moz-background-size: @size;
+ -wekbkit-background-size: @size;
+ background-size: @size;
+}
+.background-size(@size, @size2) {
+ -moz-background-size: @size, @size2;
+ -wekbkit-background-size: @size, @size2;
+ background-size: @size, @size2;
+}
+
+.box-shadow(@shadow) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}
+.box-shadow(@shadow, @shadow2) {
+ -webkit-box-shadow: @shadow, @shadow2;
+ -moz-box-shadow: @shadow, @shadow2;
+ box-shadow: @shadow, @shadow2;
+}
+.box-shadow(@shadow, @shadow2, @shadow3) {
+ -webkit-box-shadow: @shadow, @shadow2, @shadow3;
+ -moz-box-shadow: @shadow, @shadow2, @shadow3;
+ box-shadow: @shadow, @shadow2, @shadow3;
+}
+
+.text-columns(@count, @gap: 1em) {
+ column-count: @count;
+ -moz-column-count: @count;
+ -webkit-column-count: @count;
+ column-gap: @gap;
+ -moz-column-gap: @gap;
+ -webkit-column-gap: @gap;
+}
+
+.border-box() {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.ellipsis() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// Image replacement.
+.hidetext() {
+ overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+}
+
+.animation(@animation) {
+ -webkit-animation: @animation;
+ -moz-animation: @animation;
+ -ms-animation: @animation;
+ animation: @animation;
+}
+
+.gradient-two-color(@color1, @color2) {
+ background-color: @color2;
+ background-image: -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
+ background-image: -webkit-linear-gradient(@color1, @color2);
+ background-image: -moz-linear-gradient(@color1, @color2);
+ background-image: -ms-linear-gradient(@color1, @color2);
+ background-image: -o-linear-gradient(@color1, @color2);
+ background-image: linear-gradient(@color1, @color2);
+}
+
+
+.gradient-two-color-with-image(@color1, @color2, @image) {
+ background: @color2;
+ background: @image, -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
+ background: @image, -webkit-linear-gradient(@color1, @color2);
+ background: @image, -moz-linear-gradient(@color1, @color2);
+ background: @image, -ms-linear-gradient(@color1, @color2);
+ background: @image, -o-linear-gradient(@color1, @color2);
+ background: @image, linear-gradient(@color1, @color2);
+}
+
+.gradient-two-color-with-image(@color1, @color2, @image, @position, @repeat) {
+ background: @color2;
+ background: @image @position @repeat, -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
+ background: @image @position @repeat, -webkit-linear-gradient(@color1, @color2);
+ background: @image @position @repeat, -moz-linear-gradient(@color1, @color2);
+ background: @image @position @repeat, -ms-linear-gradient(@color1, @color2);
+ background: @image @position @repeat, -o-linear-gradient(@color1, @color2);
+ background: @image @position @repeat, linear-gradient(@color1, @color2);
+}
+
+.h-gradient-two-color(@color1, @color2) {
+ // The background-color fallback is bad for opacity gradients.
+ background-color: @color2;
+ background-image: -webkit-gradient(linear, left center, right center, from(@color1), to(@color2));
+ background-image: -webkit-linear-gradient(to right, @color1, @color2);
+ background-image: -moz-linear-gradient(to right, @color1, @color2);
+ background-image: -ms-linear-gradient(to right, @color1, @color2);
+ background-image: -o-linear-gradient(to right, @color1, @color2);
+ background-image: linear-gradient(to right, @color1, @color2);
+}
+
+// Vertical sprite
+.vsprite(@url, @pos, @spacing, @offset:0) {
+ background: ~'url(@{url}) no-repeat';
+ background-position: 0 (@spacing * @pos * -1 + @offset) + 0px;
+}
+.vsprite-pos(@pos, @spacing, @offset:0) {
+ background-position: 0 (@spacing * @pos * -1 + @offset) + 0px;
+}
+.vsprite-pos-right(@pos, @spacing, @offset:0) {
+ background-position: right (@spacing * @pos * -1 + @offset) + 0px;
+}
+
+// Horizontal sprite
+.hsprite(@url, @pos, @spacing, @offset:0) {
+ background: ~'url(@{url}) no-repeat';
+ background-position: (@spacing * @pos * -1 + @offset) + 0px 0;
+}
+.hsprite-pos(@pos, @spacing, @offset:0) {
+ background-position: (@spacing * @pos * -1 + @offset) + 0px 0;
+}
+
+// Depressed button/link styles
+.depressed() {
+ .box-shadow(inset 0 8px 20px 6px rgba(0,0,0,.1),
+ inset 0 0 1px 1px rgba(0,0,0,.1));
+}
+
+.header-dark-gradient() {
+ .gradient-two-color(rgba(176,186,192,.33), rgba(187,195,199,.33));
+}
+
+.slick() {
+ .border-box;
+ .border-radius(4px);
+ background: rgba(255,255,255,.8);
+ color: @text;
+}
+
+.highlight() {
+ .box-shadow(0 1px 0 fadeOut(@white, 40%),
+ 0 1px 0 @white inset);
+ .slick();
+ border: 1px solid @light-gray;
+ &:active {
+ .depressed;
+ }
+}
+
+// Fat buttons for mobile (used for Support links, etc.)
+.fat-button() {
+ .highlight;
+ color: lighten(@text, 10%);
+ display: block;
+ .light-text-shadow;
+ font-size: 14px;
+ font-weight: 600;
+ padding: 10px;
+ text-align: center;
+ &:hover {
+ background: rgba(255,255,255,.5);
+ border-color: @bg-gray;
+ color: @text;
+ text-decoration: none;
+ }
+}
View
134 media/css/pay/pay.less
@@ -1,3 +1,5 @@
+@import 'lib';
+
@font-face {
font-family: 'Open Sans';
src: url('https://marketplace-dev-cdn.allizom.org/media/css/mkt/fonts/OpenSans-Regular-webfont.eot');
@@ -130,8 +132,11 @@ form footer button[type=submit] {
margin: 6px 2px;
width: 34px;
-webkit-transition: .3s -webkit-transform ease-out;
- -moz-transition: .3s -moz-transform ease-out;
- transition: .3s transform ease-out;
+ -moz-transition: .3s -moz-transform ease-out;
+ -ms-transition: .3s -ms-transform ease-out;
+ -o-transition: .3s -o-transform ease-out;
+ transition: .3s transform ease-out;
+
}
.reel b {
background: #fff;
@@ -154,72 +159,53 @@ input[name='pin'] {
display: none;
}
-
/* Buttons */
-.button,
-button {
- border: 0;
- color: #ffffff;
- display: inline-block;
- font: 400 13px/31px "Open Sans", "Helvetica Neue", Arial, sans-serif;
- height: 32px;
- background-color: #267cc2;
- position: relative;
- text-align: center;
- text-decoration: none;
- text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
- white-space: nowrap;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px -1px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
- -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px -1px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
- box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px -1px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
- background-color: #267cc2;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#42a5e1), to(#267cc2));
- background-image: -webkit-linear-gradient(#42a5e1, #267cc2);
- background-image: -moz-linear-gradient(#42a5e1, #267cc2);
- background-image: -ms-linear-gradient(#42a5e1, #267cc2);
- background-image: -o-linear-gradient(#42a5e1, #267cc2);
- background-image: linear-gradient(#42a5e1, #267cc2);
- -moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;
- -webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;
- transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;
- -moz-transition-duration: .2s, .2s, .2s, .2s;
- -webkit-transition-duration: .2s, .2s, .2s, .2s;
- transition-duration: .2s, .2s, .2s, .2s;
-}
-.button:hover,
-button:hover {
- -webkit-box-shadow: 0px 4px 1px rgba(0, 0, 0, 0.2), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0px 4px 1px rgba(0, 0, 0, 0.2), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
- box-shadow: 0px 4px 1px rgba(0, 0, 0, 0.2), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
- text-decoration: none;
-}
-.button:active,
-button:active {
- -webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
- -moz-transition-duration: .1s, .1s, .1s, .1s;
- -webkit-transition-duration: .1s, .1s, .1s, .1s;
- transition-duration: .1s, .1s, .1s, .1s;
-}
-.button[disabled],
-button[disabled] {
- color: #919497;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- pointer-events: none;
- background-color: #cccccc;
- background-color: #cccccc;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#dddddd), to(#cccccc));
- background-image: -webkit-linear-gradient(#dddddd, #cccccc);
- background-image: -moz-linear-gradient(#dddddd, #cccccc);
- background-image: -ms-linear-gradient(#dddddd, #cccccc);
- background-image: -o-linear-gradient(#dddddd, #cccccc);
- background-image: linear-gradient(#dddddd, #cccccc);
+.button, button {
+ border: 0;
+ color: @white;
+ display: inline-block;
+ font: 600 16px/31px @open-stack;
+ height: 32px;
+ background-color: #267cc2;
+ padding: 0 24px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
+ white-space: nowrap;
+ .border-radius(2px);
+ .box-shadow(0px 2px 1px fadeOut(#000,80%),
+ inset 0px -1px 0px fadeOut(#000, 80%),
+ inset 0px 1px 0px 0px fadeOut(#fff, 80%));
+ .gradient-two-color(#42a5e1, #267cc2);
+ .transition-property(~'-moz-box-shadow, -webkit-box-shadow, box-shadow, line-height');
+ .transition-duration(~'.2s, .2s, .2s, .2s');
+
+ &.delete, &.cancel {
+ .gradient-two-color(#e45d56, #de4332);
+ }
+
+ &:hover {
+ .box-shadow(0px 4px 1px fadeOut(#000,80%),
+ inset 0px -3px 0px fadeOut(#000, 80%));
+ text-decoration: none;
+ }
+
+ &:active {
+ .box-shadow(inset 0px 2px 0px 0px fadeOut(#000,80%),
+ inset 0px 12px 24px 6px fadeOut(#000,80%),
+ inset 0px 0px 2px 2px fadeOut(#000,80%));
+ .transition-duration(~'.1s, .1s, .1s, .1s');
+ }
+
+ &[disabled], &.disabled {
+ color: #919497;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ pointer-events: none;
+ background-color: @light-gray;
+ .gradient-two-color(#ddd, @light-gray);
+ }
+
}
@@ -236,17 +222,15 @@ button[disabled] {
display: none;
background: #666;
margin: 0 auto;
-
- transform: translateY(0,200px,0);
- transition: .3s transform ease-out;
- -moz-transform: translateY(0,200px,0);
- -moz-transition: .3s -moz-transform ease-out;
- -webkit-transform: translate3d(0,200px,0);
+ .transform(~'translateY(200px)');
-webkit-transition: .3s -webkit-transform ease-out;
+ -moz-transition: .3s -moz-transform ease-out;
+ -ms-transition: .3s -ms-transform ease-out;
+ -o-transition: .3s -o-transform ease-out;
+ transition: .3s transform ease-out;
}
.pad.show {
- -moz-transform: translateY(0,0,0);
- -webkit-transform: translate3d(0,0,0);
+ .transform(~'translateY(0)');
}
.pad a {
width: 33.3333333333334%;
View
1 media/js/pin/pad.js
@@ -3,7 +3,6 @@
if (true) {
var pad = $('.pad').eq(0);
pad.show();
-// document.getElementsByTagName('header')[0].innerHTML = 'butt';
var touchstart = (hasTouch) ? 'touchstart': 'click';
pad.on(touchstart, 'a', function(e) {
View
5 media/js/pin/pin.js
@@ -20,6 +20,7 @@
})();
(function() {
+ var transProp = css.prefixed('transform');
var pin = $('#id_pin');
pin.val('');
reels = $('.digit .reel');
@@ -31,11 +32,11 @@
if (!reel.hasClass('set')) {
var spin = -(~~(Math.random() * 9) + 1) * 28 + Math.random()*4-2;
reel.addClass('set');
- reel.css({'transform': 'translateY(' + spin + 'px)'});
+ reel.css(transProp, 'translateY(' + spin + 'px)');
}
} else {
reel.removeClass('set');
- reel.css({'transform': 'translateY(0)'});
+ reel.css(transProp, 'translateY(0)');
}
}
}
View
14 media/js/utils.js
@@ -0,0 +1,14 @@
+var css = {
+ prefix: (function() {
+ try {
+ var s = window.getComputedStyle(document.body, '');
+ return (Array.prototype.slice.call(s).join('').match(/moz|webkit|ms|khtml/)||(s.OLink===''&&['o']))[0];
+ } catch (e) {
+ return 'moz';
+ }
+ })(),
+ prefixed: function(property) {
+ if (!z.prefix) return property;
+ return '-' + z.prefix + '-' + property;
+ }
+}
View
1 webpay/settings/base.py
@@ -34,6 +34,7 @@
'js/lib/jquery-1.8.js',
'js/lib/underscore.js',
'js/lib/format.js',
+ 'js/css3.js',
'js/pay/pay.js',
'js/pin/pin.js',
'js/pin/pad.js',

0 comments on commit c68c3b4

Please sign in to comment.