/** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ /** Global Button Styles. Notes: - A lot of buttons contain icons so there is a class associated with the button called "icon" which will put an automatic margin of 5px on the left of the button since it's assumed that the icons are positioned on the right. - Seems to be an issue with inline elements and having sprites inside, meaning it doens't respect the height correctly. Setting the parent element (the a link) to have inline-block seems to fix the problem (forces it to be an inline-block). */ .customer-facing .Button.tertiary, .customer-facing .basic-button.tertiary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #333333; background-color: #333333; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { cursor: default; } .customer-facing .Button.tertiary:link, .customer-facing .basic-button.tertiary:link, .customer-facing .Button.tertiary:visited, .customer-facing .basic-button.tertiary:visited { color: #ffffff; } .customer-facing .Button.tertiary:hover, .customer-facing .basic-button.tertiary:hover, .customer-facing .Button.tertiary.hover, .customer-facing .basic-button.tertiary.hover { color: #ffffff; border-color: #1a1a1a; background: #1a1a1a; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.tertiary.unhoverable:hover, .customer-facing .basic-button.tertiary.unhoverable:hover, .customer-facing .Button.tertiary.unhoverable.hover, .customer-facing .basic-button.tertiary.unhoverable.hover { background: #333333; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.tertiary.transparent, .customer-facing .basic-button.tertiary.transparent { background-color: transparent; } .customer-facing .Button.secondary, .customer-facing .basic-button.secondary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #fa7b20; background-color: #fa7b20; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { cursor: default; } .customer-facing .Button.secondary:link, .customer-facing .basic-button.secondary:link, .customer-facing .Button.secondary:visited, .customer-facing .basic-button.secondary:visited { color: #ffffff; } .customer-facing .Button.secondary:hover, .customer-facing .basic-button.secondary:hover, .customer-facing .Button.secondary.hover, .customer-facing .basic-button.secondary.hover { color: #ffffff; border-color: #e26105; background: #e26105; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.secondary.unhoverable:hover, .customer-facing .basic-button.secondary.unhoverable:hover, .customer-facing .Button.secondary.unhoverable.hover, .customer-facing .basic-button.secondary.unhoverable.hover { background: #fa7b20; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.secondary:hover, .customer-facing .basic-button.secondary:hover { background-color: #ff852e; } .customer-facing .Button.secondary.transparent, .customer-facing .basic-button.secondary.transparent { background-color: transparent; } .customer-facing .Button.primary, .customer-facing .basic-button.primary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #a02021; background-color: #a02021; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { cursor: default; } .customer-facing .Button.primary:link, .customer-facing .basic-button.primary:link, .customer-facing .Button.primary:visited, .customer-facing .basic-button.primary:visited { color: #ffffff; } .customer-facing .Button.primary:hover, .customer-facing .basic-button.primary:hover, .customer-facing .Button.primary.hover, .customer-facing .basic-button.primary.hover { color: #ffffff; border-color: #761818; background: #761818; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.primary.unhoverable:hover, .customer-facing .basic-button.primary.unhoverable:hover, .customer-facing .Button.primary.unhoverable.hover, .customer-facing .basic-button.primary.unhoverable.hover { background: #a02021; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.primary:hover, .customer-facing .basic-button.primary:hover { background-color: #d32c2e; } .customer-facing .Button.primary.transparent, .customer-facing .basic-button.primary.transparent { background-color: transparent; } .customer-facing .Button.transparent, .customer-facing .basic-button.transparent { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #0c82a5; background-color: rgba(0, 0, 0, 0); color: #0c82a5; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; border-width: 1px; border-style: solid; border-color: currentcolor; font-weight: normal; } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { cursor: default; } .customer-facing .Button.transparent:link, .customer-facing .basic-button.transparent:link, .customer-facing .Button.transparent:visited, .customer-facing .basic-button.transparent:visited { color: #0c82a5; } .customer-facing .Button.transparent:hover, .customer-facing .basic-button.transparent:hover, .customer-facing .Button.transparent.hover, .customer-facing .basic-button.transparent.hover { color: #0c82a5; border-color: #095d75; background: rgba(0, 0, 0, 0); } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.transparent.unhoverable:hover, .customer-facing .basic-button.transparent.unhoverable:hover, .customer-facing .Button.transparent.unhoverable.hover, .customer-facing .basic-button.transparent.unhoverable.hover { background: rgba(0, 0, 0, 0); } .customer-facing .Button.transparent:hover, .customer-facing .basic-button.transparent:hover { border-color: currentcolor; border-width: 2px; margin: -1px; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.templated-button, .customer-facing .basic-button.templated-button { position: relative; } .customer-facing .Button.templated-button .hiddenSubmitInput, .customer-facing .basic-button.templated-button .hiddenSubmitInput { position: absolute; z-index: -50; top: 0px; width: 1px; height: 1px; } .customer-facing .Button.templated-button .hiddenSubmitInput input, .customer-facing .basic-button.templated-button .hiddenSubmitInput input { z-index: -10; border: none; width: 0px; height: 0px; position: relative; height: 7px; } .customer-facing .Button .icon, .customer-facing .basic-button .icon { display: inline-block; vertical-align: top; } .customer-facing .Button.small, .customer-facing .basic-button.small { font-size: 12px; line-height: 16px; padding: 5px 11px 3px 11px; } .customer-facing .Button.small .icon, .customer-facing .basic-button.small .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.med, .customer-facing .basic-button.med, .customer-facing .Button.medium, .customer-facing .basic-button.medium { font-size: 12px; line-height: 16px; padding: 8px 11px 6px 11px; } .customer-facing .Button.med .icon, .customer-facing .basic-button.med .icon, .customer-facing .Button.medium .icon, .customer-facing .basic-button.medium .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.large, .customer-facing .basic-button.large { font-size: 14px; line-height: 18px; padding: 10px 12px 8px 12px; } .customer-facing .Button.large .icon, .customer-facing .basic-button.large .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.xlarge, .customer-facing .basic-button.xlarge { font-size: 14px; line-height: 22px; padding: 10px 16px 8px 16px; } .customer-facing .Button.pad-right, .customer-facing .basic-button.pad-right { margin-right: 5px; } .customer-facing .Button.pad-left, .customer-facing .basic-button.pad-left { margin-left: 5px; } .customer-facing .Button .icon, .customer-facing .basic-button .icon { padding: 0; } .customer-facing .Button .icon.left, .customer-facing .basic-button .icon.left { /* hack allows us to put left aligned icons on old style React buttons */ margin: 1px 5px 1px 0 !important; } .customer-facing .Button::-moz-focus-inner, .customer-facing .basic-button::-moz-focus-inner { border: 0; } .customer-facing input[type=submit].Button { -webkit-appearance: none; } .customer-facing .basic-button-light { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #f5f5f5; background-color: #f5f5f5; color: #585858; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { cursor: default; } .customer-facing .basic-button-light:link, .customer-facing .basic-button-light:visited { color: #585858; } .customer-facing .basic-button-light:hover, .customer-facing .basic-button-light.hover { color: #585858; border-color: #dcdcdc; background: #dcdcdc; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-light.unhoverable:hover, .customer-facing .basic-button-light.unhoverable.hover { background: #f5f5f5; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-light.selected { background-color: #e2e2e2; border-color: #c9c9c9; } .customer-facing .basic-button-light.selected:hover { background-color: #e2e2e2; border-color: #c9c9c9; } .customer-facing .basic-button-light.selected:active { border-top: none; border-bottom-width: 2px; } .customer-facing .basic-button-overlay { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #333333; background-color: #333333; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { cursor: default; } .customer-facing .basic-button-overlay:link, .customer-facing .basic-button-overlay:visited { color: #ffffff; } .customer-facing .basic-button-overlay:hover, .customer-facing .basic-button-overlay.hover { color: #ffffff; border-color: #1a1a1a; background: #1a1a1a; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-overlay.unhoverable:hover, .customer-facing .basic-button-overlay.unhoverable.hover { background: #333333; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-overlay.disabled { border: 1px solid #202024; background: #313942; background: -webkit-linear-gradient(top, #313942, #161314); background: -moz-linear-gradient(top, #313942, #161314); background: -o-linear-gradient(top, #313942, #161314); background: -ms-linear-gradient(top, #313942, #161314); background: linear-gradient(top, #313942, #161314); color: #a5a5a5; } .customer-facing .fb_button { background: #5F78AB; background-image: url('../../common/elements/../../../../sprites/fb_icons_sprite.png'); /*COPY TO YOUR OWN IMAGE STORE*/ background-repeat: no-repeat; background-position: -1px -81px; border-top: 1px solid #29447E; border-right: 1px solid #29447E; border-bottom: 1px solid #1A356E; border-left: 1px solid #29447E; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; cursor: pointer; color: #FFF; display: inline-block; text-decoration: none; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; font-weight: bold; height: 23px; line-height: 23px; padding: 0px 5px 0px 30px; text-align: left; } .customer-facing .basic-button-blue { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #637592; background-color: #637592; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { cursor: default; } .customer-facing .basic-button-blue:link, .customer-facing .basic-button-blue:visited { color: #ffffff; } .customer-facing .basic-button-blue:hover, .customer-facing .basic-button-blue.hover { color: #ffffff; border-color: #4e5d74; background: #4e5d74; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-blue.unhoverable:hover, .customer-facing .basic-button-blue.unhoverable.hover { background: #637592; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-black { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #989a9b; background-color: #989a9b; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { cursor: default; } .customer-facing .basic-button-black:link, .customer-facing .basic-button-black:visited { color: #ffffff; } .customer-facing .basic-button-black:hover, .customer-facing .basic-button-black.hover { color: #ffffff; border-color: #7e8182; background: #7e8182; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-black.unhoverable:hover, .customer-facing .basic-button-black.unhoverable.hover { background: #989a9b; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-orange { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #df611a; background-color: #df611a; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { cursor: default; } .customer-facing .basic-button-orange:link, .customer-facing .basic-button-orange:visited { color: #ffffff; } .customer-facing .basic-button-orange:hover, .customer-facing .basic-button-orange.hover { color: #ffffff; border-color: #b14d15; background: #b14d15; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-orange.unhoverable:hover, .customer-facing .basic-button-orange.unhoverable.hover { background: #df611a; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-red { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #cd1800; background-color: #cd1800; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { cursor: default; } .customer-facing .basic-button-red:link, .customer-facing .basic-button-red:visited { color: #ffffff; } .customer-facing .basic-button-red:hover, .customer-facing .basic-button-red.hover { color: #ffffff; border-color: #9a1200; background: #9a1200; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-red.unhoverable:hover, .customer-facing .basic-button-red.unhoverable.hover { background: #cd1800; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-yellow { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #feab21; background-color: #feab21; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { cursor: default; } .customer-facing .basic-button-yellow:link, .customer-facing .basic-button-yellow:visited { color: #ffffff; } .customer-facing .basic-button-yellow:hover, .customer-facing .basic-button-yellow.hover { color: #ffffff; border-color: #eb9301; background: #eb9301; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-yellow.unhoverable:hover, .customer-facing .basic-button-yellow.unhoverable.hover { background: #feab21; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-gray { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #fefefe; background-color: #fefefe; color: #585858; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { cursor: default; } .customer-facing .basic-button-gray:link, .customer-facing .basic-button-gray:visited { color: #585858; } .customer-facing .basic-button-gray:hover, .customer-facing .basic-button-gray.hover { color: #585858; border-color: #e5e5e5; background: #e5e5e5; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-gray.unhoverable:hover, .customer-facing .basic-button-gray.unhoverable.hover { background: #fefefe; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-gray:hover, .customer-facing .basic-button-gray.hover { color: #FFFFFF; } .agent-tools .Button, .agent-tools .button { border-width: 1px; border-style: solid; font-size: 12px; line-height: 22px; padding-left: 1.5rem; border-radius: 2px; display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; -ms-user-select: none; -webkit-touch-callout: none; } .agent-tools .Button.disabled, .agent-tools .button.disabled, .agent-tools .Button.disabled:hover, .agent-tools .button.disabled:hover, .agent-tools .Button.disabled.hover, .agent-tools .button.disabled.hover { cursor: default; } .agent-tools .Button .icon, .agent-tools .button .icon { margin: 1px 0 1px 5px; } .agent-tools .Button *, .agent-tools .button * { white-space: nowrap; } .agent-tools .Button:not(.split), .agent-tools .button:not(.split) { overflow: hidden; padding-right: 1.5rem; } .agent-tools .Button.split, .agent-tools .button.split { padding-right: 3rem; position: relative; overflow: visible; } .agent-tools .Button.split > .arrow, .agent-tools .button.split > .arrow { display: inline-block; float: right; margin-left: 1.5rem; line-height: inherit; width: 1.6rem; border: 1px solid; position: absolute; top: -1px; right: -1px; bottom: -1px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } .agent-tools .Button.split > .arrow svg, .agent-tools .button.split > .arrow svg { width: 1rem; position: relative; top: 3px; } .agent-tools .Button.split > .arrow svg path, .agent-tools .button.split > .arrow svg path { fill: #464646; } .agent-tools .Button.split > .Flyout, .agent-tools .button.split > .Flyout { position: absolute; bottom: 0; left: 0; width: 100%; } .agent-tools .Button.split > .Flyout > .flyout, .agent-tools .button.split > .Flyout > .flyout { width: 100%; } .agent-tools .Button.split > .Flyout .container, .agent-tools .button.split > .Flyout .container { background-color: white; border: 1px solid #eaeaea; } .agent-tools .Button.split > .Flyout .container ul, .agent-tools .button.split > .Flyout .container ul, .agent-tools .Button.split > .Flyout .container li, .agent-tools .button.split > .Flyout .container li { list-style-type: none; text-align: left; line-height: 1.5em; } .agent-tools .Button.split > .Flyout .container li, .agent-tools .button.split > .Flyout .container li { overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; box-sizing: border-box; padding: 2.5px 5px 2.5px 5px; } .agent-tools .Button.split > .Flyout .container li:first-child, .agent-tools .button.split > .Flyout .container li:first-child { padding-top: 5px; } .agent-tools .Button:focus, .agent-tools .button:focus { outline: none; } .agent-tools .Button:not(.secondary), .agent-tools .button:not(.secondary) { border-color: #1e79b2; background-color: #1e79b2; color: #fff; } .agent-tools .Button:not(.secondary):hover, .agent-tools .button:not(.secondary):hover, .agent-tools .Button:not(.secondary).hover, .agent-tools .button:not(.secondary).hover { border-color: #175b86; background: #175b86; } .agent-tools .Button.secondary, .agent-tools .button.secondary { border-color: #eaeaea; background-color: #f7f7f7; color: #464646; } .agent-tools .Button.secondary:not(.split) .agent-tools .Button.secondary:hover, .agent-tools .Button.secondary:not(.split) .agent-tools .button.secondary:hover, .agent-tools .button.secondary:not(.split) .agent-tools .Button.secondary:hover, .agent-tools .button.secondary:not(.split) .agent-tools .button.secondary:hover, .agent-tools .Button.secondary.hover-label, .agent-tools .button.secondary.hover-label, .agent-tools .Button.secondary.hover, .agent-tools .button.secondary.hover, .agent-tools .Button.secondary li:hover, .agent-tools .button.secondary li:hover { color: #464646; border-color: #dedede; background: #d1d1d1; } .agent-tools .Button.secondary.split > .arrow, .agent-tools .button.secondary.split > .arrow { border-color: #eaeaea; background-color: #f7f7f7; } .agent-tools .Button.secondary.split > .arrow:hover, .agent-tools .button.secondary.split > .arrow:hover { background: #d1d1d1; } .agent-tools .Button.disabled, .agent-tools .button.disabled, .agent-tools .Button.disabled:hover, .agent-tools .button.disabled:hover, .agent-tools .Button.disabled.hover, .agent-tools .button.disabled.hover { background-color: #fafafa; border-color: #ededed; color: #c6c6c6; } /* Utility Functions */ /* New UI Kit button styling below, added 8-7-2015 * "buttonsV2" class on body lets us opt into new buttons at the page-level * "flat" class on button lets us opt in at the individual button level * When ready to retire old buttons, should be able to just remove everything * above here and make this styling apply to buttons across all pages */ .customer-facing.buttonsV2 .Button, .customer-facing:not(.buttonsV2) .Button.flat { box-shadow: none; display: inline-block; border: 1px solid #0c82a5; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 1; height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; padding: 12px 1.5rem; color: #0c82a5; background-color: transparent; /* variants */ /* end variants */ /* Sizes * Use the default size for forms and most other contexts */ /* End Sizes */ /* button utility classes * modifiers change button styling, while keeping some consistency */ } .customer-facing.buttonsV2 .Button:focus, .customer-facing:not(.buttonsV2) .Button.flat:focus { outline: none; } .customer-facing.buttonsV2 .Button *, .customer-facing:not(.buttonsV2) .Button.flat * { font-size: 1rem; display: inline-block; height: 16px; } .customer-facing.buttonsV2 .Button span, .customer-facing:not(.buttonsV2) .Button.flat span { vertical-align: top; } .customer-facing.buttonsV2 .Button + .Button, .customer-facing:not(.buttonsV2) .Button.flat + .Button { /* when multiple buttons in sequence, add margin to all but the first */ margin-left: 1rem; } .customer-facing.buttonsV2 .Button .icon, .customer-facing:not(.buttonsV2) .Button.flat .icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV2 .Button .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat .icon.with-text { margin-left: -6px; margin-right: 10px; /* put space between icon and text */ } .customer-facing.buttonsV2 .Button .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV2 .Button .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV2 .Button .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon.with-text { margin-top: -3px; margin-right: 8px; margin-left: -6px; } .customer-facing.buttonsV2 .Button .svg-icon.with-text .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon.with-text .rfSvg { width: 18px; height: 18px; } .customer-facing.buttonsV2 .Button:hover, .customer-facing:not(.buttonsV2) .Button.flat:hover { color: #FFFFFF; box-shadow: none; background-color: #0c82a5; border-width: 1px; } .customer-facing.buttonsV2 .Button:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.brand, .customer-facing:not(.buttonsV2) .Button.flat.brand { color: #a02021; border-color: #a02021; } .customer-facing.buttonsV2 .Button.brand .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.brand .svg-icon .rfSvg { fill: #a02021; } .customer-facing.buttonsV2 .Button.brand:hover, .customer-facing:not(.buttonsV2) .Button.flat.brand:hover { color: #FFFFFF; background-color: #a02021; } .customer-facing.buttonsV2 .Button.brand:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.brand:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.plain, .customer-facing:not(.buttonsV2) .Button.flat.plain { color: #333333; border-color: #333333; } .customer-facing.buttonsV2 .Button.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.plain .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV2 .Button.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.plain:hover { color: #FFFFFF; background-color: #333333; } .customer-facing.buttonsV2 .Button.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.plain:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.call-out, .customer-facing:not(.buttonsV2) .Button.flat.call-out { color: #fa7b20; border-color: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.call-out .svg-icon .rfSvg { fill: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out:hover, .customer-facing:not(.buttonsV2) .Button.flat.call-out:hover { color: #FFFFFF; background-color: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.call-out:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button:disabled, .customer-facing:not(.buttonsV2) .Button.flat:disabled, .customer-facing.buttonsV2 .Button.disabled, .customer-facing:not(.buttonsV2) .Button.flat.disabled, .customer-facing.buttonsV2 .Button.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.disabled:hover { cursor: default; color: #e2e2e2; background-color: transparent; border-color: #cccccc; } .customer-facing.buttonsV2 .Button:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.disabled:hover .svg-icon .rfSvg { fill: #cccccc; } .customer-facing.buttonsV2 .Button.primary, .customer-facing:not(.buttonsV2) .Button.flat.primary { color: #FFFFFF; background-color: #a02021; border-color: #a02021; } .customer-facing.buttonsV2 .Button.primary .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.primary:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary:hover { border-color: #d32c2e; background-color: #d32c2e; } .customer-facing.buttonsV2 .Button.primary.plain, .customer-facing:not(.buttonsV2) .Button.flat.primary.plain { background-color: #585858; border-color: #585858; } .customer-facing.buttonsV2 .Button.primary.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary.plain:hover { border-color: #333333; background-color: #333333; } .customer-facing.buttonsV2 .Button.primary:disabled, .customer-facing:not(.buttonsV2) .Button.flat.primary:disabled, .customer-facing.buttonsV2 .Button.primary.disabled, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled, .customer-facing.buttonsV2 .Button.primary.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled:hover { color: #f5f5f5 !important; background-color: #cccccc !important; border-color: #cccccc !important; } .customer-facing.buttonsV2 .Button.primary:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.primary.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.primary.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.text, .customer-facing:not(.buttonsV2) .Button.flat.text { /* makes a button look like a text link -- useful for icon+text buttons */ border-color: transparent; background-color: transparent; } .customer-facing.buttonsV2 .Button.text, .customer-facing:not(.buttonsV2) .Button.flat.text, .customer-facing.buttonsV2 .Button.text:visited, .customer-facing:not(.buttonsV2) .Button.flat.text:visited { color: #0c82a5; text-decoration: none; cursor: pointer; } .customer-facing.buttonsV2 .Button.text:hover, .customer-facing:not(.buttonsV2) .Button.flat.text:hover { color: #0c82a5; text-decoration: underline; } .customer-facing.buttonsV2 .Button.text.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled, .customer-facing.buttonsV2 .Button.text.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover { color: #e2e2e2; cursor: default; text-decoration: none; } .customer-facing.buttonsV2 .Button.text.unpadded, .customer-facing:not(.buttonsV2) .Button.flat.text.unpadded { padding: 0; } .customer-facing.buttonsV2 .Button.text.compact, .customer-facing:not(.buttonsV2) .Button.flat.text.compact, .customer-facing.buttonsV2 .Button.text.compact *, .customer-facing:not(.buttonsV2) .Button.flat.text.compact * { font-size: .875rem; } .customer-facing.buttonsV2 .Button.text:hover, .customer-facing:not(.buttonsV2) .Button.flat.text:hover { border-color: transparent; color: #0c82a5; background-color: transparent; } .customer-facing.buttonsV2 .Button.text:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text:hover .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV2 .Button.text:disabled, .customer-facing:not(.buttonsV2) .Button.flat.text:disabled, .customer-facing.buttonsV2 .Button.text.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled, .customer-facing.buttonsV2 .Button.text.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover { border-color: transparent; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV2 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.text.plain, .customer-facing:not(.buttonsV2) .Button.flat.text.plain { color: #585858; } .customer-facing.buttonsV2 .Button.text.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.plain:hover { color: #333333 !important; } .customer-facing.buttonsV2 .Button.text.plain:disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.plain:disabled, .customer-facing.buttonsV2 .Button.text.plain.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.plain.disabled, .customer-facing.buttonsV2 .Button.text.plain.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV2 .Button.icon, .customer-facing:not(.buttonsV2) .Button.flat.icon { /* button with icon only, or icon with text label underneath */ border: 0 none; background-color: transparent; color: #a02021; text-align: center; padding: .5rem; height: 60px; } .customer-facing.buttonsV2 .Button.icon span, .customer-facing:not(.buttonsV2) .Button.flat.icon span { margin-top: 7px; display: block; } .customer-facing.buttonsV2 .Button.icon, .customer-facing:not(.buttonsV2) .Button.flat.icon, .customer-facing.buttonsV2 .Button.icon *, .customer-facing:not(.buttonsV2) .Button.flat.icon * { font-size: .75rem; } .customer-facing.buttonsV2 .Button.icon .icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon { width: 24px; height: 24px; display: block; } .customer-facing.buttonsV2 .Button.icon .icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon, .customer-facing.buttonsV2 .Button.icon .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon.with-text { margin: 0 auto; } .customer-facing.buttonsV2 .Button.icon .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .svg-icon, .customer-facing.buttonsV2 .Button.icon:hover .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover .svg-icon, .customer-facing.buttonsV2 .Button.icon .with-text.svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .with-text.svg-icon { margin: 1px auto 0 auto; height: 24px; } .customer-facing.buttonsV2 .Button.icon .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon .with-text.svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon .with-text.svg-icon .rfSvg { width: 24px; height: 24px; fill: #a02021; } .customer-facing.buttonsV2 .Button.icon:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover { border: 0 none; color: #d32c2e; text-decoration: none; background-color: transparent; } .customer-facing.buttonsV2 .Button.icon:disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon:disabled, .customer-facing.buttonsV2 .Button.icon.disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled, .customer-facing.buttonsV2 .Button.icon.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled:hover { border: 0 none; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV2 .Button.icon:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.icon.plain, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain { color: #585858; } .customer-facing.buttonsV2 .Button.icon.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV2 .Button.icon.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:hover { color: #333333 !important; } .customer-facing.buttonsV2 .Button.icon.plain:disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:disabled, .customer-facing.buttonsV2 .Button.icon.plain.disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled, .customer-facing.buttonsV2 .Button.icon.plain.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV2 .Button.icon.plain:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.small, .customer-facing:not(.buttonsV2) .Button.flat.small, .customer-facing.buttonsV2 .Button.medium, .customer-facing:not(.buttonsV2) .Button.flat.medium, .customer-facing.buttonsV2 .Button.compact, .customer-facing:not(.buttonsV2) .Button.flat.compact { /* in a denser UI, compact buttons will fit better */ padding: 10px 1rem; height: 34px; } .customer-facing.buttonsV2 .Button.small, .customer-facing:not(.buttonsV2) .Button.flat.small, .customer-facing.buttonsV2 .Button.medium, .customer-facing:not(.buttonsV2) .Button.flat.medium, .customer-facing.buttonsV2 .Button.compact, .customer-facing:not(.buttonsV2) .Button.flat.compact, .customer-facing.buttonsV2 .Button.small *, .customer-facing:not(.buttonsV2) .Button.flat.small *, .customer-facing.buttonsV2 .Button.medium *, .customer-facing:not(.buttonsV2) .Button.flat.medium *, .customer-facing.buttonsV2 .Button.compact *, .customer-facing:not(.buttonsV2) .Button.flat.compact * { font-size: .875rem; } .customer-facing.buttonsV2 .Button.small *, .customer-facing:not(.buttonsV2) .Button.flat.small *, .customer-facing.buttonsV2 .Button.medium *, .customer-facing:not(.buttonsV2) .Button.flat.medium *, .customer-facing.buttonsV2 .Button.compact *, .customer-facing:not(.buttonsV2) .Button.flat.compact * { height: .875rem; } .customer-facing.buttonsV2 .Button.small .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.small .icon.with-text, .customer-facing.buttonsV2 .Button.medium .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.medium .icon.with-text, .customer-facing.buttonsV2 .Button.compact .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.compact .icon.with-text { margin-right: 6px; margin-left: -4px; } .customer-facing.buttonsV2 .Button.small .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.small .svg-icon.with-text, .customer-facing.buttonsV2 .Button.medium .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.medium .svg-icon.with-text, .customer-facing.buttonsV2 .Button.compact .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.compact .svg-icon.with-text { margin-top: -3px; margin-right: 6px; } .customer-facing.buttonsV2 .Button.large, .customer-facing:not(.buttonsV2) .Button.flat.large { /* for use in large-font marketing pages */ padding: 15px 1.875rem; height: 50px; } .customer-facing.buttonsV2 .Button.large *, .customer-facing:not(.buttonsV2) .Button.flat.large * { font-size: 1.125rem; } .customer-facing.buttonsV2 .Button.large .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.large .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV2 .Button.hero, .customer-facing:not(.buttonsV2) .Button.flat.hero { /* Special case for homepage larger font, more horizontal padding */ padding: 16px 1.875rem; height: 50px; } .customer-facing.buttonsV2 .Button.hero *, .customer-facing:not(.buttonsV2) .Button.flat.hero * { font-size: 1.125rem; } .customer-facing.buttonsV2 .Button.hero .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.hero .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV2 .Button.narrow, .customer-facing:not(.buttonsV2) .Button.flat.narrow { padding-left: 1rem; padding-right: 1rem; } .customer-facing.buttonsV2 .Button.narrow.compact, .customer-facing:not(.buttonsV2) .Button.flat.narrow.compact { padding-left: .625rem; padding-right: .625rem; } /* Fledgling UI-Kit V3 "chrome" buttons */ .customer-facing.buttonsV3 .Button, .customer-facing:not(.buttonsV3) .Button.v3 { box-shadow: none; display: inline-block; border: 1px solid #0c82a5; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 1; height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; padding: 12px 1.5rem; color: #585858; background-color: #f5f5f5; border-color: #e2e2e2; /* for v3 buttons, tertiary is the default styling... don't need */ /* Sizes * Use the default size for forms and most other contexts */ /* End Sizes */ /* button utility classes * modifiers change button styling, while keeping some consistency */ } .customer-facing.buttonsV3 .Button:focus, .customer-facing:not(.buttonsV3) .Button.v3:focus { outline: none; } .customer-facing.buttonsV3 .Button *, .customer-facing:not(.buttonsV3) .Button.v3 * { font-size: 1rem; display: inline-block; height: 16px; } .customer-facing.buttonsV3 .Button span, .customer-facing:not(.buttonsV3) .Button.v3 span { vertical-align: top; } .customer-facing.buttonsV3 .Button + .Button, .customer-facing:not(.buttonsV3) .Button.v3 + .Button { /* when multiple buttons in sequence, add margin to all but the first */ margin-left: 1rem; } .customer-facing.buttonsV3 .Button .icon, .customer-facing:not(.buttonsV3) .Button.v3 .icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV3 .Button .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3 .icon.with-text { margin-left: -6px; margin-right: 10px; /* put space between icon and text */ } .customer-facing.buttonsV3 .Button .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV3 .Button .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon .rfSvg { fill: #585858; } .customer-facing.buttonsV3 .Button .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon.with-text { margin-top: -3px; margin-right: 8px; margin-left: -6px; } .customer-facing.buttonsV3 .Button .svg-icon.with-text .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon.with-text .rfSvg { width: 18px; height: 18px; } .customer-facing.buttonsV3 .Button:hover, .customer-facing:not(.buttonsV3) .Button.v3:hover { color: #333333; background-color: #e2e2e2; box-shadow: none; border-width: 1px; } .customer-facing.buttonsV3 .Button:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button.secondary, .customer-facing:not(.buttonsV3) .Button.v3.secondary { color: #FFFFFF; border-color: #585858; background-color: #585858; } .customer-facing.buttonsV3 .Button.secondary .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.secondary .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.secondary:hover, .customer-facing:not(.buttonsV3) .Button.v3.secondary:hover { color: #FFFFFF; border-color: #333333; background-color: #333333; } .customer-facing.buttonsV3 .Button.secondary:hover .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.secondary:hover .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.tertiary-alt, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt { color: #585858; background-color: #FFFFFF; border-color: #FFFFFF; -moz-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); } .customer-facing.buttonsV3 .Button.tertiary-alt .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt .svg-icon .rfSvg { fill: #585858; } .customer-facing.buttonsV3 .Button.tertiary-alt:hover, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt:hover { color: #333333; background-color: #e2e2e2; border-color: #e2e2e2; } .customer-facing.buttonsV3 .Button.tertiary-alt:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button:disabled, .customer-facing:not(.buttonsV3) .Button.v3:disabled, .customer-facing.buttonsV3 .Button.disabled, .customer-facing:not(.buttonsV3) .Button.v3.disabled, .customer-facing.buttonsV3 .Button.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.disabled:hover { cursor: default; color: rgba(0, 0, 0, 0.15) !important; background-color: transparent !important; border-color: rgba(0, 0, 0, 0.15) !important; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing.buttonsV3 .Button:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.disabled:hover .svg-icon .rfSvg { fill: rgba(0, 0, 0, 0.15); } .customer-facing.buttonsV3 .Button.primary, .customer-facing:not(.buttonsV3) .Button.v3.primary { color: #FFFFFF; background-color: #a02021; border-color: #a02021; } .customer-facing.buttonsV3 .Button.primary .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.primary .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.primary:hover, .customer-facing:not(.buttonsV3) .Button.v3.primary:hover { border-color: #d32c2e; background-color: #d32c2e; } .customer-facing.buttonsV3 .Button.primary:hover .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.primary:hover .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.text, .customer-facing:not(.buttonsV3) .Button.v3.text { /* makes a button look like a text link -- useful for icon+text buttons */ border-color: transparent; background-color: transparent; } .customer-facing.buttonsV3 .Button.text, .customer-facing:not(.buttonsV3) .Button.v3.text, .customer-facing.buttonsV3 .Button.text:visited, .customer-facing:not(.buttonsV3) .Button.v3.text:visited { color: #0c82a5; text-decoration: none; cursor: pointer; } .customer-facing.buttonsV3 .Button.text:hover, .customer-facing:not(.buttonsV3) .Button.v3.text:hover { color: #0c82a5; text-decoration: underline; } .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { color: #e2e2e2; cursor: default; text-decoration: none; } .customer-facing.buttonsV3 .Button.text.unpadded, .customer-facing:not(.buttonsV3) .Button.v3.text.unpadded { padding: 0; } .customer-facing.buttonsV3 .Button.text.unpadded .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.text.unpadded .svg-icon.with-text { margin-left: 0; } .customer-facing.buttonsV3 .Button.text.compact, .customer-facing:not(.buttonsV3) .Button.v3.text.compact, .customer-facing.buttonsV3 .Button.text.compact *, .customer-facing:not(.buttonsV3) .Button.v3.text.compact * { font-size: .875rem; } .customer-facing.buttonsV3 .Button.text .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV3 .Button.text:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled, .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { border-color: transparent !important; color: #e2e2e2 !important; background-color: transparent !important; } .customer-facing.buttonsV3 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.text:hover, .customer-facing:not(.buttonsV3) .Button.v3.text:hover { border-color: transparent; color: #0c82a5; background-color: transparent; } .customer-facing.buttonsV3 .Button.text:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:hover .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV3 .Button.text:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled, .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { border-color: transparent; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV3 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.text.plain, .customer-facing:not(.buttonsV3) .Button.v3.text.plain { color: #585858; } .customer-facing.buttonsV3 .Button.text.plain:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.plain:hover { color: #333333 !important; } .customer-facing.buttonsV3 .Button.text.plain:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.plain:disabled, .customer-facing.buttonsV3 .Button.text.plain.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.plain.disabled, .customer-facing.buttonsV3 .Button.text.plain.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV3 .Button.icon, .customer-facing:not(.buttonsV3) .Button.v3.icon { /* button with icon only, or icon with text label underneath */ border: 0 none; background-color: transparent; color: #a02021; text-align: center; padding: .5rem; height: 60px; } .customer-facing.buttonsV3 .Button.icon span, .customer-facing:not(.buttonsV3) .Button.v3.icon span { margin-top: 7px; display: block; } .customer-facing.buttonsV3 .Button.icon, .customer-facing:not(.buttonsV3) .Button.v3.icon, .customer-facing.buttonsV3 .Button.icon *, .customer-facing:not(.buttonsV3) .Button.v3.icon * { font-size: .75rem; } .customer-facing.buttonsV3 .Button.icon .icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon { width: 24px; height: 24px; display: block; } .customer-facing.buttonsV3 .Button.icon .icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon, .customer-facing.buttonsV3 .Button.icon .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon.with-text { margin: 0 auto; } .customer-facing.buttonsV3 .Button.icon .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .svg-icon, .customer-facing.buttonsV3 .Button.icon:hover .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover .svg-icon, .customer-facing.buttonsV3 .Button.icon .with-text.svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .with-text.svg-icon { margin: 1px auto 0 auto; height: 24px; } .customer-facing.buttonsV3 .Button.icon .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon .with-text.svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon .with-text.svg-icon .rfSvg { width: 24px; height: 24px; fill: #a02021; } .customer-facing.buttonsV3 .Button.icon:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover { border: 0 none; color: #d32c2e; text-decoration: none; background-color: transparent; } .customer-facing.buttonsV3 .Button.icon:disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon:disabled, .customer-facing.buttonsV3 .Button.icon.disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled, .customer-facing.buttonsV3 .Button.icon.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled:hover { border: 0 none; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV3 .Button.icon:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.icon.plain, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain { color: #585858; } .customer-facing.buttonsV3 .Button.icon.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button.icon.plain:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:hover { color: #333333 !important; } .customer-facing.buttonsV3 .Button.icon.plain:disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:disabled, .customer-facing.buttonsV3 .Button.icon.plain.disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled, .customer-facing.buttonsV3 .Button.icon.plain.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV3 .Button.icon.plain:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.small, .customer-facing:not(.buttonsV3) .Button.v3.small, .customer-facing.buttonsV3 .Button.medium, .customer-facing:not(.buttonsV3) .Button.v3.medium, .customer-facing.buttonsV3 .Button.compact, .customer-facing:not(.buttonsV3) .Button.v3.compact { /* in a denser UI, compact buttons will fit better */ padding: 10px 1rem; height: 34px; } .customer-facing.buttonsV3 .Button.small, .customer-facing:not(.buttonsV3) .Button.v3.small, .customer-facing.buttonsV3 .Button.medium, .customer-facing:not(.buttonsV3) .Button.v3.medium, .customer-facing.buttonsV3 .Button.compact, .customer-facing:not(.buttonsV3) .Button.v3.compact, .customer-facing.buttonsV3 .Button.small *, .customer-facing:not(.buttonsV3) .Button.v3.small *, .customer-facing.buttonsV3 .Button.medium *, .customer-facing:not(.buttonsV3) .Button.v3.medium *, .customer-facing.buttonsV3 .Button.compact *, .customer-facing:not(.buttonsV3) .Button.v3.compact * { font-size: .875rem; } .customer-facing.buttonsV3 .Button.small *, .customer-facing:not(.buttonsV3) .Button.v3.small *, .customer-facing.buttonsV3 .Button.medium *, .customer-facing:not(.buttonsV3) .Button.v3.medium *, .customer-facing.buttonsV3 .Button.compact *, .customer-facing:not(.buttonsV3) .Button.v3.compact * { height: .875rem; } .customer-facing.buttonsV3 .Button.small .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.small .icon.with-text, .customer-facing.buttonsV3 .Button.medium .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.medium .icon.with-text, .customer-facing.buttonsV3 .Button.compact .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.compact .icon.with-text { margin-right: 6px; margin-left: -4px; } .customer-facing.buttonsV3 .Button.small .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.small .svg-icon.with-text, .customer-facing.buttonsV3 .Button.medium .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.medium .svg-icon.with-text, .customer-facing.buttonsV3 .Button.compact .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.compact .svg-icon.with-text { margin-top: -3px; margin-right: 6px; } .customer-facing.buttonsV3 .Button.large, .customer-facing:not(.buttonsV3) .Button.v3.large { /* for use in large-font marketing pages */ padding: 15px 1.875rem; height: 50px; } .customer-facing.buttonsV3 .Button.large *, .customer-facing:not(.buttonsV3) .Button.v3.large * { font-size: 1.125rem; } .customer-facing.buttonsV3 .Button.large .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.large .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV3 .Button.narrow, .customer-facing:not(.buttonsV3) .Button.v3.narrow { padding-left: 1rem; padding-right: 1rem; } .customer-facing.buttonsV3 .Button.narrow.compact, .customer-facing:not(.buttonsV3) .Button.v3.narrow.compact { padding-left: .625rem; padding-right: .625rem; } /** >>ignore-less */ /* All images with "sprite-ref: XXX" are combined into a single image by smart sprites tool http://csssprites.org/ */ /** Miscellaneous images */ .sprite-spinner { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -12px; } .sprite-spinner-small { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -12px; } .sprite-zoom-button { width: 19px; height: 19px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -23px; } .sprite-redfin-white-logo { width: 91px; height: 29px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -42px; } .sprite-no-photos-l { width: 623px; height: 420px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -75px; } .sprite-play-video { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -495px; } /* Links below the mini map */ .sprite-claim-home { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -511px; } :hover > .sprite-claim-home { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -527px; } .sprite-directions { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -543px; } .sprite-problem-flag { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -559px; } :hover > .sprite-problem-flag { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -575px; } .sprite-map-this { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -591px; } :hover > .sprite-map-this { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -607px; } .sprite-serving-this-home { width: 22px; height: 22px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -623px; } .sprite-price-home { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -645px; } :hover > .sprite-price-home { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -661px; } .sprite-print-home { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -677px; } :hover > .sprite-print-home { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -693px; } .sprite-payments-calc { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -709px; } :hover > .sprite-payments-calc { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -725px; } .sprite-info-button { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -741px; } .hoverable:hover.sprite-info-button { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -759px; } /** * Home icons; These are the large sized versions of the home icons. */ .sprite-home-size { width: 50px; height: 60px; background-color: transparent; background-repeat: no-repeat; } /** Each type of background */ .sprite-home-header-active { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -777px; } .sprite-home-header-default { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -837px; } .sprite-home-header-for-sale { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -897px; } .sprite-home-header-owner { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -957px; } .sprite-home-header-servicearea { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1017px; } .sprite-home-header-sold { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1077px; } .sprite-home-header-foreclosed { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1137px; } .sprite-home-header-redfin { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1197px; } /** The home type */ .sprite-home-header-condo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1257px; } .sprite-home-header-single { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1317px; } .sprite-home-header-land { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1377px; } .sprite-home-header-multi-family { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1437px; } .sprite-home-header-townhouse { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1497px; } .sprite-home-header-redfin-sign { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1557px; } /** The various badges */ .sprite-home-header-fav { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1617px; } .sprite-home-header-agc { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1677px; } .sprite-home-header-xout { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1737px; } .sprite-home-header-hot-combo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1797px; } .sprite-home-header-hot-solo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1857px; } .sprite-home-header-open-combo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1917px; } .sprite-home-header-open-solo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -1977px; } /** * Map home icons; for the mini map. */ .sprite-map-ico-size { width: 30px; height: 30px; background-color: transparent; background-repeat: no-repeat; } .sprite-map-ico-redfin-redfin-sign { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2037px; } .sprite-map-ico-for-sale-single { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2067px; } .sprite-map-ico-for-sale-condo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2097px; } .sprite-map-ico-for-sale-land { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2127px; } .sprite-map-ico-for-sale-multi-family { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2157px; } .sprite-map-ico-for-sale-townhouse { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2187px; } .sprite-map-ico-foreclosed-single { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2217px; } .sprite-map-ico-foreclosed-condo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2247px; } .sprite-map-ico-foreclosed-land { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2277px; } .sprite-map-ico-foreclosed-multi-family { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2307px; } .sprite-map-ico-foreclosed-townhouse { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2337px; } .sprite-map-ico-owner-single { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2367px; } .sprite-map-ico-owner-condo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2397px; } .sprite-map-ico-owner-land { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2427px; } .sprite-map-ico-owner-multi-family { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2457px; } .sprite-map-ico-owner-townhouse { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2487px; } .sprite-map-ico-sold-single { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2517px; } .sprite-map-ico-sold-condo { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2547px; } .sprite-map-ico-sold-land { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2577px; } .sprite-map-ico-sold-multi-family { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2607px; } .sprite-map-ico-sold-townhouse { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2637px; } /** * Open house icons */ .sprite-open-house { /* height: 25px; width: 45px; */ background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2667px; } /** * Similars */ .sprite-no-photos-m { width: 142px; height: 100px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2724px; } .sprite-similar-fav { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15502px; } .sprite-similar-toggle-fav { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15567px; } .sprite-similar-toggle-fav-on { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15577px; } .sprite-similar-signin-lock { width: 14px; height: 14px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15587px; } .sprite-similar-lock-foreclosed { width: 36px; height: 36px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15601px; } .sprite-similar-lock-for-sale { width: 36px; height: 36px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15637px; } .sprite-similar-lock-owner { width: 36px; height: 36px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15673px; } .sprite-similar-lock-sold { width: 36px; height: 36px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/map_icons_sprite.png'); background-position: left -15709px; } .sprite-xfav { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1953px; width: 21px; height: 19px; } .sprite-xout { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1983px; width: 21px; height: 19px; } .sprite-similar-home-single { width: 20px; height: 20px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2824px; } .sprite-similar-home-condo { width: 20px; height: 20px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2889px; } .sprite-similar-home-multi-family { width: 20px; height: 20px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -2954px; } .sprite-similar-home-townhouse { width: 20px; height: 20px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3019px; } .sprite-similar-home-land { width: 20px; height: 20px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3084px; } .sprite-similar-badge-fav { width: 65px; height: 65px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3149px; } .sprite-similar-badge-agc { width: 65px; height: 65px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3214px; } .sprite-similar-badge-xout { width: 65px; height: 65px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3279px; } .sprite-similar-ghost { /** TODO: Need a specific similar ghost town */ background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2013px; height: 100px; width: 100px; } .sprite-more-info { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3344px; } :hover > .sprite-more-info { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3360px; } .Button > .sprite-more-info { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3376px; } .sprite-more-info-sm { width: 12px; height: 12px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3392px; } .sprite-quickmap-ghosttown { background-position: center; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3404px; width: 313px; height: 250px; } /** * Home estimates **/ .sprite-zillow { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2113px; width: 50px; height: 40px; } .sprite-eppraisal { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2153px; width: 50px; height: 40px; } /** * Agent Insights */ .sprite-insight-ghosttown { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2193px; width: 77px; height: 87px; } .sprite-insight-mail-alert { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2280px; width: 16px; height: 16px; } .sprite-insight-mail { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2296px; width: 16px; height: 16px; } .sprite-insight-lock { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2312px; width: 16px; height: 16px; } .sprite-noted-bigyard { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2328px; width: 22px; height: 22px; } .disabled .sprite-noted-bigyard { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2350px; width: 22px; height: 22px; } .sprite-noted-heavytour { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2372px; width: 22px; height: 22px; } .disabled .sprite-noted-heavytour { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2394px; width: 22px; height: 22px; } .sprite-noted-light { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2416px; width: 22px; height: 22px; } .disabled .sprite-noted-light { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2438px; width: 22px; height: 22px; } .sprite-noted-needswork { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2460px; width: 22px; height: 22px; } .disabled .sprite-noted-needswork { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2482px; width: 22px; height: 22px; } .sprite-noted-openfloorplan { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2504px; width: 22px; height: 22px; } .disabled .sprite-noted-openfloorplan { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2526px; width: 22px; height: 22px; } .sprite-noted-streetnoise { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2548px; width: 22px; height: 22px; } .disabled .sprite-noted-streetnoise { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2570px; width: 22px; height: 22px; } .sprite-noted-views { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2592px; width: 22px; height: 22px; } .disabled .sprite-noted-views { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2614px; width: 22px; height: 22px; } .sprite-tag-redfin { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2636px; width: 20px; height: 20px; } .sprite-tag-partner { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2656px; width: 20px; height: 20px; } .sprite-icon-calculator { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2676px; width: 22px; height: 22px; } .sprite-icon-price-home { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2698px; width: 22px; height: 22px; } .Button:hover > .sprite-icon-price-home { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2698px; } .sprite-icon-tour-home, .Button.disabled:hover > .sprite-icon-tour-home { /* make sure we are specific enough to target the disabled hover state -emg */ background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2720px; width: 22px; height: 22px; } .sprite-icon-tour-home-check-mark { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2742px; width: 22px; height: 22px; } .Button-gray .sprite-icon-for-popup-tour-home { background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icons-22-tour-schedule.png'); } .Button-gray:hover .sprite-icon-for-popup-tour-home { background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icons-22-w-tour-schedule.png'); } .sprite-icon-for-popup-tour-home { margin-left: 10px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icons-22-w-tour-schedule.png'); width: 22px; height: 22px; } /** MT - This is duplicated in icons_sprite.css...we should put it all in one or at least name them differently **/ .sprite-icon-view { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2764px; width: 23px; height: 22px; } .sprite-icon-fav { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2786px; width: 23px; height: 22px; } .white_buttons .sprite-icon-fav { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2808px; width: 23px; height: 22px; } .sprite-icon-fav-on { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2830px; width: 23px; height: 22px; } .sprite-icon-xout { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2852px; width: 22px; height: 22px; } .white_buttons .sprite-icon-xout { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2874px; width: 22px; height: 22px; } .sprite-icon-xout-on { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2896px; width: 22px; height: 22px; } .sprite-icon-share { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2918px; width: 22px; height: 22px; } .sprite-facebook-share { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2940px; width: 67px; height: 20px; } .sprite-icon-email { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2960px; width: 22px; height: 22px; } .white_buttons .sprite-icon-email { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2982px; width: 23px; height: 22px; } .sprite-icon-email-small { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3004px; width: 15px; height: 11px; } .sprite-icon-phone { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3015px; width: 16px; height: 16px; } .sprite-pin-photo { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3031px; width: 16px; height: 17px; } .disabled .sprite-pin-photo { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3048px; width: 16px; height: 17px; } .sprite-icon-close-x { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3065px; width: 22px; height: 22px; } .sprite-icon-close-x:hover { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3087px; width: 22px; height: 22px; } /* new Dialog close 'x' button */ .sprite-icon-dialog-close-x { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3109px; width: 32px; height: 32px; } .sprite-icon-dialog-close-x:hover { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3141px; width: 32px; height: 32px; } .sprite-pagination-lg-l { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1821px; width: 44px; height: 44px; } .sprite-pagination-lg-r { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1865px; width: 44px; height: 44px; } /** * Not currently used. The sprite setting was as follows: * sprite-ref: icons_sprite * * .sprite-pagination-lg-d, .sprite-pagination-lg-l.disabled, .sprite-pagination-lg-r.disabled { * background-color: transparent; background-repeat: no-repeat; * background-image: url('../../common/elements/../../search/sprites/../../../../search/details/pagination-lg-d.png') ; * width: 44px; * height: 44px; * } * */ .sprite-pagination-sm-l { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1909px; width: 22px; height: 22px; } .sprite-pagination-sm-r { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -1931px; width: 22px; height: 22px; } /** * Not currently used. The sprite setting was as follows: * sprite-ref: icons_sprite * * .sprite-pagination-sm-d, .sprite-pagination-sm-l.disabled, .sprite-pagination-sm-r.disabled { * background-color: transparent; background-repeat: no-repeat; * background-image: url('../../common/elements/../../search/sprites/../../../../search/details/pagination-sm-d.png') ; * width: 22px; * height: 22px; * } * */ .sprite-pagination-ty-l { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3173px; width: 16px; height: 16px; } .sprite-pagination-ty-r { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3189px; width: 16px; height: 16px; } .sprite-pagination-ty-d, .sprite-pagination-ty-l.disabled, .sprite-pagination-ty-r.disabled { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3205px; width: 16px; height: 16px; } .sprite-pagination-xs-l { width: 19px; height: 19px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3654px; } .sprite-pagination-xs-r { width: 19px; height: 19px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3673px; } .sprite-pagination-xs-d, .sprite-pagination-xs-l.disabled, .sprite-pagination-xs-r.disabled { width: 19px; height: 19px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3692px; } /** * Nearby Schools */ .sprite-gs-rating-1 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3221px; } .sprite-gs-rating-2 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3242px; } .sprite-gs-rating-3 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3263px; } .sprite-gs-rating-4 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3284px; } .sprite-gs-rating-5 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3305px; } .sprite-gs-rating-6 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3326px; } .sprite-gs-rating-7 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3347px; } .sprite-gs-rating-8 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3368px; } .sprite-gs-rating-9 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3389px; } .sprite-gs-rating-10 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3410px; } .sprite-gs-rating-na { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3431px; } .sprite-parent-rating-0 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3452px; } .sprite-parent-rating-1 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3468px; } .sprite-parent-rating-2 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3484px; } .sprite-parent-rating-3 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3500px; } .sprite-parent-rating-4 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3516px; } .sprite-parent-rating-5 { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3532px; } .sprite-schools-ghost { width: 70px; height: 70px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3548px; } /** * Minimap icons */ .sprite-minimap-show-on-map { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3618px; width: 22px; height: 22px; } .sprite-minimap-streetview { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3640px; width: 22px; height: 22px; } .sprite-minimap-45degrees { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3662px; width: 22px; height: 22px; } .sprite-minimap-resetmap { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3684px; width: 22px; height: 22px; } /** * IE does not treat blank divs nicely so you have to put SOMETHING in the div like this clear bg. */ .sprite-clear-bg { background: url('../../common/elements/../../search/sprites/../../../../clear.gif') transparent; } /** * Actions */ .sprite-14-action-add { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3706px; } :hover > .sprite-14-action-add { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3720px; } .Button .sprite-14-action-add { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3734px; } .sprite-14-action-remove { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3748px; } .sprite-14-action-remove { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3762px; } :hover > .sprite-14-action-remove { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3776px; } .Button .sprite-14-action-remove { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3790px; } .sprite-14-action-cancel-on { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3804px; } .sprite-14-action-cancel { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3818px; } .sprite-14-action-save-on { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3832px; } .sprite-14-action-save { height: 14px; width: 14px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3846px; } .sprite-14-action-edit { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3860px; height: 14px; width: 14px; } .sprite-22-action-add { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3874px; height: 22px; width: 22px; } .sprite-22-action-cancel-on { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3896px; height: 22px; width: 22px; } .sprite-16-question { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3918px; height: 16px; width: 16px; } :hover > .sprite-16-question { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3934px; } .sprite-16-tour { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3950px; height: 16px; width: 16px; } .sprite-16-plus { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3966px; height: 16px; width: 16px; } .sprite-16-minus { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3982px; height: 16px; width: 16px; } .sprite-16-close { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -3998px; height: 16px; width: 16px; } .sprite-more-g-info { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3711px; } .sprite-16-grey-minus { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4014px; height: 16px; width: 16px; } .sprite-16-grey-plus { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4030px; height: 16px; width: 16px; } /* Sign in bar */ .sprite-goldbox-roadsign { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4046px; height: 40px; width: 40px; } .sprite-ghosttown-activity { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4086px; height: 70px; width: 70px; } .sprite-ghosttown-history { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4156px; height: 100px; width: 100px; } .sprite-ghosttown-history-house { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4256px; height: 70px; width: 65px; } .sprite-ghosttown-propertydetails { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -2013px; height: 100px; width: 100px; } .sprite-ghosttown-taxes { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4326px; height: 65px; width: 51px; } .sprite-ghosttown-neighborhood { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4391px; height: 80px; width: 80px; } .sprite-onboard-logo { width: 134px; height: 18px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/icons_sprite.png'); background-position: left -4471px; } /* Buy box sprites */ .customer-facing .button.tour { display: block; margin: 0 auto; margin-top: 5px; cursor: hand; width: 200px; height: 40px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3727px; } .customer-facing .button.tour:hover, .customer-facing .button.tour.hover { background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3767px; } .buy-box-arrows-table img.arrow_left { width:9px !important; height:16px !important; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3807px; } .buy-box-arrows-table img.arrow_right { width:9px !important; height:16px !important; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3823px; } .ask-question-container .dijitArrowButtonInner { background-image: url('../../common/elements/../../search/sprites/../../../../crm/icons/bullet_arrow_down.png'); width:16px; height:16px; } .sprite-22-gold-box { width: 22px; height: 22px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3839px; } .sprite-22-map-this { width: 22px; height: 22px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3861px; } .sprite-warning-icon { width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3883px; } /* Needed for ask a question */ .customer-facing .icon.help { background-color: transparent; background-repeat: no-repeat; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3899px; height: 16px; width: 16px; } .customer-facing a.icon.help:hover { /* only hover if it's a link */ background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3915px; } .star-full { width: 13px; height: 11px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3931px; } .star-half { width: 13px; height: 11px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3942px; } .star-empty { width: 13px; height: 11px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3953px; } .star-16-full { width: 16px; height: 16px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3964px; } .star-16-half { width: 16px; height: 16px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3980px; } .star-16-empty { width: 16px; height: 16px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -3996px; } .no-partner-img { width: 76px; height: 112px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4012px; } .agent-badge-redfin { width: 50px; height: 15px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4124px; } .arrow-circle-grey-left { width: 32px; height: 32px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4139px; } .arrow-circle-grey-right { width: 32px; height: 32px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4171px; } .button-arrow-right-blue { width: 15px; height: 20px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4203px; } /*** Offer Insights ***/ .offer-preclose-ghost { width: 124px; height: 106px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4223px; } /*** Tour Popup ***/ .icon-16-remove-x { width: 16px; height: 16px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4329px; } .icon-16-remove-x:hover { width: 16px; height: 16px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4347px; } .sprite-matterport-tag { width: 93px; height: 29px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4365px; } /*** PhotosViewer placeholder ***/ .sprite-home-photo-placeholder { width: 113px; height: 110px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4394px; } .sprite-date-picker-placeholder { width: 64px; height: 58px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4504px; } .sprite-map-placeholder { width: 48px; height: 71px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4562px; } .sprite-agent-placeholder { width: 64px; height: 68px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4633px; } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { .sprite-date-picker-placeholder { background-size: 64px 58px; background-position: 0 0; background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icon-appointment@2x.png'); } .sprite-map-placeholder { background-size: 48px 71px; background-position: 0 0; background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icon-map@2x.png'); } .sprite-agent-placeholder { background-size: 64px 68px; background-position: 0 0; background-image: url('../../common/elements/../../search/sprites/../../../../search/details/icon-agent@2x.png'); } } /*** MediaBrowser ***/ .sprite-mb-close { width: 29px; height: 28px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4701px; } .sprite-mb-full-screen { width: 28px; height: 28px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4729px; } /* Don't have the less variables, just hardcoded */ @media (max-width: 599px) { .sprite-mb-prev { width: 28px; height: 45px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4757px; } .sprite-mb-next { width: 28px; height: 45px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4802px; } } @media (min-width: 600px) { .sprite-mb-prev { width: 28px; height: 44px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4847px; } .sprite-mb-next { width: 28px; height: 44px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4891px; } } .sprite-mb-thumbnail-prev { width: 24px; height: 24px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4935px; } .sprite-mb-thumbnail-next { width: 24px; height: 24px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4959px; } .sprite-mb-walkthrough { width: 32px; height: 32px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -4983px; } .sprite-mb-streetView { width: 32px; height: 32px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5015px; } /** Main House Photo for FCB **/ .sprite-mp-header { display: inline-block; width: 24px; height: 24px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5047px; } .sprite-mp-fav-header { display: inline-block; width: 36px; height: 31px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5071px; } .sprite-mp-share-header { display: inline-block; width: 27px; height: 34px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5102px; } .sprite-mp-xout-header { display: inline-block; width: 34px; height: 34px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5136px; } .sprite-mp-left-arrow-header { display: inline-block; width: 26px; height: 46px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5170px; } .sprite-mp-right-arrow-header { display: inline-block; width: 26px; height: 46px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5216px; } /** Neighborhood Section */ .sprite-breadcrumb { width: 9px; height: 15px; background-image: url('../../common/elements/../../search/sprites/../../../../sprites/property_details_sprite.png'); background-position: left -5262px; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .Dialog, .CommonDialog { opacity: 0; display: table; table-layout: fixed; position: absolute; border: none; width: 100%; height: 100%; top: 0px; left: 0px; } .Dialog.shown, .CommonDialog.shown { opacity: 1; } .Dialog > .cell, .CommonDialog > .cell { display: table-cell; vertical-align: middle; text-align: center; } .Dialog > .cell > .guts, .CommonDialog > .cell > .guts { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; position: relative; margin: 10px; text-align: left; } .Dialog > .cell > .guts:focus, .CommonDialog > .cell > .guts:focus { outline: none; } .Dialog > .cell > .guts > .content, .CommonDialog > .cell > .guts > .content { margin: 0; padding: 0; } .Dialog, .DialogUnderlay { z-index: 10030; } .Dialog, .CommonDialog.fixed { position: fixed; } .agent-tools .CommonDialog > .cell > .guts { max-height: 97vh; max-width: 95vw; margin: auto; display: inline-block; } .agent-tools .CommonDialog > .cell > .guts > .close-button { display: none !important; } .agent-tools .CommonDialog > .cell > .guts > .header > h3 { color: white; min-height: 14px; font-size: 14px; padding: 4px 0px; margin: 0; } .agent-tools .CommonDialog > .cell > .guts > .header > .close { display: none; } .agent-tools .CommonDialog > .cell > .guts > .content { padding: 15px; } .customer-facing .Dialog > .cell > .guts, .customer-facing .CommonDialog > .cell > .guts { -moz-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; min-height: 100px; font-size: 14px; font-size: 0.875rem; color: #333333; background-color: #ffffff; } .customer-facing .Dialog > .cell > .guts > .close-button, .customer-facing .CommonDialog > .cell > .guts > .close-button { position: absolute; right: -16px; top: -16px; } @media screen and (max-width: 599px) { .customer-facing .Dialog > .cell > .guts > .close-button, .customer-facing .CommonDialog > .cell > .guts > .close-button { right: 10px; top: 10px; } } .customer-facing .Dialog > .cell > .guts > .header, .customer-facing .CommonDialog > .cell > .guts > .header { padding: 20px 20px 0 20px; } @media screen and (max-width: 599px) { .customer-facing .Dialog > .cell > .guts > .header, .customer-facing .CommonDialog > .cell > .guts > .header { padding: 10px 50px 0 10px; } } .customer-facing .Dialog > .cell > .guts > .header > h3, .customer-facing .CommonDialog > .cell > .guts > .header > h3 { font-size: 24px; line-height: 1.4; margin: 0; } .customer-facing .Dialog > .cell > .guts > .header .icon, .customer-facing .CommonDialog > .cell > .guts > .header .icon { margin-right: 5px; } .customer-facing .Dialog > .cell > .guts > .content, .customer-facing .CommonDialog > .cell > .guts > .content { font-size: 16px; color: #000000; padding: 20px; } @media screen and (max-width: 599px) { .customer-facing .Dialog > .cell > .guts > .content, .customer-facing .CommonDialog > .cell > .guts > .content { padding: 10px; } } .customer-facing .Dialog > .cell > .guts > .footer, .customer-facing .CommonDialog > .cell > .guts > .footer { border-top: 1px solid #e2e2e2; background-color: #f5f5f5; -webkit-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -ms-border-radius: 0 0 4px 4px; -o-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; padding: 20px; } @media screen and (max-width: 599px) { .customer-facing .Dialog > .cell > .guts > .footer, .customer-facing .CommonDialog > .cell > .guts > .footer { padding: 10px; } } .customer-facing .Dialog > .cell > .guts > .footer .icon, .customer-facing .CommonDialog > .cell > .guts > .footer .icon { margin-right: 10px; } .customer-facing .Dialog > .cell > .guts > .footer .text, .customer-facing .CommonDialog > .cell > .guts > .footer .text { margin-left: 21px; } .customer-facing .Dialog > .cell > .guts .actions, .customer-facing .CommonDialog > .cell > .guts .actions { padding-top: 15px; } .customer-facing .Dialog > .cell > .guts .actions .action, .customer-facing .CommonDialog > .cell > .guts .actions .action { margin-left: 10px; } /* Specific exception: Allow a user to specify that a specific Dialog shouldn't add padding to its content */ .Dialog.padding-none > .cell > .guts > .content, .CommonDialog.padding-none > .cell > .guts > .content { padding: 0px; } #body_wrapper.fixedBackground { position: fixed; width: 100%; height: 100%; } #header.fixedHeader { position: fixed; } .customer-facing #body_wrapper.hideHeaderBar { background-color: #ffffff; } .DialogUnderlay { background: #333333 !important; opacity: 0.3; } .DialogUnderlay.fixed { position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; } .DialogUnderlay .dijitDialogUnderlay { width: 100%; height: 100%; opacity: 0; } .customer-facing div.dialog.OldDialog { display: table; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; } .customer-facing div.dialog.OldDialog > .cell { display: table-cell; vertical-align: middle; } .customer-facing div.dialog.OldDialog div.guts { background: #999999; padding: 2px; display: inline-block; zoom: 1; *display: inline; -webkit-border-radius: 4px; -khtml-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .customer-facing div.dialog.OldDialog div.guts div.header h3 { color: white; min-height: 14px; font-size: 14px; padding: 6px 10px; margin: 0; font-weight: bold; } .customer-facing div.dialog.OldDialog button.close { background: url('../../common/elements/../../../../userLists/lightbox_close_x.png') no-repeat scroll 0 0 transparent; background-position: center; outline: 0; /* get rid of tab-focus outline */ position: relative; top: 2px; right: 2px; height: 20px; width: 20px; float: right; } .customer-facing div.dialog.OldDialog div.content { margin: 0; padding: 0; max-width: 900px; background: #e2e2e2; border-radius: 0 0 2px 2px; } .customer-facing div.dialog.OldDialog.flexable > div.content { max-width: none; } .customer-facing div.dialog.OldDialog.unfixed { overflow: hidden; position: absolute; } .customer-facing div.dialog.OldDialog.smoothPositioning { -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; -ms-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: left, right, top, bottom; -moz-transition-property: left, right, top, bottom; -ms-transition-property: left, right, top, bottom; -o-transition-property: left, right, top, bottom; transition-property: left, right, top, bottom; } .customer-facing div.dialog.OldDialog .PinToWidget { color: #585858; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .field.Email > .input { cursor: text; } .field.Email > .input input { -webkit-appearance: none; } .field.Email.disabled > .input { cursor: default; } /* CUSTOMER FACING STYLES */ .customer-facing .field.Email { /* Hint Styles */ /* Dijit Overrides, .dijitTextBox, .dijitTextBoxFocused */ } .customer-facing .field.Email > .input span.dijitPlaceHolder { color: #999999; } .customer-facing .field.Email input, .customer-facing .field.Email .dijitTextBox, .customer-facing .field.Email .dijitTextBoxFocused { outline: none; border: none; margin: 0px !important; padding: 0px !important; background-image: none; background-color: transparent; } .customer-facing .field.Email .dijitValidationContainer { display: none; } /* AGENT TOOLS STYLES */.agent-tools .field-Email > span.input span.dijitPlaceHolder { color: #999999; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .MemberCard { border: 1px solid #cccccc; background: white; max-width: 540px; margin-bottom: 20px; position: relative; } .MemberCard.editMode { border: 1px solid #0c82a5; } .MemberCard .imageWrap, .MemberCard .displayWrap, .MemberCard .editButton, .MemberCard .cancelButton { display: table-cell; vertical-align: middle; } .MemberCard .defaultUserImage { height: 47px; width: 47px; display: inline-block; background-image: url('../../../../sharedSearch/profile_picture.png'); } .MemberCard .imageWrap { padding: 15px 15px 12px 17px; } .MemberCard .displayWrap { font-size: 16px; font-size: 1rem; width: 75%; padding: 0 10px 0 0; } .MemberCard .displayWrap .displayNode { word-break: break-all; } .MemberCard .displayWrap .statusNode { font-size: 15px; font-size: 0.9375rem; color: #a9a9a9; margin-top: 4px; } .MemberCard .editButton, .MemberCard .cancelButton { font-size: 17px; font-size: 1.0625rem; min-width: 70px; text-align: right; padding-right: 30px; text-decoration: none; } .MemberCard .editContainerNode { border-top: 1px solid #f5f5f5; height: 0; } .MemberCard .editOptions .editOption { display: inline-block; width: 32.5%; font-size: 17px; font-size: 1.0625rem; text-align: center; padding: 14px 0; } .MemberCard .editOptions .editTitle { display: inline-block; vertical-align: middle; text-decoration: none; } .MemberCard .editOptions .resendButton, .MemberCard .editOptions .removeButton { border-left: 1px solid #f5f5f5; } .MemberCard.member .editOptions .editOption { width: 49%; } .MemberCard .roleOptions { padding: 14px 20px 20px 25px; } .MemberCard .roleOptions .role { display: inline-block; width: 32.6%; font-size: 16px; font-size: 1rem; } .MemberCard .roleOptions .select { border-radius: 50%; width: 25px; height: 25px; border: 2px solid #f5f5f5; display: inline-block; } .MemberCard .roleOptions .select.current { width: 15px; height: 15px; border: 7px solid #fa7b20; } .MemberCard .roleOptions .roleTitle { display: inline-block; vertical-align: middle; padding: 0 0 20px 7px; } .MemberCard .roleOptions .agentRole, .MemberCard .roleOptions .friendRole { text-align: center; } .MemberCard .roleOptions .saveButton .Button { width: 100px; } .MemberCard .confirmationMask { position: absolute; top: 0; width: 100%; height: 100%; text-align: center; background: #f5f5f5; background: rgba(245, 245, 245, 0.9); filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f5f5f5,endColorstr=#f2f5f5f5)'; outline: 1px solid rgba(245, 245, 245, 0.9); } .MemberCard .confirmationMask .confirmMessageNode { font-size: 16px; margin: 25px 10px 20px 10px; } .MemberCard .confirmationMask .noButton, .MemberCard .confirmationMask .yesButton { display: inline-block; width: 90px; } .MemberCard .confirmationMask .noButton .Button, .MemberCard .confirmationMask .yesButton .Button { width: 85px; } .MemberCard.small .editOptions .editOption, .MemberCard.small .role { display: block; width: auto; text-align: left; } .MemberCard.small .editOption { padding: 10px 20px; text-align: center !important; } .MemberCard.small .resendButton, .MemberCard.small .removeButton { border-top: 1px solid #f5f5f5; } .MemberCard.success .statusNode { color: #bbcc39; } .MemberCard.success .statusNode .successIcon { height: 11px; width: 13px; display: inline-block; background-image: url('../../../../sharedSearch/checkmark-green.png'); } .MemberCardConfirmation .header { padding: 0 !important; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .AddMemberForm .status-popup { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: fixed; top: 25px; left: 5px; right: 5px; margin-left: auto; margin-right: auto; z-index: 1000; text-align: center; font-size: 14px; max-height: 400px; opacity: 1; overflow: visible; /* animations */ -webkit-transition: max-height 0.4s, top 0.4s, opacity 0.4s; -moz-transition: max-height 0.4s, top 0.4s, opacity 0.4s; -o-transition: max-height 0.4s, top 0.4s, opacity 0.4s; transition: max-height 0.4s, top 0.4s, opacity 0.4s; } .AddMemberForm .status-popup.hidden { display: block !important; opacity: 0; top: 0; max-height: 0; overflow: hidden; } .AddMemberForm .status-popup.hidden { -webkit-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; -moz-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; -o-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; } .AddMemberForm .status-popup .status-popup-content { display: table; margin: 0 auto; padding: 10px 25px; max-width: 780px; min-width: 317px; background-color: white; border: 2px solid; border-radius: 5px; } .AddMemberForm .status-popup .status-popup-content .status-icon { display: table-cell; background-repeat: no-repeat; width: 25px; height: 25px; padding-right: 20px; } .AddMemberForm .status-popup .status-popup-content .status-message { display: table-cell; vertical-align: middle; text-align: left; } .AddMemberForm .success-status .status-popup-content { border-color: #bbcc39; } .AddMemberForm .success-status .status-popup-content .status-icon { background-image: url('../../../../elements/success.png'); } .AddMemberForm .error-status .status-popup-content { border-color: #FF0008; } .AddMemberForm .error-status .status-popup-content .status-icon { background-image: url('../../../../elements/error.png'); } .AddMemberForm .error-status .status-popup-content .status-close { display: table-cell; background-image: url('../../../../elements/closex.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: 35px 5px; width: 15px; padding-left: 35px; cursor: pointer; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .AddMemberFormBig { position: relative; width: 100%; max-width: 660px; } .AddMemberFormBig .tabContainer { margin-bottom: 5px; max-width: 550px; } .AddMemberFormBig .tabContainer a.tabNode { width: 32%; font-size: 18px; font-size: 1.125rem; display: inline-block; text-align: center; font-weight: normal; text-decoration: none; padding: 5px 0; } .AddMemberFormBig .tabContainer a.tabNode.current { font-weight: bold; color: #333333; text-decoration: none; position: relative; } .AddMemberFormBig .tabContainer a.tabNode.current:after { content: ''; width: 94px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: -5px; border-width: 0 0 4px; border-style: solid; } .AddMemberFormBig .contentContainer { background: #f5f5f5; padding: 30px 40px 40px 30px; position: relative; /** for the loading spinner */ } .AddMemberFormBig .contentContainer .loading { height: 1px; margin-top: 50px; position: absolute; left: 50%; } .AddMemberFormBig .contentContainer .inviteFormMask { display: block; height: 92px; text-align: center; max-width: 538px; border: 3px dashed #cccccc; padding: 33px 0; font-size: 16px; box-sizing: border-box; -moz-box-sizing: border-box; text-decoration: none; } .AddMemberFormBig .contentContainer .inviteFormNode { width: 450px; height: 92px; } .AddMemberFormBig .contentContainer .inviteFormNode .emailInput { float: left; margin-right: 10px; } .AddMemberFormBig .contentContainer .inviteFormNode .emailInput .field.Email { width: 309px; } .AddMemberFormBig .contentContainer .inviteFormNode .submitButton { padding-top: 10px; margin-top: 33px; } .AddMemberFormBig .contentContainer .introContainer { padding-top: 25px; font-size: 16px; font-size: 1rem; } .AddMemberFormBig .contentContainer .introContainer .introHeader { font-weight: bold; margin: 0 0 10px 30px; } .AddMemberFormBig .contentContainer .introContainer ul { list-style-type: none; padding: 0px; margin: 0px; } .AddMemberFormBig .contentContainer .introContainer ul li { background-image: url('../../../../sharedSearch/checkmark.png'); background-repeat: no-repeat; background-position: 0px center; padding-left: 30px; line-height: 1.5rem; } .AddMemberFormBig.narrow .contentContainer { padding: 20px; } .AddMemberFormBig.narrow .introContainer { width: 95%; padding-bottom: 40px; } .AddMemberFormBig.narrow .inviteFormNode { width: 100%; height: auto; margin-bottom: 20px; } .AddMemberFormBig.narrow .inviteFormNode .emailInput { float: none; margin: 0; height: 92px; } .AddMemberFormBig.narrow .inviteFormNode .emailInput .field.Email { width: 100%; max-width: 450px; } .AddMemberFormBig.narrow .inviteFormNode .submitButton { margin-top: 5px; width: 100%; max-width: 450px; } .AddMemberFormBig.wide .introContainer { width: 450px; } /** styles only applied to popup **/ .AddMemberDialog { /** To make the responsive widget work, we need to give the parent container a max-width */ } .AddMemberDialog .content.CommonDialogSingleChild { padding: 20px 0 0 !important; } .AddMemberDialog .memberListNode { max-width: 450px; } .AddMemberDialog .guts { max-width: 95%; } @media (max-width: 599px) { .AddMemberDialog .guts { width: 95%; } } .AddMemberDialog .cell > .guts > .header > h3 { font-weight: normal; text-align: center; } /** styles only applied to Manage Groups page **/ .ManageGroups .AddMemberForm .tabContainer a.tabNode { text-align: left; } .ManageGroups .AddMemberForm .tabContainer a.tabNode.agentTab { padding-left: 3px; } .ManageGroups .AddMemberForm .tabContainer a.tabNode.current:after { margin-left: 0; margin-right: 0; } .ManageGroups .AddMemberForm .tabContainer a.tabNode.cobuyerTab.current:after { width: 84px; } .ManageGroups .AddMemberForm .tabContainer a.tabNode.agentTab.current:after { width: 58px; } .ManageGroups .AddMemberForm .tabContainer a.tabNode.friendTab.current:after { width: 67px; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ /** Global Button Styles. Notes: - A lot of buttons contain icons so there is a class associated with the button called "icon" which will put an automatic margin of 5px on the left of the button since it's assumed that the icons are positioned on the right. - Seems to be an issue with inline elements and having sprites inside, meaning it doens't respect the height correctly. Setting the parent element (the a link) to have inline-block seems to fix the problem (forces it to be an inline-block). */ .customer-facing .Button.tertiary, .customer-facing .basic-button.tertiary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #333333; background-color: #333333; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { cursor: default; } .customer-facing .Button.tertiary:link, .customer-facing .basic-button.tertiary:link, .customer-facing .Button.tertiary:visited, .customer-facing .basic-button.tertiary:visited { color: #ffffff; } .customer-facing .Button.tertiary:hover, .customer-facing .basic-button.tertiary:hover, .customer-facing .Button.tertiary.hover, .customer-facing .basic-button.tertiary.hover { color: #ffffff; border-color: #1a1a1a; background: #1a1a1a; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.tertiary.unhoverable:hover, .customer-facing .basic-button.tertiary.unhoverable:hover, .customer-facing .Button.tertiary.unhoverable.hover, .customer-facing .basic-button.tertiary.unhoverable.hover { background: #333333; } .customer-facing .Button.tertiary.disabled, .customer-facing .basic-button.tertiary.disabled, .customer-facing .Button.tertiary.disabled:hover, .customer-facing .basic-button.tertiary.disabled:hover, .customer-facing .Button.tertiary.disabled.hover, .customer-facing .basic-button.tertiary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.tertiary.transparent, .customer-facing .basic-button.tertiary.transparent { background-color: transparent; } .customer-facing .Button.secondary, .customer-facing .basic-button.secondary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #fa7b20; background-color: #fa7b20; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { cursor: default; } .customer-facing .Button.secondary:link, .customer-facing .basic-button.secondary:link, .customer-facing .Button.secondary:visited, .customer-facing .basic-button.secondary:visited { color: #ffffff; } .customer-facing .Button.secondary:hover, .customer-facing .basic-button.secondary:hover, .customer-facing .Button.secondary.hover, .customer-facing .basic-button.secondary.hover { color: #ffffff; border-color: #e26105; background: #e26105; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.secondary.unhoverable:hover, .customer-facing .basic-button.secondary.unhoverable:hover, .customer-facing .Button.secondary.unhoverable.hover, .customer-facing .basic-button.secondary.unhoverable.hover { background: #fa7b20; } .customer-facing .Button.secondary.disabled, .customer-facing .basic-button.secondary.disabled, .customer-facing .Button.secondary.disabled:hover, .customer-facing .basic-button.secondary.disabled:hover, .customer-facing .Button.secondary.disabled.hover, .customer-facing .basic-button.secondary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.secondary:hover, .customer-facing .basic-button.secondary:hover { background-color: #ff852e; } .customer-facing .Button.secondary.transparent, .customer-facing .basic-button.secondary.transparent { background-color: transparent; } .customer-facing .Button.primary, .customer-facing .basic-button.primary { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #a02021; background-color: #a02021; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { cursor: default; } .customer-facing .Button.primary:link, .customer-facing .basic-button.primary:link, .customer-facing .Button.primary:visited, .customer-facing .basic-button.primary:visited { color: #ffffff; } .customer-facing .Button.primary:hover, .customer-facing .basic-button.primary:hover, .customer-facing .Button.primary.hover, .customer-facing .basic-button.primary.hover { color: #ffffff; border-color: #761818; background: #761818; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.primary.unhoverable:hover, .customer-facing .basic-button.primary.unhoverable:hover, .customer-facing .Button.primary.unhoverable.hover, .customer-facing .basic-button.primary.unhoverable.hover { background: #a02021; } .customer-facing .Button.primary.disabled, .customer-facing .basic-button.primary.disabled, .customer-facing .Button.primary.disabled:hover, .customer-facing .basic-button.primary.disabled:hover, .customer-facing .Button.primary.disabled.hover, .customer-facing .basic-button.primary.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.primary:hover, .customer-facing .basic-button.primary:hover { background-color: #d32c2e; } .customer-facing .Button.primary.transparent, .customer-facing .basic-button.primary.transparent { background-color: transparent; } .customer-facing .Button.transparent, .customer-facing .basic-button.transparent { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #0c82a5; background-color: rgba(0, 0, 0, 0); color: #0c82a5; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; border-width: 1px; border-style: solid; border-color: currentcolor; font-weight: normal; } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { cursor: default; } .customer-facing .Button.transparent:link, .customer-facing .basic-button.transparent:link, .customer-facing .Button.transparent:visited, .customer-facing .basic-button.transparent:visited { color: #0c82a5; } .customer-facing .Button.transparent:hover, .customer-facing .basic-button.transparent:hover, .customer-facing .Button.transparent.hover, .customer-facing .basic-button.transparent.hover { color: #0c82a5; border-color: #095d75; background: rgba(0, 0, 0, 0); } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.transparent.unhoverable:hover, .customer-facing .basic-button.transparent.unhoverable:hover, .customer-facing .Button.transparent.unhoverable.hover, .customer-facing .basic-button.transparent.unhoverable.hover { background: rgba(0, 0, 0, 0); } .customer-facing .Button.transparent:hover, .customer-facing .basic-button.transparent:hover { border-color: currentcolor; border-width: 2px; margin: -1px; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .Button.transparent.disabled, .customer-facing .basic-button.transparent.disabled, .customer-facing .Button.transparent.disabled:hover, .customer-facing .basic-button.transparent.disabled:hover, .customer-facing .Button.transparent.disabled.hover, .customer-facing .basic-button.transparent.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .Button.templated-button, .customer-facing .basic-button.templated-button { position: relative; } .customer-facing .Button.templated-button .hiddenSubmitInput, .customer-facing .basic-button.templated-button .hiddenSubmitInput { position: absolute; z-index: -50; top: 0px; width: 1px; height: 1px; } .customer-facing .Button.templated-button .hiddenSubmitInput input, .customer-facing .basic-button.templated-button .hiddenSubmitInput input { z-index: -10; border: none; width: 0px; height: 0px; position: relative; height: 7px; } .customer-facing .Button .icon, .customer-facing .basic-button .icon { display: inline-block; vertical-align: top; } .customer-facing .Button.small, .customer-facing .basic-button.small { font-size: 12px; line-height: 16px; padding: 5px 11px 3px 11px; } .customer-facing .Button.small .icon, .customer-facing .basic-button.small .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.med, .customer-facing .basic-button.med, .customer-facing .Button.medium, .customer-facing .basic-button.medium { font-size: 12px; line-height: 16px; padding: 8px 11px 6px 11px; } .customer-facing .Button.med .icon, .customer-facing .basic-button.med .icon, .customer-facing .Button.medium .icon, .customer-facing .basic-button.medium .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.large, .customer-facing .basic-button.large { font-size: 14px; line-height: 18px; padding: 10px 12px 8px 12px; } .customer-facing .Button.large .icon, .customer-facing .basic-button.large .icon { margin: 1px 0 1px 5px; } .customer-facing .Button.xlarge, .customer-facing .basic-button.xlarge { font-size: 14px; line-height: 22px; padding: 10px 16px 8px 16px; } .customer-facing .Button.pad-right, .customer-facing .basic-button.pad-right { margin-right: 5px; } .customer-facing .Button.pad-left, .customer-facing .basic-button.pad-left { margin-left: 5px; } .customer-facing .Button .icon, .customer-facing .basic-button .icon { padding: 0; } .customer-facing .Button .icon.left, .customer-facing .basic-button .icon.left { /* hack allows us to put left aligned icons on old style React buttons */ margin: 1px 5px 1px 0 !important; } .customer-facing .Button::-moz-focus-inner, .customer-facing .basic-button::-moz-focus-inner { border: 0; } .customer-facing input[type=submit].Button { -webkit-appearance: none; } .customer-facing .basic-button-light { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #f5f5f5; background-color: #f5f5f5; color: #585858; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { cursor: default; } .customer-facing .basic-button-light:link, .customer-facing .basic-button-light:visited { color: #585858; } .customer-facing .basic-button-light:hover, .customer-facing .basic-button-light.hover { color: #585858; border-color: #dcdcdc; background: #dcdcdc; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-light.unhoverable:hover, .customer-facing .basic-button-light.unhoverable.hover { background: #f5f5f5; } .customer-facing .basic-button-light.disabled, .customer-facing .basic-button-light.disabled:hover, .customer-facing .basic-button-light.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-light.selected { background-color: #e2e2e2; border-color: #c9c9c9; } .customer-facing .basic-button-light.selected:hover { background-color: #e2e2e2; border-color: #c9c9c9; } .customer-facing .basic-button-light.selected:active { border-top: none; border-bottom-width: 2px; } .customer-facing .basic-button-overlay { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #333333; background-color: #333333; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { cursor: default; } .customer-facing .basic-button-overlay:link, .customer-facing .basic-button-overlay:visited { color: #ffffff; } .customer-facing .basic-button-overlay:hover, .customer-facing .basic-button-overlay.hover { color: #ffffff; border-color: #1a1a1a; background: #1a1a1a; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-overlay.unhoverable:hover, .customer-facing .basic-button-overlay.unhoverable.hover { background: #333333; } .customer-facing .basic-button-overlay.disabled, .customer-facing .basic-button-overlay.disabled:hover, .customer-facing .basic-button-overlay.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-overlay.disabled { border: 1px solid #202024; background: #313942; background: -webkit-linear-gradient(top, #313942, #161314); background: -moz-linear-gradient(top, #313942, #161314); background: -o-linear-gradient(top, #313942, #161314); background: -ms-linear-gradient(top, #313942, #161314); background: linear-gradient(top, #313942, #161314); color: #a5a5a5; } .customer-facing .fb_button { background: #5F78AB; background-image: url('../../common/elements/../../../../sprites/fb_icons_sprite.png'); /*COPY TO YOUR OWN IMAGE STORE*/ background-repeat: no-repeat; background-position: -1px -81px; border-top: 1px solid #29447E; border-right: 1px solid #29447E; border-bottom: 1px solid #1A356E; border-left: 1px solid #29447E; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; cursor: pointer; color: #FFF; display: inline-block; text-decoration: none; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; font-weight: bold; height: 23px; line-height: 23px; padding: 0px 5px 0px 30px; text-align: left; } .customer-facing .basic-button-blue { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #637592; background-color: #637592; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { cursor: default; } .customer-facing .basic-button-blue:link, .customer-facing .basic-button-blue:visited { color: #ffffff; } .customer-facing .basic-button-blue:hover, .customer-facing .basic-button-blue.hover { color: #ffffff; border-color: #4e5d74; background: #4e5d74; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-blue.unhoverable:hover, .customer-facing .basic-button-blue.unhoverable.hover { background: #637592; } .customer-facing .basic-button-blue.disabled, .customer-facing .basic-button-blue.disabled:hover, .customer-facing .basic-button-blue.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-black { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #989a9b; background-color: #989a9b; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { cursor: default; } .customer-facing .basic-button-black:link, .customer-facing .basic-button-black:visited { color: #ffffff; } .customer-facing .basic-button-black:hover, .customer-facing .basic-button-black.hover { color: #ffffff; border-color: #7e8182; background: #7e8182; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-black.unhoverable:hover, .customer-facing .basic-button-black.unhoverable.hover { background: #989a9b; } .customer-facing .basic-button-black.disabled, .customer-facing .basic-button-black.disabled:hover, .customer-facing .basic-button-black.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-orange { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #df611a; background-color: #df611a; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { cursor: default; } .customer-facing .basic-button-orange:link, .customer-facing .basic-button-orange:visited { color: #ffffff; } .customer-facing .basic-button-orange:hover, .customer-facing .basic-button-orange.hover { color: #ffffff; border-color: #b14d15; background: #b14d15; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-orange.unhoverable:hover, .customer-facing .basic-button-orange.unhoverable.hover { background: #df611a; } .customer-facing .basic-button-orange.disabled, .customer-facing .basic-button-orange.disabled:hover, .customer-facing .basic-button-orange.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-red { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #cd1800; background-color: #cd1800; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { cursor: default; } .customer-facing .basic-button-red:link, .customer-facing .basic-button-red:visited { color: #ffffff; } .customer-facing .basic-button-red:hover, .customer-facing .basic-button-red.hover { color: #ffffff; border-color: #9a1200; background: #9a1200; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-red.unhoverable:hover, .customer-facing .basic-button-red.unhoverable.hover { background: #cd1800; } .customer-facing .basic-button-red.disabled, .customer-facing .basic-button-red.disabled:hover, .customer-facing .basic-button-red.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-yellow { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #feab21; background-color: #feab21; color: #ffffff; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { cursor: default; } .customer-facing .basic-button-yellow:link, .customer-facing .basic-button-yellow:visited { color: #ffffff; } .customer-facing .basic-button-yellow:hover, .customer-facing .basic-button-yellow.hover { color: #ffffff; border-color: #eb9301; background: #eb9301; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-yellow.unhoverable:hover, .customer-facing .basic-button-yellow.unhoverable.hover { background: #feab21; } .customer-facing .basic-button-yellow.disabled, .customer-facing .basic-button-yellow.disabled:hover, .customer-facing .basic-button-yellow.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-gray { display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border-color: #fefefe; background-color: #fefefe; color: #585858; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; border: 0 none; font-weight: bold; -webkit-font-smoothing: antialiased; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { cursor: default; } .customer-facing .basic-button-gray:link, .customer-facing .basic-button-gray:visited { color: #585858; } .customer-facing .basic-button-gray:hover, .customer-facing .basic-button-gray.hover { color: #585858; border-color: #e5e5e5; background: #e5e5e5; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { background-color: #f5f5f5 !important; color: #999 !important; border: 1px solid #999999 !important; -moz-box-shadow: inset 0 0 0 0px transparent; -webkit-box-shadow: inset 0 0 0 0px transparent; -o-box-shadow: inset 0 0 0 0px transparent; box-shadow: inset 0 0 0 0px transparent; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing .basic-button-gray.unhoverable:hover, .customer-facing .basic-button-gray.unhoverable.hover { background: #fefefe; } .customer-facing .basic-button-gray.disabled, .customer-facing .basic-button-gray.disabled:hover, .customer-facing .basic-button-gray.disabled.hover { text-shadow: none !important; font-weight: normal; } .customer-facing .basic-button-gray:hover, .customer-facing .basic-button-gray.hover { color: #FFFFFF; } .agent-tools .Button, .agent-tools .button { border-width: 1px; border-style: solid; font-size: 12px; line-height: 22px; padding-left: 1.5rem; border-radius: 2px; display: -moz-inline-box; display: inline-block; vertical-align: top; zoom: 1; *display: inline; text-align: center; vertical-align: middle; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; -ms-user-select: none; -webkit-touch-callout: none; } .agent-tools .Button.disabled, .agent-tools .button.disabled, .agent-tools .Button.disabled:hover, .agent-tools .button.disabled:hover, .agent-tools .Button.disabled.hover, .agent-tools .button.disabled.hover { cursor: default; } .agent-tools .Button .icon, .agent-tools .button .icon { margin: 1px 0 1px 5px; } .agent-tools .Button *, .agent-tools .button * { white-space: nowrap; } .agent-tools .Button:not(.split), .agent-tools .button:not(.split) { overflow: hidden; padding-right: 1.5rem; } .agent-tools .Button.split, .agent-tools .button.split { padding-right: 3rem; position: relative; overflow: visible; } .agent-tools .Button.split > .arrow, .agent-tools .button.split > .arrow { display: inline-block; float: right; margin-left: 1.5rem; line-height: inherit; width: 1.6rem; border: 1px solid; position: absolute; top: -1px; right: -1px; bottom: -1px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } .agent-tools .Button.split > .arrow svg, .agent-tools .button.split > .arrow svg { width: 1rem; position: relative; top: 3px; } .agent-tools .Button.split > .arrow svg path, .agent-tools .button.split > .arrow svg path { fill: #464646; } .agent-tools .Button.split > .Flyout, .agent-tools .button.split > .Flyout { position: absolute; bottom: 0; left: 0; width: 100%; } .agent-tools .Button.split > .Flyout > .flyout, .agent-tools .button.split > .Flyout > .flyout { width: 100%; } .agent-tools .Button.split > .Flyout .container, .agent-tools .button.split > .Flyout .container { background-color: white; border: 1px solid #eaeaea; } .agent-tools .Button.split > .Flyout .container ul, .agent-tools .button.split > .Flyout .container ul, .agent-tools .Button.split > .Flyout .container li, .agent-tools .button.split > .Flyout .container li { list-style-type: none; text-align: left; line-height: 1.5em; } .agent-tools .Button.split > .Flyout .container li, .agent-tools .button.split > .Flyout .container li { overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; box-sizing: border-box; padding: 2.5px 5px 2.5px 5px; } .agent-tools .Button.split > .Flyout .container li:first-child, .agent-tools .button.split > .Flyout .container li:first-child { padding-top: 5px; } .agent-tools .Button:focus, .agent-tools .button:focus { outline: none; } .agent-tools .Button:not(.secondary), .agent-tools .button:not(.secondary) { border-color: #1e79b2; background-color: #1e79b2; color: #fff; } .agent-tools .Button:not(.secondary):hover, .agent-tools .button:not(.secondary):hover, .agent-tools .Button:not(.secondary).hover, .agent-tools .button:not(.secondary).hover { border-color: #175b86; background: #175b86; } .agent-tools .Button.secondary, .agent-tools .button.secondary { border-color: #eaeaea; background-color: #f7f7f7; color: #464646; } .agent-tools .Button.secondary:not(.split) .agent-tools .Button.secondary:hover, .agent-tools .Button.secondary:not(.split) .agent-tools .button.secondary:hover, .agent-tools .button.secondary:not(.split) .agent-tools .Button.secondary:hover, .agent-tools .button.secondary:not(.split) .agent-tools .button.secondary:hover, .agent-tools .Button.secondary.hover-label, .agent-tools .button.secondary.hover-label, .agent-tools .Button.secondary.hover, .agent-tools .button.secondary.hover, .agent-tools .Button.secondary li:hover, .agent-tools .button.secondary li:hover { color: #464646; border-color: #dedede; background: #d1d1d1; } .agent-tools .Button.secondary.split > .arrow, .agent-tools .button.secondary.split > .arrow { border-color: #eaeaea; background-color: #f7f7f7; } .agent-tools .Button.secondary.split > .arrow:hover, .agent-tools .button.secondary.split > .arrow:hover { background: #d1d1d1; } .agent-tools .Button.disabled, .agent-tools .button.disabled, .agent-tools .Button.disabled:hover, .agent-tools .button.disabled:hover, .agent-tools .Button.disabled.hover, .agent-tools .button.disabled.hover { background-color: #fafafa; border-color: #ededed; color: #c6c6c6; } /* Utility Functions */ /* New UI Kit button styling below, added 8-7-2015 * "buttonsV2" class on body lets us opt into new buttons at the page-level * "flat" class on button lets us opt in at the individual button level * When ready to retire old buttons, should be able to just remove everything * above here and make this styling apply to buttons across all pages */ .customer-facing.buttonsV2 .Button, .customer-facing:not(.buttonsV2) .Button.flat { box-shadow: none; display: inline-block; border: 1px solid #0c82a5; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 1; height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; padding: 12px 1.5rem; color: #0c82a5; background-color: transparent; /* variants */ /* end variants */ /* Sizes * Use the default size for forms and most other contexts */ /* End Sizes */ /* button utility classes * modifiers change button styling, while keeping some consistency */ } .customer-facing.buttonsV2 .Button:focus, .customer-facing:not(.buttonsV2) .Button.flat:focus { outline: none; } .customer-facing.buttonsV2 .Button *, .customer-facing:not(.buttonsV2) .Button.flat * { font-size: 1rem; display: inline-block; height: 16px; } .customer-facing.buttonsV2 .Button span, .customer-facing:not(.buttonsV2) .Button.flat span { vertical-align: top; } .customer-facing.buttonsV2 .Button + .Button, .customer-facing:not(.buttonsV2) .Button.flat + .Button { /* when multiple buttons in sequence, add margin to all but the first */ margin-left: 1rem; } .customer-facing.buttonsV2 .Button .icon, .customer-facing:not(.buttonsV2) .Button.flat .icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV2 .Button .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat .icon.with-text { margin-left: -6px; margin-right: 10px; /* put space between icon and text */ } .customer-facing.buttonsV2 .Button .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV2 .Button .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV2 .Button .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon.with-text { margin-top: -3px; margin-right: 8px; margin-left: -6px; } .customer-facing.buttonsV2 .Button .svg-icon.with-text .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat .svg-icon.with-text .rfSvg { width: 18px; height: 18px; } .customer-facing.buttonsV2 .Button:hover, .customer-facing:not(.buttonsV2) .Button.flat:hover { color: #FFFFFF; box-shadow: none; background-color: #0c82a5; border-width: 1px; } .customer-facing.buttonsV2 .Button:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.brand, .customer-facing:not(.buttonsV2) .Button.flat.brand { color: #a02021; border-color: #a02021; } .customer-facing.buttonsV2 .Button.brand .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.brand .svg-icon .rfSvg { fill: #a02021; } .customer-facing.buttonsV2 .Button.brand:hover, .customer-facing:not(.buttonsV2) .Button.flat.brand:hover { color: #FFFFFF; background-color: #a02021; } .customer-facing.buttonsV2 .Button.brand:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.brand:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.plain, .customer-facing:not(.buttonsV2) .Button.flat.plain { color: #333333; border-color: #333333; } .customer-facing.buttonsV2 .Button.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.plain .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV2 .Button.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.plain:hover { color: #FFFFFF; background-color: #333333; } .customer-facing.buttonsV2 .Button.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.plain:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.call-out, .customer-facing:not(.buttonsV2) .Button.flat.call-out { color: #fa7b20; border-color: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.call-out .svg-icon .rfSvg { fill: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out:hover, .customer-facing:not(.buttonsV2) .Button.flat.call-out:hover { color: #FFFFFF; background-color: #fa7b20; } .customer-facing.buttonsV2 .Button.call-out:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.call-out:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button:disabled, .customer-facing:not(.buttonsV2) .Button.flat:disabled, .customer-facing.buttonsV2 .Button.disabled, .customer-facing:not(.buttonsV2) .Button.flat.disabled, .customer-facing.buttonsV2 .Button.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.disabled:hover { cursor: default; color: #e2e2e2; background-color: transparent; border-color: #cccccc; } .customer-facing.buttonsV2 .Button:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.disabled:hover .svg-icon .rfSvg { fill: #cccccc; } .customer-facing.buttonsV2 .Button.primary, .customer-facing:not(.buttonsV2) .Button.flat.primary { color: #FFFFFF; background-color: #a02021; border-color: #a02021; } .customer-facing.buttonsV2 .Button.primary .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.primary:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary:hover { border-color: #d32c2e; background-color: #d32c2e; } .customer-facing.buttonsV2 .Button.primary.plain, .customer-facing:not(.buttonsV2) .Button.flat.primary.plain { background-color: #585858; border-color: #585858; } .customer-facing.buttonsV2 .Button.primary.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary.plain:hover { border-color: #333333; background-color: #333333; } .customer-facing.buttonsV2 .Button.primary:disabled, .customer-facing:not(.buttonsV2) .Button.flat.primary:disabled, .customer-facing.buttonsV2 .Button.primary.disabled, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled, .customer-facing.buttonsV2 .Button.primary.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled:hover { color: #f5f5f5 !important; background-color: #cccccc !important; border-color: #cccccc !important; } .customer-facing.buttonsV2 .Button.primary:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.primary.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.primary.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.primary.disabled:hover .svg-icon .rfSvg { fill: white; } .customer-facing.buttonsV2 .Button.text, .customer-facing:not(.buttonsV2) .Button.flat.text { /* makes a button look like a text link -- useful for icon+text buttons */ border-color: transparent; background-color: transparent; } .customer-facing.buttonsV2 .Button.text, .customer-facing:not(.buttonsV2) .Button.flat.text, .customer-facing.buttonsV2 .Button.text:visited, .customer-facing:not(.buttonsV2) .Button.flat.text:visited { color: #0c82a5; text-decoration: none; cursor: pointer; } .customer-facing.buttonsV2 .Button.text:hover, .customer-facing:not(.buttonsV2) .Button.flat.text:hover { color: #0c82a5; text-decoration: underline; } .customer-facing.buttonsV2 .Button.text.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled, .customer-facing.buttonsV2 .Button.text.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover { color: #e2e2e2; cursor: default; text-decoration: none; } .customer-facing.buttonsV2 .Button.text.unpadded, .customer-facing:not(.buttonsV2) .Button.flat.text.unpadded { padding: 0; } .customer-facing.buttonsV2 .Button.text.compact, .customer-facing:not(.buttonsV2) .Button.flat.text.compact, .customer-facing.buttonsV2 .Button.text.compact *, .customer-facing:not(.buttonsV2) .Button.flat.text.compact * { font-size: .875rem; } .customer-facing.buttonsV2 .Button.text:hover, .customer-facing:not(.buttonsV2) .Button.flat.text:hover { border-color: transparent; color: #0c82a5; background-color: transparent; } .customer-facing.buttonsV2 .Button.text:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text:hover .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV2 .Button.text:disabled, .customer-facing:not(.buttonsV2) .Button.flat.text:disabled, .customer-facing.buttonsV2 .Button.text.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled, .customer-facing.buttonsV2 .Button.text.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover { border-color: transparent; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV2 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.text.plain, .customer-facing:not(.buttonsV2) .Button.flat.text.plain { color: #585858; } .customer-facing.buttonsV2 .Button.text.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.plain:hover { color: #333333 !important; } .customer-facing.buttonsV2 .Button.text.plain:disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.plain:disabled, .customer-facing.buttonsV2 .Button.text.plain.disabled, .customer-facing:not(.buttonsV2) .Button.flat.text.plain.disabled, .customer-facing.buttonsV2 .Button.text.plain.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.text.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV2 .Button.icon, .customer-facing:not(.buttonsV2) .Button.flat.icon { /* button with icon only, or icon with text label underneath */ border: 0 none; background-color: transparent; color: #a02021; text-align: center; padding: .5rem; height: 60px; } .customer-facing.buttonsV2 .Button.icon span, .customer-facing:not(.buttonsV2) .Button.flat.icon span { margin-top: 7px; display: block; } .customer-facing.buttonsV2 .Button.icon, .customer-facing:not(.buttonsV2) .Button.flat.icon, .customer-facing.buttonsV2 .Button.icon *, .customer-facing:not(.buttonsV2) .Button.flat.icon * { font-size: .75rem; } .customer-facing.buttonsV2 .Button.icon .icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon { width: 24px; height: 24px; display: block; } .customer-facing.buttonsV2 .Button.icon .icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon, .customer-facing.buttonsV2 .Button.icon .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.icon .icon.with-text { margin: 0 auto; } .customer-facing.buttonsV2 .Button.icon .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .svg-icon, .customer-facing.buttonsV2 .Button.icon:hover .svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover .svg-icon, .customer-facing.buttonsV2 .Button.icon .with-text.svg-icon, .customer-facing:not(.buttonsV2) .Button.flat.icon .with-text.svg-icon { margin: 1px auto 0 auto; height: 24px; } .customer-facing.buttonsV2 .Button.icon .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon .with-text.svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon .with-text.svg-icon .rfSvg { width: 24px; height: 24px; fill: #a02021; } .customer-facing.buttonsV2 .Button.icon:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon:hover { border: 0 none; color: #d32c2e; text-decoration: none; background-color: transparent; } .customer-facing.buttonsV2 .Button.icon:disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon:disabled, .customer-facing.buttonsV2 .Button.icon.disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled, .customer-facing.buttonsV2 .Button.icon.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled:hover { border: 0 none; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV2 .Button.icon:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.icon.plain, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain { color: #585858; } .customer-facing.buttonsV2 .Button.icon.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV2 .Button.icon.plain:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:hover { color: #333333 !important; } .customer-facing.buttonsV2 .Button.icon.plain:disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:disabled, .customer-facing.buttonsV2 .Button.icon.plain.disabled, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled, .customer-facing.buttonsV2 .Button.icon.plain.disabled:hover, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV2 .Button.icon.plain:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain:disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled .svg-icon .rfSvg, .customer-facing.buttonsV2 .Button.icon.plain.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV2) .Button.flat.icon.plain.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV2 .Button.small, .customer-facing:not(.buttonsV2) .Button.flat.small, .customer-facing.buttonsV2 .Button.medium, .customer-facing:not(.buttonsV2) .Button.flat.medium, .customer-facing.buttonsV2 .Button.compact, .customer-facing:not(.buttonsV2) .Button.flat.compact { /* in a denser UI, compact buttons will fit better */ padding: 10px 1rem; height: 34px; } .customer-facing.buttonsV2 .Button.small, .customer-facing:not(.buttonsV2) .Button.flat.small, .customer-facing.buttonsV2 .Button.medium, .customer-facing:not(.buttonsV2) .Button.flat.medium, .customer-facing.buttonsV2 .Button.compact, .customer-facing:not(.buttonsV2) .Button.flat.compact, .customer-facing.buttonsV2 .Button.small *, .customer-facing:not(.buttonsV2) .Button.flat.small *, .customer-facing.buttonsV2 .Button.medium *, .customer-facing:not(.buttonsV2) .Button.flat.medium *, .customer-facing.buttonsV2 .Button.compact *, .customer-facing:not(.buttonsV2) .Button.flat.compact * { font-size: .875rem; } .customer-facing.buttonsV2 .Button.small *, .customer-facing:not(.buttonsV2) .Button.flat.small *, .customer-facing.buttonsV2 .Button.medium *, .customer-facing:not(.buttonsV2) .Button.flat.medium *, .customer-facing.buttonsV2 .Button.compact *, .customer-facing:not(.buttonsV2) .Button.flat.compact * { height: .875rem; } .customer-facing.buttonsV2 .Button.small .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.small .icon.with-text, .customer-facing.buttonsV2 .Button.medium .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.medium .icon.with-text, .customer-facing.buttonsV2 .Button.compact .icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.compact .icon.with-text { margin-right: 6px; margin-left: -4px; } .customer-facing.buttonsV2 .Button.small .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.small .svg-icon.with-text, .customer-facing.buttonsV2 .Button.medium .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.medium .svg-icon.with-text, .customer-facing.buttonsV2 .Button.compact .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.compact .svg-icon.with-text { margin-top: -3px; margin-right: 6px; } .customer-facing.buttonsV2 .Button.large, .customer-facing:not(.buttonsV2) .Button.flat.large { /* for use in large-font marketing pages */ padding: 15px 1.875rem; height: 50px; } .customer-facing.buttonsV2 .Button.large *, .customer-facing:not(.buttonsV2) .Button.flat.large * { font-size: 1.125rem; } .customer-facing.buttonsV2 .Button.large .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.large .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV2 .Button.hero, .customer-facing:not(.buttonsV2) .Button.flat.hero { /* Special case for homepage larger font, more horizontal padding */ padding: 16px 1.875rem; height: 50px; } .customer-facing.buttonsV2 .Button.hero *, .customer-facing:not(.buttonsV2) .Button.flat.hero * { font-size: 1.125rem; } .customer-facing.buttonsV2 .Button.hero .svg-icon.with-text, .customer-facing:not(.buttonsV2) .Button.flat.hero .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV2 .Button.narrow, .customer-facing:not(.buttonsV2) .Button.flat.narrow { padding-left: 1rem; padding-right: 1rem; } .customer-facing.buttonsV2 .Button.narrow.compact, .customer-facing:not(.buttonsV2) .Button.flat.narrow.compact { padding-left: .625rem; padding-right: .625rem; } /* Fledgling UI-Kit V3 "chrome" buttons */ .customer-facing.buttonsV3 .Button, .customer-facing:not(.buttonsV3) .Button.v3 { box-shadow: none; display: inline-block; border: 1px solid #0c82a5; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 1; height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -ms-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; padding: 12px 1.5rem; color: #585858; background-color: #f5f5f5; border-color: #e2e2e2; /* for v3 buttons, tertiary is the default styling... don't need */ /* Sizes * Use the default size for forms and most other contexts */ /* End Sizes */ /* button utility classes * modifiers change button styling, while keeping some consistency */ } .customer-facing.buttonsV3 .Button:focus, .customer-facing:not(.buttonsV3) .Button.v3:focus { outline: none; } .customer-facing.buttonsV3 .Button *, .customer-facing:not(.buttonsV3) .Button.v3 * { font-size: 1rem; display: inline-block; height: 16px; } .customer-facing.buttonsV3 .Button span, .customer-facing:not(.buttonsV3) .Button.v3 span { vertical-align: top; } .customer-facing.buttonsV3 .Button + .Button, .customer-facing:not(.buttonsV3) .Button.v3 + .Button { /* when multiple buttons in sequence, add margin to all but the first */ margin-left: 1rem; } .customer-facing.buttonsV3 .Button .icon, .customer-facing:not(.buttonsV3) .Button.v3 .icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV3 .Button .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3 .icon.with-text { margin-left: -6px; margin-right: 10px; /* put space between icon and text */ } .customer-facing.buttonsV3 .Button .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon { display: inline-block; vertical-align: top; margin-bottom: -10px; /* prevents icons from making buttons too tall */ margin-top: -1px; /* can adjust this for specific icons as needed */ } .customer-facing.buttonsV3 .Button .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon .rfSvg { fill: #585858; } .customer-facing.buttonsV3 .Button .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon.with-text { margin-top: -3px; margin-right: 8px; margin-left: -6px; } .customer-facing.buttonsV3 .Button .svg-icon.with-text .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3 .svg-icon.with-text .rfSvg { width: 18px; height: 18px; } .customer-facing.buttonsV3 .Button:hover, .customer-facing:not(.buttonsV3) .Button.v3:hover { color: #333333; background-color: #e2e2e2; box-shadow: none; border-width: 1px; } .customer-facing.buttonsV3 .Button:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button.secondary, .customer-facing:not(.buttonsV3) .Button.v3.secondary { color: #FFFFFF; border-color: #585858; background-color: #585858; } .customer-facing.buttonsV3 .Button.secondary .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.secondary .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.secondary:hover, .customer-facing:not(.buttonsV3) .Button.v3.secondary:hover { color: #FFFFFF; border-color: #333333; background-color: #333333; } .customer-facing.buttonsV3 .Button.secondary:hover .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.secondary:hover .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.tertiary-alt, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt { color: #585858; background-color: #FFFFFF; border-color: #FFFFFF; -moz-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.3); } .customer-facing.buttonsV3 .Button.tertiary-alt .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt .svg-icon .rfSvg { fill: #585858; } .customer-facing.buttonsV3 .Button.tertiary-alt:hover, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt:hover { color: #333333; background-color: #e2e2e2; border-color: #e2e2e2; } .customer-facing.buttonsV3 .Button.tertiary-alt:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.tertiary-alt:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button:disabled, .customer-facing:not(.buttonsV3) .Button.v3:disabled, .customer-facing.buttonsV3 .Button.disabled, .customer-facing:not(.buttonsV3) .Button.v3.disabled, .customer-facing.buttonsV3 .Button.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.disabled:hover { cursor: default; color: rgba(0, 0, 0, 0.15) !important; background-color: transparent !important; border-color: rgba(0, 0, 0, 0.15) !important; -moz-box-shadow: 0 0 0 0px transparent; -webkit-box-shadow: 0 0 0 0px transparent; -o-box-shadow: 0 0 0 0px transparent; box-shadow: 0 0 0 0px transparent; } .customer-facing.buttonsV3 .Button:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.disabled:hover .svg-icon .rfSvg { fill: rgba(0, 0, 0, 0.15); } .customer-facing.buttonsV3 .Button.primary, .customer-facing:not(.buttonsV3) .Button.v3.primary { color: #FFFFFF; background-color: #a02021; border-color: #a02021; } .customer-facing.buttonsV3 .Button.primary .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.primary .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.primary:hover, .customer-facing:not(.buttonsV3) .Button.v3.primary:hover { border-color: #d32c2e; background-color: #d32c2e; } .customer-facing.buttonsV3 .Button.primary:hover .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.primary:hover .rfSvg { fill: white; } .customer-facing.buttonsV3 .Button.text, .customer-facing:not(.buttonsV3) .Button.v3.text { /* makes a button look like a text link -- useful for icon+text buttons */ border-color: transparent; background-color: transparent; } .customer-facing.buttonsV3 .Button.text, .customer-facing:not(.buttonsV3) .Button.v3.text, .customer-facing.buttonsV3 .Button.text:visited, .customer-facing:not(.buttonsV3) .Button.v3.text:visited { color: #0c82a5; text-decoration: none; cursor: pointer; } .customer-facing.buttonsV3 .Button.text:hover, .customer-facing:not(.buttonsV3) .Button.v3.text:hover { color: #0c82a5; text-decoration: underline; } .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { color: #e2e2e2; cursor: default; text-decoration: none; } .customer-facing.buttonsV3 .Button.text.unpadded, .customer-facing:not(.buttonsV3) .Button.v3.text.unpadded { padding: 0; } .customer-facing.buttonsV3 .Button.text.unpadded .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.text.unpadded .svg-icon.with-text { margin-left: 0; } .customer-facing.buttonsV3 .Button.text.compact, .customer-facing:not(.buttonsV3) .Button.v3.text.compact, .customer-facing.buttonsV3 .Button.text.compact *, .customer-facing:not(.buttonsV3) .Button.v3.text.compact * { font-size: .875rem; } .customer-facing.buttonsV3 .Button.text .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV3 .Button.text:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled, .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { border-color: transparent !important; color: #e2e2e2 !important; background-color: transparent !important; } .customer-facing.buttonsV3 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.text:hover, .customer-facing:not(.buttonsV3) .Button.v3.text:hover { border-color: transparent; color: #0c82a5; background-color: transparent; } .customer-facing.buttonsV3 .Button.text:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:hover .svg-icon .rfSvg { fill: #0c82a5; } .customer-facing.buttonsV3 .Button.text:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled, .customer-facing.buttonsV3 .Button.text.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled, .customer-facing.buttonsV3 .Button.text.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover { border-color: transparent; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV3 .Button.text:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.text.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.text.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.text.plain, .customer-facing:not(.buttonsV3) .Button.v3.text.plain { color: #585858; } .customer-facing.buttonsV3 .Button.text.plain:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.plain:hover { color: #333333 !important; } .customer-facing.buttonsV3 .Button.text.plain:disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.plain:disabled, .customer-facing.buttonsV3 .Button.text.plain.disabled, .customer-facing:not(.buttonsV3) .Button.v3.text.plain.disabled, .customer-facing.buttonsV3 .Button.text.plain.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.text.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV3 .Button.icon, .customer-facing:not(.buttonsV3) .Button.v3.icon { /* button with icon only, or icon with text label underneath */ border: 0 none; background-color: transparent; color: #a02021; text-align: center; padding: .5rem; height: 60px; } .customer-facing.buttonsV3 .Button.icon span, .customer-facing:not(.buttonsV3) .Button.v3.icon span { margin-top: 7px; display: block; } .customer-facing.buttonsV3 .Button.icon, .customer-facing:not(.buttonsV3) .Button.v3.icon, .customer-facing.buttonsV3 .Button.icon *, .customer-facing:not(.buttonsV3) .Button.v3.icon * { font-size: .75rem; } .customer-facing.buttonsV3 .Button.icon .icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon { width: 24px; height: 24px; display: block; } .customer-facing.buttonsV3 .Button.icon .icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon, .customer-facing.buttonsV3 .Button.icon .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.icon .icon.with-text { margin: 0 auto; } .customer-facing.buttonsV3 .Button.icon .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .svg-icon, .customer-facing.buttonsV3 .Button.icon:hover .svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover .svg-icon, .customer-facing.buttonsV3 .Button.icon .with-text.svg-icon, .customer-facing:not(.buttonsV3) .Button.v3.icon .with-text.svg-icon { margin: 1px auto 0 auto; height: 24px; } .customer-facing.buttonsV3 .Button.icon .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon .with-text.svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon .with-text.svg-icon .rfSvg { width: 24px; height: 24px; fill: #a02021; } .customer-facing.buttonsV3 .Button.icon:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon:hover { border: 0 none; color: #d32c2e; text-decoration: none; background-color: transparent; } .customer-facing.buttonsV3 .Button.icon:disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon:disabled, .customer-facing.buttonsV3 .Button.icon.disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled, .customer-facing.buttonsV3 .Button.icon.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled:hover { border: 0 none; color: #e2e2e2; background-color: transparent; } .customer-facing.buttonsV3 .Button.icon:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.icon.plain, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain { color: #585858; } .customer-facing.buttonsV3 .Button.icon.plain .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:hover .svg-icon .rfSvg { fill: #333333; } .customer-facing.buttonsV3 .Button.icon.plain:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:hover { color: #333333 !important; } .customer-facing.buttonsV3 .Button.icon.plain:disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:disabled, .customer-facing.buttonsV3 .Button.icon.plain.disabled, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled, .customer-facing.buttonsV3 .Button.icon.plain.disabled:hover, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled:hover { color: #e2e2e2 !important; } .customer-facing.buttonsV3 .Button.icon.plain:disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain:disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain.disabled .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled .svg-icon .rfSvg, .customer-facing.buttonsV3 .Button.icon.plain.disabled:hover .svg-icon .rfSvg, .customer-facing:not(.buttonsV3) .Button.v3.icon.plain.disabled:hover .svg-icon .rfSvg { fill: #e2e2e2; } .customer-facing.buttonsV3 .Button.small, .customer-facing:not(.buttonsV3) .Button.v3.small, .customer-facing.buttonsV3 .Button.medium, .customer-facing:not(.buttonsV3) .Button.v3.medium, .customer-facing.buttonsV3 .Button.compact, .customer-facing:not(.buttonsV3) .Button.v3.compact { /* in a denser UI, compact buttons will fit better */ padding: 10px 1rem; height: 34px; } .customer-facing.buttonsV3 .Button.small, .customer-facing:not(.buttonsV3) .Button.v3.small, .customer-facing.buttonsV3 .Button.medium, .customer-facing:not(.buttonsV3) .Button.v3.medium, .customer-facing.buttonsV3 .Button.compact, .customer-facing:not(.buttonsV3) .Button.v3.compact, .customer-facing.buttonsV3 .Button.small *, .customer-facing:not(.buttonsV3) .Button.v3.small *, .customer-facing.buttonsV3 .Button.medium *, .customer-facing:not(.buttonsV3) .Button.v3.medium *, .customer-facing.buttonsV3 .Button.compact *, .customer-facing:not(.buttonsV3) .Button.v3.compact * { font-size: .875rem; } .customer-facing.buttonsV3 .Button.small *, .customer-facing:not(.buttonsV3) .Button.v3.small *, .customer-facing.buttonsV3 .Button.medium *, .customer-facing:not(.buttonsV3) .Button.v3.medium *, .customer-facing.buttonsV3 .Button.compact *, .customer-facing:not(.buttonsV3) .Button.v3.compact * { height: .875rem; } .customer-facing.buttonsV3 .Button.small .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.small .icon.with-text, .customer-facing.buttonsV3 .Button.medium .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.medium .icon.with-text, .customer-facing.buttonsV3 .Button.compact .icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.compact .icon.with-text { margin-right: 6px; margin-left: -4px; } .customer-facing.buttonsV3 .Button.small .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.small .svg-icon.with-text, .customer-facing.buttonsV3 .Button.medium .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.medium .svg-icon.with-text, .customer-facing.buttonsV3 .Button.compact .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.compact .svg-icon.with-text { margin-top: -3px; margin-right: 6px; } .customer-facing.buttonsV3 .Button.large, .customer-facing:not(.buttonsV3) .Button.v3.large { /* for use in large-font marketing pages */ padding: 15px 1.875rem; height: 50px; } .customer-facing.buttonsV3 .Button.large *, .customer-facing:not(.buttonsV3) .Button.v3.large * { font-size: 1.125rem; } .customer-facing.buttonsV3 .Button.large .svg-icon.with-text, .customer-facing:not(.buttonsV3) .Button.v3.large .svg-icon.with-text { margin-top: -2px; } .customer-facing.buttonsV3 .Button.narrow, .customer-facing:not(.buttonsV3) .Button.v3.narrow { padding-left: 1rem; padding-right: 1rem; } .customer-facing.buttonsV3 .Button.narrow.compact, .customer-facing:not(.buttonsV3) .Button.v3.narrow.compact { padding-left: .625rem; padding-right: .625rem; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .field.Email > .input { cursor: text; } .field.Email > .input input { -webkit-appearance: none; } .field.Email.disabled > .input { cursor: default; } /* CUSTOMER FACING STYLES */ .customer-facing .field.Email { /* Hint Styles */ /* Dijit Overrides, .dijitTextBox, .dijitTextBoxFocused */ } .customer-facing .field.Email > .input span.dijitPlaceHolder { color: #999999; } .customer-facing .field.Email input, .customer-facing .field.Email .dijitTextBox, .customer-facing .field.Email .dijitTextBoxFocused { outline: none; border: none; margin: 0px !important; padding: 0px !important; background-image: none; background-color: transparent; } .customer-facing .field.Email .dijitValidationContainer { display: none; } /* AGENT TOOLS STYLES */.agent-tools .field-Email > span.input span.dijitPlaceHolder { color: #999999; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .field.text > .input { cursor: text; } .field.text > .input input { -webkit-appearance: none; } .field.text.no-increment input::-webkit-outer-spin-button, .field.text.no-increment input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .field.text.disabled > .input { cursor: default; } /* * CUSTOMER FACING STYLES */ .customer-facing .field.text { /* Dijit Overrides, .dijitTextBox, .dijitTextBoxFocused */ } .customer-facing .field.text .dijitInputContainer { /* for positioning of placeHolder */ *zoom: 1; overflow: hidden; float: none !important; /* needed to squeeze the INPUT in */ position: relative; } .customer-facing .field.text .dijitSelect input.dijitInputField, .customer-facing .field.text .dijitTextBox input.dijitInputField { /* override unreasonable user styling of buttons and icons */ padding-left: 0 !important; padding-right: 0 !important; } .customer-facing .field.text .dijitPlaceHolder { /* hint text that appears in a textbox until user starts typing */ position: absolute; top: 0; left: 0; *filter: ""; /* make this showup in IE6 after the rendering of the widget */ } .customer-facing .field.text input, .customer-facing .field.text .dijitTextBox, .customer-facing .field.text .dijitTextBoxFocused { outline: none; border: none; margin: 0px !important; padding: 0px !important; background-image: none; background-color: transparent; width: 100%; } .customer-facing .field.text .dijitValidationContainer { display: none; } /* * AGENT TOOLS STYLES */.agent-tools .field-text > span.input span.dijitPlaceHolder { color: #ccc; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .AddMemberForm .status-popup { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: fixed; top: 25px; left: 5px; right: 5px; margin-left: auto; margin-right: auto; z-index: 1000; text-align: center; font-size: 14px; max-height: 400px; opacity: 1; overflow: visible; /* animations */ -webkit-transition: max-height 0.4s, top 0.4s, opacity 0.4s; -moz-transition: max-height 0.4s, top 0.4s, opacity 0.4s; -o-transition: max-height 0.4s, top 0.4s, opacity 0.4s; transition: max-height 0.4s, top 0.4s, opacity 0.4s; } .AddMemberForm .status-popup.hidden { display: block !important; opacity: 0; top: 0; max-height: 0; overflow: hidden; } .AddMemberForm .status-popup.hidden { -webkit-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; -moz-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; -o-transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; transition: max-height 0.4s, top 0.4s, opacity 0.4s, overflow 0 step-end 0.4s; } .AddMemberForm .status-popup .status-popup-content { display: table; margin: 0 auto; padding: 10px 25px; max-width: 780px; min-width: 317px; background-color: white; border: 2px solid; border-radius: 5px; } .AddMemberForm .status-popup .status-popup-content .status-icon { display: table-cell; background-repeat: no-repeat; width: 25px; height: 25px; padding-right: 20px; } .AddMemberForm .status-popup .status-popup-content .status-message { display: table-cell; vertical-align: middle; text-align: left; } .AddMemberForm .success-status .status-popup-content { border-color: #bbcc39; } .AddMemberForm .success-status .status-popup-content .status-icon { background-image: url('../../../../elements/success.png'); } .AddMemberForm .error-status .status-popup-content { border-color: #FF0008; } .AddMemberForm .error-status .status-popup-content .status-icon { background-image: url('../../../../elements/error.png'); } .AddMemberForm .error-status .status-popup-content .status-close { display: table-cell; background-image: url('../../../../elements/closex.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: 35px 5px; width: 15px; padding-left: 35px; cursor: pointer; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .Notice { margin: 1.25rem 1.5rem; padding: 0.875rem; border: 1px solid red; display: block; position: relative; color: #333333; font-size: 0.875rem; /* inline notice styling */ /* temporary notice styling */ /* color styling per notice type */ } .Notice a { text-decoration: none; } .Notice .dismiss { position: absolute; right: 1rem; height: 1rem; width: 1rem; fill: #808285; } .Notice .dismiss .rfSvg { vertical-align: top; } .Notice .icon { position: absolute; width: 1.125rem; height: 1.125rem; } .Notice .icon .rfSvg { vertical-align: top; } .Notice .title { font-weight: bold; } .Notice .message { margin-top: .25rem; } .Notice .title, .Notice .message { line-height: 1.25rem; margin-left: 1.75rem; } .Notice.inline-notice .text { margin-left: 1.75rem; margin-right: 1.75rem; } .Notice.inline-notice .title { margin-right: .2rem; margin-top: 0; } .Notice.inline-notice .icon, .Notice.inline-notice .text { display: inline-block; } .Notice.inline-notice .title, .Notice.inline-notice .message { position: relative; display: inline; margin-left: 0; } .Notice.temp { color: white; } .Notice.temp .message { display: none; } .Notice.temp .icon { fill: white; } .Notice.temp .title { font-weight: normal; } .Notice.info { border-color: #0c82a5; } .Notice.info.temp { background-color: rgba(51, 51, 51, 0.9); border-color: rgba(51, 51, 51, 0.9); } .Notice.info:not(.temp) .icon { fill: #0c82a5; } .Notice.confirm { border-color: #7ccc33; } .Notice.confirm.temp { background-color: rgba(124, 204, 51, 0.9); } .Notice.confirm:not(.temp) .icon { fill: #7ccc33; } .Notice.alert { border-color: #ffc73b; } .Notice.alert.temp { background-color: rgba(255, 199, 59, 0.9); } .Notice.alert:not(.temp) .icon { fill: #ffc73b; } .Notice.error { border-color: #fd3316; } .Notice.error.temp { background-color: rgba(253, 51, 22, 0.9); } .Notice.error:not(.temp) .icon { fill: #fd3316; } /* transition styling */ .redfin-common-elements-react-notice-enter { opacity: 0.01; } .redfin-common-elements-react-notice-enter.redfin-common-elements-react-notice-enter-active { opacity: 1; transition: opacity 0.5s ease-in-out; } .redfin-common-elements-react-notice-leave { opacity: 1; } .redfin-common-elements-react-notice-leave.redfin-common-elements-react-notice-leave-active { opacity: 0.01; transition: opacity 0.2s ease-in; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .AddMemberFormSimple { width: 100%; max-width: 660px; text-align: left; } .AddMemberFormSimple .contentContainer { position: relative; /** for the loading spinner */ } .AddMemberFormSimple .contentContainer .loading { position: absolute; top: 60%; left: 50%; } .AddMemberFormSimple .contentContainer .loading, .AddMemberFormSimple .contentContainer .loading > .spinner { width: 1px !important; height: 1px !important; } .AddMemberFormSimple .contentContainer .loading > .spinner { left: 0; top: 0; } .AddMemberFormSimple.stacked .contentContainer .loading { top: 25%; } .AddMemberFormSimple.stacked .inviteFormNode { width: 100%; height: auto; margin-bottom: 20px; } .AddMemberFormSimple.stacked .inviteFormNode > * { display: block; float: none; max-width: 450px; } .AddMemberFormSimple.stacked .inviteFormNode .emailInput .field.Email { width: 100%; max-width: 450px; } .AddMemberFormSimple.stacked .inviteFormNode .emailInput .field.Email input { width: 100%; } .AddMemberFormSimple.stacked .inviteFormNode .submitButton { display: block; margin-top: 15px; min-width: 110px; } .AddMemberFormSimple.one-line .inviteFormNode { text-align: center; } .AddMemberFormSimple.one-line .inviteFormNode > * { text-align: left; } .AddMemberFormSimple.one-line .inviteFormNode .emailInput { display: inline; } .AddMemberFormSimple.one-line .inviteFormNode .emailInput .field.Email { width: 286px; } .AddMemberFormSimple.one-line .inviteFormNode .emailInput .field.Email input { width: 100%; } .AddMemberFormSimple.one-line .inviteFormNode .emailInput .field.Email, .AddMemberFormSimple.one-line .inviteFormNode .submitButton { vertical-align: top; } .AddMemberFormSimple.one-line .inviteFormNode .submitButton { margin-top: 34px; margin-left: 10px; } .AddMemberFormSimple.ReactAddMemberFormSimple.one-line .inviteFormNode .emailInput { display: inline-block; } .AddMemberFormSimple.ReactAddMemberFormSimple.one-line .inviteFormNode .emailInput .input { width: 286px; } .AddMemberFormSimple.ReactAddMemberFormSimple.one-line .inviteFormNode .emailInput .input input { width: 100%; } .AddMemberFormSimple.ReactAddMemberFormSimple.one-line .inviteFormNode .submitButton { margin-right: 0; } .AddMemberFormSimple.ReactAddMemberFormSimple.stacked .emailInput .input input { width: 100%; max-width: 450px; } .AddMemberFormSimple.ReactAddMemberFormSimple.stacked .submitButton { width: 100%; } .AddMemberFormSimple.ReactAddMemberFormSimple .Notice { margin: 0; } .ReactAddMemberFormSimple.confirm { position: fixed; display: block; width: 100%; text-align: center; top: 25px; z-index: 1000; } .ReactAddMemberFormSimple.confirm .Notice.confirm { display: inline-block; margin: auto; max-width: 780px; min-width: 317px; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .SharedSearchFavoritesController .shared-search-compact-common { border: 1px solid #e2e2e2; margin: 1.5rem 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .shared-search-compact-common { width: 100%; padding: 15px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .shared-search-compact-common > div { margin: 0; } .shared-search-compact-common .intro-card { display: none; width: 180px; height: 170px; background-position-y: 50%; } @media (min-width: 600px) { .shared-search-compact-common .intro-card { display: table-cell; vertical-align: top; } } .shared-search-compact-common .intro-card.intro-card-saved-search { background-image: url('../../../../sharedSearch/intro-card-saved-search.png'); } .shared-search-compact-common .intro-card.intro-card-share { background-image: url('../../../../sharedSearch/intro-card-share.png'); } .shared-search-compact-common .intro-card.intro-card-favorite { background-image: url('../../../../sharedSearch/intro-card-favorite.png'); } @media (min-width: 600px) { .shared-search-compact-common { padding: 5px 20px; } } .shared-search-compact-common .compact-content { display: block; margin: 0 auto; padding: 0; text-align: center; min-width: 250px; max-width: 250px; } @media (min-width: 600px) { .shared-search-compact-common .compact-content { display: table-cell; vertical-align: top; padding: 15px 0 0 30px; max-width: 365px; text-align: left; } } .shared-search-compact-common .compact-content p, .shared-search-compact-common .compact-content a { font-size: 14px; font-size: 0.875rem; } .shared-search-compact-common .compact-content .compact-title { color: #fa7b20; margin: 10px 0; font-weight: normal; font-size: 20px; font-size: 1.25rem; line-height: 1.2em; } @media (min-width: 600px) { .shared-search-compact-common .compact-content .compact-title { margin: 0; } } .shared-search-compact-common .compact-content .compact-hook { margin: 10px 0 0 0; line-height: 1.3em; } .shared-search-compact-common .compact-buttons-container { margin-top: 20px; text-align: center; } @media (min-width: 600px) { .shared-search-compact-common .compact-buttons-container { text-align: left; margin-bottom: 20px; } } .shared-search-compact-common .compact-buttons-container .confirm-button { width: 100%; } @media (min-width: 600px) { .shared-search-compact-common .compact-buttons-container .confirm-button { width: auto; } } .shared-search-compact-common .compact-buttons-container .decline-button { color: #0c82a5; display: inline-block; cursor: pointer; margin: 10px 0 0 10px; } .shared-search-compact-common .compact-buttons-container .negativeCta { text-decoration: none; padding-top: 10px; display: block; } #shared-search-intro { max-width: 100%; margin: 0; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .sharedSearchIntroDialog .guts { width: 95%; max-width: 450px; } @media screen and (min-width: 600px) { .sharedSearchIntroDialog .guts { width: 450px; } } @media screen and (min-width: 900px) { .sharedSearchIntroDialog .guts { width: 450px; max-width: 450px; } } .shared-search-common { text-align: center; margin: 0 auto; padding: 20px 0 20px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .shared-search-common .xButton { padding-right: 20px; cursor: pointer; border: 0; } @media screen and (min-width: 400px) { .shared-search-common { padding-bottom: 43px; } } .shared-search-common .content { margin: 0 auto; max-width: 450px; } .shared-search-common .header { color: #fa7b20; margin: 30px 0 10px 0; } .shared-search-common .content > .title { color: #333333; margin: 0 0 5px 0; font-weight: normal; font-size: 20px; font-size: 1.25rem; } .shared-search-common .hook { margin: 0 30px; line-height: 1.3em; } .shared-search-common .shared-search-intro .intro-card { width: 224px; height: 224px; background-size: cover; background-position: 50%; margin: 0 auto; } .shared-search-common .shared-search-intro .intro-card.intro-card-saved-search { background-image: url('../../../../sharedSearch/about-flow-05.png'); } .shared-search-common .shared-search-intro .intro-card.intro-card-share { background-image: url('../../../../sharedSearch/about-flow-01.png'); } .shared-search-common .shared-search-intro .intro-card.intro-card-favorite { background-image: url('../../../../sharedSearch/about-flow-04.png'); } .shared-search-common .content-text { padding-top: 10px; margin-bottom: 0; } .shared-search-common .Button.positiveButton { width: 70%; max-width: 200px; font-size: 16px; font-size: 1rem; } .shared-search-common .buttons-container { text-align: center; } .shared-search-common .buttons-container .confirm-button { width: 200px; } .shared-search-common .buttons-container .decline-button { display: block; padding-top: 10px; font-size: 14px; text-decoration: none; color: #0c82a5; cursor: pointer; } .shared-search-common .positiveButton { margin-bottom: 20px; } .shared-search-common .declineInvite { text-decoration: none; color: #0c82a5; cursor: pointer; } .joined-group-success .next-step-buttons { text-align: right; } /** * Everything in this file is prepended to EVERY CSS file in development environments, and then compiled together. * That means that if you define a variable or mixin in this file (or in any file @imported by this file), it will be * available for use in every .css file on the site. * * Before adding this to this file (or any file underneath the less-preamble/ directory), you should talk to some people * and decide if that thing you want to add really needs to be global, and available in EVERY file on the site. * * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /* Make sure to use double-quotes in @imports in these files, due to a bug in the LessCompiler */ /** * This file is included on top of all CSS files. It will predefine all the colors that can be used by individual CSS. * Any addition to these colors will be included for all CSS. Please review with design team before making any changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * IF YOU MODIFY THIS FILE, YOU MUST ALSO UPDATE: * corvair/pages/uiSandbox/Colors.jsx * corvair/pages/uiSandbox/Colors.less */ /* Hover states, etc. Should be used sparingly. */ /* warnings */ /* Blue Alert: used for link */ /* Commonly used in forms, etc */ /* basically 10% black / 90% white. whatever. these are awful. */ /* unique color for field borders */ /** * This file is included on top of all CSS files. It will predefine all the mixins that can be used by individual CSS. * Any addition to these mixins will be included for all CSS. Please review with all teams before making changes! * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * PIE does not support the short hand notation but does support the following format: * * border-radius: top-left top-right bottom-right bottom-left; * * Generally, the only problem is when you have multiple styles coming in on something specifying border radius and * if we use just "border-radius" any previous radius will be overwritten. This probably wont ever be an issue but * it's something to think about. */ /** * Provides a cross-browser method to implement `display: inline-block;` * * Taken from: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ /** * Opacity mixins. */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss */ /** Red Brand v1 *************************************************************/ /** * Provides cross-browser text shadows when one or more shadows are needed. * Each shadow argument should adhere to the standard css3 syntax for the text-shadow property. */ /** * Basic background gradients. These currently do not support multiple color stops nor multiple backgrounds. It will * specify the @from color as the base color for the mixin. */ /** * A special mixin that uses relative positioning to address this issue: * http://css3pie.com/documentation/known-issues/#z-index * * It will have greater IE compatibility (hence its name), but because it affects positioning, stylesheet authors * should opt in to this behavior. */ /** * Emit a IE-Specific filters that renders a simple linear gradient. For use in IE 6 - 8. Best practice would have you * apply this via a conditional IE stylesheet, but if you must, you should place this before any background-image * properties that you have specified. * * Orientation is 0 for vertical or 1 for horizontal. */ /** * Basic transition helper mixins. */ /** * Single transition, all-in-one, shorthand. * * Params: * @property: a css property like "height". Defaults to "all". * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* `display` Transitions */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: none;` -> `display: block;` transition. * * Example: * .show-my-thing { * .transition-display-none-to-block(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "0.2s". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /** * This transition mixin function allows us to transition smoothly from `none` to `block`. It's neat! It also prevents * the need to sync animations between js and css, which is what we used to do. * * `display: block;` -> `display: none;` transition. * * FIXME: At this point, this doesn't work because the `display: none;` below overrides any animation. The catch is * `display: none;` is required for when the animation completes and for backward compatibility with older browsers who * do not support animation. If you have any ideas, I'm all ears. -TPD * * Example: * .hide-my-thing { * .transition-display-block-to-none(@default-transition-duration, ease-in-out, 1s); * } * * Params: * @duration: the time like "2s". Defaults to "200ms". * @function: the easing function like "ease-in-out". Defaults to "ease-out". * @delay: the delay before the transition like "2s". Defaults to "0s". */ /* * Basic Transform mixin. */ /* * Basic Animation mixin. */ /* if we switch to a more recent version of less, we can use the following: .keyframes(@name; @args) { @keyframes @name { @args(); } @-moz-keyframes @name { @args(); } @-webkit-keyframes @name { @args(); } @-ms-keyframes @name { @args(); } } // animation to spin a block .keyframes(spin; { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }); */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_user-interface.scss */ /** * Adapted from LESS Elements: * http://lesselements.com */ /** * Adapted from "Better font-rendering on OSX" * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */ /** * Basic clear fix solution. NOTE: you apply this to the containing parent element * * This solution from: http://nicolasgallagher.com/micro-clearfix-hack/ */ /** * Cross-browser prefixed `box-sizing: border-box;` mixin. * Pushes padding inside the box model's width, allowing for potentially more predictable behavior * when dealing with fluid percentage-based layouts or elements. * * Supported on IE8+, FF*, Webkit* (see: http://caniuse.com/css3-boxsizing) * * @Author Eric Gideon */ /** * Basic mixins for floating that force the element to be inline. */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Implementation of float:left with fix for the double-margin bug in IE5/6: * http://www.positioniseverything.net/explorer/doubled-margin.html */ /** * Converted from compass: * https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/reset/_min.scss */ /** * Basic mixin for ellipsis on a non-textarea */ /** * Encourage GPU acceleration in Webkit, for better animation performance. * by andrew.bartkus * Derived from: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ * * == Caveat == * * GPU acceleration might increase FPS, but definitely uses more memory. * Always use the Timeline view in Chrome Dev tools to quantify your improvements. * * == Other browsers == * * (As of Sept 2013) * * IE: Uses DirectDraw for everything, which automatically uses GPU acceleration if available. * Firefox: Uses DirectDraw on Windows. * On Linux, it's either on or not, mostly based on drivers. * On OSX, not sure. * Webkit: Triggered by certain CSS rules. Varies by browser (Chrome, Safari, etc). * */ /* SECTION SEPARATORS * These mixins are used to create the arrows and notches used on many of our * newer designs' sections. They're fairly tightly namespaced to avoid conflicts. * These are CSS3 shapes that use pseudo-elements for placement and are * enhancements that will only appear in newer browsers. * * Ideally, these would just be classes applied to their parent, but the colors * need to be changed to match siblings, so here we are. * @Author Eric Gideon */ /* * EXAMPLE * .foo { * .section-notch(@redfin-background-color, 40px, bottom); * } * .bar { * .section-notch(@redfin-link-color, 20px, top); * } */ /* * EXAMPLE * .baz { * .section-arrow(@redfin-background-color, 40px, bottom); * } * .whop { * .section-arrow(@redfin-link-color, 20px, top); * } */ /** * This applies link styles to any element using this mixin * Allows you to have text that looks and behaves like a link * without the pain of href="#" * Note: this method is also used to apply styles to all links (see _typography.css) * * @Author Emily Iser */ /** * This file is included on top of all CSS files. It includes variables that map to specific screen sizes for responsive layouts. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. */ /** * IF YOU READ THIS, YOU ARE CURSED, UNLESS YOU FORWARD THIS TO THREE OF YOUR COWORKERS. * * Any time you seen one of the following deprecated LESS variables, you must fix it, or you will have to fix a livesite * issue on the weekend every month until you do. This is powerful magic, do not think you can defeat it! */ /** * This mixin was created to support IE8 concurrently with mobile-first CSS development. * We no longer support IE8, so we no longer need this mixin, either. Please stop using it. */ /* * This file centrally defines how different z-indexes interact with each other. It is included on top of all CSS files. * * Any time you have a bug where different z-indexes are fighting one another, you should probably fix it by defining * them here in the correct order. * * PLEASE NOTE: Any changes to the preamble files require a server restart to take effect. * * * HIGH LEVEL OVERVIEW * 0 to 99: Unreserved z-indexes, allowed for minor layering in components. * 100 to 9999: Reserved z-indexes for use with elements that are in the document flow. Should be defined in this file. * 10000 and up: Reserved z-indexes for use with elements that are outside the document flow (eg, dialog boxes and sticky tabs). */ .shared-search-intro { margin: 0 auto; max-width: 590px; } .Flyout .shared-search-intro { padding: 15px 20px; max-width: 100%; } @media (min-width: 600px) { .Flyout .shared-search-intro { padding: 5px 20px; width: 590px; } } .FavoriteButtonWrapper .shared-search-intro .compact-content { min-width: 390px; max-width: 410px; } .FavoriteButtonWrapper .shared-search-intro .compact-content .submitButton { margin-top: 31px; } .shared-search-intro .intro-card { width: 180px; background-repeat: no-repeat; } .FavoriteButtonWrapper .Flyout.standard.position-left .arrow { top: 3px; }