.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } .box-sizing (@type: border-box) { -webkit-box-sizing: @type; -moz-box-sizing: @type; box-sizing: @type; } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { -webkit-border-top-right-radius: @topright; -webkit-border-bottom-right-radius: @bottomright; -webkit-border-bottom-left-radius: @bottomleft; -webkit-border-top-left-radius: @topleft; -moz-border-radius-topright: @topright; -moz-border-radius-bottomright: @bottomright; -moz-border-radius-bottomleft: @bottomleft; -moz-border-radius-topleft: @topleft; border-top-right-radius: @topright; border-bottom-right-radius: @bottomright; border-bottom-left-radius: @bottomleft; border-top-left-radius: @topleft; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } .gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); background: -webkit-linear-gradient(top, @startColor, @endColor); background: -moz-linear-gradient(top, @startColor, @endColor); background: -ms-linear-gradient(top, @startColor, @endColor); background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor); background-image: -o-linear-gradient(left, @startColor, @endColor); } .animation (@name, @duration: 300ms, @ease: ease, @delay: 0s, @iteration: infinite ) { -webkit-animation: @name @duration @ease @delay @iteration; -moz-animation: @name @duration @ease @delay @iteration; -ms-animation: @name @duration @ease @delay @iteration; -o-animation: @name @duration @ease @delay @iteration; animation: @name @duration @ease @delay @iteration; } .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; transition: @transition; } .transform(@string){ -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; transform: @string; } .scale (@factor) { -webkit-transform: scale(@factor); -moz-transform: scale(@factor); -ms-transform: scale(@factor); -o-transform: scale(@factor); } .rotate (@deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -ms-transform: rotate(@deg); -o-transform: rotate(@deg); transform: rotate(@deg); } .skew (@deg, @deg2) { -webkit-transform: skew(@deg, @deg2); -moz-transform: skew(@deg, @deg2); -ms-transform: skew(@deg, @deg2); -o-transform: skew(@deg, @deg2); } .translate (@x, @y:0) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } .translate3d (@x, @y: 0, @z: 0) { -webkit-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; } .transform-origin (@x:center, @y:center) { -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -ms-transform-origin: @x @y; -o-transform-origin: @x @y; } @rem-base: 16px; .rem-calc (@property, @value){ @sizeValue: unit(@value); @remValue: (@sizeValue / @rem-base); //@{property}: unit(@remValue,rem); } @rem-calc: ~`remCalc = function(input, base) { var value = parseFloat(input); var base = base || 16; return (value / base) + 'rem'; }`; @androidFun: ~`isAndroid = function() { return ( typeof navigator != 'undefined' ? navigator.userAgent.indexOf('Android') != -1 : false ) }`; @isAndroid: ~`isAndroid()`; .display-flex( @flow: column, @wrap: nowrap, @justify: center, @align: center ) { display: -webkit-box; display: -mox-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -ms-flex; display: flex; .if ( @flow ) when ( @flow = 'column' ) { -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; } .if ( @flow ) when ( @flow = 'row' ) { -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; } -webkit-flex-flow: @flow @wrap; -moz-flex-flow: @flow @wrap; -ms-flex-flow: @flow @wrap; flex-flow: @flow @wrap; -webkit-justify-content: @justify; -moz-justify-content: @justify; -ms-justify-content: @justify; justify-content: @justify; -webkit-box-pack: @justify; -moz-box-pack: @justify; -ms-flex-pack: @justify; -webkit-box-align: @align; -moz-box-align: @align; -webkit-align-items: @align; -moz-align-items: @align; -ms-align-items: @align; -ms-flex-align: @align; align-items: @align; } .set-flex(@level) { -webkit-box-flex: @level; -moz-box-flex: @level; -webkit-flex: @level; -moz-flex: @level; -ms-flex: @level; flex: @level; } @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)"; .at2x(@path, @w: auto, @h: auto) { background-image: url(@path); background-repeat: no-repeat no-repeat; background-size: @w @h; @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`; @media @highdpi { background-image: url("@{at2x_path}"); } } .placeholder( @color ) { &::-webkit-input-placeholder { color: @color; } &:-moz-placeholder { color: @color; } &::-moz-placeholder { color: @color; } &:-ms-input-placeholder { color: @color; } } .calc( @property, @value ) { @{property}: ~"-moz-calc(@{value})"; @{property}: ~"-webkit-calc(@{value})"; @{property}: ~"-o-calc(@{value})"; @{property}: ~"calc(@{value})"; @{property}: ~"expression(@{value})"; } .darkerColor( @col1, @col2 ) { .if ( @col2 ) when ( lightness(@col2) > lightness(@col1) ) { color: darken(@col1, 10%); } .if ( @col2 ) when ( lightness(@col2) < lightness(@col1)) { color: darken(@col2, 10%); } } .darkerColor (@a,@b, @property) when (lightness(@a) >= lightness(@b)) { @{property}: darken(@b, 10%); } .darkerColor (@a,@b, @property) when (lightness(@a) < lightness(@b)) { @{property}: darken(@a, 10%); } .retina(@path, @cap: 2, @size: auto auto, @extras: ~'') { @lowretina: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)"; @2xpath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`; background-image: url(@path) @extras; background-size: @size; @media @lowretina { background-image : url(@2xpath) @extras; background-size : @size; } .create-queries() when (@cap >= 2) { .loop(@env) when (@env <= @cap) { @retinapath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@@{env}x" + match; })`; @media (-webkit-min-device-pixel-ratio: @env), (min-resolution: @env * 96dpi) { background-image : url(@retinapath) @extras; background-size : @size; } .loop((@env + 1)); // next iteration } .loop(2); } .create-queries(); } .add-drop-shadow(@elevate: false, @diffused: false) { & when ( @elevate = true ) { & when ( @diffused = false ) { -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } & when ( @diffused = true ) { -webkit-box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.08); box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.08); } } & when ( @elevate = false ) { & when ( @diffused = false ) { -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } & when ( @diffused = true ) { box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05); } } } .add-drop-shadow-animation(@attribute: box-shadow) { & when ( @attribute = 'box-shadow') { transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } & when not( @attribute = 'box-shadow') { transition: @attribute 280ms cubic-bezier(0.4, 0, 0.2, 1); } } .ripple() { content: ''; display: block; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; border-radius: 25%; -webkit-border-radius: 25%; transform: scale(0); -webkit-transform: scale(0); pointer-events: none; } .ripple-animation() { //animation: ripple 225ms ease-out; -webkit-animation: 225ms mdc-ripple; -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; } .overflow-fix() { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; -webkit-user-select: none; -webkit-appearance: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate(0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @keyframes mdc-ripple-fg-radius-in { from { animation-timing-function: cubic-bezier(.4, 0, .2, 1); transform: scale(0.3); } to { transform: scale(1); } } @keyframes mdc-ripple-fg-opacity-in { from { animation-timing-function: linear; -webkit-animation-timing-function: linear; opacity: 0; } to { opacity: 0.4; } } .make-full-height (@includeMobile: false) { & when ( @includeMobile = true ) { @media @small-only { .calc( min-height, ~"100vh - `remCalc(20)` - `remCalc(50)`" ); } @media @medium-only { .calc( min-height, ~"100vh - `remCalc(20)` - `remCalc(50)`" ); } } @media @large-up { .calc( min-height, ~"100vh - `remCalc(20)` - `remCalc(55)`" ); } @media @xlarge-up { .calc( min-height, ~"100vh - `remCalc(20)` - `remCalc(75)`" ); } } @newCol1: #777777; @newCol2: #ffffff; // Panel Bg Colour @newCol3: #ffffff; // Font colour on panels @newCol4: #000000; // Font colour on background @newCol5: #ffffff; @accentColor: @newCol1; @accentFontColor: @newCol2; @panelBgColour: @newCol3; @fontColourForPanel: @newCol4; @colorOnBackground: @newCol5; @actionButtonBackgroundColor: @accentColor; @actionButtonFontColor: @accentFontColor; @leftLogoUrl: 'images/givergy-logo.svg'; @topBarLogoUrl: 'images/givergy-logo.svg'; @logoutLogoUrl: 'images/givergy-logo.svg'; @backgroundUrl: 'images/bg.png'; @font: "open-sans",sans-serif; @customFontFaces: ""; @errorColor: #D0021B; @backgroundColor: #f5f5f5; @font-face { font-family:"museo-sans"; src:url('fonts/museo-sans100.otf'); font-style:normal; font-weight:100; } @font-face { font-family:"museo-sans"; src:url('fonts/museo-sans300.otf'); font-style:normal; font-weight:300; } @font-face { font-family:"museo-sans"; src:url('fonts/museo-sans500.otf'); font-style:normal; font-weight:500; } @font-face { font-family:"museo-sans"; src:url('fonts/museo-sans700.otf'); font-style:normal; font-weight:700; } @font-face { font-family: 'open-sans'; font-weight: normal; font-style: normal; src: url('fonts/opensans-regular-webfont.eot'); src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regular-webfont.woff?v=1.101') format('woff'), url('fonts/opensans-regular-webfont.ttf') format('truetype'), url('fonts/opensans-regular-webfont.svg#OpenSansRegular') format('svg'); } // @font-face @font-face { font-family: 'open-sans'; font-weight: normal; font-style: italic; src: url('fonts/opensans-regularitalic-webfont.eot'); src: url('fonts/opensans-regularitalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regularitalic-webfont.woff?v=1.101') format('woff'), url('fonts/opensans-regularitalic-webfont.ttf') format('truetype'), url('fonts/opensans-regularitalic-webfont.svg#OpenSansItalic') format('svg'); } @font-face { font-family: 'open-sans'; font-weight: bold; font-style: normal; src: url('fonts/opensans-semibold-webfont.eot'); src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-semibold-webfont.woff?v=1.101') format('woff'), url('fonts/opensans-semibold-webfont.ttf') format('truetype'), url('fonts/opensans-semibold-webfont.svg#OpenSans-Semibold') format('svg'); } @form-spacing: 1rem; @small-range: 0em, 40em; @small-range-lower: 0em; @small-range-upper: 40em; @medium-range: 40.063em, 64em; @medium-range-lower: 40.063em; @medium-range-upper: 64em; @large-range: 64.063em, 90em; @large-range-lower: 64.063em; @large-range-upper: 90em; @xlarge-range: 90.063em, 120em; @xlarge-range-lower: 90.063em; @xlarge-range-upper: 120em; @xxlarge-range: 120.063em; @screen: "only screen"; @landscape: ~"@{screen} and (orientation: landscape)"; @portrait: ~"@{screen} and (orientation: portrait)"; @small-up: @screen; @small-only: ~"@{screen} and (max-width: @{small-range-upper})"; @medium-up: ~"@{screen} and (min-width:@{medium-range-lower})"; @medium-only: ~"@{screen} and (min-width:@{medium-range-lower}) and (max-width:@{medium-range-upper})"; @medium-down: ~"@{screen} and (max-width:@{medium-range-upper})"; @large-up: ~"@{screen} and (min-width:@{large-range-lower})"; @large-only: ~"@{screen} and (min-width:@{large-range-lower}) and (max-width:@{large-range-upper})"; @large-down: ~"@{screen} and (max-width:@{large-range-upper})"; @xlarge-up: ~"@{screen} and (min-width:@{xlarge-range-lower})"; @xlarge-only: ~"@{screen} and (min-width:@{xlarge-range-lower}) and (max-width:@{xlarge-range-upper})"; @xlarge-down: ~"@{screen} and (max-width:@{xlarge-range-upper})"; @xxlarge-up: ~"@{screen} and (min-width:@{xxlarge-range})"; // Legacy @small: @medium-up; @medium: @medium-up; @large: @large-up; .alertify, .alertify-show, .alertify-log { -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); } .alertify-hide { -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); } .alertify-log-hide { -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); } .alertify-cover { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; background-color:white; filter:alpha(opacity=0); opacity:0; } .alertify-cover-hidden { display: none; } .alertify { position: fixed; z-index: 99999; top: 50px; left: 50%; width: 550px; margin-left: -275px; opacity: 1; } .alertify-hidden { -webkit-transform: translate(0,-150px); -moz-transform: translate(0,-150px); -ms-transform: translate(0,-150px); -o-transform: translate(0,-150px); transform: translate(0,-150px); opacity: 0; display: none; } :root *> .alertify-hidden { display: block; visibility: hidden; } .alertify-logs { position: fixed; z-index: 5000; top: 10px; right: 1.25rem; width: 300px; } .alertify-logs-hidden { display: none; } .alertify-log { display: block; margin-top: 10px; position: relative; right: -300px; opacity: 0; } .alertify-log-show { right: 0; opacity: 1; } .alertify-log-hide { -webkit-transform: translate(300px, 0); -moz-transform: translate(300px, 0); -ms-transform: translate(300px, 0); -o-transform: translate(300px, 0); transform: translate(300px, 0); opacity: 0; } .alertify-dialog { padding: 25px; } .alertify-resetFocus { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .alertify-inner { text-align: center; } .alertify-text { margin-bottom: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; } .alertify-buttons { } .alertify-button, .alertify-button:hover, .alertify-button:active, .alertify-button:visited { background: none; text-decoration: none; border: none; line-height: 1.5; font-size: 100%; display: inline-block; cursor: pointer; margin-left: 5px; margin-top: 0; margin-bottom: 0; margin-right: 0; } @media @small-only { .alertify, .alertify-logs { width: auto; right: 0.625em; //top: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .alertify { left: 5%; margin: 0; } } .alertify, .alertify-log { font-family: sans-serif; } .alertify { background: #FFF; border: 1px solid #8E8E8E; border: 1px solid rgba(0,0,0,.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0,0,0,.3); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; } .alertify-dialog { padding: 0; } .alertify-inner { text-align: left; } .alertify-message { padding: 15px; margin: 0; } .alertify-text-wrapper { padding: 0 15px; } .alertify-text { color: #555; border-radius: 4px; padding: 8px; background-color: #FFF; border: 1px solid #CCC; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .alertify-text:focus { border-color: rgba(82,168,236,.8); outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); } .alertify-buttons { padding: 14px 15px 15px; background: #F5F5F5; border-top: 1px solid #DDD; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 #FFF; text-align: right; } .alertify-button, .alertify-button:hover, .alertify-button:focus, .alertify-button:active { margin-left: 10px; border-radius: 4px; font-weight: normal; padding: 4px 12px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); } .alertify-button:focus { outline: none; box-shadow: 0 0 5px #2B72D5; } .alertify-button:active { position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); } .alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus, .alertify-button-cancel:active { text-shadow: 0 -1px 0 rgba(255,255,255,.75); background-color: #E6E6E6; border: 1px solid #BBB; color: #333; background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6); background-image: -moz-linear-gradient(top, #FFF, #E6E6E6); background-image: -ms-linear-gradient(top, #FFF, #E6E6E6); background-image: -o-linear-gradient(top, #FFF, #E6E6E6); background-image: linear-gradient(top, #FFF, #E6E6E6); } .alertify-button-cancel:hover, .alertify-button-cancel:focus, .alertify-button-cancel:active { background: #E6E6E6; } .alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus, .alertify-button-ok:active { text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: #3786d5; border: 1px solid #3786d5; border-color: #04C #04C #002A80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFF; } .alertify-button-ok:hover, .alertify-button-ok:focus, .alertify-button-ok:active { background: #3786d5; } .alertify-log { background: #1F1F1F; background: rgba(0,0,0,.9); padding: 15px; border-radius: 4px; color: #FFF; line-height: 1.5; } .alertify-log-error { background: #f04124; background: rgba(240,65,36,.9); border: 1px solid #de2b0f; } .alertify-log-success { background: #43AC6A; background: rgba(67,172,106,.9); border: 1px solid #3a945b; } html { font-size: 100%; } body { background: @backgroundColor; color: @colorOnBackground; font-family: @font; } [data-abide] .error small.error, [data-abide] span.error, [data-abide] small.error { background: transparent; font-size: ~`remCalc(14)`; } .off-canvas { .top-bar { @colMenuIcon: #000000; background: #f5f5f5; &__title { &__logo { background: url(@topBarLogoUrl) no-repeat center center; background-size: auto 100%; background-position: right; margin-right: ~`remCalc(10)`; } } &__menu__icon { span { -webkit-box-shadow: 1px 10px 1px 1px @colMenuIcon, 1px 16px 1px 1px @colMenuIcon, 1px 22px 1px 1px @colMenuIcon; box-shadow: 0 10px 0 1px @colMenuIcon, 0 16px 0 1px @colMenuIcon, 0 22px 0 1px @colMenuIcon; } &:hover span{ @colMenuIconHoverForWhite: darken(@colMenuIcon, 30%); @colMenuIconHoverForBlack: lighten(@colMenuIcon, 30%); @colMenuIconHover: ~`'@{colMenuIcon}' == '#000000' ? '@{colMenuIconHoverForBlack}' : '@{colMenuIconHoverForWhite}'`; -webkit-box-shadow: 1px 10px 1px 1px @colMenuIconHover, 1px 16px 1px 1px @colMenuIconHover, 1px 22px 1px 1px @colMenuIconHover; box-shadow: 0 10px 0 1px @colMenuIconHover, 0 16px 0 1px @colMenuIconHover, 0 22px 0 1px @colMenuIconHover; } } &__menu__text { color: @colMenuIcon; } &__search { &__text { color: @colMenuIcon; } &__icon { svg { fill: @colMenuIcon; } } } } .top-subbar { background-color: @accentColor; &__item { color: @accentFontColor; &::after { background-color: darken(@accentColor, 20%); } } } &__inner-wrap { &__content { padding-top: ~`remCalc(20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; p, span, label, a, a:visited, a:focus { color: @colorOnBackground; } a:not(.button) { text-decoration: underline; } a:hover { color: darken(@colorOnBackground, 20%); } @media medium-up { padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } > * { position: relative; } } } &__left-menu { background: #fff; &--logged { [data-menu-name="My Account"] { display: block !important; } [data-menu-name="Login"] { display: none !important; } [data-menu-name="Log Out"] { display: block !important; } } &__list { &__logo-wrapper { padding: 0px ~`remCalc(15)`; &__logo { width: 100%; height: ~`remCalc(150)`; margin-top: ~`remCalc(10)`; margin-bottom: ~`remCalc(10)`; background: url(@leftLogoUrl) no-repeat center center; background-size: contain; @media @medium-up { margin-top: ~`remCalc(15)`; margin-bottom: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(30)`; } } } &__item { a { span{ color: #000; } } &--selected, &:hover { a { span { font-weight: bold; color: #000; &::before { background-color: @accentColor; } } } } } &__social-media-links { .display-flex(row, nowrap, flex-start, flex-end); .set-flex(1 1 auto); margin-bottom: ~`remCalc(0)`; margin-top: ~`remCalc(20)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; min-height: ~`remCalc(32)`; @media @xlarge-up { margin-top: ~`remCalc(40)`; min-height: ~`remCalc(40)`; } .icon { width: ~`remCalc(32)`; height: ~`remCalc(32)`; background-size: contain; background-repeat: no-repeat; background-position: center; padding: 0; margin: 0 ~`remCalc(15)` 0 0; fill: #cfced3; cursor: pointer; transition: fill 500ms ease-in-out; @media @xlarge-up { width: ~`remCalc(40)`; height: ~`remCalc(40)`; } &:last-of-type { margin-right: 0; } &:hover { fill: @accentColor; } } .facebook-link { } .twitter-link { } .linkedin-link { } .youtube-link { } } &__givergy-logo { a { padding-top: ~`remCalc(20)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; padding-bottom: ~`remCalc(10)`; img { width: 100%; height: ~`remCalc(58)`; } @media @xlarge-up { padding-top: ~`remCalc(40)`; padding-bottom: ~`remCalc(20)`; } } } } [data-menu-name="Log Out"] { display: none; } [data-menu-name="My Account"] { display: none; } } } // components .loader { width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; background: #f5f5f5; z-index: 1001; &:before { position: absolute; content: ""; left: 50%; top: 50%; .calc( left, ~"50% - `remCalc(7)`" ); .calc( top, ~"50% - `remCalc(7)`" ); width: ~`remCalc(14)`; height: ~`remCalc(14)`; border: solid ~`remCalc(2)` transparent; border-top-color: #000; border-left-color: #000; .border-radius( ~`remCalc(10)` ); .animation(pace-spinner, 400ms, linear, 0s, infinite); } } .error-data-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; min-height: ~`remCalc(50)`; .error-data { position: absolute; left: 50%; top: 50%; width: auto; height: auto; white-space: nowrap; .translate(-50%, -50%) !important; .translate3d(-50%,-50%,0) !important; } } .a-search { position: relative; @search-color: #828282; input { background: #1e1e1e; display: block; padding-left: ~`remCalc(30)`; width: 100%; padding-top: 0.15rem; padding-bottom: 0.15rem; margin: 0; .border-radius( ~`remCalc(15)` ) !important; border-color: #1e1e1e; color: @search-color; box-shadow: none; //line-height: 1.2; &:focus { background: #1e1e1e; border-color: #1e1e1e; outline: none; .box-shadow ( none ); } .placeholder( @search-color ); } svg { display: block; position: absolute; left: ~`remCalc(13)`; top: ~`remCalc(7)`; width: ~`remCalc(11)`; height: ~`remCalc(11)`; fill: #828282; } &:before { content: ""; position: absolute; display: none; right: ~`remCalc(30)`; top: ~`remCalc(7)`; width: ~`remCalc(14)`; height: ~`remCalc(14)`; @border-width: ~`remCalc(2)`; border: solid @border-width transparent; border-top-color: #29d; border-left-color: #29d; border-radius: ~`remCalc(10)`; .animation( pace-spinner 400ms linear infinite ); } &.show { &:before { display: inline-block; } } } .a-select { position: relative; &:before { content: ""; position: absolute; display: none; right: ~`remCalc(30)`; top: ~`remCalc(12)`; width: ~`remCalc(14)`; height: ~`remCalc(14)`; @border-width: ~`remCalc(2)`; border: solid @border-width transparent; border-top-color: #29d; border-left-color: #29d; .border-radius( ~`remCalc(10)` ); -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } &.center:before { left: ~`remCalc(10)`; top: ~`remCalc(8)`; right: initial; right: auto; } &.show { &:before { display: inline-block; } } } .a-button { .display-flex(row, nowrap, center, center); border-width: 0; background-color: @accentColor; color: @accentFontColor; white-space: normal; text-overflow: ellipsis; margin: 0; position: relative; width: auto; &::after { background-color: darken(@accentColor, 20%); } &__label { margin: 0 auto; } &__loader { display: none; position: absolute; left: ~`remCalc(22)`; top: ~`remCalc(13)`; width: ~`remCalc(14)`; height: ~`remCalc(14)`; @border-width: ~`remCalc(2)`; border: solid @border-width transparent; border-top-color: @accentFontColor; border-left-color: @accentFontColor; .border-radius( ~`remCalc(10)` ); .animation (pace-spinner, 400ms, linear, 0s, infinite ); } &__thick { display: none; position: absolute; left: ~`remCalc(22)`; top: ~`remCalc(13)`; width: ~`remCalc(15)`; height: ~`remCalc(13)`; svg { width: ~`remCalc(15)`; height: ~`remCalc(13)`; position: absolute; top: 0; left: 0; } fill: #fff; } &--round { .border-radius( ~`remCalc(40)` ); .overflow-fix(); overflow: hidden; padding-left: ~`remCalc(40)`; padding-right: ~`remCalc(40)`; &::after { .ripple(); } &:hover { .add-drop-shadow(true); } } &--bigger { height: ~`remCalc(54)`; font-size: 100%; @media @medium-up { font-size: 120%; } &.a-button { &--round { padding-left: ~`remCalc(60)`; padding-right: ~`remCalc(60)`; } } .a-button__loader { left: ~`remCalc(25)`; top: ~`remCalc(17)`; width: ~`remCalc(20)`; height: ~`remCalc(20)`; @border-width: ~`remCalc(3)`; } .a-button__thick { left: ~`remCalc(30)`; top: ~`remCalc(19)`; width: ~`remCalc(20)`; height: ~`remCalc(16)`; svg { width: ~`remCalc(20)`; height: ~`remCalc(16)`; } } } &--grey { background-color: @actionButtonBackgroundColor; color: @actionButtonFontColor; &:hover, &:focus { background-color: contrast(@backgroundColor, darken(@actionButtonBackgroundColor, 20%), lighten(@actionButtonBackgroundColor, 20%)); color: @actionButtonFontColor; } &:after { background-color: lighten(@actionButtonBackgroundColor, 20%);; } .a-button__loader { border-top-color: @actionButtonFontColor; border-left-color: @actionButtonFontColor; } .a-button__thick { fill: @actionButtonFontColor } } &--focused { &.a-button { &--round { .add-drop-shadow(true); &::after { .ripple-animation(); } } } } &--loading { .a-button__loader { display: block; } .a-button__thick { display: none; } } &--saved { background: #3786d5; color: #fff; &:hover, &:focus { background: #3786d5; color: #fff; } .a-button__loader { display: none; } .a-button__thick { display: block; } } } .litecheckbox { width: ~`remCalc(20)`; height: ~`remCalc(20)`; position: relative; margin: 0; @media @large-up { width: ~`remCalc(30)`; height: ~`remCalc(30)`; } label { width: ~`remCalc(20)`; height: ~`remCalc(20)`; cursor: pointer; position: absolute; top: 0; left: 0; overflow: visible; background: #fff; border: ~`remCalc(1)` solid #dddddd; .border-radius( ~`remCalc(4)` ); //.box-shadow( ~"inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5)" ); @media @large-up { width: ~`remCalc(30)`; height: ~`remCalc(30)`; } &:after { content: ''; width: ~`remCalc(12)`; height: ~`remCalc(6)`; position: absolute; top: ~`remCalc(5)`; left: ~`remCalc(4)`; border: ~`remCalc(2)` solid @colorOnBackground; border-top: none; border-right: none; background: transparent; opacity: 0; .rotate(-45deg); @media @large-up { width: ~`remCalc(19)`; height: ~`remCalc(9)`; top: ~`remCalc(7)`; left: ~`remCalc(6)`; border-width: ~`remCalc(2)`; } } &:hover::after { opacity: 0.0; } } &.small{ width: ~`remCalc(14)`; height: ~`remCalc(14)`; label { width: ~`remCalc(14)`; height: ~`remCalc(14)`; .border-radius( ~`remCalc(3)` ); //.box-shadow( ~"inset 0px 1px 1px white, 0px 1px 2px rgba(0, 0, 0, 0.5)" ); &:after { width: ~`remCalc(9)`; height: ~`remCalc(6)`; top: ~`remCalc(3)`; left: ~`remCalc(3)`; } } } input[type=checkbox] { visibility: hidden; margin: 0; + label { margin: 0; } &:checked + label:after { opacity: 1; } } input[type="checkbox"] + label { display: inline-block; margin: 0; vertical-align: baseline; } input[type="checkbox"]:disabled + label{ border: none; background: white; box-shadow: inset 0 0px 0px rgba(255, 255, 255, 0); cursor: default; &:hover::after{ opacity: 0; } } input[type="checkbox"]:not(:checked):disabled + label { &:after { content: '✖'; opacity: 1; border:0px; top: ~`remCalc(3)`; left: ~`remCalc(3)`; color: #333; .rotate(0deg); } &:hover::after{ } } } .literadio { width: ~`remCalc(20)`; height: ~`remCalc(20)`; position: relative; margin: 0 0 0 0; display: inline-block; label { width: ~`remCalc(20)`; height: ~`remCalc(20)`; cursor: pointer; position: absolute; top: 0; left: 0; .border-radius( ~`remCalc(50)`); .box-shadow( ~"inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5)" ); &:after { content: ''; width: ~`remCalc(16)`; height: ~`remCalc(16)`; position: absolute; top: ~`remCalc(2)`; left: ~`remCalc(2)`; background: ~`remCalc(5)` @colorOnBackground; opacity: 0; .border-radius(~`remCalc(50)`); } &:hover::after { opacity: 0.0; } } input[type=radio] { visibility: hidden; margin: 0; + label { margin: 0; } &:checked + label:after { opacity: 1; } } } .table { display: table; } .table-row { display: table-row; } .table-cell { display: table-cell; } .gmail-button, .facebook-button, .twitter-button, .email-button { .display-flex(row, nowrap, flex-start, center); .transition(all 300ms ease); height: ~`remCalc(30)`; cursor: pointer; width: 100%; margin: 0; padding: 0; span { color: #fff; padding-left: ~`remCalc(10)`; font-size: ~`remCalc(12)`; @media @medium-up { font-size: ~`remCalc(12)`; } display: block; } } .gmail-button { background-color: #a82d22; .gmail { height: ~`remCalc(13)`; width: ~`remCalc(18)`; margin-left: ~`remCalc(10)`; display: block; } &:hover { background: darken( #a82d22, 20% ); } } .facebook-button { background: #44619d; .facebook { height: ~`remCalc(14)`; width: ~`remCalc(6)`; margin-left: ~`remCalc(10)`; display: block; } &:hover { background: darken( #44619d, 20% ); } } .twitter-button { background: #2AA9E0; span { color: #fff; } .twitter { height: ~`remCalc(12)`; width: ~`remCalc(15)`; margin-left: ~`remCalc(10)`; display: block; } &:hover { background: darken( #2AA9E0, 20% ); } } .email-button { background: #666666; span{ color: #fff; } .email { height: ~`remCalc(12)`; width: ~`remCalc(17)`; margin-left: ~`remCalc(10)`; display: block; } &:hover { background: darken( #666666, 20% ); } } .facebook-share, .twitter-share, .email-share { svg { margin-left: ~`remCalc(10)` !important; } span { padding-left: ~`remCalc(7)` !important; padding-right: ~`remCalc(7)` !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:hover { outline: none; box-shadow: 0 0 ~`remCalc(5)` #2B72D5; } } .accordion { dl { margin: 0; padding: 0; } &__item { display: block; background: @accentColor; margin-bottom: ~`remCalc(20)`; .border-radius(~`remCalc(5)`); cursor: pointer; padding-bottom: 1px; &:last-of-type { margin-bottom: 0; } &__wrapper { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(20)`; } &__label { font-weight: 700; display: inline-block; color: @accentFontColor; font-size: ~`remCalc(18)`; margin: 0; .transition( all 250ms ease-out ); } &__icon { position: relative; cursor: pointer; display: inline-block; float: right; margin: 0; padding: 0; border: none; background: 0 0; svg { position: relative; display: inline-block; width: ~`remCalc(18)`; height: ~`remCalc(18)`; margin: ~`remCalc(-3)` 0 0 0; vertical-align: middle; * { fill: #000; stroke: #000; stroke-width: ~`remCalc(30)`; } .plus { circle { display: block; fill: #fff; stroke: #fff; .transition( all 250ms ease-out ); } } .minus { circle{ display: none; fill: #fff; stroke: #fff; } } } } &__field { border-width: 0; display: none; margin: 0 ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(20)`; .calc( width, ~"100% - `remCalc(40)`" ); color: @colorOnBackground; } &--open { .accordion { &__item { &__icon { .plus { circle { display: none; } } .minus{ circle { display: block; } } } } } } &:hover { } } } .givergy-button { border-right: solid ~`remCalc(4)` #a63981 !important; border-left: solid ~`remCalc(4)` #2594c5 !important; background: rgba(0,0,0,.75) !important; &:before, &:after{ position: absolute; z-index: 1; display: block; width: 100%; height: 4px; content: ''; background-color: #2594c5; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF2594C5', endColorstr='#FFA63981'); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…dpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==); background-size: 100%; background-image: -webkit-gradient(linear, 0 50%, 100% 50%, color-stop(0, #2594c5), color-stop(14%, #0958a6), color-stop(28%, #273968), color-stop(42%, #332779), color-stop(57%, #5e3764), color-stop(71%, #821f82), color-stop(87%, #841e82), color-stop(100%, #a63981)); background-image: -moz-linear-gradient(left, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%); background-image: -webkit-linear-gradient(left, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%); background-image: linear-gradient(to right, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%); } &:before{ top: 0; left: 0; } &:after{ bottom: 0; left: 0; } &:hover{ background: #54237d !important; border-right-color: #54237d !important; border-left-color: #54237d !important; &:before, &:after{ background: #54237d; } } } .no-data{ a:not(.button) { margin: 0; color: @colorOnBackground; text-decoration: underline; font-size: 1rem; font-weight: bold; display: inline; } } .input-text{ border: solid 1px #dddddd; background-color: #ffffff; border-radius: ~`remCalc(10)`; } .button-box-shadow{ box-shadow: ~`remCalc(0)` ~`remCalc(1.5)` ~`remCalc(2)` ~`remCalc(1)` #cccccc; } .socialButtons { width: 100%; &__title { font-weight: bold; } &__buttons { margin-top: ~`remCalc(10)`; .display-flex(row, wrap, space-between, center); margin-right: ~`remCalc(-10)`; &__button { margin-top: ~`remCalc(10)`; margin-right: ~`remCalc(10)`; min-width: ~`remCalc(105)`; text-decoration: none !important; .set-flex(1); @media @large-up { } &:last-of-type { //margin-right: ~`remCalc(0)`; } } } } .gallery { &__scroller { height: 100%; width: 100%; &__item { padding: 0; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; } } &__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: @accentColor; opacity: 1; z-index: 101; } } .place-bid-form, .buy-now-form { background: @accentColor; margin: 0; position: relative; bottom: 0; width: 100%; left: 0; overflow: visible; z-index: 200; > .row-flex-center { margin: 0; } .amount-wrapper { background: #fff; border: ~`remCalc(1)` solid #bbb; .border-radius(~`remCalc(4)`); } .currency-wrapper { padding-right: ~`remCalc(5)`; } .currency { font-size: ~`remCalc(18)`; line-height: 100%; color: #4d4d4d; font-weight: normal; margin-bottom: 0; display: block; .display-flex(column, nowrap, center, center); } input { background: transparent; color: #4d4d4d; border: 0px none; margin: 0; height: ~`remCalc(38)`; width: 100%; padding-right: ~`remCalc(10)`; //line-height: normal; line-height: 100%; padding-top: 0rem; padding-bottom: 0rem; padding-left: 0rem; .placeholder( #66717b ); &::-webkit-input-placeholder { line-height: normal; font-size: ~`remCalc(18)`; } &:-moz-placeholder { font-size: ~`remCalc(18)`; } &::-moz-placeholder { font-size: ~`remCalc(18)`; } &:-ms-input-placeholder { line-height: normal; font-size: ~`remCalc(18)`; } &.error { color: darken(#ff0000, 10%); .placeholder( #66717b ); } &[name=amount] { font-size: ~`remCalc(18)`; } } .copy { color: #ffffff; text-align: center; } small.error { position: absolute; margin: 0 !important; top: ~`remCalc(7)`!important; left: ~`remCalc(-30)`!important; padding: 0.375rem 0.5625rem 0.5625rem !important; .transition( all 300ms ease-in ) !important; .translate(0, 0 ); .translate3d(0, 0, 0); z-index: -1 !important; white-space: nowrap !important; font-size: ~`remCalc(13)` !important; height: auto !important; width: auto !important; opacity: 0; } .error { small.error { .translate(0, -100% ); .translate3d(0, -100%, 0); opacity: 1; color: @accentFontColor; } input { color: #ff0000; } &::-webkit-input-placeholder { color: #ff0000; } &:-moz-placeholder { color: #ff0000; } &::-moz-placeholder { color: #ff0000; } &:-ms-input-placeholder { color: #ff0000; } } [type=submit], [type=button] { padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; padding-top: ~`remCalc(7)`; padding-bottom: ~`remCalc(7)`; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: @accentFontColor; color: @accentColor; margin: 0; width: 100%; font-size: ~`remCalc(18)`; @media @medium-up { padding-left: ~`remCalc(40)`; padding-right: ~`remCalc(40)`; } &:hover { background: contrast(@accentFontColor, lighten(@accentFontColor,20%), darken(@accentFontColor,20%)); } } .auction-closed { h3 { color: @accentFontColor; margin: 0; } } } .buy-now-form { .auction-open { text-align: center; .a-button { display: inline-block; width: 50%; } } } .categories { padding: ~`remCalc(10)` ~`remCalc(0)` ~`remCalc(30)` ~`remCalc(0)`; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(20)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } &__item { .display-flex( row, nowrap, flex-start, center ); margin-bottom: ~`remCalc(20)`; width: 100%; height: ~`remCalc(80)`; background: #fff; overflow: hidden; position: relative; padding: ~`remCalc(20)` ~`remCalc(10)`; text-decoration: none !important; .border-radius(~`remCalc(5)`); .add-drop-shadow(false, true); .add-drop-shadow-animation(all); @media @medium-up { padding: ~`remCalc(25)` ~`remCalc(20)`; margin-bottom: ~`remCalc(25)`; height: auto; } @media @xlarge-up { padding: ~`remCalc(40)` ~`remCalc(20)`; margin-bottom: ~`remCalc(30)`; height: auto; } &:hover { .add-drop-shadow(true, true); background-color: darken(#fff, 5%); } &::after { background-color: darken(#fff, 20%); .ripple(); } &__icon { width: ~`remCalc(32)`; height: ~`remCalc(32)`; fill: #7f7f7f; @media @medium-up { width: ~`remCalc(32)`; height: ~`remCalc(32)`; } @media @xlarge-up { width: ~`remCalc(40)`; height: ~`remCalc(40)`; } } &__label { font-size: ~`remCalc(18)`; .set-flex(1); margin-left: ~`remCalc(10)`; margin-right: ~`remCalc(10)`; color: #222; @media @medium-up { font-size: ~`remCalc(24)`; margin-left: ~`remCalc(20)`; margin-right: ~`remCalc(20)`; } @media @xlarge-up { font-size: ~`remCalc(28)`; margin-left: ~`remCalc(30)`; margin-right: ~`remCalc(30)`; } } &__button { background-color: #999999; color: #fff; border-radius: ~`remCalc(20)`; padding: ~`remCalc(5)` ~`remCalc(20)`; } &--selected { background: #222; .categories { &__item { &__icon { fill: #ffffff; } &__label { color: #fff; } &__button { background-color: #fff; color: #000; } } } &:hover { background-color: lighten(#222, 10%); } } &--focused { &::after { .ripple-animation(); } } &:last-of-type { margin-bottom: ~`remCalc(0)`; } } } // .item // { // height: ~`remCalc(40)`; // margin-bottom: ~`remCalc(7)`; // a // { // .display-flex( row, nowrap, flex-start, center ); // background: @col1; // margin: 0; // width: 100%; // height: 100%; // color: #fff; // padding-left: ~`remCalc(15)`; // padding-right: ~`remCalc(15)`; // color: @col3; // &.special // { // background:@col3; // color: @col1; // } // &:hover // { // background: lighten( @col1, 10% ); // color: @col3; // } // } // &.selected // { // a // { // background: @col2; // color: @col5; // } // } // } //} .touch { .categories { &__item { &:hover { box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05); background: #fff; } &.special:hover { } } } } .search-bar { input[type=text] { background: #fff; border: 0 none; color: #000; .border-radius(~`remCalc(5)`); font-size: ~`remCalc(16)`; padding: ~`remCalc(10)` ~`remCalc(10)`; height: auto; width: 100%; .placeholder( #000 ); .add-drop-shadow(false, true); .add-drop-shadow-animation(); @media @medium-up { font-size: ~`remCalc(20)`; padding: ~`remCalc(13)` ~`remCalc(13)`; } @media @xlarge-up { font-size: ~`remCalc(24)`; padding: ~`remCalc(15)` ~`remCalc(15)`; } &:focus { .add-drop-shadow(true, true); } } .a-button { height: auto; padding: ~`remCalc(8)` ~`remCalc(20)`; margin-left: ~`remCalc(10)`; height: 100%; @media @medium-up { padding: ~`remCalc(10)` ~`remCalc(40)`; margin-left: ~`remCalc(20)`; } @media @xlarge-up { padding: ~`remCalc(10)` ~`remCalc(40)`; margin-left: ~`remCalc(20)`; height: ~`remCalc(54)`; } } small.error { margin-bottom: 0px; position: absolute; left: 0; z-index: 1000; color: @colorOnBackground; } } @inputFontColor: #283036; @inputErrorColor: #D0021B; .input { // .display-flex(row, nowrap, flex-start, center); display: block; height: ~`remCalc(64)`; margin: 0 0 ~`remCalc(15)` 0; position: relative; overflow: visible; cursor: text; .border-radius(~`remCalc(10)`); .add-drop-shadow(false, true); .add-drop-shadow-animation(); background: #fff; @media @medium-up { margin: 0 0 ~`remCalc(20)` 0; } &--focused { // implementation scroll down } &__field { // implementation scroll down } &__label { // implementation scroll down } &__invalid-bar { -webkit-text-size-adjust: none; position: absolute; left: 0; bottom: ~`remCalc(-7)`; background-color: @inputErrorColor; height: ~`remCalc(10)`; width: 100%; .translate3d(0, 100%, 0); } &__icon { width: ~`remCalc(25)`; height: ~`remCalc(25)`; left: ~`remCalc(20)`; position: absolute; bottom: ~`remCalc(20)`; + .input__field { left: ~`remCalc(60)`; .calc( width, ~"100% - `remCalc(80)`" ); } + .input__field + .input__label { left: ~`remCalc(60)`; } } } .input--focused { .add-drop-shadow(true, true); } .input__label { position: absolute; width: 100%; left: ~`remCalc(20)`; bottom: ~`remCalc(19)`; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 50%; transition-property: color, transform; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transform: scale(0.85) translateY(-20px); transform: scale(0.85) translate3d(0,-20px,0); color: #000; z-index: 2; font-size: ~`remCalc(16)`; -webkit-text-size-adjust: none; @media @medium-up { font-size: ~`remCalc(18)`; bottom: ~`remCalc(17)`; } @media @xlarge-up { font-size: ~`remCalc(20)`; bottom: ~`remCalc(15)`; } } .input__field { display: block; position: absolute; left: ~`remCalc(20)`; bottom: ~`remCalc(12)`; padding: 0; margin: 0; font-size: ~`remCalc(18)`; height: ~`remCalc(22)`; line-height: ~`remCalc(22)`; font-family: sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .calc( width, ~"100% - `remCalc(40)`" ); outline: 0; border: none; background-color: transparent; -webkit-tap-highlight-color: transparent; color: @inputFontColor; .placeholder( lighten(@inputFontColor, 20%) ); border-bottom: 0 none; @media @medium-up { font-size: ~`remCalc(20)`; height: ~`remCalc(24)`; line-height: ~`remCalc(24)`; bottom: ~`remCalc(10)`; } @media @xlarge-up { font-size: ~`remCalc(22)`; height: ~`remCalc(26)`; line-height: ~`remCalc(26)`; bottom: ~`remCalc(8)`; } &--empty { opacity: 0; + .input__label { transform: scale(1) translateY(0px); color: lighten(@inputFontColor, 20%); } } &--focused { opacity: 1; + .input__label { transform: scale(0.85) translateY(-20px); color: #000; cursor: default; } } &--invalid { -webkit-animation: shake 500ms linear both; animation: shake 500ms linear both; .placeholder( @inputErrorColor ); color: @inputErrorColor; + .input__label { color: @inputErrorColor; } + .input__label + .input__invalid-bar { -webkit-animation: bounceInUp 500ms linear both; animation: bounceInUp 500ms linear both; } } } .inputRow { margin-bottom: ~`remCalc(20)`; .input { margin-bottom: ~`remCalc(0)`; } &.error { small.error { padding-bottom: 0; font-size: ~`remCalc(14)`; margin-bottom: 0; width: 100%; text-transform: none; } } } @-webkit-keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } @-webkit-keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0); } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @inputFontColor: #283036; @inputErrorColor: #D0021B; .select { &:extend(.input); height: ~`remCalc(82)`; &--focused { &:extend(.input--focused); } &__label { &:extend(.input__label); transform: scale(0.85) translateY(-40px); transform: scale(0.85) translate3d(0,-40px,0); } &__field { &:extend(.input__field); height: ~`remCalc(41)`; padding: ~`remCalc(8)` ~`remCalc(40)` ~`remCalc(8)` ~`remCalc(8)`; margin-bottom: 0; &--invalid { -webkit-animation: shake 500ms linear both; animation: shake 500ms linear both; .placeholder( @inputErrorColor ); color: @inputErrorColor; + .select__label { color: @inputErrorColor; } + .select__label + .select__invalid-bar { -webkit-animation: bounceInUp 500ms linear both; animation: bounceInUp 500ms linear both; } } } } .inputRow { margin-bottom: ~`remCalc(20)`; .select { margin-bottom: ~`remCalc(0)`; } } .credit-card-form { width: 100%; position: relative; @creditCardFontColor: #283036; @creditCardErrorColor: #D0021B; @creditCardLinkColor: #3D95CE; .loader { background: #fff; } .show-payment-form > .card-label { margin: 0; } .payment-method-icon { display: none; position: absolute; left: auto; right: ~`remCalc(14)`; .calc( top, ~"50% - `remCalc(14)`" ); text-indent: -999em; width: ~`remCalc(44)`; height: ~`remCalc(28)`; background-repeat: no-repeat; border: ~`remCalc(1)` solid transparent; .border-radius(~`remCalc(1)`); .retina('images/cards_sprite.png', 1.5, 86px auto); &.visa, &.visaelectron { display: block; background-position: 0 -380px; } &.maestro { display: block; background-position: 0 -240px; } &.amex { display: block; background-position: 0 -352px } &.mastercard { display: block; background-position: 0 -268px; } &.dinersclub { display: block; background-position: 0 -128px; } &.discover { display: block; background-position: 0 -156px; } &.jcb { display: block; background-position: 0 -212px; } &.cvv-icon { display: block; background-position: 0 -100px; bacground-color: #fff; border: ~`remCalc(1)` solid rgba(0,0,0,0.2); } &.cid-icon { display: block; background-position: 0 -296px; bacground-color: #fff; border: ~`remCalc(1)` solid rgba(0,0,0,0.2); } } .row { display: block; clear: both; margin: 0; padding: 0; .column { display: inline-block; margin: 0; padding: 0; } .half { width: 48%; } } .show-selected-payment-method, .show-all-payment-method { position: relative; .payment-method-item { height: ~`remCalc(64)`; margin: 0 0 ~`remCalc(15)` 0; position: relative; .border-radius(~`remCalc(10)`); .add-drop-shadow(false, true); background: #fff; @media @medium-up { margin: 0 0 ~`remCalc(20)` 0; } .display-flex(row, wrap, center, center); .payment-method-icon { display: block; position: relative; left: 0; right: auto; top: 0; text-indent: -999em; &.stick-left { margin-left: ~`remCalc(14)`; } } .payment-method-type { color: @creditCardFontColor; font-weight: bold; margin-left: ~`remCalc(10)`; font-size: ~`remCalc(16)`; } .payment-method-description { color: lighten(@creditCardFontColor, 20%); font-size: ~`remCalc(16)`; .set-flex(1); margin-left: ~`remCalc(8)`; white-space: nowrap; &.small { } } } .payment-method-action { z-index: 10; white-space: nowrap; margin-right: ~`remCalc(4)`; &.small { } } } .show-selected-payment-method { .payment-method-item { margin-bottom: 0; } } .show-all-payment-method { .payment-method-item { cursor: pointer; .transition(background-color 167ms ease-in); &.selected { &:after { content: ''; width: ~`remCalc(20)`; height: ~`remCalc(10)`; position: absolute; .calc( top, ~"50% - `remCalc(8)`" ); right: ~`remCalc(15)`; border: .1875rem solid #009CDE; border-top: none; border-right: none; background: transparent; .rotate(-45deg); } } &:hover { background-color: #f9f9f9; } } } button { border: none; background: 0 0; -webkit-appearance: none; //padding: ~`remCalc(18)` ~`remCalc(10)`; margin: 0; &.link { color: @creditCardLinkColor; text-decoration: underline; background-color: transparent; border: none; .transition(color 167ms ease-in); &:hover, &active { color: darken(@creditCardLinkColor, 20%); } } &.link-small { font-size: ~`remCalc(12)`; } &.center { margin: 0 auto; display: block; } } } @checkoutItemFontColor: @colorOnBackground; .checkout-item { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(20)`; &__title { .display-flex(row, nowrap, flex-start, flex-start); cursor: pointer; &__number { text-align: left; font-size: ~`remCalc(24)`; line-height: ~`remCalc(24)`; color: @checkoutItemFontColor; } &__title { font-size: ~`remCalc(16)`; font-weight: normal; text-align: left; color: @checkoutItemFontColor; margin-left: ~`remCalc(20)`; @media @large-up { font-size: ~`remCalc(18)`; } } &:hover { .checkout-item { &__title { &__title { text-decoration: underline; } } } } } &__amount { .set-flex(1); text-align: right; font-size: ~`remCalc(16)`; font-weight: normal; color: @checkoutItemFontColor; @media @large-up { font-size: ~`remCalc(18)`; } } &__delivery { display: none; &__item { width: ~`remCalc(60)`; text-align: center; } &--show { .display-flex(row, nowrap, center, flex-start); } } &--with-selection { .display-flex(row, nowrap, flex-start, center); } &--no-link { .checkout-item { &__title { cursor: default; &:hover { .checkout-item { &__title { &__title { text-decoration: none; } } } } } } } } .top-subbar { &__item { font-size: ~`remCalc(16)`; @media @large-up { font-size: ~`remCalc(20)`; } @media @xlarge-up { font-size: ~`remCalc(22)`; } } } // views .staticPage { padding-bottom: ~`remCalc(40)`; font-size: ~`remCalc(16)`; @media @xlarge-up { font-size: ~`remCalc(18)`; } &__wrapper { width: 100%; display: block; @media @medium-up { width: 80%; margin-left: auto; margin-right: auto; } } &__actions { display: none; margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; text-align: center; &__button { display: inline-block; } } h1, h2, h3, h4, h5, h6 { color: @colorOnBackground; } img { margin-bottom: 1rem; } a:not(.button), a:visited { margin: 0; color: @accentColor; text-decoration: underline; font-size: 1rem; font-weight: bold; display: inline; &:hover, &:focus { color: darken(@accentColor, 20%); } } } .homeView { .staticPage__wrapper { width: 100%; } .bottom { @media @large-up { padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .raised-container { position: relative; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; margin-right: ~`remCalc(-20)`; margin-bottom: ~`remCalc(20)`; @media @medium-up { margin-bottom: ~`remCalc(100)`; } &--with-raised { margin-bottom: ~`remCalc(70)`; @media @medium-up { margin-bottom: ~`remCalc(100)`; } } .venue { position: relative; width: 100%; overflow: hidden; background-size: 100% auto; background-size: cover; background-repeat: no-repeat; background-position: center center; @media @small-only { height: ~`remCalc(100)`; } @media @medium-only { height: ~`remCalc(200)`; } @media @large-up { height: ~`remCalc(300)`; } // img // { // width: 100%; // // height: 100%; // max-width:100%; // max-height:100%; // margin: 0; // padding: 0; // } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 1; } } .top { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: ~`remCalc(28)`; text-align: center; color: #fff; text-shadow: 1px 1px rgba(0,0,0,0.2); width: 90%; @media @medium-up { font-size: ~`remCalc(60)`; } } .value-container { background: @accentColor; padding: ~`remCalc(10)` ~`remCalc(20)`; position: relative; border-radius: 60px; max-width: 80%; overflow: hidden; .drop-shadow(0px, 3px, 57px, 4px, 0.4); .label-text, .amount { margin: 0; text-align: center; line-height: 1; overflow: hidden; word-break: normal; text-overflow: ellipsis; font-weight: normal; white-space: nowrap; } .label-text { color: @accentFontColor; margin-bottom: ~`remCalc(10)`; font-size: ~`remCalc(16)`; padding-left: ~`remCalc(0)`; padding-right: ~`remCalc(0)`; @media @medium-up { padding-left: ~`remCalc(80)`; padding-right: ~`remCalc(80)`; } @media @large-up { font-size: ~`remCalc(20)`; } } .amount { font-size: ~`remCalc(30)`; color: @accentFontColor; @media @medium-up { font-size: ~`remCalc(70)`; } } .loader { background: @accentColor; &:before{ border-top-color: @accentFontColor; border-left-color: @accentFontColor; } } height: auto; width: auto; position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 1000; @media @small-only { min-width: 60%; } @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(70)`; } @media @large-up { min-width: auto; } } } } .list-item { .display-flex(column, nowrap, center, center); @listItemBgColor: @panelBgColour; @listItemFontColor: @fontColourForPanel; @listItemPreviewFontColor: @colorOnBackground; &__wrapper { margin-bottom: ~`remCalc(30)`; background-color: @listItemBgColor; cursor: pointer; border-radius: ~`remCalc(10)`; position: relative; overflow: hidden; padding: ~`remCalc(20)`; .display-flex(column, nowrap, flex-start, flex-start); .add-drop-shadow(false); .add-drop-shadow-animation(); .overflow-fix(); &::after { background-color: darken(@listItemBgColor, 20%); .ripple(); } &--focused, &:hover { .add-drop-shadow(true); } &--focused { &::after { .ripple-animation(); } } } &__top-image { width: 100%; padding: 0; background-size: 100% auto; background-size: cover; background-repeat: no-repeat; background-position: center center; &__overlay { background: @listItemBgColor; width: 100%; height: 100%; opacity: 1; } } &__under-image { width: 100%; .display-flex(column, nowrap, flex-start, flex-start); &__title-column { width: 100%; &__number { width: 100%; text-align: left; font-size: ~`remCalc(24)`; line-height: ~`remCalc(24)`; color: contrast(@listItemBgColor, @accentColor, @accentFontColor); padding-bottom: ~`remCalc(10)`; padding-top: ~`remCalc(20)`; } &__title { width: 100%; font-size: ~`remCalc(16)`; font-weight: normal; overflow: hidden; text-align: left; height: ~`remCalc(50)`; color: @listItemFontColor; @media @large-up { font-size: ~`remCalc(18)`; height: ~`remCalc(60)`; } } } &__subtitle-row { width: 100%; .display-flex(row, nowrap, flex-start, center); &__sub1 { width: 40%; border-radius: ~`remCalc(20)`; padding: ~`remCalc(10)` ~`remCalc(20)`; text-align: center; font-weight: normal; font-size: ~`remCalc(16)`; overflow: hidden; background-color: @accentColor; color: @accentFontColor; &--empty { background-color: transparent; } } &__sub2 { margin-left: ~`remCalc(20)`; -webkit-box-flex: 1; font-weight: normal; font-size: ~`remCalc(16)`; overflow: hidden; text-align: left; color: @listItemFontColor; } } } &--preview { .display-flex(column, nowrap, flex-start, center); .list-item { &__wrapper { .display-flex(row, nowrap, flex-start, flex-start); border-radius: 0px; cursor: default; width: 100%; margin-bottom: 0; padding: 0; background: transparent; .drop-shadow(0px, 0px, 0px, 0px, 0); &:hover { .drop-shadow(0px, 0px, 0px, 0px, 0); } } &__top-image { .set-flex(1); } &__under-image { margin-left: ~`remCalc(10)`; width: 70%; @media @medium-up { margin-left: ~`remCalc(30)`; } @media @large-up { width: 80%; } &__title-column { .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(20)`; margin-left: ~`remCalc(5)`; @media @medium-up { margin-left: 0; } &__number { padding-top: 0px; padding-right: ~`remCalc(15)`; width: auto; font-weight: bold; color: @listItemPreviewFontColor; padding-bottom: 0px; @media @medium-up { font-size: ~`remCalc(30)`; line-height: 1.2; } @media @xlarge-up { font-size: ~`remCalc(36)`; line-height: 1.2; } } &__title { height: auto; color: @listItemPreviewFontColor; .set-flex(1); @media @medium-up { font-size: ~`remCalc(24)`; line-height: 1.3; } @media @xlarge-up { font-size: ~`remCalc(30)`; line-height: 1.3; } } } &__subtitle-row { &__sub1 { padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; width: auto; @media @medium-up { padding-left: ~`remCalc(30)`; padding-right: ~`remCalc(30)`; font-size: ~`remCalc(20)`; } @media @xlarge-up { padding-left: ~`remCalc(40)`; padding-right: ~`remCalc(40)`; font-size: ~`remCalc(24)`; } } &__sub2 { color: @listItemPreviewFontColor; @media @medium-up { font-size: ~`remCalc(20)`; } @media @xlarge-up { font-size: ~`remCalc(24)`; } } } } } &.list-item--no-image { .list-item { &__under-image { margin-left: ~`remCalc(0)`; width: 100%; } } } } } .lotList { .make-full-height(true); .list { .display-flex(row, wrap, flex-start, flex-start); .list-item { width: 100%; &__wrapper { width: 100%; } @media @medium-up { width: 50%; &__wrapper { width: 90%; } } @media only screen and (min-width: 73.75rem) { width: 33.333%; &__wrapper { width: 90%; } } } } .next-loader { height: ~`remCalc(30)`; display: none; position: relative; .loader { display: block; &:before { top: 0; } } } } .touch { .list-item { &__wrapper { &:hover { .add-drop-shadow(false); } } } } .loginPage { //@import 'loginRegister.less'; form { fieldset { .input-label { .input-field { &[name=password], &[name=pin] { -webkit-text-security: disc; } } svg.paddlock { top: ~`remCalc(30)`; } svg.account { top: ~`remCalc(30)`; } } .error { small.error{ //padding: ~`remCalc(6)` ~`remCalc(9)` 0 ~`remCalc(9)`; } } } } } @checkoutAmountBackgroundColor: #999999; @checkoutAmountFontColor: #fff; .checkout-view() { padding-bottom: ~`remCalc(40)`; position: relative; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(40)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } > .loader { margin-top: ~`remCalc(-10)`; margin-left: ~`remCalc(-10)`; .calc( width, ~"100% + `remCalc(20)`" ); .calc( height, ~"100% + `remCalc(20)`" ); @media @medium-up { margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } } } .checkout-header() { font-size: ~`remCalc(24)`; color: @colorOnBackground; text-align: center; font-weight: normal; margin-bottom: ~`remCalc(30)`; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .checkout-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .checkout-form() { margin-top: ~`remCalc(30)`; position: relative; color: @colorOnBackground; a, a:visited, a:focus { color: @colorOnBackground; } a:hover { color: darken(@colorOnBackground, 30%); } .payment-loader { opacity: 0.7; background-color: @backgroundColor; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } .choose-payment-loader { background-color: @backgroundColor; opacity: 1; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } &__payment { margin-bottom: ~`remCalc(15)`; @media @medium-up { margin-bottom: ~`remCalc(20)`; } } &__amount { color: @checkoutAmountFontColor; background-color: @checkoutAmountBackgroundColor; font-weight: normal; font-size: ~`remCalc(20)`; padding: ~`remCalc(20)`; .border-radius(~`remCalc(10)`); text-align: center; width: 100%; @media @medium-up { font-size: ~`remCalc(26)`; } } &__actions { width: 100%; .display-flex(row, nowrap, space-around, center); margin-top: ~`remCalc(40)`; &__button { } } .error { small.error { color: @errorColor; } label, label.error { color: @errorColor; a { color: @errorColor; } } } } .registerView { .checkout-view(); @media @xlarge-up { width: 40%; } .mandatory { color: @errorColor; } &__header { .checkout-header(); } &__message { .checkout-message(); } &__form { .checkout-form(); fieldset { margin-bottom: ~`remCalc(20)`; } } &__terms { font-size: ~`remCalc(14)`; text-align: center; color: @colorOnBackground; @media @medium-up { font-size: ~`remCalc(16)`; } } &__mailing, &__gift-aid-now, &__client_terms_and_conditions, &__tax-receipt, &__client_terms_header { .display-flex(row, nowrap, flex-start, flex-start); font-size: ~`remCalc(16)`; margin-bottom: ~`remCalc(20)`; &__col1 { } &__col2 { margin-left: ~`remCalc(15)`; .set-flex(1); } } &__optIn_email, &__optIn_phone, &__optIn_sms, &__optIn_post { .display-flex(row, nowrap, flex-start, center); font-size: ~`remCalc(16)`; margin-bottom: ~`remCalc(20)`; &__col1 { } &__col2 { margin-left: ~`remCalc(15)`; .set-flex(1); } } &__client_terms_footer{ font-size: ~`remCalc(14)`; margin-top: ~`remCalc(20)`; @media @medium-up { font-size: ~`remCalc(16)`; } } &__gift-aid-now-address, &__tax-receipt-address { margin-top: ~`remCalc(20)`; } &__actions { margin-top: ~`remCalc(30)`; &__button { width: auto; margin: 0 auto; } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .registerSuccessView { margin-top: ~`remCalc(40)`; width: 100%; display: block; @media @medium-up { margin-top: ~`remCalc(50)`; width: 80%; margin-left: auto; margin-right: auto; } &__header { .bidding-title(); } &__message { .bidding-message(); } } .itemPreviewSeparator() { width: 100%; height: 2px; margin-top: ~`remCalc(20)`; margin-bottom: ~`remCalc(20)`; background-color: #c1c0c0; border-width: 0px; } .itemPreviewView { padding-bottom: ~`remCalc(100)`; position: relative; .make-full-height(); @media @large-up { padding: ~`remCalc(20)`; .display-flex(column, nowrap, flex-start, flex-start); } &__header { width: 100%; } &__seperator { .itemPreviewSeparator(); } &__body { width: 100%; display: block; margin-top: ~`remCalc(20)`; .display-flex(column, nowrap, flex-start, flex-start); .set-flex(1 1 auto); &__row1 { width: 100%; .display-flex(column, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(0)`; @media @large-up { .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(40)`; } &__col1 { width: 100%; margin-bottom: ~`remCalc(20)`; @media @large-up { width: 50%; margin-right: ~`remCalc(20)`; margin-bottom: 0; } @media @xlarge-up { width: 60%; } } &__col2 { width: 100%; .display-flex(column, nowrap, flex-start, flex-start); @media @large-up { width: 50%; } @media @xlarge-up { width: 40%; } &__row1 { width: 100%; margin-bottom: ~`remCalc(20)`; } &__row2 { width: 100%; } } } &__row2 { width: 100%; .display-flex(column, nowrap, flex-start, flex-start); .set-flex(1 1 auto); &__row1 { .set-flex(1 1 auto); } } } &__photo { position: relative; width: 100%; } &__description, &__donated_by { width: 100%; font-size: ~`remCalc(16)`; color: lighten(@colorOnBackground, 10%); line-height: 1.5; @media @medium-up { font-size: ~`remCalc(16)`; } @media @xlarge-up { font-size: ~`remCalc(16)`; } } &__donated_by{ margin-top: ~`remCalc(30)`; background: @accentColor; color: @accentFontColor; padding-left: ~`remCalc(10)`; } &__bid-info { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)`; &__row { .display-flex(row, nowrap, space-between, flex-start); margin-bottom: ~`remCalc(20)`; width: 100%; position: relative; &__label { font-size: ~`remCalc(16)`; text-align: left; @media @medium-up { font-size: ~`remCalc(20)`; } } &__value { text-align: right; //padding-left: ~`remCalc(10)`; font-size: ~`remCalc(18)`; font-weight: bold; white-space: nowrap; @media @medium-up { font-size: ~`remCalc(20)`; } } &--last { margin-bottom: ~`remCalc(0)`; } } } &__bid-form { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-bottom: ~`remCalc(20)`; @media @large-up { margin-bottom: 0; padding: ~`remCalc(20)`; } &--fixed { @media @medium-down { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .slick-dots { li { &.slick-active button:before { background-color: @accentColor; } } } } .placeBid { .make-full-height(true); .bid-loader { position: absolute; left: 50%; top: 50%; .translate(-50%,-50%) !important; .translate3d(-50%,-50%,0) !important; width: auto; height: auto; color: @colorOnBackground; font-size: ~`remCalc(16)`; @media @xlarge-up { font-size: ~`remCalc(20)`; } &:before { content: ""; display: inline-block; white-space: nowrap; border: solid ~`remCalc(2)` transparent; border-top-color: @accentColor; border-left-color: @accentColor; .border-radius( ~`remCalc(10)` ); .animation(pace-spinner, 400ms, linear, 0s, infinite); width: ~`remCalc(14)`; height: ~`remCalc(14)`; margin-right: ~`remCalc(10)`; @media @xlarge-up { width: ~`remCalc(20)`; height: ~`remCalc(20)`; border-width: ~`remCalc(3)`; margin-right: ~`remCalc(15)`; margin-bottom: ~`remCalc(-2)`; } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .placeBidSuccessView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } &__maximum-bid { .bidding-max-bidding(); } &__social { .bidding-social(); } &__actions { .bidding-actions(); &__button { width: auto; } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .placeDonationSuccessView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } &__social { .bidding-social(); } &__actions { .bidding-actions(); &__button { width: auto; } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .placeBidErrorView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } &__bid-info { .bidding-info(); } &__bid-form { .bidding-form(); } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .placeDonationErrorView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } } } @checkoutAmountBackgroundColor: #999999; @checkoutAmountFontColor: #fff; .checkout-view() { padding-bottom: ~`remCalc(40)`; position: relative; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(40)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } > .loader { margin-top: ~`remCalc(-10)`; margin-left: ~`remCalc(-10)`; .calc( width, ~"100% + `remCalc(20)`" ); .calc( height, ~"100% + `remCalc(20)`" ); @media @medium-up { margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } } } .checkout-header() { font-size: ~`remCalc(24)`; color: @colorOnBackground; text-align: center; font-weight: normal; margin-bottom: ~`remCalc(30)`; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .checkout-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .checkout-form() { margin-top: ~`remCalc(30)`; position: relative; color: @colorOnBackground; a, a:visited, a:focus { color: @colorOnBackground; } a:hover { color: darken(@colorOnBackground, 30%); } .payment-loader { opacity: 0.7; background-color: @backgroundColor; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } .choose-payment-loader { background-color: @backgroundColor; opacity: 1; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } &__payment { margin-bottom: ~`remCalc(15)`; @media @medium-up { margin-bottom: ~`remCalc(20)`; } } &__amount { color: @checkoutAmountFontColor; background-color: @checkoutAmountBackgroundColor; font-weight: normal; font-size: ~`remCalc(20)`; padding: ~`remCalc(20)`; .border-radius(~`remCalc(10)`); text-align: center; width: 100%; @media @medium-up { font-size: ~`remCalc(26)`; } } &__actions { width: 100%; .display-flex(row, nowrap, space-around, center); margin-top: ~`remCalc(40)`; &__button { } } .error { small.error { color: @errorColor; } label, label.error { color: @errorColor; a { color: @errorColor; } } } } .lotSearchListView { @media @medium-up { padding: ~`remCalc(20)`; } &__header { .checkout-header(); } &__search-form { } &__results { position: relative; min-height: ~`remCalc(100)`; margin-top: ~`remCalc(40)`; @media @large-up { margin-top: ~`remCalc(50)`; } .loader { &:before { top: ~`remCalc(20)`; } } .results { .display-flex(row, wrap, flex-start, flex-start); .list-item { width: 100%; &__wrapper { width: 100%; } @media @medium-up { width: 50%; &__wrapper { width: 90%; } } @media @large-up { width: 33.333%; &__wrapper { width: 90%; } } } } .no-results { display: block; margin: 0 auto; } } } .logoutView { .make-full-height(true); position: relative; &__contents { width: 80%; height: auto; position: absolute; top: 50%; left: 50%; .translate(-50%, -50%); .translate3d(-50%,-50%,0); } &__logo { height: ~`remCalc(75)`; width: 100%; background: url(@logoutLogoUrl) no-repeat center center; background-size: auto 100%; background-size: contain; display: block; margin-bottom: 0; } &__message { margin-top: ~`remCalc(45)`; text-align: center; p, h4 { color: @colorOnBackground; } } &__actions { margin-top: ~`remCalc(20)`; &__button { margin: 0 auto; } } } .myAccountPage { .intro-logged { @media @medium-up{ margin-top: ~`remCalc(30)`; } } } .forgotPasswordPage { } @loginActionButtonBackgroundColor: #999999; @loginActionButtonFontColor: #fff; .login-button-grey() { background-color: @loginActionButtonBackgroundColor; color: @loginActionButtonFontColor; &:hover, &:focus { background-color: darken(@loginActionButtonBackgroundColor, 20%); color: @loginActionButtonFontColor; } &:after { background-color: lighten(@loginActionButtonBackgroundColor, 20%); } .a-button__loader { border-top-color: @loginActionButtonFontColor; border-left-color: @loginActionButtonFontColor; } .a-button__thick { fill: @loginActionButtonFontColor; } } .login-button-saved() { background: #3786d5; color: #fff; &:hover, &:focus { background: #3786d5; color: #fff; } .a-button__loader { display: none; } .a-button__thick { display: block; } } .login-view() { margin-top: ~`remCalc(40)`; width: 100%; background: @accentColor; padding: ~`remCalc(20)`; .border-radius(~`remCalc(5)`); margin-bottom: ~`remCalc(40)`; @media @medium-up { margin-top: ~`remCalc(50)`; width: 50%; margin-left: auto; margin-right: auto; padding: ~`remCalc(40)`; } @media @xlarge-up { width: 40%; padding: ~`remCalc(80)`; } } .login-header() { font-size: ~`remCalc(26)`; color: @accentFontColor; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .login-message() { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: center; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .login-form() { margin-top: ~`remCalc(40)`; fieldset { padding: 0; margin: 0; } .input { &__field { } } &__actions { margin-top: ~`remCalc(20)`; &__button { margin: 0 auto; @media @large-up { } } .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } } .error { label, label.error { color: @errorColor; a { color: @errorColor; } } } } .resetPasswordView { .login-view(); &__header { .login-header(); } &__message { .login-message(); } &__form { .login-form(); } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .confirmBidView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } &__bid-info { .bidding-info(); } &__bid-actions { .bidding-actions(); &__button { padding-left: 0 !important; padding-right: 0 !important; } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .confirmDonationView { .bidding-view(); &__header { .bidding-header(); } &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); } &__bid-info { .bidding-info(); } &__bid-actions { .bidding-actions(); &__button { padding-left: 0 !important; padding-right: 0 !important; } } } } @checkoutAmountBackgroundColor: #999999; @checkoutAmountFontColor: #fff; .checkout-view() { padding-bottom: ~`remCalc(40)`; position: relative; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(40)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } > .loader { margin-top: ~`remCalc(-10)`; margin-left: ~`remCalc(-10)`; .calc( width, ~"100% + `remCalc(20)`" ); .calc( height, ~"100% + `remCalc(20)`" ); @media @medium-up { margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } } } .checkout-header() { font-size: ~`remCalc(24)`; color: @colorOnBackground; text-align: center; font-weight: normal; margin-bottom: ~`remCalc(30)`; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .checkout-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .checkout-form() { margin-top: ~`remCalc(30)`; position: relative; color: @colorOnBackground; a, a:visited, a:focus { color: @colorOnBackground; } a:hover { color: darken(@colorOnBackground, 30%); } .payment-loader { opacity: 0.7; background-color: @backgroundColor; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } .choose-payment-loader { background-color: @backgroundColor; opacity: 1; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } &__payment { margin-bottom: ~`remCalc(15)`; @media @medium-up { margin-bottom: ~`remCalc(20)`; } } &__amount { color: @checkoutAmountFontColor; background-color: @checkoutAmountBackgroundColor; font-weight: normal; font-size: ~`remCalc(20)`; padding: ~`remCalc(20)`; .border-radius(~`remCalc(10)`); text-align: center; width: 100%; @media @medium-up { font-size: ~`remCalc(26)`; } } &__actions { width: 100%; .display-flex(row, nowrap, space-around, center); margin-top: ~`remCalc(40)`; &__button { } } .error { small.error { color: @errorColor; } label, label.error { color: @errorColor; a { color: @errorColor; } } } } .stripeCustomCheckoutView { .checkout-view(); &__header { .checkout-header(); } &__message { .checkout-message(); margin-bottom: ~`remCalc(50)`; } &__products { &__empty { margin-top: ~`remCalc(40)`; .display-flex(row, nowrap, center, flex-start); svg { width: 76px; height: 83px; * { fill:#9b9b9b; stroke:#9b9b9b; } } } &__delivery-header { .display-flex(row, nowrap, center, flex-start); margin-bottom: ~`remCalc(20)`; float: left; &::after { clear: both; } &__label { width: ~`remCalc(60)`; font-size: ~`remCalc(14)`; font-weight: normal; text-align: center; color: @checkoutItemFontColor; @media @large-up { font-size: ~`remCalc(16)`; } } } } &__totals { border-top: 1px solid #c1c0c0; margin-top: ~`remCalc(10)`; margin-bottom: ~`remCalc(30)`; &__label { font-size: ~`remCalc(16)`; font-weight: bold; text-align: left; color: @checkoutItemFontColor; @media @large-up { font-size: ~`remCalc(18)`; } } &__value { font-size: ~`remCalc(16)`; font-weight: normal; text-align: right; color: @checkoutItemFontColor; margin-left: ~`remCalc(20)`; @media @large-up { font-size: ~`remCalc(18)`; } } &__row { .display-flex(row, nowrap, flex-end, flex-start); margin-top: ~`remCalc(20)`; &--bigger { .stripeCustomCheckoutView { &__totals { &__label { font-size: ~`remCalc(20)`; @media @large-up { font-size: ~`remCalc(22)`; } } &__value { font-size: ~`remCalc(20)`; @media @large-up { font-size: ~`remCalc(22)`; } } } } } } } &__body { margin-top: ~`remCalc(30)`; } &__form { .checkout-form(); &__payment { position: relative; &__message { .checkout-message(); margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(40)`; } &__submessage { .checkout-message(); margin-top: ~`remCalc(20)`; margin-bottom: ~`remCalc(20)`; text-align: center; } &__actions { .display-flex(column, nowrap, space-between, flex-start); &__button { width: 100%; margin-bottom: ~`remCalc(20)`; &:last-child { margin-bottom: 0; } } } } } .stripe-form-row { position: relative; } .no-spinner { &:before { display: none; } } .card-pay-button { padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; padding-top: 0; padding-bottom: 0; } .card-icon { width: ~`remCalc(30)`; height: ~`remCalc(16)`; fill: #ffffff; display: inline; padding-left: ~`remCalc(5)`; margin-bottom: ~`remCalc(-2)`; } .back-to-apple-pay { color: #3D95CE; text-decoration: underline; &:hover, &:focus { color: darken(#3D95CE, 20%); } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .checkoutConfirmationView { .bidding-view(); &__body { .bidding-body(); &__title { .bidding-title(); } &__message { .bidding-message(); margin-bottom: ~`remCalc(40)`; &__items { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(40)`; font-weight: bold; } } &__actions { .bidding-actions(); &__button { width: auto; } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .checkoutErrorView { .bidding-view(); &__title { .bidding-title(); } &__message { .bidding-message(); margin-bottom: ~`remCalc(40)`; } &__actions { .bidding-actions(); &__button { width: auto; } } } @checkoutAmountBackgroundColor: #999999; @checkoutAmountFontColor: #fff; .checkout-view() { padding-bottom: ~`remCalc(40)`; position: relative; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(40)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } > .loader { margin-top: ~`remCalc(-10)`; margin-left: ~`remCalc(-10)`; .calc( width, ~"100% + `remCalc(20)`" ); .calc( height, ~"100% + `remCalc(20)`" ); @media @medium-up { margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } } } .checkout-header() { font-size: ~`remCalc(24)`; color: @colorOnBackground; text-align: center; font-weight: normal; margin-bottom: ~`remCalc(30)`; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .checkout-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .checkout-form() { margin-top: ~`remCalc(30)`; position: relative; color: @colorOnBackground; a, a:visited, a:focus { color: @colorOnBackground; } a:hover { color: darken(@colorOnBackground, 30%); } .payment-loader { opacity: 0.7; background-color: @backgroundColor; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } .choose-payment-loader { background-color: @backgroundColor; opacity: 1; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } &__payment { margin-bottom: ~`remCalc(15)`; @media @medium-up { margin-bottom: ~`remCalc(20)`; } } &__amount { color: @checkoutAmountFontColor; background-color: @checkoutAmountBackgroundColor; font-weight: normal; font-size: ~`remCalc(20)`; padding: ~`remCalc(20)`; .border-radius(~`remCalc(10)`); text-align: center; width: 100%; @media @medium-up { font-size: ~`remCalc(26)`; } } &__actions { width: 100%; .display-flex(row, nowrap, space-around, center); margin-top: ~`remCalc(40)`; &__button { } } .error { small.error { color: @errorColor; } label, label.error { color: @errorColor; a { color: @errorColor; } } } } .ticketsListView { .checkout-view(); &__header { .checkout-header(); } &__message { .checkout-message(); margin-bottom: ~`remCalc(50)`; } &__products { margin-bottom: ~`remCalc(40)`; &__list { width: 100%; margin-top: ~`remCalc(20)`; td, th { text-align: center; padding-right: ~`remCalc(10)`; padding-bottom: ~`remCalc(16)`; vertical-align: top; &:last-of-type{ padding-right: 0px; } } th{ padding-bottom: ~`remCalc(20)`; } td { padding-top: ~`remCalc(10)`; } .title { text-align: left; } td.quantity { padding-top: 0px; } select { margin: 0; text-align: right; } a { line-height: normal; text-decoration: underline; } } } &__extra-details { margin-bottom: ~`remCalc(40)`; } &__actions { .display-flex(row, nowrap, center, flex-start); } .error { small.error { color: @errorColor; padding-left: 0; padding-right: 0; text-align: left; } } } @checkoutAmountBackgroundColor: #999999; @checkoutAmountFontColor: #fff; .checkout-view() { padding-bottom: ~`remCalc(40)`; position: relative; @media @medium-up { padding: ~`remCalc(20)` ~`remCalc(0)` ~`remCalc(40)` ~`remCalc(0)`; width: 60%; margin: 0 auto; } @media @xlarge-up { width: 40%; } > .loader { margin-top: ~`remCalc(-10)`; margin-left: ~`remCalc(-10)`; .calc( width, ~"100% + `remCalc(20)`" ); .calc( height, ~"100% + `remCalc(20)`" ); @media @medium-up { margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } } } .checkout-header() { font-size: ~`remCalc(24)`; color: @colorOnBackground; text-align: center; font-weight: normal; margin-bottom: ~`remCalc(30)`; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .checkout-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .checkout-form() { margin-top: ~`remCalc(30)`; position: relative; color: @colorOnBackground; a, a:visited, a:focus { color: @colorOnBackground; } a:hover { color: darken(@colorOnBackground, 30%); } .payment-loader { opacity: 0.7; background-color: @backgroundColor; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } .choose-payment-loader { background-color: @backgroundColor; opacity: 1; margin-top: ~`remCalc(-20)`; margin-left: ~`remCalc(-20)`; .calc( width, ~"100% + `remCalc(40)`" ); .calc( height, ~"100% + `remCalc(40)`" ); } &__payment { margin-bottom: ~`remCalc(15)`; @media @medium-up { margin-bottom: ~`remCalc(20)`; } } &__amount { color: @checkoutAmountFontColor; background-color: @checkoutAmountBackgroundColor; font-weight: normal; font-size: ~`remCalc(20)`; padding: ~`remCalc(20)`; .border-radius(~`remCalc(10)`); text-align: center; width: 100%; @media @medium-up { font-size: ~`remCalc(26)`; } } &__actions { width: 100%; .display-flex(row, nowrap, space-around, center); margin-top: ~`remCalc(40)`; &__button { } } .error { small.error { color: @errorColor; } label, label.error { color: @errorColor; a { color: @errorColor; } } } } .preAuthorizeView { .checkout-view(); &__header { .checkout-header(); } &__message { .checkout-message(); } &__form { .checkout-form(); } } @loginActionButtonBackgroundColor: #999999; @loginActionButtonFontColor: #fff; .login-button-grey() { background-color: @loginActionButtonBackgroundColor; color: @loginActionButtonFontColor; &:hover, &:focus { background-color: darken(@loginActionButtonBackgroundColor, 20%); color: @loginActionButtonFontColor; } &:after { background-color: lighten(@loginActionButtonBackgroundColor, 20%); } .a-button__loader { border-top-color: @loginActionButtonFontColor; border-left-color: @loginActionButtonFontColor; } .a-button__thick { fill: @loginActionButtonFontColor; } } .login-button-saved() { background: #3786d5; color: #fff; &:hover, &:focus { background: #3786d5; color: #fff; } .a-button__loader { display: none; } .a-button__thick { display: block; } } .login-view() { margin-top: ~`remCalc(40)`; width: 100%; background: @accentColor; padding: ~`remCalc(20)`; .border-radius(~`remCalc(5)`); margin-bottom: ~`remCalc(40)`; @media @medium-up { margin-top: ~`remCalc(50)`; width: 50%; margin-left: auto; margin-right: auto; padding: ~`remCalc(40)`; } @media @xlarge-up { width: 40%; padding: ~`remCalc(80)`; } } .login-header() { font-size: ~`remCalc(26)`; color: @accentFontColor; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .login-message() { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: center; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .login-form() { margin-top: ~`remCalc(40)`; fieldset { padding: 0; margin: 0; } .input { &__field { } } &__actions { margin-top: ~`remCalc(20)`; &__button { margin: 0 auto; @media @large-up { } } .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } } .error { label, label.error { color: @errorColor; a { color: @errorColor; } } } } .checkRegistrationView { .login-view(); &__header { .login-header(); } &__message { .login-message(); } &__form { .login-form(); } } @loginActionButtonBackgroundColor: #999999; @loginActionButtonFontColor: #fff; .login-button-grey() { background-color: @loginActionButtonBackgroundColor; color: @loginActionButtonFontColor; &:hover, &:focus { background-color: darken(@loginActionButtonBackgroundColor, 20%); color: @loginActionButtonFontColor; } &:after { background-color: lighten(@loginActionButtonBackgroundColor, 20%); } .a-button__loader { border-top-color: @loginActionButtonFontColor; border-left-color: @loginActionButtonFontColor; } .a-button__thick { fill: @loginActionButtonFontColor; } } .login-button-saved() { background: #3786d5; color: #fff; &:hover, &:focus { background: #3786d5; color: #fff; } .a-button__loader { display: none; } .a-button__thick { display: block; } } .login-view() { margin-top: ~`remCalc(40)`; width: 100%; background: @accentColor; padding: ~`remCalc(20)`; .border-radius(~`remCalc(5)`); margin-bottom: ~`remCalc(40)`; @media @medium-up { margin-top: ~`remCalc(50)`; width: 50%; margin-left: auto; margin-right: auto; padding: ~`remCalc(40)`; } @media @xlarge-up { width: 40%; padding: ~`remCalc(80)`; } } .login-header() { font-size: ~`remCalc(26)`; color: @accentFontColor; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .login-message() { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: center; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .login-form() { margin-top: ~`remCalc(40)`; fieldset { padding: 0; margin: 0; } .input { &__field { } } &__actions { margin-top: ~`remCalc(20)`; &__button { margin: 0 auto; @media @large-up { } } .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } } .error { label, label.error { color: @errorColor; a { color: @errorColor; } } } } .loginWithPasswordView { .login-view(); &__header { .login-header(); } &__message { .login-message(); } &__form { .login-form(); &__button { margin-bottom: ~`remCalc(10)`; } } &__forgot { margin-top: ~`remCalc(40)`; &__header { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: left; @media @medium-up { font-size: ~`remCalc(18)`; } } &__message { font-size: ~`remCalc(12)`; color: @accentFontColor; text-align: center; @media @medium-up { font-size: ~`remCalc(14)`; } } &__buttons { margin-top: ~`remCalc(20)`; .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } &__button { width: 75%; margin: 0 auto; .a-button__label { width: 100%; } } } } } @loginActionButtonBackgroundColor: #999999; @loginActionButtonFontColor: #fff; .login-button-grey() { background-color: @loginActionButtonBackgroundColor; color: @loginActionButtonFontColor; &:hover, &:focus { background-color: darken(@loginActionButtonBackgroundColor, 20%); color: @loginActionButtonFontColor; } &:after { background-color: lighten(@loginActionButtonBackgroundColor, 20%); } .a-button__loader { border-top-color: @loginActionButtonFontColor; border-left-color: @loginActionButtonFontColor; } .a-button__thick { fill: @loginActionButtonFontColor; } } .login-button-saved() { background: #3786d5; color: #fff; &:hover, &:focus { background: #3786d5; color: #fff; } .a-button__loader { display: none; } .a-button__thick { display: block; } } .login-view() { margin-top: ~`remCalc(40)`; width: 100%; background: @accentColor; padding: ~`remCalc(20)`; .border-radius(~`remCalc(5)`); margin-bottom: ~`remCalc(40)`; @media @medium-up { margin-top: ~`remCalc(50)`; width: 50%; margin-left: auto; margin-right: auto; padding: ~`remCalc(40)`; } @media @xlarge-up { width: 40%; padding: ~`remCalc(80)`; } } .login-header() { font-size: ~`remCalc(26)`; color: @accentFontColor; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .login-message() { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: center; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .login-form() { margin-top: ~`remCalc(40)`; fieldset { padding: 0; margin: 0; } .input { &__field { } } &__actions { margin-top: ~`remCalc(20)`; &__button { margin: 0 auto; @media @large-up { } } .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } } .error { label, label.error { color: @errorColor; a { color: @errorColor; } } } } .loginWithPinView { .login-view(); &__header { .login-header(); } &__message { .login-message(); } &__form { .login-form(); &__button { margin-bottom: ~`remCalc(10)`; } } &__forgot { margin-top: ~`remCalc(40)`; &__header { font-size: ~`remCalc(16)`; color: @accentFontColor; text-align: left; @media @medium-up { font-size: ~`remCalc(18)`; } } &__message { font-size: ~`remCalc(12)`; color: @accentFontColor; text-align: center; @media @medium-up { font-size: ~`remCalc(14)`; } } &__buttons { margin-top: ~`remCalc(20)`; .a-button--grey { .login-button-grey() } .a-button--saved { .login-button-saved(); } &__button { width: 75%; margin: 0 auto; .a-button__label { width: 100%; } } } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .checkInLinkView { margin-top: ~`remCalc(40)`; width: 100%; display: block; @media @medium-up { margin-top: ~`remCalc(50)`; width: 80%; margin-left: auto; margin-right: auto; } &__header { .bidding-title(); } &__message { .bidding-message(); } &__actions { margin: ~`remCalc(20)` auto 0 auto; width: 100%; .resend-error { text-align: center; } &__button { margin: 0 auto; } } } @biddingInfoBackgroundColor: #999999; @biddingInfoFontColor: #fff; .bidding-view() { .display-flex(column, nowrap, flex-start, flex-start); padding-bottom: ~`remCalc(40)`; @media medium-up { padding: ~`remCalc(20)` ~`remCalc(20)` ~`remCalc(40)` ~`remCalc(20)`; } } .bidding-header() { .calc( width , ~"100% + `remCalc(20)`" ); background: #fff; margin-left: ~`remCalc(-10)`; margin-right: ~`remCalc(-10)`; margin-top: ~`remCalc(-20)`; padding-left: ~`remCalc(10)`; padding-right: ~`remCalc(10)`; padding-top: ~`remCalc(10)`; padding-bottom: ~`remCalc(10)`; @media @medium-up { padding-top: ~`remCalc(15)`; padding-bottom: ~`remCalc(15)`; padding-left: ~`remCalc(15)`; padding-right: ~`remCalc(15)`; } @media @xlarge-up { padding-top: ~`remCalc(20)`; padding-bottom: ~`remCalc(20)`; padding-left: ~`remCalc(20)`; padding-right: ~`remCalc(20)`; } } .bidding-body() { margin-top: ~`remCalc(40)`; width: 100%; .set-flex(1 1 auto); display: block; @media @medium-up { margin-top: ~`remCalc(20)`; width: 80%; margin-left: auto; margin-right: auto; } @media @xlarge-up { margin-top: ~`remCalc(50)`; width: 60%; } &__icon { margin-bottom: ~`remCalc(20)`; svg { width: ~`remCalc(80)`; height: ~`remCalc(80)`; display: block; margin: 0 auto; .path { stroke: #28c55c !important; } .circ { opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; .transition(all 1s); } .tick { stroke-dasharray: 150; stroke-dashoffset: 150; .transition(stroke-dashoffset 1s 0.5s ease-out); } } &--show { svg { .path { opacity: 1; stroke-dashoffset: 0; } } } } } .bidding-title() { font-size: ~`remCalc(26)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(32)`; } @media @xlarge-up { font-size: ~`remCalc(40)`; } } .bidding-message() { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } .bidding-info() { background-color: @biddingInfoBackgroundColor; padding: ~`remCalc(10)` ~`remCalc(10)`; .border-radius( ~`remCalc(5)` ); margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; .display-flex(column, nowrap, flex-start, flex-start); @media @medium-up { margin-top: ~`remCalc(30)`; margin-bottom: ~`remCalc(40)`; padding: ~`remCalc(15)`; } @media @xlarge-up { margin-top: ~`remCalc(50)`; margin-bottom: ~`remCalc(70)`; padding: ~`remCalc(20)`; } &__row { width: 100%; .display-flex(row, nowrap, flex-start, flex-start); margin-bottom: ~`remCalc(10)`; &:last-of-type { margin-bottom: ~`remCalc(0)`; } &__col { width: 50%; text-align: center; } } &__label { font-size: ~`remCalc(18)`; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(24)`; } } &__value { font-size: ~`remCalc(20)`; font-weight: bold; color: @biddingInfoFontColor; @media @medium-up { font-size: ~`remCalc(30)`; } } } .bidding-actions() { &__wrapper { .display-flex(row, nowrap, space-around, center); } &__button { width: 46%; padding-top: 0 !important; padding-bottom: 0 !important; .a-button__label { width: 100%; } @media @medium-up { width: 40%; } @media @xlarge-up { width: 30%; } } } .bidding-form() { width: 100%; background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; @media @medium-up { padding: ~`remCalc(20)`; } &--fixed { @media @small-only { position: fixed; left: 0; bottom: 0; top: auto; width: 100%; z-index: 2000; margin-top: 0; margin-bottom: 0; } } } .bidding-social() { width: 100%; margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; overflow: hidden; @media @medium-up { margin-bottom: ~`remCalc(40)`; margin-top: ~`remCalc(30)`; } @media @xlarge-up { margin-bottom: ~`remCalc(80)`; margin-top: ~`remCalc(60)`; } } .bidding-max-bidding() { margin-top: ~`remCalc(30)`; &__title { font-size: ~`remCalc(20)`; color: @colorOnBackground; margin-bottom: ~`remCalc(30)`; text-align: center; @media @medium-up { font-size: ~`remCalc(24)`; } @media @xlarge-up { font-size: ~`remCalc(32)`; } } &__message { font-size: ~`remCalc(16)`; color: @colorOnBackground; text-align: center; margin: 0; padding: 0; @media @xlarge-up { font-size: ~`remCalc(18)`; } } &__bid-form { background: @accentColor; color: @accentFontColor; padding: ~`remCalc(20)` ~`remCalc(10)`; margin-top: ~`remCalc(30)`; @media @medium-up { padding: ~`remCalc(20)`; } } } // EDGE hack disable .edge, .ie { svg { .circ, .tick { stroke-dasharray: 0 !important; stroke-dashoffset: 0 !important; } } } .forgotPasswordSuccessView { margin-top: ~`remCalc(40)`; width: 100%; display: block; @media @medium-up { margin-top: ~`remCalc(50)`; width: 80%; margin-left: auto; margin-right: auto; } &__header { .bidding-title(); } &__message { .bidding-message(); } } .redirectToCheckoutView { .make-full-height(true); }